Ideal place to put React Error Boundary component?

Question

I recently tried out Error Boundaries of React. According to docs of react -

The granularity of error boundaries is up to you. You may wrap top-level route components to display a “Something went wrong” message to the user, just like server-side frameworks often handle crashes. You may also wrap individual widgets in an error boundary to protect them from crashing the rest of the application.

Wrapping top-level routes are good and solve my purpose but a break in one component makes the other components that are working correctly useless and replaces all of them with the fall back UI of Error Boundary.

Like for example I have one top level Route component - <Component1 /> and it renders four other sub components - <Component2 /> <Component3 /> <Component4 /> <Component5 />

Now my sub components have conditional rendering and if I want to use error boundary separately I need to wrap all my conditional rendering with an Error Boundary. Which I prefer not to.

I have another question: Does error boundary catches errors caused in lifecycle hooks (of the children component) like ComponentDidMount?

Eg -

cont Component1 = () => {
  return (
     <ErrorBoundary> 
         <Component2 />
         <Component3 />
         <Component4 />
         <Component5 />
     </ErrorBoundary>
 )
}

Does this ErrorBoundary catch errors in lifecycle hooks like componentDidMount of Component2?

Answer 1

Like the text you quoted states, if you want to render all "working" sub-components, but replace the non-working one with the fallback, you need to wrap each sub-component with an error boundary. There is no real work-around for this. Perhaps you could use a more convenient pattern, such as render props or high-order components, but the effect is the same.

The "ideal place" to place an Error Boundary depends on where in your component-tree you want a fallback render to kick in if a branch fails. Perhaps you have a component that is very critical to the whole of your app - in that case maybe just a top-level Error boundary is enough since rendering the rest would be pointless. Maybe you have a less-important component - in that case wrap it in an Error boundary since the rest of the app should work, even without it.

---

Does error boundary catches errors caused in lifecycle hooks (of the children component) like ComponentDidMount?

Yes. The top-level error boundary will catch the error generated from the sub-component, but the whole of Component1 render will be replaced with the fallback render.

Error boundaries do only catch errors triggered through React's lifecycle methods (like componentDidMount), including the render method. Error boundaries do not catch errors triggered inside event handlers or any asynchronous code, such as fetch.