Angular error handling best practices

Angular error handling best practices

Angular error handling best practices

In todays angular 4/5/6 error handling best practices tutorial session I will demonstrate the best possible ways to handle angular http service error, global errors and error logging for better visibility of kind of error your user is facing while using your app.

This video divides into 3 main part

1. Simple service using angular cli to demonstrate how to catch error using
catchError operator
2. Extend it to handle the http error using httpinterceptor and import in angular modules
3. Extend angular default error handler to use a logging service and log all the errors to remote sentry service.

====================================================
For an working example please download the source code from here

https://github.com/kalyan11021980/ang… ( SP7 branch)

======================================================

Sentry error logging service url : https://sentry.io/welcome/

--~~~--
Please watch: “Angular elements web components with angular 7/6”
   • Advanced Angular elements web compone…  
--~~~--


Content

11.75 -> Hello everyone Kalyan here from blackbox tech.
14.37 -> In todays session I will demonstrate the best possible ways to handle angular http, global
19.04 -> errors and error logging for better visibility of kind of error your user is facing while
23.97 -> using your app.
25.07 -> This video divides into 3 main part
27.08 -> 1.
28.08 -> We will use a simple service and demonstrate how to catch error using catchError operator
32.39 -> 2.
33.39 -> We will extend it to handle the http error using http interceptor
38.76 -> 3.
39.76 -> We will extend angular default error handler to use a logging service and log all the errors
44.46 -> to remote sentry service.
46.71 -> So without further ado lets get started.
49.37 -> I will start with this barebone service which is calling a simple webservice from jsonplaceholder
55.24 -> using httpclient.
57.55 -> getData method with simply return an observable and we will subscribe to that in our app component.
65.47 -> Now lets have a look at our app component.
69.01 -> Here we are simply subscribing to the observable and once we get the data back we are logging
74.45 -> it to the console.
78.909 -> So now think what will happen if there is an issue in the server.
82.531 -> To check that lets give a wrong url.
86.78 -> Lets start the server.
94.88 -> You can see the default error.
114.22 -> Now we will gracefully handle this error.
118.649 -> So at first within the pipe we will pass catchError operator which accepts a method which should
128.79 -> return an observable.
146.28 -> Now lets create the method as pass error as an argument and simply throw the error using
160.98 -> using throwError.
180.98 -> So now if you test you can see the whole error object with all important options which you
187.62 -> can use to display the error to the user.
197.59 -> So there is 2 options for you to check the type of error.
201.11 -> One is by checking if the error is httperror means server side or its a httpevent which
206.17 -> is client side error.
219.83 -> Now lets show this error to the user through our app component.
226.31 -> We can define an error callback which will execute if there is an error.
238.36 -> In this example I am simply showing a div if there is any error by passing a true value
243.76 -> to the gif.
246.129 -> And in the second line I am binding the error message returns from http error response.
260.09 -> In this approach one caveat is for every service method you need to catch the error.
266.66 -> Httpinterceptor comes to rescue.
270.74 -> As httpinterceptor used to intercept each and every http request and you can perform
279.83 -> some common functions such as error handling, timeouts, headers etc.
289.15 -> I have added one http interceptor here and its a very simple file and its method similar
294.44 -> to our handeError method.
297.59 -> So here I am intercepting every request and doing the same thing as in the service like
302.199 -> catching the error and throw the same.
305.96 -> In the app module I have imported this http interceptor and in the provider lets tell
313.84 -> angular to use our httpinterceptclass.
318.389 -> Now our error handled through global http interceptor config and no need to catch it
322.78 -> in individual service lets disable that in our service file.
335.12 -> Lets log the whole error to see how it performs.
353.52 -> Now lets move to the most important part logging.
357.11 -> So console.log is fine as long you are in dev environment but on prod environment we
362.55 -> need to closely track our application performance and see if user facing any issues while using
367.93 -> our app.
369.33 -> So logging the error is always important.
373.639 -> For this example we will use one of the service available in the market out of many services
377.88 -> called Sentry.
378.97 -> Please note I am not affiliated and just using their free service for this tutorial You can
383.77 -> use any other services like tracks.
386.479 -> The configuration is similar for most of the services.
388.93 -> So in Sentry I will create a new project.
390.11 -> I will select Angular and provide a name to the project.
391.54 -> Once you create a project it will guide you how to configure this service in your angular
395.63 -> code.
396.63 -> Its very easy and straight forward.
398.28 -> I have already configured so lets just copy the dsn or api key here.
402.919 -> You need to install sentry first using nom install and then import this sentry module.
420.22 -> Second we will initialize sentry by passing the dsn or api key.
430.74 -> You can configure your scope.
432.12 -> This usually means for every error what additional info you want to collect for an example users
438.03 -> email to release the user with the error.
443.52 -> By default sentry provide many tags which you can extend by this method.
451.56 -> You can also configure sentry as a separate service and import into app module.
459.24 -> Here I am telling angular whenever there is an error pass that to the sentry capturexception
463.83 -> method so it can log in the remote server.
469.68 -> Also configure sentryerrorhandle inside provider.
487.3 -> Now inside our httpinterceptor import sentry and to test just pass the error to sentry
493.52 -> and voila.
513.7 -> It will give you all kind of important information regarding the error.
517.3 -> Also don’t forget to use sentry catchexception method for all your catch block.

Source: https://www.youtube.com/watch?v=xXpXn6X-xqs