Handling Errors | Lecture 144 | React.JS 🔥

Summary

The video script focuses on error handling in web applications, particularly when dealing with asynchronous data fetching. It emphasizes the importance of being prepared for potential issues such as loss of internet connection or API errors. The tutorial demonstrates how to simulate and handle these scenarios by using try-catch blocks in JavaScript, updating application states to reflect errors, and displaying user-friendly error messages. It also introduces a state variable to manage error messages and conditional rendering to ensure a smooth user experience, even when data fetching fails.

Takeaways

• 🔍 Always assume errors can occur when dealing with asynchronous data in web applications.
• 💻 Simulate network issues like loss of internet connection to test error handling.
• 📶 Check the network tab to ensure the application behaves correctly under slow or offline conditions.
• 🛑 Use try-catch blocks to handle errors manually, as fetch does not inherently react to errors.
• 📌 Check the response object's `ok` property to determine if the response is successful or not.
• 🔁 Throw new errors when the response is not okay to handle specific error cases.
• 🔄 Use a finally block to ensure certain code is executed regardless of whether an error occurred.
• 📋 Maintain a separate state variable to track and display error messages.
• 📝 Log error messages to the console for debugging purposes.
• 🎨 Create a simple presentational component to display error messages with appropriate styling.
• 🔄 Ensure that the application's loading, error, and data display states are mutually exclusive.

Q & A

Why is it important to handle errors during data fetching in web applications?

It is important to handle errors to provide a better user experience by informing users of issues, such as a lost internet connection, and to avoid leaving the application in a perpetual loading state.

How can you simulate a lost internet connection in a web application for testing purposes?

You can simulate a lost internet connection by using the network tab in the browser's developer tools to set the connection to 'offline' while data is loading.

What does the 'response.ok' property signify in the context of fetch requests in JavaScript?

The 'response.ok' property indicates whether the response was successful (status in the range 200-299) or not, helping to identify request failures.

What should you do in JavaScript code if the 'response.ok' property is false?

If 'response.ok' is false, you should throw a new error to indicate that something went wrong with the fetch request.

What is the purpose of using a try-catch block in JavaScript?

A try-catch block is used to catch errors in a section of code, allowing developers to handle exceptions and prevent the application from crashing.

Why is conditional rendering used in web applications?

Conditional rendering is used to display different components or elements based on certain conditions, such as loading states or the presence of errors, enhancing user experience.

How can you manage the loading state in a React application to handle asynchronous data fetching?

In a React application, you manage the loading state by using state variables to indicate when data is being fetched and then updating these variables appropriately to reflect when loading is complete or an error occurs.

What is the significance of the 'finally' block in error handling in JavaScript?

The 'finally' block is executed after the try and catch blocks, regardless of the result, allowing for cleanup actions or resetting states like the loading state, ensuring code runs even after an error.

How can the absence of data from an API be handled in a web application?

The absence of data can be handled by checking the received data and throwing an error or displaying a specific message if the expected data is undefined or does not meet required conditions.

Why is it important to handle different types of errors separately in web applications?

Handling different types of errors separately allows for more tailored user feedback and specific troubleshooting steps, improving the overall user experience and application reliability.

Outlines

00:00

🔍 Error Handling in Data Fetching

This paragraph discusses the importance of error handling when fetching data in web applications, especially with asynchronous data. It highlights the need to account for scenarios such as users losing internet connection. The speaker simulates this by switching to slow 3G and then to offline mode, demonstrating how the application should not remain in a loading state indefinitely. The script explains how to handle errors by checking the response object from the fetch function and throwing a new error if the response is not okay. It also introduces the use of a try-catch block to handle errors and the creation of a new error component to display error messages on the screen.

05:03

📊 Conditional Rendering for Error Display

The second paragraph focuses on the implementation of conditional rendering to display error messages or movie lists based on the application's state. It explains the process of nesting ternary operators to manage different states such as loading, error, and no data. The speaker emphasizes the importance of ensuring that only one of the three mutually exclusive conditions (loading, error, or no data) is true at any given time to avoid displaying multiple components simultaneously. The paragraph also addresses the issue of the loading state remaining true even after an error is thrown and suggests using a finally block to ensure that the loading state is reset.

