**Error boundaries** can help catch tricky errors that occur during the rendering phase. This error causes the app to unmount completely, and a blank page to appear.

>This method catches JS errors, logs them, and then displays a fallback UI.



Error Boundaries make use of two methods that are already present in the React Components, as follows:

```
class ErrorBoundary extends Component {
  state = {
    error: null
  }

  static getDerivedStateFromError(error) {
  // Update state so next render shows fallback UI.
  return { error: error };
}

  componentDidCatch(error, info) {
  // Log the error to an error reporting service
  logErrorToMyService(error, info);
}

  render() {
    if (this.state.error) {
      // You can render any custom fallback UI
      return <p>There has been an error</p>;
    }
    return this.props.children;
  }
};
```

> Note: Error boundaries only catch errors in the components below them in the tree, not within themselves.

This method works exactly like the `catch{}` or the `try/except` method in that it will propagate to the closest error boundary -- the only difference is that it works only for the components.

> <b>Note</b>: If an error is not caught by the error boundary, it will cause the whole component to unmount.



import React from 'react';

export default class BuggyCounter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { counter: 1 };
    this.handleClick = this.handleClick.bind(this);
  }
  //increment the counter
  handleClick() {
    this.setState(({counter}) => ({
      counter: counter + 1
    }));
  }
  
  render() {
    //throw error on 5
    if (this.state.counter === 5) {
      throw new Error('Counter Crashed');
    }
    return (
      <div>
        <h2> {this.state.counter} </h2>
        <button onClick={this.handleClick}> + </button>
      </div>
      );
  }
}

import React from 'react';

export default class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { error: null, errorInfo: null };
  }
  //when error update state
  componentDidCatch(error, errorInfo) {
  this.setState({
      error: error,
      errorInfo: errorInfo
    })
 }
  
  render() {
    //if error, show error
    if (this.state.errorInfo) {
      return (
        <div>
          <h3>Error.</h3>
          {this.state.error && this.state.error.toString()}
        </div>
      );
    }
    return this.props.children;
  }  
}

import React from 'react';

import ReactDOM from 'react-dom';
import App from './app.js';

ReactDOM.render(
  <App />, 
  document.getElementById('root')
);


import React from 'react';
// Error Boundary Class
import ErrorBoundary from './error.js'
// Buggy Counter Class
import BuggyCounter from './counter.js'

//App
function App() {
  return (
    <div>
      <p>
        Click on the number, to increment. The counter will crash when it reaches 5.
      </p>
      <hr />
      <ErrorBoundary>
        <h3>These two counters are inside the same error boundary. If one crashes, the other is also replaced.</h3>
        <BuggyCounter />
        <BuggyCounter />
      </ErrorBoundary>
      <hr />
      <h3>These two counters are each inside of their own error boundary therefore, if one crashes, the other is not affected.</h3>
      <ErrorBoundary><BuggyCounter /></ErrorBoundary>
      <ErrorBoundary><BuggyCounter /></ErrorBoundary>
    </div>
  );
}
export default App;



import React from 'react';
import { shallow, configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

configure({ adapter: new Adapter() });

import HelloWorld from './app';

var TestResult = function() {
    this.succeeded = false;
    this.reason = "";
    this.input = "";
    this.expected_output = "";
    this.actual_output = "";
}

export const executeTests = function() {

  var results = [];

  result = new TestResult();
  result.input = 'HelloWorld Component';
  result.expected_output = "span containing text 'Hello World'"

  let wrapper = shallow(<HelloWorld />);

  // Call your Challenge function here.

  let type = wrapper.type();
  let testSuccessful = true;
  let failureReason;

  if (type !== 'span') {
    testSuccessful = false;
    failureReason = "You need to render exactly one span HTML element";
  } else if (wrapper.props().children != "Hello World") {
     testSuccessful = false;
     failureReason = "You have rendered wrong message in your span element";
  }

  result.actual_output = wrapper.html();

  if (testSuccessful) {
    result.succeeded = true;
    result.reason = "Succeeded"
  } else {
    result.succeeded = false;
    result.reason = failureReason;
  }

  results.push(result);

  return results;
}


React

Dart

GoJS React

Typescript React

Vue.js

What are Error Boundaries in React?

Error boundaries in React catch JS errors during rendering, log them, and display fallback UIs, preventing blank pages. They act like try/catch blocks for components.