How does React Fiber handle errors?

React Fiber introduces a new error-handling mechanism called Error Boundaries, which allows developers to catch errors in the component tree and display a fallback UI. Error Boundaries are components that implement the componentDidCatch method or use the static getDerivedStateFromError method. When an error occurs within a component tree, React will look for the nearest Error Boundary and delegate error handling to it, preventing the entire application from crashing.

Difficulty: 6/10

Topics: error boundaries, fiber reconciliation, suspense

Scenario Questions

0-2 years experience

1
If a child component throws an exception while rendering, what does React Fiber do and how would you prevent the whole app from crashing?
2
Show me how you would add an error boundary around a small widget so that a rendering error only hides that widget, not the rest of the page.

2-5 years experience

1
During a feature rollout a third‑party library throws inside a useEffect. The page crashes even though you have a top‑level error boundary. Walk me through why Fiber didn't catch it and how you would fix it.
2
You notice that a component wrapped in Suspense throws a network error and the fallback never appears. Explain how Fiber propagates that error and what changes you’d make to handle it gracefully.

5-8 years experience

1
Design an error‑handling strategy for a large application that mixes many nested Suspense and error boundaries. How would you decide where to place boundaries to minimize UI disruption and ensure proper logging?
2
Compare the trade‑offs of putting a single error boundary at the root versus adding per‑feature error boundaries. Discuss the impact on Fiber's error propagation and any performance considerations.

8+ years experience

1
Your organization is migrating a legacy codebase that uses try/catch in componentWillMount for error handling. How would you refactor the code to leverage Fiber’s error boundaries while keeping behavior consistent across many teams?
2
We have several micro‑frontends that share a common React root. How would you evolve the error‑handling architecture across these teams, considering Fiber’s error propagation model and the need for unified logging and recovery?

Follow-up Questions

❓What happens if no error boundary is found in the tree?
❓How does the presence of multiple nested error boundaries affect where the error is handled?
❓Can you log the error stack from inside getDerivedStateFromError, and why might you choose componentDidCatch instead?