[2.0 / next] An <Errored> recovering after a retry waits for async under a nested <Loading>

Đã đóng
  • Có gì không ổn?
#4,425 1 bình luận 0 reaction 0 người được giao Xem trên GitHub

Maintainer thường phản hồi trong vòng 1 ngày

Chưa có ai nhận issue này.

Đánh giá

Độ khó
4/5
Thời gian dự kiến
1-2 ngày
Mức phù hợp với người mới
52/100
Loại issue
Lỗi
Độ rõ ràng
Đặc tả rõ ràng
Mức độ hoạt động
Sôi nổi
Công nghệ
javascript, typescript
Lĩnh vực
frontend, testing

Hướng nghiên cứu

The report names a reproduction test under packages/web/test but no existing test file or implementation entry point. Start by locating the Errored recovery logic and related tests, then add the supplied nested Loading reproduction and run it. Done means recovered content shows immediately after the detail request succeeds, while the nested fallback remains until search results arrive.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Mô tả

Found by: the ReactiveScript eval, at next 5e68925c (rc.20). The .rx and Solid TSX apps of one eval task now fail "retry after not found shows the issue". The same apps passed at 6b792a95. The likely cause is the Errored recovery change in #4406 (#4403 to #4405), but I haven't bisected.

Program

  • detail: an async memo that throws when the answer is null.
  • The view: <Loading> › <Errored> › <h2>{detail().title}</h2>, plus a child component that searches by the title, with its own <Loading> around the hits.

Steps

  1. detail answers null, so the fallback shows.
  2. refresh(detail).
  3. detail answers { title: "Crash" }.
  4. The nested search answers.

Text after each step

step nested search no nested search
not found err not found err not found
retry err not found err not found
retry landed err not found Crash
search landed Crashab —

Expected at "retry landed": Crashfinding. The recovered content shows, and the nested <Loading> shows its own fallback until the search answers. That nested boundary exists so its content doesn't hold the rest. Instead, the Errored keeps showing the old failure until the nested async lands. If that async is slow or never answers, the retry looks like it did nothing.

Test (packages/web/test)

/**
 * @jsxImportSource @solidjs/web
 * @vitest-environment jsdom
 */
import { test } from "vitest";
import { Errored, For, Loading, Show, createMemo, flush, refresh } from "solid-js";
import { render } from "../src/index.js";
const tick = async () => { for (let i = 0; i < 4; i++) { await new Promise(r => setTimeout(r, 0)); flush(); } };
for (const nested of [true, false])
test(`nested=${nested}`, async () => {
  const asks: { key: string; res: (v: any) => void }[] = [];
  const ask = (key: string) => new Promise<any>(res => asks.push({ key, res }));
  const land = async (key: string, v: any) => { const i = asks.findIndex(a => a.key === key); if (i < 0) throw new Error(`not asked ${key}: ${asks.map(a => a.key)}`); asks.splice(i, 1)[0].res(v); await tick(); };
  const container = document.body.appendChild(document.createElement("div"));
  const frames: string[] = [];
  const snap = (tag: string) => frames.push(`${tag.padEnd(14)} ${container.textContent}`);
  let detail!: () => any;
  function Related(props: { title: string }) {
    const hits = createMemo(() => ask(`search:${props.title}`));
    return <Loading fallback={<i>finding</i>}><For each={hits()}>{(h: any) => <i>{h}</i>}</For></Loading>;
  }
  render(() => {
    detail = createMemo(async () => { const d = await ask("detail"); if (!d) throw new Error("not found"); return d; });
    return (
      <Loading fallback={<p>loading</p>}>
        <Errored fallback={(e: any) => <p>err {e().message}</p>}>
          <h2>{detail().title}</h2>
          {nested && <Show when={detail()}>{(d: any) => <Related title={d().title} />}</Show>}
        </Errored>
      </Loading>
    );
  }, container);
  await tick();
  await land("detail", null); snap("not found");
  refresh(detail); flush(); await tick(); snap("retry");
  await land("detail", { title: "Crash" }); snap("retry landed");
  if (nested) { await land("search:Crash", ["a", "b"]); snap("search landed"); }
  console.log(`nested=${nested}\n  ` + frames.join("\n  "));
  container.remove();
});
Ngôn ngữ chính
TypeScript
Star
36.2k
Fork
1.1k
Merge trung bình
11 giờ 5 phút
Pull request đã merge (30 ngày)
475

Chuẩn bị môi trường

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Issue khác của solidjs/solid

Tất cả issue của solidjs/solid

Issue tương tự

Thêm issue về TypeScript

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.