React JS: Error Boundaries and How To Use Them

hello everyone today we are going to learn about air boundaries so in react 16.8 air boundaries were introduced and this is a good way of reducing duplicate code because as you know applications sometimes can have errors and the user needs to know what happened so this this is a good way of putting those error displays in a single place and you can use them basically everywhere in your application so let's get started so if you watched my previous video you would have seen this ui here on the right side the only difference is i've just added a little bit of css but everything in here is almost the same uh one change that has been made is that if we go and open the article search component we call this use data hook now in some cases this use data will throw an error and it'll put the error in this error variable so earlier we were just displaying error so we can try that here so here in this case on the second try there was an error now we can either keep it this way but you know our there might be errors in other places of our application so we can make use of air boundaries in this case so what we'll do is basically take this out and we want the the display of the error to be handled in the error boundary so let's create a new file in our folder here call it error boundary we'll import react and in this case we need to create a class component the reason is the only way to create an error boundary is with a class component today in all other cases you can use something called a function component if you want to learn more about that you can watch my previous video and class components as you know take a render method um which will return something for now we'll just keep it at null so let's also create an interface this is something that you want to do for all of your components so in we need to create an interface for the props and the state so air boundary props and the same thing will go for the state now our props and state are empty but one thing that i can think of in the state is a message right so an error message it can can be stored in the state of this uh component so we'll just store it as a string for now and since we have a state we need to initialize it with a constructor and for the message default we'll just put it as an empty string since that's what the type is all right so our render method now obviously needs to change based on what the state is so we'll just do a quick check in the render method if this dot state dot message then we want to render basically an error right error otherwise we should just render um are the children so we'll return this.props.children now remember children come with all all components that you create because it's just something that's extended from react dot component and we don't need this return null anymore all right so how do we actually get this error message in this class well there's two new methods that you can use uh one is a static method it's called get derived state from air and this will take two arguments uh one will be sorry this one will take one argument and the next method is called component did catch now this one will take two arguments one is the error and the other is error info for this video we'll only use the error so we'll skip this one all right so what do we do in both of these methods well in this method we need to return the new state of our component so what will be the new state well we can't have the empty string right so we need to return an object which will represent our state so the message will be air.message kind of like how we had in our previous article search we just displayed the message and in the component that catch you could do anything else that you need to do one thing that we we can add is in the props we can have a on air handler so this will be maybe an error generic error which will return void so this will be passed in from the parent component whoever decides to use the air boundary and we can make it maybe optional so basically in the component did catch if if we have an on air handler passed in then all we can do is just call it with the error so what do we actually display in this error maybe it's just a regular div so we'll return a div with the class name and inside of the div there are two things that we can do one is obviously display the message so we can get that from the state the other thing we can do is add a button to this component and what this button will be responsible for is a retry so on click of this button uh we can call a function so let's create that function up here we'll call it handle retry and it'll this will be an error function so that we can still use the disk variable and what we should do is probably call something in the props but we don't actually have that yet so we'll have to add add a function called on retry which will be responsible for letting the parent know just like on air that there has been a a retry triggered so it can do whatever it needs to do for example recall an api or mount the component again so in our button what we should do is call this dot handle retry or not call but actually just give it a reference so that react can call it when the person clicks on it let's add our button tag again and in here we can just say try again what we've done so far we've created a class component with two two props and one state variable so we need a constructor and we set the message to be an empty string which is falsy so we can do our check here if this dot state dot message and that will be false if it's empty then we display some divs which will represent our error message so the message comes in from the state and we have a button with a click handler for retry so we call the props callback for that and we have two new methods one called get derived state from error which will actually return the state that we expect it to be in when you have an error and the next one is component did catch which is for any other callbacks that you need to make or if you need to for example log to server right now we are not actually using this component ever so let's let's try to use that now if we go to our app component remember we still have our article search displayed but we removed all the errors from the dom in the article search so what we'll do is add our air boundary here and we need to actually import it so let's add that all right now nothing has changed everything still looks exactly the same so let's try it out let's see what happens if there's an error okay so there's an error now there's nothing showing basically why well we we have added our divs here with an error message and the message so it seems like the message is not actually being sent to the air boundary um so let's try to fix that well if we look at it in here we are not actually using the error message at all so use data remember we'll set the error to this variable and we need to actually let the error boundary know that there's an error now the reason this happens is because this is asynchronous and we are actually calling this api in this use data hook so in this case we need to actually watch the error so we'll add a use effect here and what we'll do is actually watch the error so whenever error changes this use effect will run so in this case we need to check if there is an error because remember the error could be empty string in this in which case there is no error so if there is an error which is a string we need to actually throw an error from this component so we'll do throw new error and we'll just pass it the string error so let's try that out okay now we can see it's working as expected we see a button for try again and the error that we actually uh through and when we press try again nothing happens why is that well let's look at our error boundary so if we see retry is actually calling this function and then it just calls the prop but what we also should do here is set the state to have error as nothing so message will again go back to empty string and if we press retry now we get our results back you can have your errors look all the same so what we can do is add a new css file here and target this class which we've created in our air boundary called error message right so if we add a dot we can target that class name and what we can do is add some basic styles so we'll add some padding and we can add a background color and i've already kind of picked out a color for this it's kind of like a light red um we'll add the color as black for the text and we can maybe also add some border radius so that it looks nice and round all right so we all we have to do is import the css file up at the top here and let's see how that looks that looks great in this case for us this was an exception which we had to actually implement some other limitations are event handlers so for example in our air boundary we have this on click handler now if there's an error in this case in in one of these statements it error boundaries will not catch it the other limitation is the error boundary itself so any errors in this error boundary will not be caught by itself the other exception also is asynchronous code so for example api calls that you make in that case your api call will most likely return a promise so in your catch block you'll have to probably throw another error in the component and the last case is server-side rendering so any server-side rendered code will not work with air boundaries if you'd like to learn more about this you can check out some links in the description and read everything about this on my blog if you'd like more videos like this please subscribe and leave a comment if you would like to see something different or if you have a suggestion see you in the next video

Channel: AmanScripts

Views: 1,195

Keywords: error boundaries, react, javascript, typescript, hooks, amanscripts, aman, bhimani, programming, front-end, fronend, software, developer, website, web programming, development, how to learn react, how to learn react js, how to write a custom react hook, how to become a web developer, how to publish a website on internet, front end development interview questions, javascript interview questions, make a website with react, learn typescript and react, react hooks, reactjs tutorial, learn react

Id: N04VzxLgKcQ

Length: 12min 29sec (749 seconds)

Published: Thu Oct 22 2020