Loader errors render the root ErrorBoundary but no stack trace appears in deployment logs

Answer the Exact Questions

• Q1: Capture errors by wrapping Remix’s request handler with a custom errorHandler, log the stack trace, re‑throw, and inject the CDN request‑ID into the page. For deferred loaders add a global unhandledRejection listener that logs rejected promises before they reach the stream.
• Q2: Read the CDN’s request‑ID header (e.g., cf-ray, x-request-id, x-vercel-id) in entry.server.js, include it in the console log, and inject it into the rendered HTML as a meta tag or hidden span. This allows you to match the 500 response to the log line by ID.
• Q3: Deploy a route that deliberately throws an error, trigger it, and then inspect the function log for a console.error entry that contains the stack trace and request ID. Verify that the same ID appears in the rendered page’s meta tag.

Likely Explanation (Unconfirmed)

Remix does not automatically surface thrown errors to the platform’s log stream. The adapter’s createRequestHandler can forward an error to a custom errorHandler, but if that handler is omitted or the platform rewrites entry.server, the error never reaches the logs. Deferred loaders resolve later and therefore never hit the request handler, so their rejections are silent unless explicitly caught.

Confirmed Facts

• In Remix v2, createRequestHandler accepts an errorHandler option that receives the error, request, and response.
• Re‑throwing the error (or returning a Response) from errorHandler preserves the ErrorBoundary rendering.
• Deferred loader rejections are not propagated to errorHandler; they must be caught in the loader or via process.on('unhandledRejection').
• CDN request‑ID headers are available in request.headers and can be forwarded to logs and the HTML.

Practical Steps for This Case

1. Wrap the handler in entry.server.js:

   import { createRequestHandler } from '@remix-run/server-runtime';
   
   const handler = createRequestHandler({
     getLoadContext() { return {}; },
     errorHandler(error, request, response) {
       const reqId = request.headers.get('cf-ray') || request.headers.get('x-request-id') || request.headers.get('x-vercel-id') || 'unknown';
       console.error('[REMIX ERR]', reqId, error.stack || error.message);
       throw error;
     },
   });
   
   export default async function remixEntry(request, env, ctx) {
     try {
       return await handler(request, env, ctx);
     } catch (e) {
       if (!e.response) throw e;
       return e.response;
     }
   }
   

2. Inject the request ID into the rendered page:

   In your root Document component, add a meta tag or hidden span that reads the ID from the load context or from request.headers.get('cf-ray'). Example:

   export default function Document({ children }) {
     const reqId = useLoaderData();
     return (
       <html>
         <head>
           <meta name="request-id" content={reqId} />
           ...
         </head>
         <body>{children}</body>
       </html>
     );
   }
   

3. Handle deferred loader rejections:

   Add a global listener in entry.server.js that logs any unhandled promise rejections before they reach the stream.

   process.on('unhandledRejection', (reason, promise) => {
     console.error('[UNHANDLED REJECTION]', reason.stack || reason);
   });
   

4. Verify the setup:
   1. Create a route that throws: throw new Error('Test stack');.
   2. Deploy to your serverless platform.
   3. Trigger the route and check the function log for a line that starts with [REMIX ERR] and includes the stack trace.
   4. Open the rendered 500 page and confirm the meta tag contains the same request ID.
5. Ask for missing diagnostic detail:

   Which CDN or serverless platform are you using (e.g., Cloudflare Workers, Vercel Edge, Netlify Functions)? Knowing the exact request‑ID header name helps tailor the code snippet.

Key Takeaway

By explicitly logging inside a custom errorHandler and correlating a CDN request ID in both the log and the HTML, you can reliably trace every loader/action failure in production, even when using deferred streams.