React Js ErrorBoundary only working for the main layout components and not for nested components

Question

I am using errorboundaries in my code and when I use it in the file where I am rendering my main layout components it works, Eg.:

<ErrorBoundary>
<header></header>
</ErrorBoundary>
<ErrorBoundary>
<main/> //this component has an error
</ErrorBoundary>
<ErrorBoundary>
<footer></footer>
</ErrorBoundary>

The above code works and the fallback UI is shown for the error that is in the main component. But when I use errorboundary component inside the main component file it does not work, Eg of errorboundary that does not work:

class main extends React.Component {
//code
<ErrorBoundary>
{object}
</ErrorBoundary>
//more code

This does not work and the whole app crashes instead, displaying only a blank page. Why might this be happening and how to deal with it? Thank you.

according to this, wrapping your root component in ErrorBoundry should do the job. And also please note that Error boundaries do not catch errors for some errors. — punjira
– punjira, Commented Jul 3, 2021 at 11:49
@saeedghotb Thank you for your answer, the whole app is at least not crashing anymore. But the problem still remains and instead of only removing the part where the {object} is and displaying the fallback UI it is still replacing the whole component main with the fallback UI. — Odasaku
– Odasaku, Commented Jul 3, 2021 at 12:10
I'm not sure if what you want is possible or is in face a good idea, but in development mode the error screen will pop to notify the developers of the problem. maybe pressing the escape button after reading the crash message will help. — punjira
– punjira, Commented Jul 3, 2021 at 12:16
@saeedghotb yes the errorboundary is working now, but the issue is that it replaces the whole main component with the fallback UI instead of only the section of the screen where {object} is rendered — Odasaku
– Odasaku, Commented Jul 3, 2021 at 12:19
@saeedghotb I figured it out. Errorboundary catches the error in components. So it wasn't working earlier, but when I rendered a faulty component in between the errorboundary <ErrorComponent/> it worked. Thank you for your help — Odasaku
– Odasaku, Commented Jul 3, 2021 at 12:39

Odasaku · Accepted Answer · 2021-07-03 12:41:00Z

1

I figured it out. Errorboundary catches the error in components. So it wasn't working earlier, but when I rendered a faulty component in between the ErrorBoundary instead, it worked.

<ErrorBoundary>
<FaultyComponent/>
</ErrorBoundary>

it worked.

answered Jul 3, 2021 at 12:41

Odasaku

3778 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

React Js ErrorBoundary only working for the main layout components and not for nested components

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related