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. You can add your own error boundaries anywhere.

To ensure an error boundary catches the error, your router needs to use this middleware.

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>