Centralizing Frontend Errors

[00:00 - 00:13] Till now we were handling the errors separately inside our functions, but we can use XOs to centralize the errors. Like we were intercepting the request to add token to the header, we can intercept the response as well.

[00:14 - 00:32] If the response has an error, we can check its status and show the error accordingly. We open agent.tas file and here let's write XOs.interceptors.response.use.

[00:33 - 01:05] If we have a response, we can simply return it. We can also check for the error here, so error which will be of type XOs error and we can de-structure the data and the status from error.response and let's use an ex clamation because we know it will exist.

[01:06 - 01:21] Now we can use the switch statement to check the status code. So let's write switch and we want to check the status and now we can start with case 400, which means the 400 status code.

[01:22 - 01:59] We can simply use notification from and design and we can use error where the message will be data.errorMessage because this is the property which consists our error message and finally we can break from the loop. Same logic will be applied for 401 status so we can copy it and paste it below and replace case 400 with case 401 and case 401 is the status 401 which stands for the unauthorized request.

[02:00 - 02:17] Now let's do it for status 403 and here we are not managing it from our backend so we can give it a hard coded message. So let's say you are not allowed to do that.

[02:18 - 02:51] Status 404 can be the same because we are handling it from our backend. Our state is 500 we can write a custom message although we are handling the error and description but for simplicity let's write a message which will say server error try again later because the notification from Andy won't be able to provide a big description so we are keeping it simple here.

[02:52 - 03:25] And for the default case we can simply break and finally from this function we will return promise.reject the error.response. Now these are the cases for a simple message but there is another use case where we have validation errors and the validation errors can be more than one since validation errors are of status.

[03:26 - 03:59] Let's go there and check if we have errors inside the data so here we will check if data dot errors because inside errors property we are keeping the array of errors so if we have this we can simply loop over them and store it somewhere. Let's create a new variable let's call it const validation errors and this will be an array of string also let's initialize with an empty string.

[04:00 - 04:54] Now we can loop over our data errors so I will use a foreign loop so here I can use const key in data dot error and it is data dot errors. Now we can check if we have an error with that particular key so I will check if data dot errors with that particular key I can simply push it inside the validation errors array so that's right validation errors dot push and I will push data dot errors with that particular key and finally I will throw validation errors and I will flat it before throwing it.

[04:55 - 06:29] We are using throw here because this is an error notification error can stay in place because when we throw the error it will stop the execution there so if there are multiple errors we will throw it and let our function show the notifications otherwise if there are not multiple errors we can simply display it here. So now I remember we need validation errors inside the register component so what we can do is we can catch these errors and show notification inside the register component so let's open register and we can open the submit user function where we are displaying this hardcoded message but now that we have the errors we can simply use it so now this error object will have an error property which will carry errors which we are throwing here so what we can do is here we can check if error dot error because this is going to be the array of errors in this case we can use a for a loop over it and on every item we can display the error message so let's do for const well of error dot error and now I can use notification dot error and the message will be the well.

[06:30 - 08:19] By doing this we will be able to show multiple notifications because one form can have multiple errors maybe the username can be duplicated or the email can be incorrect so this is the case where we will handle our validation errors also let's go to sign in component because I remember we were handling notification there so we can simply get rid of this because now our XUS is responsible for showing that notification and now we can simply log the error here. So get rid of the notification from here and inside agent let's get rid of error I don't know from where it came from we can now open the browser to check how it works so let's go to login and now we can run students at the rate test dot com because I know that email does not exist and I can use the same password now let's see what happens because now we are using incorrect email and it says you are not authorized and we are using it from our XUS and not from our sign in component let's try to for the register component now and I will use student and I will use student at the rate test dot com and I can use the any password now I'm doing this to check if we can see multiple errors because our username is duplicated and our email is duplicated as well now we see two validation errors we see email is already taken and username is already taken so now we have centralized our errors and we don't have to do it individually inside our functions great.