practiceadvanced
Build an Error Boundary
You have an app with a component that can fail while rendering. Right now, any error crashes the entire UI. Implement an Error Boundary as a React class component that catches the error, shows a fallback UI with the error message, and lets the user retry.
Objectives
- 1.Create an ErrorBoundary class that extends Component
- 2.Implement static getDerivedStateFromError to update state with the error
- 3.Implement componentDidCatch to log the error to the console
- 4.Render a fallback with the error message when hasError is true
- 5.Add a
Retrybutton that resets the boundary state - 6.Wrap <UserProfile> with <ErrorBoundary> in App
your code
Hint
getDerivedStateFromError is a static method that returns the new state. componentDidCatch is where you handle side effects like logging. The retry button should call this.setState({ hasError: false, error: null }).
Related concepts
Was this helpful?
Sign in to give feedback