This middleware ensures all errors in the route are HttpErrors. If an error isn't an HttpError, a new HttpError is created with it as the cause. If a boundary is specified, it will add the boundary to the HttpError. If an AppErrorBoundary exists with a matching boundary, it will be used to handle the error. If a boundary is not specified, the first AppErrorBoundary without a boundary specified will handle the error. If a boundary is specified, but no AppErrorBoundary exists with a matching boundary, the error will go unhandled.

By default, any route that has an ErrorFallback will have an errorBoundary automatically added to it. The automatic error boundaries name will match the route by default. If a route exports a boundary string, that will be used as the errorBoundary's boundary. You can add your own error boundaries anywhere.

To ensure an error boundary catches the error, you need to either export a boundary string from your route or your router needs to use the error boundary middleware.

export const boundary = "MyComponentErrorBoundary"

const router = new Router()
 .use(errorBoundary("MyComponentErrorBoundary"))

Then the related react component for the route needs to either use withAppErrorBoundary or AppErrorBoundary to be able to catch the error during rendering. The boundary identifier must match the one on the server.

const MyComponentSafe = withAppErrorBoundary(MyComponent, {
 FallbackComponent: DefaultErrorFallback,
 boundary: "MyComponentErrorBoundary"
})

<AppErrorBoundary FallbackComponent={DefaultErrorFallback} boundary="MyComponentErrorBoundary">
  <MyComponent />
</AppErrorBoundary>