Ability to customize the client router's ErrorBoundary

[rmarscher]

If a client error occurs outside of a custom error boundary in the app, and does not have a statusCode property value on the error object, a 404 value is set to the statusCode property: https://github.com/dai-shi/waku/blob/v0.21.6/packages/waku/src/minimal/client.ts#L243-L247

That then causes the router's ErrorBoundary to replace the page contents with the words "Not Found" https://github.com/dai-shi/waku/blob/v0.21.6/packages/waku/src/router/client.ts#L612-L635

It would be nice to be able to configure the router's ErrorBoundary fallback. I tried using the fallback entry config prop as well as a custom error boundary, but there are still cases where the router's ErrorBoundary is reached.

To reproduce, run npm create waku and then create a component that will throw a client error:

src/components/client-error.tsx:

'use client';

import { useEffect } from 'react';

export const ClientError = () => {
  useEffect(() => {
    const error = new Error("This is a client error");
    // If you uncomment this, it will display `Error: This is a client error` instead of `Not Found`
    // error.statusCode = 500;
    throw error;
  }, [])

  return (
    <div>This should trigger an error</div>
  );
};

Then import and add the <ClientError /> component to one of your pages. Load that url directly in your browser.

You should see the pre-hydrated html very briefly and then replaced with a blank screen and the words "Not Found".

[dai-shi]

Our current recommendation (discussed with @t6adev before) is to put custom error boundary in _layout.tsx (or can be _root.tsx now.)

We can also consider removing the default error boundary in the client if that doesn't help much.