Writing a custom error handler class - Angular Tutorial

- [Instructor] In the last video we added a new file using Angular CLI tool. Let's update this file to add metadata to error messages before sending them to the console. I have our new file open here in VS code and the first thing we need to do is import Angular's ErrorHandler class. I do that by going to the import statement for the Angular core module at the top of the file and adding the ErrorHandler class to the list of imports. If you're using VS code or something similar you may get help with auto-completion. Please take advantage of that. I know I will. I'm going to hit tab to use the suggestion provided by the editor. Next we can get rid of the constructor. We won't need that for our service. Then we want to implement the ErrorHandler class. We do that by going just before the opening bracket of our class and typing implements ErrorHandler. You may see a wavy red line under the class name if you're using VS code, this is the editor telling us there's an error. If we hover over the class name we'll get more info about what's wrong. Also, if you have a Terminal window open you can go over to the Problems tab here and find out more info about what's happening in your file. Either way. The error is telling us that there's a missing property called handleError. Let's add that now. I'll close the terminal here, go back to our class, make a new line and type public handleError() {} This method takes one argument. The error we want to modify, and I'll set its type as any which is the same type used in the ErrorHandler class. This method doesn't return any values so we'll set the methods return type is void. We can do whatever we want inside the body of this method. For now, let's send a simple string back to the console to make sure our service works correctly. I'll make a new line and type console.error and into the error method, I will send a string that says, "Hello from ErrorMetadataService." We need to date the app.module.ts file to use our new service. Let's do that now. I'll go to the source folder here in the sidebar open up app, go down to app.module, open up that file and we'll need to import two things, the first is Angular ErrorHandler class and the second is our custom error metadata class. First, I'll go to the import statement for the Angular core module and add the ErrorHandler class to the list of imports. Then I'll make a new import statement for our custom service. Between the brackets, I'll type ErrorMetadataService and we're going to import that from ./services/error-metadata.service. We need to tell Angular about this new service. We do that by updating the providers array in the NgModule decorator. The providers property takes either an array of class names or in our case, an array of objects. These objects have several possible parameters but we only need two here. The first parameter is provide and the value of this property is the name of the class we want to override. So I'll pass an ErrorHandler and the second parameter is used class. The value of this property is the name of our custom service. The class that we're going to use in place of ErrorHandler. We'll need to compile our code and launch a local dev server to check our work. We use the NPM start command to do that. I'll go up to the Terminal menu, click on New Terminal and type npm start and hit enter. Under the hood, NPM start runs NG serve. While we could run NG serve directly, I recommend using the NPM start command instead. Here's why, sometimes the version of Angular CLI tool installed locally as a project dependency can be different from the version installed globally on your machine. Using the NPM start command guarantees that you use the local version installed in the project. A browser may automatically open once Angular compiles the app. If it doesn't, hover over the local host URL, here in the terminal and click on follow link. So far so good. I'll open a console here in Chrome to check for errors. I'll go up to the View menu scroll down to Developer and then click on Developer Tools. Make sure I'm on the Console tab. Great, no errors. And this is perfectly correct because there are no errors in our code. We wrote perfect code. We'll need to force an error to check our new service. There's a couple ways to do this. The easiest is to go into the user-list-component and comment at one of the lines. Let's do that now. That can be as code, I'll scroll down to user-list, click on the user-list-component file and comment out line 14. I'll save my changes and go back to the browser. There it is. Our custom message. Hello from ErrorMetadataService, looks great. This means our service is wired into the app correctly. Let's go back into the file and update the service to return useful details about the error. Timestamps are useful, so let's add that. I'll make a new variable called date and assign it to a new Date object. Then instead of a string, I'll pass in a new object into the error method and I'll make a new property called timestamp which I will assign to the value of date.toISOString(). We also want the error message itself. So I'll make a new property called message and assign it to the value of error.message. Finally, I'll add a property called zone. This is specific to Angular and would tell us more information about these zone that our code is running in. I'll make a new property called zone and assign it to error.zone. Back in the browser. When we reload our page, we can see our custom error object. Looks great. Custom ErrorHandlers like this can be very powerful because it allows you and your team to work with these error messages without needing to refactor any of Angulars underlying code.