Image for post
Image for post

Global Error Handling in Angular

Learn how to automatically catch all errors in a web application written in Angular and process them accordingly

Error Types

Example application

Application architecture

File structure

📦 src
┣ 📂 core
┃ ┣ 📂 errors
┃ ┃ ┣ 📜 error-handler.module.ts
┃ ┃ ┣ 📜 global-error-handler.ts
┃ ┃ ┗ 📜 http-error.interceptor.ts
┃ ┗ 📜 core.module.ts
┣ 📂 shared
┃ ┣ 📂 errors
┃ ┃ ┣ 📂 error-dialog
┃ ┃ ┗ 📜 error-dialog.service.ts
┃ ┣ 📂 loading
┃ ┃ ┣ 📂 loading-dialog
┃ ┃ ┗ 📜 loading-dialog.service.ts
┃ ┗ 📜 shared.module.ts
┗ 📜 app.module.ts

Error Handler Module

Global Error Handler

localError() {
throw Error("The app component has thrown an error!");
}
Image for post
Image for post

HTTP Error Interceptor

this.loadingDialogService.openDialog();
Image for post
Image for post
failingRequest() {
this.http.get("https://httpstat.us/404?sleep=2000").toPromise();
}
Image for post
Image for post

Conclusion

Source Code

References

Passionate web developer with focus on TypeScript, JavaScript and Node.js 💚

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store