Angular 19 SSR How to add global error pages?

I'm trying to develop an application with Angular 19 SSR.

I use Resolver to load data, however, sometimes, the API interface will report an error, that is, it will return a non-200 status code.

At this time, if I do not add catchError in the resolver, the application will crash and exit directly. The error message is similar to:

node:internal/process/promises:392
new UnhandledPromiseRejection(reason);
^

UnhandledPromiseRejection: This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). The promise rejected with the reason "#<HttpErrorResponse>".
at throwUnhandledRejectionsMode (node:internal/process/promises:392:7)
at processPromiseRejections (node:internal/process/promises:475:17)
at process.processTicksAndRejections (node:internal/process/task_queues:106:32) {
code: 'ERR_UNHANDLED_REJECTION'
}


Some errors can be handled, but some are not. So I need a 500 page to prompt the user program has an error.

I've used react and remix before, in remix I can set an ErrorBoundary for the route.

But I don't know what to do in Angular? I now have to handle the error in each route Componet.

Anyway, I want to catch Angular SSR crash and then render a global 500 error page.

I've tried adding error handling for Express in server.ts, but it didn't work.

app.use((err: any, req: Request, res: Response, next: NextFunction) => {
console.error("express global error handler: ", err);
res.status(500).send("Something broke!");
});


I also tried adding the ErrorHandler Provider, but it didn't work either.

{
provide: ErrorHandler,
useClass: GlobalErrorHandler,
},


The withNavigationErrorHandler will be executed, but I don't know how to render an error page through it.

provideRouter(
routes,
withNavigationErrorHandler((err) => {
console.error("navigation error handler: ", err);
}),
)

Continue reading...