SSR: an error thrown inside <Suspense> rejects renderToReadableStream instead of falling back to client rendering

Aperta
  • Qualcosa non va?
#71 0 commenti 0 reazioni 0 assegnatari Vedi su GitHub

I maintainer di solito rispondono entro 1 giorno

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
4/5
Tempo stimato
1-2 giorni
Idoneità per principianti
55/100
Tipo di issue
Bug
Chiarezza
Specificata chiaramente
Stato di attività
Attiva
Stack tecnologico
react, typescript
Ambito
backend, testing

Direzione di ricerca

Start with the SSR implementation of renderToReadableStream and trace how errors from synchronous throws and rejected lazy imports are handled within Suspense boundaries. Compare the emitted output and onError behavior with the React examples in the issue. Done means both cases report the error, mark the failing boundary for client rendering, and allow the rest of the stream to resolve.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

Version: @tanstack/redact 0.2.0 (compared with react-dom 19.2.0)

When a component throws during SSR inside a <Suspense> boundary, Redact's renderToReadableStream rejects the whole stream. React instead reports the error to onError, marks that boundary for client rendering (<!--$!-->), and still resolves the stream.

With TanStack Start, the whole page then returns 500, where React would have degraded only that boundary. We hit this when a third-party module threw at evaluation time inside a code-split route: React had been hiding the error, and Redact turned it into a 500.

Repro: https://github.com/ryoppippi/tanstack-redact-ssr-suspense-error-repro (pnpm install && node repro.mjs)

<html><body>
  <Suspense fallback={<p>loading</p>}>
    <Throws />  {/* throws during render */}
  </Suspense>
</body></html>

react  | sync throw  | ok      | onError=["render error inside Suspense"] | <!DOCTYPE html><html><head></head><body><!--$!--><template data-msg="Switched to client rendering because the server ren
react  | lazy reject | ok      | onError=["lazy chunk failed to evaluate"] | <!DOCTYPE html><html><head></head><body><!--$!--><template data-msg="Switched to client rendering because the server ren
redact | sync throw  | REJECTS | onError=["render error inside Suspense"] | render error inside Suspense
redact | lazy reject | ok      | onError=["lazy chunk failed to evaluate"] | <!DOCTYPE html><html><head></head><body><!--$?0--><div id="B:0"><p>loading</p></div><!--/$--></body></html>

The repro also has a related case: when a lazy() import rejects, Redact resolves the stream but leaves the boundary pending (<!--$?0--> plus the fallback). React marks it for client rendering instead.

Expected: match React. Call onError, emit the client-render marker for the failing boundary, and keep streaming the rest of the document.

Lingua principale
TypeScript
Stelle
537
Fork
22
Merge medio
1h 57m
PR unite (30g)
20

Preparare l'ambiente

Questo progetto non fornisce container di sviluppo, Dockerfile né guida per i contributori, quindi l'ambiente è a tuo carico: parti dal suo README e consulta la nostra guida al primo contributo per i passaggi generali.

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di TanStack/redact

Tutte le issue di TanStack/redact

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.