Error Interceptor in MEAN Stack
We successfully got rid of the infinite loading spinner in the login and signup component in our previous section. At the end of our previous section, we still got an error, and we mentioned that it would be nice to have some error message when we get an error. For that, we will use an angular material component. There we have a component, i.e., the dialog component.
We will use the dialog component to show the error message. In order to use it, we have to open a dialog by using the dialog service provider, and we pass in the component reference, which will be rendered inside of that dialog that is opened. The easy solution to this is just to add some div in the template and then use ngIf combined with some error condition to show or hide this. We will use the dialog, and in order to use it, we will follow the following steps:
1) First, we need to register a global error handler, and as our errors are related to HTTP errors, we want to use our interceptor again. We use our auth-interceptor to intercept all outgoing requests and add the auth header. We can add another interceptor, and we will add it in our root folder because it will affect the entire app. We will add a new interceptor file, i.e., error-interceptor.ts.
2) In this file, we will create an interceptor just as we did it for auth. So, we will copy the entire code of our auth-interceptor and paste it into our error-interceptor.ts file. We don’t need the auth service, so we will remove the auth service code from here. We just want to return the request in the interceptor method, but now we can also listen to the response there. We don’t want to edit the request. We want to listen to the response, and the handle method gives us back the response observable stream.
3) We can just hook into that stream and listen to events. We can use the pipe() method provided by rxjs to add an operator to that stream. We want to add a special operator that is the catchError operator. As the name suggests, this operator allows us to handle errors emitted in the stream. We will add this for our HTTP request, so we will be talking about HTTP errors.
4) In the catchError function, we have to pass the function where we will get our error, and that will be of type HttpErrorResponse. We will console log it, and one thing which we have to do is we have to keep in mind that we are just adding something to that observable stream. We are handling it in different places of our app. So, we have to return an observable inside of catchError even if we had an error. We can just use throwError(), which will generate a new observable. We will simply pass the error to the function and return it as observable.
5) So, now we are just returning that observable with the error, but we can make some error handling in place of console log error. For example, we can use an alert to throw a normal JavaScript alert. The error object has an error property, which will be the response body of the error response and there, we could output the message.
6) Now, we will register the interceptor in our app module, where we also register the auth-interceptor by adding the following provider:
Note: We need to rename our class name with ErrorInterceptor.
Now, every outgoing http request will be watched by this interceptor, and if we get back an error response, the interceptor should kick in.
We get an alert as undefined because we don’t have a message, but we see that the interceptor is doing something, and we see the log from inside the interceptor. There, we can see the error response we are getting.
We successfully added the interceptor, and in the next section, we will use it and add something better error message rather than this alert.