- Error handling is how we deal with errors that go wrong when we are running a program.
Error handling is how we deal with errors that go wrong when we are running a program. There is no code that runs perfectly forever :) Things can go wrong and your application might be crush. **So, in order to run your program smoothly you must handle errors.** It just not for to keep your application in running state. It is also usefull to show messages about the error to client. Like what went wrong, why it is not allowed to access this page etc.
- There is no code that runs perfectly forever :) Things can go wrong and your application might be crush. **So, in order to run your program smoothly you must handle errors.**
- It just not for to keep your application in running state. It is also usefull to show messages about the error to client. Like what went wrong, why it is not allowed to access this page etc.
### How to handle errors
### How to handle errors
- First of all you have to catch them 😀. You can catch them via **try-catch block**. See an example;
- First of all you have to catch them 😀. You can catch them via **try-catch block**. See an example;
- Create an basic error;
#### Create an basic error
```ts
```ts
({} as any).doSomething()
({} as any).doSomething()
```
```
- **handle it;**
#### Handle it
```ts
```ts
try {
try {
({} as any).doSomething();
({} as any).doSomething();
@ -36,7 +30,7 @@ try {
- In this case we know where the error will be throwed. Most of the time we wont know where the error will be appear. Should we cover entire application with try-catch blocks? of course not 😀
- In this case we know where the error will be throwed. Most of the time we wont know where the error will be appear. Should we cover entire application with try-catch blocks? of course not 😀
- **We are going to handle errors globally**. Angular provides a great way to do it. Lets do it step by step;
- **We are going to handle errors globally**. Angular provides a great way to do it. Lets do it step by step;
1.Create an **service** and implements the **`ErrorHandler`** interface.
### 1.Create an **service** and implements the **`ErrorHandler`** interface.
```ts
```ts
import { ErrorHandler, Injectable, inject } from '@angular/core';
import { ErrorHandler, Injectable, inject } from '@angular/core';
@ -48,7 +42,7 @@ import { ToastService } from './toast.service';
export class CustomErrorHandlerService implements ErrorHandler {
export class CustomErrorHandlerService implements ErrorHandler {
toastService = inject(ToastService);
toastService = inject(ToastService);
// handleError method is comes from interface
//This method is comes from interface
handleError(error: any): void {
handleError(error: any): void {
this.toastService.showError(error.message);
this.toastService.showError(error.message);
}
}
@ -56,72 +50,63 @@ export class CustomErrorHandlerService implements ErrorHandler {
```
```
2.Provide the service by using **`ErrorHandler`** class from **`@angular/core`**.
### 2.Provide the service by using **`ErrorHandler`** class from **`@angular/core`**.
- Let’s remove try-catch block and see it in action.
- It behaves the exactly the same. Nice, now we catch the entire errors in one simple service.
- It behaves the exactly the same. Nice, now we catch the entire errors in one simple service.
- Is it that simple? I wish it is but it's not 😀. This handling mechanism is only works synchronously. When we start to making http requests, our **`CustomErrorHandlerService`** wont catch the errors.
- Is it that simple? I wish it is but it's not 😀. This handling mechanism is only works synchronously. When we start to making http requests, our **`CustomErrorHandlerService`** wont catch the errors.
## How to handle HTTP Requests
## How to handle HTTP Requests
Make an http request and check is it working.
- Make an http request and check is it working.
- As you can see it doesn’t work. So how can we catch the http errors? with **`catchError()`** operator in rxjs or **`observer object`**. I will go with **`catchError()`** operator.
As you can see it doesn’t work. So how can we catch the http errors? with **`catchError()`** operator in rxjs or **`observer object`**. I will go with **`catchError()`** operator.
Now everything has setted up. lets make an http request and try.
- Now everything has setted up. lets make an http request and try.
- So, now we are handling http errors globally. Whenever an error occurs, it will be catched from interceptor and will be showed via toast message.
- So, now we are handling http errors globally. Whenever an error occurs, it will be catched from interceptor and will be showed via toast message.
- But this method has a one little disadvantage. What if we dont want to show toast message for a spesific case? [related issue about this problem](https://github.com/angular/angular/issues/18155).
- But this method has a one little disadvantage. What if we dont want to show toast message for a spesific case? [related issue about this problem](https://github.com/angular/angular/issues/20203).
- **[ABP Framework](https://abp.io/) has great solution for this problem. Let's understand the solution and apply it straightforwardly.**
- Create a singleton service called **`HttpErrorReporterService`.** This service is going to store **HttpError** in a subject, and share the httpError as an observable for subscribers.
- **[ABP Framework](https://abp.io/) has great solution for this problem. Let's understand the solution and apply it straightforwardly.**
- Create a new service called **`RestService`** which is a layer on top of **`HttpClient`**, this new service is able to get a skipHandleError parameter. If skipHandleError value is **false** then it will be reported to the **`HttpErrorReporterService`** otherwise error will be throwed.
- Create a service called **`ErrorHandler`**, This service is going to subscribe to observable in **`HttpErrorReporterService`** and handle the errors (in our case we will show toast message).
- Create a singleton service called **`HttpErrorReporterService`.** This service is going to store **HttpError** in a subject, and share the httpError as an observable for subscribers.
- When i first see this solution, i loved it. For more information and detail you can check the source code from the links below;
- Create a new service called **`RestService`** which is a layer on top of **`HttpClient`**, this new service is able to get a skipHandleError parameter. If skipHandleError value is **false** then it will be reported to the **`HttpErrorReporterService`** otherwise error will be throwed.
- Create a service called **`ErrorHandler`**, This service is going to subscribe to observable in **`HttpErrorReporterService`** and handle the errors (in our case we will show toast message).
Masum ULU
3 years ago
GitHub