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
github.com/ipenywis/react-err...
-- Special Links
✨ Join Figma for Free and start designing now!
psxid.figma.com/69wr7zzb1mxm
👉 ✨ Join Figma For Professionals And Start Designing with your Team ✨
psxid.figma.com/ucwkx28d18fo-...
🧭 Build Login/Register API Server w/ Authentication | JWT Express AUTH using Passport.JS and Sequelize
• Build Login/Register A...
🧭 Turn Design into React Code | From prototype to Full website in no time
• Turn Design into React...
🧭 Watch Tutorial on Designing the website on Figma
• I Design a onecolor We...
🧭 Watch Create a Modern React Login/Register Form with smooth Animations
• Create a Modern React ...
🧭 Debug React Apps Like a Pro | Master Debugging from Zero to Hero with Chrome DevTools
• Debug React Apps Like ...
🧭 Master React Like Pro w/ Redux, Typescript, and GraphQL | Beginner to Advanced in React
• Master React Like Pro ...
🧭 Learn Redux For Beginners | React Redux from Zero To Hero to build a real-world app
• Debug React Apps Like ...
🧭 Introduction to GraphQL with Apollo and React
• Introduction to GraphQ...
🐦 Follow me on Twitter: / ipenywis
💻 Github Profile: github.com/ipenywis
Made with 💗 by Coderone

Пікірлер: 39

  • @aristosxanthus658
    @aristosxanthus658 Жыл бұрын

    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.

  • @favouritejome
    @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

  • @rishabh7g
    @rishabh7g4 ай бұрын

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

  • @shafqatrasool662
    @shafqatrasool662 Жыл бұрын

    thanks amazing info keep it up!

  • @momendaoud9561
    @momendaoud9561 Жыл бұрын

    Amazing video please keep doing videos like this

  • @eligbuefelix7988
    @eligbuefelix79889 ай бұрын

    I love this topic. An advanced concept

  • @mhrdkk
    @mhrdkk5 ай бұрын

    Thank you, it's helpful

  • @khale-d
    @khale-d2 ай бұрын

    Awesome video, thanks so much

  • @nickwoodward819
    @nickwoodward8197 ай бұрын

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

  • @dat1309
    @dat1309 Жыл бұрын

    Thanks you so much

  • @rodrigoorellana2389
    @rodrigoorellana2389 Жыл бұрын

    awesome!

  • @mathewuy527
    @mathewuy527 Жыл бұрын

    awesome video new subscriber here thank you

  • @samirshrestha5252
    @samirshrestha5252 Жыл бұрын

    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.

  • @user-et7ko5kc7w
    @user-et7ko5kc7w Жыл бұрын

    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

  • @harpalsinhjadeja167

    @harpalsinhjadeja167

    8 ай бұрын

    That's exactly what happened

  • @nickwoodward819
    @nickwoodward81911 ай бұрын

    This also works I think: const useThrowAsyncError = () => { const [state, setState] = useState(); return (error) => { setState(() => throw error) } }

  • @jaroslavhuss7813
    @jaroslavhuss7813 Жыл бұрын

    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!

  • @arihantjain8347
    @arihantjain8347 Жыл бұрын

    Thanks alot

  • @user-oy4kf5wr8l
    @user-oy4kf5wr8l16 күн бұрын

    thank bro!

  • @jotasenator
    @jotasenator Жыл бұрын

    i like it!!

  • @kubwimanapatrick5425
    @kubwimanapatrick5425 Жыл бұрын

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

  • @PlacidRodrigues1
    @PlacidRodrigues15 ай бұрын

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

  • @mashup_editor
    @mashup_editor11 ай бұрын

    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?

  • @anonymousBl1
    @anonymousBl1 Жыл бұрын

    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?

  • @aristosxanthus658

    @aristosxanthus658

    Жыл бұрын

    Yes, it can handle both types of errors, used as hooks instead of class components

  • @benoitgrasset
    @benoitgrasset11 ай бұрын

    doest it work with NextJS ?

  • @frontendlogic
    @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?

  • @suyashsrivastava3671
    @suyashsrivastava3671 Жыл бұрын

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

  • @user-qe1sh7nf7o
    @user-qe1sh7nf7o5 ай бұрын

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

  • @kushbhandari9249
    @kushbhandari9249 Жыл бұрын

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

  • @kakun7238

    @kakun7238

    Жыл бұрын

    redux or interceptor ma rakhyo bhane ta harek euta component ma gayera feri error ko lagi ui milairakhnu paryo tyo package use garyo bhane kunai component ma error aaye ni tesle handle gardincha so tyo sajilo bhayo

  • @ejikemekingson6336

    @ejikemekingson6336

    Жыл бұрын

    I don't think that caters for "render errors" as well. Just errors during API calls.

  • @tjcn
    @tjcn2 ай бұрын

    *caught

  • @story_of_us_
    @story_of_us_ Жыл бұрын

    Hi, love the content, appreciated a lot! Btw I really like your editor's theme, do you mind share it to me please? Thank you!

  • @Adidobro
    @Adidobro Жыл бұрын

    speaking about junior mistakes while using any types anywhere...

  • @FEA5T

    @FEA5T

    8 ай бұрын

    So, because he points out a junior mistake, that means he cant also make a mistake? Junior devs cant recognize junior mistakes? If I may say so, that is junior dev type of thinking 🤌

  • @ne1butu1
    @ne1butu17 ай бұрын

    What you explain in what React tells you to use for 'ErrorBoundary' is fucking baffling. Thanks for helping me understand this, so I now need to wrap the child and not use the async that should be throwing it... Makes sense. Thank you.

  • @sashasyhinin3928
    @sashasyhinin39285 ай бұрын

    Why did you delete my comment? where i mentioned on mistake in you video

  • @user-hi6bh4ef7s

    @user-hi6bh4ef7s

    Ай бұрын

    What was the mistake? I want to know so I can keep a look out