[go: up one dir, main page]
Scribd
Upload
29 views2 pages

Error Boundaries in React Updated

Error Boundaries in React are components that catch JavaScript errors in their child component tree, log them, and display a fallback UI. They are created using class components with specific lifecycle methods and only catch errors during rendering, lifecycle methods, and constructors. Important limitations include not catching errors in event handlers, asynchronous code, or server-side rendering, and it's recommended to use multiple boundaries for better isolation of UI parts.

Uploaded by

Sabas Singh
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
29 views2 pages

Error Boundaries in React Updated

Error Boundaries in React are components that catch JavaScript errors in their child component tree, log them, and display a fallback UI. They are created using class components with specific lifecycle methods and only catch errors during rendering, lifecycle methods, and constructors. Important limitations include not catching errors in event handlers, asynchronous code, or server-side rendering, and it's recommended to use multiple boundaries for better isolation of UI parts.

Uploaded by

Sabas Singh
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 2

Error Boundaries in React

What are Error Boundaries?


Error Boundaries are React components that catch JavaScript errors anywhere in their child component tree, log those
errors, and display a fallback UI instead of crashing the whole app.
They catch errors during:
- Rendering
- Lifecycle methods
- Constructors of child components

How to Create an Error Boundary


You create an Error Boundary by writing a class component with:
- static getDerivedStateFromError(error)
- componentDidCatch(error, info)

Example Code:
import React from 'react';

class ErrorBoundary extends React.Component {


constructor(props) {
super(props);
this.state = { hasError: false };
}

static getDerivedStateFromError(error) {
return { hasError: true };
}

componentDidCatch(error, errorInfo) {
console.error("Error caught by ErrorBoundary:", error, errorInfo);
}

render() {
if (this.state.hasError) {
return <h1>Something went wrong.</h1>;
}
return this.props.children;
}
}

export default ErrorBoundary;

Important Points:
- Only class components can be Error Boundaries (React 18).
- Error boundaries do not catch errors in:
- Event handlers (use try/catch inside the handler)
- Asynchronous code like setTimeout
- Server-side rendering
- Use multiple boundaries to isolate different parts of the UI.

Conclusion:
Error Boundaries in React

Error Boundaries make React apps more robust by preventing whole app crashes and showing a friendly fallback UI
when parts of the UI fail.

You might also like