Server error handling

[rmarscher]

I'm trying to understand how to gracefully handle exceptions raised on the server.

This document suggests that Suspense components can act as error boundaries for SSR - https://github.com/reactjs/rfcs/blob/main/text/0215-server-errors-in-react-18.md

It would be nice to additionally register a fallback component that would be rendered instead of the error.toString().

I see that both RSC and SSR waku middleware have this in a catch block:

ctx.res.body = stringToStream(`${err}`);

Maybe if I add middleware that runs after the other renderers, I can see if ctx.res is an error response and update the rendered body.

If I can create unlinked router entries for my error pages, then my middleware could use the rsc or ssr renderers to render one of those entries.

Maybe the exported getConfig() for pages could return the name of a fallback error entry point to use if an exception is hit while rendering that page?

[dai-shi]

I would like to understand the problem better. It feels like this should be solved at the low level "minimal" API, not pages.

Is it only about customizing ctx.res.body = stringToStream(${err});?

additionally register a fallback component

so, you want to return something like <div>error...</div>. Any idea how to render it on the client?

[rmarscher]

Yes, I think it is mainly about customizing that error body. It might be useful to have some type of config hook to inject error reporting / instrumentation.

With the minimal API, maybe it could be possible to await the render functions - renderRsc, renderHtml - inside a try/catch and let those error be caught inside the unstable_handleRequest method. Inside the catch, I could run a different render with an error entry point, passing in the exception to my component.

import { new_defineEntries } from 'waku/minimal/server';
import { Slot } from 'waku/minimal/client';

import App from './components2/App';
import ErrorPage from './components2/ErrorPage';
import { runWithRerender } from './als';

export default new_defineEntries({
  unstable_handleRequest: async (input, { renderRsc, renderHtml }) => {
    if (input.type === 'component') {
      try {
        return await renderRsc({ App: <App name={input.rscPath || 'Waku'} /> });
      } catch (e) {
        return await renderRsc({ App: <ErrorPage error={e} /> });
      }
    }
    if (input.type === 'function') {
      try {
        const elements: Record<string, unknown> = {};
        const rerender = (rscPath: string) => {
          elements.App = <App name={rscPath || 'Waku'} />;
        };
        const value = await runWithRerender(rerender, () =>
          input.fn(...input.args),
        );
        return await renderRsc({ ...elements, _value: value });
      } catch (e) {
        const value = {
          error: "",
          ...(hasStatusCode(e) ? { statusCode: e.statusCode } : {}),
        };
        // or `const value = input.error(e, input.args);` ?
        return renderRsc({ _value: value });

        // I think something like causes the client to replace the app
        // with the error page which might not be desirable.
        const elements: Record<string, unknown> = {};
        const rerender = (rscPath: string) => {
          elements.App = <ErrorPage error={e} />;
        };
        const value = await runWithRerender(rerender, () =>
          input.error(e, input.args),
        );
        return renderRsc({ ...elements, _value: value });
      }
    }
    if (input.type === 'custom' && input.pathname === '/') {
      try {
        return await renderHtml({ App: <App name="Waku" /> }, <Slot id="App" />, '');
      } catch (e) {
        return await renderHtml({ App: <ErrorPage error={e} /> }, <Slot id="App" />, '');
      }
    }
  },
  unstable_getBuildConfig: async () => [
    { pathname: '/', entries: [{ rscPath: '' }] },
  ],
});

[dai-shi]

wow, it's nice to see you are following the latest new_defineEntries.

I think one idea would be something like this:

      } catch (e) {
        const errElement = <ErrorPage err={e} />;
        return renderRsc({ _err: e, Err: errElement });
      }

It's still just an idea.

[rmarscher]

I'm trying to keep up! 😅 🏃 🚀

Yes, passing the error and component is a good idea. That would give more options to the client for handling the exception.