Handling runtime errors in React - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is a runtime error in React?

A runtime error in React is a problem that happens while the app is running, causing it to stop working or behave unexpectedly.

beginner

What is an Error Boundary in React?

An Error Boundary is a React component that catches JavaScript errors anywhere in its child component tree and shows a fallback UI instead of crashing the whole app.

intermediate

How do you create an Error Boundary in React?

You create an Error Boundary by making a class component with the lifecycle methods <code>static getDerivedStateFromError()</code> and <code>componentDidCatch()</code> to catch errors and update the UI.

intermediate

Can functional components be Error Boundaries in React?

No, currently only class components can be Error Boundaries because they need lifecycle methods to catch errors.

beginner

What is a good user experience practice when handling runtime errors in React?

Show a friendly message or fallback UI that explains something went wrong and possibly offer a way to retry or go back, so users don’t see a broken app.

What does an Error Boundary do in React?

A Reloads the page when an error occurs

B Prevents errors from happening in the code

C Automatically fixes bugs in components

D Catches runtime errors in child components and shows fallback UI

Error Boundaries catch errors in their child components and display a fallback UI instead of crashing the whole app.

Which React component type can be an Error Boundary?

A Class components with lifecycle methods

B Pure components only

C Stateless components

D Functional components with hooks

Only class components with lifecycle methods like getDerivedStateFromError and componentDidCatch can be Error Boundaries.

What lifecycle method updates state when an error is caught in an Error Boundary?

A componentDidMount

B componentWillUnmount

C getDerivedStateFromError

D shouldComponentUpdate

getDerivedStateFromError updates the state to show fallback UI after an error is caught.

What should you show users when a runtime error happens in React?

A A detailed error stack trace

B A friendly fallback UI with a message

C A blank white screen

D Nothing, just reload silently

Showing a friendly fallback UI helps users understand something went wrong without confusing them.

Where do Error Boundaries catch errors?

A In any child components below them

B Anywhere in the app globally

C Only in the component itself

D Only in event handlers

Error Boundaries catch errors in their child components, not in themselves or globally.

Explain how Error Boundaries help handle runtime errors in React apps.

Think about how React stops the whole app from breaking when a part has an error.

Describe best practices for showing error messages to users when runtime errors occur in React.

Imagine you are explaining to a friend what happened without confusing them.