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

Ouverte
  • Quelque chose ne va pas ?
#71 0 commentaires 0 réactions 0 personnes assignées Voir sur GitHub

Les mainteneurs répondent en général sous 1 jour

Personne n'a encore pris cette issue.

Évaluation

Difficulté
4/5
Temps estimé
1-2 jours
Accessibilité débutants
55/100
Type d'issue
Bug
Clarté
Clairement spécifiée
Activité
Active
Stack technique
react, typescript
Domaine
backend, testing

Piste de recherche

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.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Description

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.

Langage dominant
TypeScript
Étoiles
537
Forks
22
Merge moyen
1 h 57 min
PR mergées (30 j)
20

Préparer son environnement

Ce projet ne fournit ni conteneur de développement, ni Dockerfile, ni guide de contribution : l'installation est à votre charge. Commencez par son README, et consultez notre guide de la première contribution pour les étapes générales.

Par où commencer

  1. Lisez l'issue en entier, puis le guide de contribution du projet.
  2. Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.
  3. Forkez le dépôt et travaillez sur une branche.
  4. Ouvrez une pull request qui référence le numéro de l'issue.

Autres issues de TanStack/redact

Toutes les issues de TanStack/redact

Issues similaires

Plus d'issues TypeScript

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.