The Only Right Way To Handle Errors in React - No More Error Boundaries

You're most likely handling your React errors the wrong way! In this video, we'll discuss the different ways you could handle and display fallback UI in React and which one works best.

⭐ Timestamps ⭐
00:00 Intro
01:57 1- Using state for error handling
04:28 2- Using Error Boundaries
09:08 3- using react-error-boundaries

💻 You can grab the repo from Github

-- Special Links

✨ Join Figma for Free and start designing now!

👉 ✨ Join Figma For Professionals And Start Designing with your Team ✨

🧭 Build Login/Register API Server w/ Authentication | JWT Express AUTH using Passport.JS and Sequelize

🧭 Turn Design into React Code | From prototype to Full website in no time

🧭 Watch Tutorial on Designing the website on Figma

🧭 Watch Create a Modern React Login/Register Form with smooth Animations

🧭 Debug React Apps Like a Pro | Master Debugging from Zero to Hero with Chrome DevTools

🧭 Master React Like Pro w/ Redux, Typescript, and GraphQL | Beginner to Advanced in React

🧭 Learn Redux For Beginners | React Redux from Zero To Hero to build a real-world app

🧭 Introduction to GraphQL with Apollo and React

Made with 💗 by Coderone

[favouritejome]

I've been using the react error boundary but didn't know it could catch errors from async operations, also I didn't know of the limitation of the error boundary. Thanks for the video

[aristosxanthus]

I never knew how to actually use React Error Boundary until now. Also didn't know how much of an improvement it is over the native React error boundary. Thanks for the knowledge.

[momendaoud]

Amazing video please keep doing videos like this

[eligbuefelix]

I love this topic. An advanced concept

[etkokcw]

Are you sure the async code won't trigger the error boundary? It looked to me like the error was being swallowed by your try catch

[mathewuy]

awesome video new subscriber here thank you

[jaroslavhuss]

Well, what I do - I have a global reduxToolkit state just for error and if anything sh1tty happens in try/catch + fetch, I will just return that error to the redux error component which displays the error message to the user as a modal. I will look at this though. I did not know about this library. Thank you!

[samirshrestha]

Hello there, I am beginner learner of react. please make separate tutorial on react-error-boundary, describing everything. I hope new tutorial on react-error-boundary will come soon.

[rishabhg]

Thank you, CoderOne, for making this video. Because of you, I am able to understand the error handling in React completely.

[kubwimanapatrick]

Greate video .... Can you please share the repo for this example

[mashup_editor]

You can use a function component as a fallback in the native error boundary... I don't see the point in downloading an extra bloating package, am I missing something?

[nickwoodward]

Using the native error boundaries you can render a fallback element:

`<ErrorBoundary fallback={<p>⚠Something went wrong</p>}>`

[nickwoodward]

This also works I think:

const useThrowAsyncError = () => {
const [state, setState] = useState();

return (error) => {
setState(() => throw error)
}
}

[aname]

Hey. Nice video! However i have a feeling that if you would throw an error in catch after fetch items, the native react boundry would pick it up. This is the the step you also need to do using library (calling method from hook).

[anonymousBl]

Is the react-error-boundary library a good replacement for the built-in React ErrorBoundary component if:
- you would like a fallback ui for asynchronous error as well as regular errors
- if you don't like to use React class components
Did i understand that correctly anything else i am missing?

[PlacidRodrigues]

The standard error boundary can surely handle async errors and it can show fallbacks. You have mistakenly swallowed the error in the catch block.

[kushbhandari]

Isn't it better to use Redux and Axios Instance(Interceptors) for async error handling.

[qeshnfo]

its not working for me to handle async operation. please help

[frontendlogic]

There is a problem with example 2. You passed the error to the catch block and did nothing with it. How do you expect it to be caught by the ErrorBoundary?

[suyashsrivastava]

I prefer the first way, better for showing different custom error ui in different cases, gives more independence