10:08

🛠️ Handling API Response Errors

The third paragraph delves into handling errors that arise from API responses, such as when no movies are found for a search query. It demonstrates how to check the API response for faults and throw a new error with a custom message like 'movie not found'. The speaker recaps the process of setting an error state and using it for conditional rendering on the UI. The paragraph concludes by stressing the significance of error handling in web applications, which is often overlooked but is essential for a smooth user experience.

Keywords

💡asynchronous data

Asynchronous data refers to data that is fetched or processed independently of the main thread of execution, often in web applications. This allows for non-blocking operations, such as fetching data from a server while the user continues to interact with the application. In the video, handling asynchronous data is crucial for ensuring a smooth user experience, especially when dealing with potential errors like lost internet connections.

💡error handling

Error handling is the process of responding to the occurrence, in a computer program, of an event that disrupts the normal flow of instructions. It is a fundamental part of software development, ensuring that the application can recover gracefully from unexpected conditions. In the context of the video, error handling involves displaying error messages to the user when data fetching fails, such as when the user is offline.

💡fetch function

The fetch function is a web API that provides an easy, logical way to fetch resources asynchronously across the network. It returns a Promise that resolves to the Response to that request, whether it is successful or not. In the video, the fetch function is used to retrieve data from a server, and its usage is crucial for handling asynchronous data in web applications.

💡try-catch block

A try-catch block is a control flow statement in JavaScript that allows code to be written in a way that can handle exceptions. The try block contains the code that might throw an exception, and the catch block is executed if an exception is thrown. This is a standard JavaScript feature used for error handling, as demonstrated in the video when wrapping the fetch operation to handle potential errors.

💡state management

State management in web applications refers to the process of managing the state (data) of an application over time. This is essential for maintaining the user's experience, especially in dynamic applications where data can change frequently. In the video, state management is used to track whether there is an error, and to conditionally render the UI based on the application's state.

💡conditional rendering

Conditional rendering is a technique in web development where the UI is dynamically generated based on certain conditions. This allows for a more responsive and interactive user interface. In the video, conditional rendering is used to display different components depending on whether the application is loading, has an error, or is ready to display the content.

💡API response

An API response is the data returned by an application programming interface (API) after a request has been made. It typically includes a status code, headers, and a body containing the data. In the video, the API response is checked for errors, and the application's behavior is adjusted based on the response.

💡React

React is a JavaScript library for building user interfaces, particularly useful for creating single-page applications. It allows developers to create reusable UI components and manage their state in a declarative manner. The video discusses React in the context of error handling and state management within a React application.

💡finally block

A finally block is part of the try-catch-finally statement in JavaScript, which is executed regardless of whether an exception was thrown or caught. It is used for cleanup code that should run no matter what the outcome of the try block is. In the video, a finally block is suggested to ensure that certain code is executed even after an error is thrown.

💡ternary operator

The ternary operator is a shorthand for an if-else statement in JavaScript. It takes three operands: a condition followed by a result for true and a result for false. It is often used for concise conditional assignments. In the video, the ternary operator is mentioned in the context of conditional rendering within the application.

💡presentational component

A presentational component in React is a component that is concerned only with how things look, without any logic or state management. It is a pure function of its props, receiving data and returning a UI representation. In the video, an error message component is created as a simple presentational component.

Highlights

Assuming errors in web applications dealing with asynchronous data is crucial.

Simulating a user losing internet connection to test error handling.

Using a try-catch block to handle errors in JavaScript.

Checking the response object's 'ok' property to determine if an error occurred.

Throwing a new error when the response is not okay.

Displaying an error message on the screen instead of keeping the application in a loading state.

Creating a new state variable to indicate the presence of an error.

Using conditional rendering to display the error message component when an error exists.

Creating an error message component to display error messages with an emoji.

Handling situations where the API response is undefined or an empty array.

Throwing an error when no movies are found for a search query.

Using a finally block to ensure the loading state is reset after an error.

