**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;
}


What are Error Boundaries in React?