By default, all http errors from backend endpoints or runtime errors happening asynchronously in your SSR app are ignored by the Angular Universal Express engine. ExpressJS always returns to a client a "success" response (with a http status 200) with whatever HTML got eventually rendered, regardless any runtime errors.
Obviously http errors from backend endpoints may result in missing the crucial data to be displayed in final HTML output. Or a runtime error in a component’s logic might cause rendering incorrectly a part of the page. Because Angular Universal Express ignores such errors, the malformed HTML result sent to the client may be eventually indexed by Google, harming your SEO.
The only exception are unsuccessful APP_INITIALIZER hooks (returning a rejected Promise or errored RxJs stream) and errors in a synchronous bootstrap of the root component - which really interrupt the rendering. Such an error from APP_INITIALIZER (or from constructor of the root component) is thrown up to the ExpressJS server. This by default causes sending to a client a raw error’s stacktrace along with the http status 500.
For more, see a minimal reproduction repo:
- with Angular 14 https://github.com/Platonn/angular-universal-14-error-handling-default
- with Angular 16 https://github.com/Platonn/angular-ssr-error-handling__ng16-1
Disclaimer: this article refers to Angular in version 14.2. The next versions may differ in behavior.
UPDATE 2023 July: I've created a feature request in the Angular repo for propagating asynchronous errors in SSR: https://github.com/angular/angular/issues/50829
UPDATE 2024 May: The Angular Team started working on this issue in the PR https://github.com/angular/angular/pull/55787
If you really feel like buying me a coffee
... then feel free to do it. Many thanks! 🙌
Top comments (0)