Arik ChakmaandKamran Ahmed
edcf0e683d
* Add more questions * wip: add lazy, conditional questions * wip: Add RSC questions * wip: add component's lifecycle * wip: add dependency array question * wip: add comment and state * chore: add more questions * wip: add list question * wip: add directive questions * fix: conventions and examples * wip: add custom hook question * wip: add hydration question * wip: add error boundary example * wip: add strict mode question * wip: investigating slow react app * Update src/data/question-groups/react/react.md * Update src/data/question-groups/react/react.md --------- Co-authored-by: Kamran Ahmed <kamranahmed.se@gmail.com>
1.4 KiB
Error boundaries are special React components that catch JavaScript errors during rendering, in lifecycle methods, and during the constructor of whole tree below them. They are used to handle errors gracefully by displaying a fallback UI and preventing the entire application from crashing due to unhandled errors.
You can use react-error-boundary package to create error boundaries in your application. It provides a ErrorBoundary component that you can wrap around any component that might throw an error. The ErrorBoundary component takes a FallbackComponent prop that is used to render a fallback UI when an error occurs.
Capturing Errors
import { ErrorBoundary } from 'react-error-boundary';
import { FetchData } from './FetchData';
function ErrorFallback({ error, resetErrorBoundary }) {
return (
<div role="alert">
<p>Something went wrong:</p>
<pre>{error.message}</pre>
<button onClick={resetErrorBoundary}>Try again</button>
</div>
);
}
export function App() {
return (
<ErrorBoundary FallbackComponent={ErrorFallback}>
<FetchData />
</ErrorBoundary>
);
}
This FetchData component will throw an error when it is rendered, and the ErrorBoundary component will catch the error and display the ErrorFallback component.
export function FetchData() {
throw new Error('Error fetching data');
return <p>This will never render</p>;
}