Ensuring that the error, loading, and data display conditions are mutually exclusive.

Reacting to errors is not built into the fetch function and must be handled manually.

The importance of error handling in web applications, which is often overlooked but essential.

Analyzing the code after the video to understand the conditions and error handling logic.

Transcripts

‫So whenever we are doing any data fetching

‫in any web application

‫and dealing with asynchronous data,

‫we always need to assume that something can go wrong.

‫And so therefore, let's now account

‫for that situation by handling those errors.

‫So one of the things that can go wrong

‫is your users suddenly losing their internet connection.

‫So let's simulate that here again in our network tab

‫and let's make sure that we are first on slow 3G.

‫Then let's reload here, and then

‫while the movies are loaded, we will click on offline.

‫So right now,

‫so you see that now the application

‫basically never leaves the state.

‫And also when we come to our console here we see

‫that we failed to fetch,

‫which again is because our user basically now

‫lost their internet connection.

‫So when that happens, we want to display some kind

‫of error message here on the screen and not

‫keep the application in this loading state here forever.

‫Because like this, the user will think

‫that the data might eventually arrive

‫but of course it will not.

‫Now, reacting to errors like this is actually not built

‫into the fetch function itself.

‫And so we have to kind of do that manually.

‫And so let's try that here in our fetch movies function.

‫So here on the response object

‫that we receive from fetch exists one, okay, property.

‫And so here we can check for that.

‫So basically if the response is not okay

‫then we want to throw a new error.

‫And again, this is pretty standard JavaScript code.

‫So then let's just say something went wrong

‫with fetching movies now, okay?

‫And so now if we throw an error here

‫we need to wrap all of our code into a try catch block. So,

‫try and catch

‫which again is just a normal JavaScript feature.

‫This one has nothing to do with React.

‫Okay, and here let's console that error.

‫That error, okay?

‫And then let's come back here.

‫Well, if we load now, then of course nothing will work.

‫So let's do that trick again where first

‫we set it to slow 3G,

‫then let's reload and then let's wait for it.

‫We set our users back to offline right now.

‫And so where is it?

‫Well, it's not actually anywhere here,

‫but well, that's not really important anyway.

‫So let's actually just log error dot message.

‫So this is the property of the error

‫where this string here will get saved into

‫but then what we're actually interested in,

‫is to get this message here onto the screen.

‫So basically displaying it right here instead of loading.

‫So that means that we need another piece of state.

‫So basically a piece of state indicating

‫whether we currently have an error or not.

‫So const error

‫and set error.

‫And so here, this one is actually not a bullion,

‫but it's truly the error message.

‫Okay, so here

‫let's then set the error

‫to actually that message.

‫And again, error dot message is basically

‫this string that we passed into the error

‫and error is the error itself

‫as it was passed into this catch block.

‫And again, that is just basic JavaScript.

‫All right,

‫and then let's do some conditional rendering here

‫to basically get the error here

‫onto the screen whenever there exists one.

‫Now, okay, and let's start

‫by creating a new error component here

‫or maybe let's call it error message.

‫And it will receive a prop

‫with some message that it will then display on the screen.

‫So let's return again a paragraph this time

‫with the class name of error, which,

‫as always, I already included into my CSS file.

‫Then here let's maybe add some small emoji here,

‫like this one.

‫So showing there was some kind of problem.

‫And then here we simply display that message.

‫So this is a very simple presentational component.

‫Remember that?

‫Okay. Now here in our conditional rendering

‫basically what we want to do is

‫that when it's no longer loading

‫then we want to display this movie list

‫but only if there was no error.

‫So basically here we now would have to nest another ternary

‫inside this ternary, but that makes for really ugly coat.

‫And so let's do something else instead.

‫So let's comment out this entire part.

‫Or well, only this one.

‫So the box of course we still need,

‫but then let's do is loading.

‫And if there's no error

‫then display this movies list right here.

‫Now if there is an error

‫then display the error message component

‫with the error or I think it's called message.

‫So with the message prop set to error.

‫And here of course, it needs to be

