Problem Statement
How do you implement error handling with error.js and what props does it receive?
Explanation
Create an error.js file that must be marked with 'use client' directive at the top, exporting a component that receives error object containing the caught error with message and stack properties, and reset function to attempt recovering by re-rendering the segment.
The error boundary catches errors in nested pages, layouts, and components but not in the layout.js of the same segment (use a parent error.js for that) or in the root layout (use global-error.js for that).
Implement retry logic with the reset function that triggers re-rendering, display user-friendly error messages while logging details to error tracking services, and create a hierarchy of error boundaries at different route levels for granular error handling.
Error boundaries don't catch errors in event handlers or async code outside rendering, so wrap those in try-catch and handle separately.
Practice Sets
This question appears in the following practice sets: