Here’s a step-by-step React example that covers everything you mentioned:
✅ Fetch data from an API
✅ Add a mapper function to transform the data
✅ Render the mapped data on the screen
✅ Add an Error Boundary to gracefully handle unexpected runtime (JavaScript) errors during rendering
Press enter or click to view image in full size
📝 Best Practice
If you want a fully correct error boundary, you must use the class-based version. You can optionally combine both approaches:
A class-based ErrorBoundary for render-time errors.
A global error listener (or window.onunhandledrejection) to catch API/network/runtime issues.
✅ Final Verdict
Your functional version is fine as a global error catcher, but it doesn’t replace a real Error Boundary. React Error Boundaries are currently class components only, because of how React handles error propagation inside the component tree.