‫that the data is not loading and there is no error.

‫And finally, we also need to account

‫of course for the is loading state.

‫So if it is loading, then just display our loader.

‫So here the situation is indeed a little bit tricky

‫with all these different states that we have

‫and with all the conditional rendering, but well

‫these are now three mutually exclusive conditions.

‫So it is either loading or it is not loading

‫and there is no error or there is an error.

‫So only one of these three here

‫can be true at the same time.

‫And so that's very important

‫so that we don't display multiple

‫of these components at the same time by mistake.

‫So let's give it a save and let's try again.

‫So back to our 3G

‫and then I will set it to offline very soon.

‫Let's wait for it.

‫And there it is.

‫So we get our error message correctly displayed here.

‫However, there's still some problem

‫because the loading state is still set to true

‫and in fact that's actually correct.

‫So as soon as the error here is thrown,

‫this rest of the code is no longer evaluated.

‫And so therefore is loading is never set to fault.

‫So our application will keep thinking

‫that the data is still being loaded.

‫So again, the problem is

‫that after this error is being thrown

‫then React will basically never see

‫this piece of code here,

‫where the loading state is reset.

‫So instead of doing that here

‫let's attach a finally block here.

‫So this block of code here will basically always be executed

‫at the very end.

‫Okay? And as an alternative

‫we could have kept the code here and also pasted it here,

‫but that would've created a duplication of code.

‫So with this, it's going to be a lot better.

‫Now, I will not try this yet here

‫because actually I want to handle another kind of error

‫which is not really an error,

‫but also situation where we want to display a message

‫which is the situation

‫in which we cannot find any movie for the search Query.

‫So let's say the Query is like this one here

‫and of course the API will not find anything.

‫So let's remove all throttling,

‫and well, what happens here?

‫Well, basically the length cannot be read of undefined.

‫And so the problem here is that the data

‫that comes back from the API now,

‫is apparently undefined.

‫So let's take a look at that.

‫So just at data here, and let's try that again.

‫And so indeed, we no longer have the search property here,

‫so we no longer have data dot search.

‫And so what's happening then is that data search

‫is being set to undefined,

‫and therefore we get this other error here.

‫So as I was saying in the very beginning

‫we always need to handle

‫all these different situations that can go wrong.

‫And when we are working with data fetching

‫there's always a lot of things that can go wrong.

‫So working with data is a lot of work

‫but it's also essential in most

‫if not all web applications.

‫But anyway, here we can now use this response

‫to our advantage,

‫in order to throw another error in this situation.

‫So we can say that data dot response,

‫and actually, this now needs to be here

‫after we already have the data.

‫So in this case, if data responds is equal faults

‫and so for some reason the API here responds

‫with the string of faults and not a bullion

‫but while this still works, so in this case, let's

‫also throw a new error and let's simply say

‫movie not found.

‫Alright, and beautiful.

‫Let's just reload.

‫And then here we get this log.

‫So that's this console dot error coming from here.

‫And then indeed we get our error message also displayed

‫on the UI.

‫So this one was maybe a little bit trickier.

‫So let's just quickly recap.

‫So what we did was to implement another state variable,

‫this time, specific for the error

‫so that whenever some error occurred

‫we could store the error message in there

‫and then display it in the UI as soon as an error occurred.

‫Now, as soon as an error did occur, which is

‫in this situation, and in this one we threw a new error,

‫and then we caught that error

‫inside the catch block of this try-catch.

‫And so this is a standard way

‫of catching errors in JavaScript.

‫And so in this situation, we then set the error state

‫to the message of the error that we specified here.

‫Then finally, we used of course, that state variable

‫in order to render something on the screen conditionally.

‫And so that was right here.

‫So this part here is maybe a bit confusing.

‫And so make sure that after this video you just

‫analyze exactly what's happening here and that,

‫in fact these three conditions here are mutually exclusive.

‫So only one of them will ever be true.

‫Okay? And I think that for now this is enough

‫for error handling in this application.

‫So that's always a very,

‫very important part that many people overlook.

‫But it is of course essential

‫to deal with these kind of situations.