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

Cerrado
  • ¿Algo no está bien?
#4,425 1 comentario 0 reacciones 0 asignados Ver en GitHub

Los mantenedores suelen responder en 1 día

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
4/5
Tiempo estimado
1-2 días
Aptitud para principiantes
52/100
Tipo de issue
Error
Claridad
Bien especificado
Estado de actividad
Activo
Stack tecnológico
javascript, typescript
Área
frontend, testing

Línea de trabajo

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.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

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();
});
Lenguaje dominante
TypeScript
Estrellas
36.2k
Forks
1.1k
Merge medio
11 h 28 min
PR fusionados (30 d)
461

Preparar el entorno

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de solidjs/solid

Todos los issues de solidjs/solid

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.