Add logging back to entry-server for streamed html chunks

Author: brophdawg11

docs/file-conventions/entry.server.md

@@ -37,6 +37,21 @@ export function onUnhandledError(
 }
 ```
 
+### Streaming Rendering Errors
+
+When you are streaming your HTML responses via [`renderToPipeableStream`][rendertopipeablestream] or [`renderToReadableStream`][rendertoreadablestream], your own `onUnhandledError` implementation will only handle errors encountered uring the initial shell render. If you encounter a rendering error during subsequent streamed rendering you will need handle these errors manually since the Remix server has already sent the Response by that point.
+
+- For `renderToPipeableStream`, you can handle these errors in the `onError` callback function. You will need to toggle a boolean when the in `onShellReady` so you know if the error was a shell rendering error (and can be ignored) or an async rendering error (and must be handled).
+  - For an exmaple, please see the default [`entry.server.tsx`][node-streaming-entry-server] for Node.
+- For `renderToReadableStream`, you can handle these errors in the `onError` callback function
+  - For an example, please see the default [`entry.server.tsx`][cloudflare-streaming-entry-server] for Cloudflare
+
+### Thrown Responses
+
 Note that this does not handle thrown `Response` instances from your `loader`/`action` functions. The intention of this handler is to find bugs in your code which result in unexpected thrown errors. If you are detecting a scenario and throwing a 401/404/etc. `Response` in your `loader`/`action` then it's an expected flow that is handled by your code. If you also wish to log, or send those to an external service, that should be done at the time you throw the response.
 
 [browser-entry-module]: ./entry.client
+[rendertopipeablestream]: https://react.dev/reference/react-dom/server/renderToPipeableStream
+[rendertoreadablestream]: https://react.dev/reference/react-dom/server/renderToReadableStream
+[node-streaming-entry-server]: https://github.com/remix-run/remix/blob/main/packages/remix-dev/config/defaults/node/entry.server.react-stream.tsx
+[cloudflare-streaming-entry-server]: https://github.com/remix-run/remix/blob/main/packages/remix-dev/config/defaults/cloudflare/entry.server.react-stream.tsx

packages/remix-dev/config/defaults/cloudflare/entry.server.react-stream.tsx

@@ -14,6 +14,8 @@ export default async function handleRequest(
     {
       signal: request.signal,
       onError(error: unknown) {
+        // Log streaming rendering errors from inside the shell
+        console.error(error);
         responseStatusCode = 500;
       },
     }

packages/remix-dev/config/defaults/deno/entry.server.react-stream.tsx

@@ -14,6 +14,8 @@ export default async function handleRequest(
     {
       signal: request.signal,
       onError(error: unknown) {
+        // Log streaming rendering errors from inside the shell
+        console.error(error);
         responseStatusCode = 500;
       },
     }

packages/remix-dev/config/defaults/node/entry.server.react-stream.tsx

@@ -36,6 +36,7 @@ function handleBotRequest(
   remixContext: EntryContext
 ) {
   return new Promise((resolve, reject) => {
+    let shellRendered = false;
     const { pipe, abort } = renderToPipeableStream(
       <RemixServer
         context={remixContext}
@@ -44,6 +45,7 @@ function handleBotRequest(
       />,
       {
         onAllReady() {
+          shellRendered = true;
           const body = new PassThrough();
 
           responseHeaders.set("Content-Type", "text/html");
@@ -61,6 +63,12 @@ function handleBotRequest(
           reject(error);
         },
         onError(error: unknown) {
+          // Log streaming rendering errors from inside the shell.  Don't log
+          // errors encountered during initial shell rendering since they'll
+          // reject and get logged in handleDocumentRequest.
+          if (shellRendered) {
+            console.error(error);
+          }
           responseStatusCode = 500;
         },
       }
@@ -77,6 +85,7 @@ function handleBrowserRequest(
   remixContext: EntryContext
 ) {
   return new Promise((resolve, reject) => {
+    let shellRendered = false;
     const { pipe, abort } = renderToPipeableStream(
       <RemixServer
         context={remixContext}
@@ -85,6 +94,7 @@ function handleBrowserRequest(
       />,
       {
         onShellReady() {
+          shellRendered = true;
           const body = new PassThrough();
 
           responseHeaders.set("Content-Type", "text/html");
@@ -102,6 +112,12 @@ function handleBrowserRequest(
           reject(error);
         },
         onError(error: unknown) {
+          // Log streaming rendering errors from inside the shell.  Don't log
+          // errors encountered during initial shell rendering since they'll
+          // reject and get logged in handleDocumentRequest.
+          if (shellRendered) {
+            console.error(error);
+          }
           responseStatusCode = 500;
         },
       }