import React from 'react';

import ErrorBoundary from './ErrorBoundary';

import MyComponent from './MyComponent';

​

const App = () => {

  return (

    <ErrorBoundary>

      <MyComponent />

    </ErrorBoundary>

  );

};

​

export default App;

// ErrorBoundary.js

​

import React, { Component } from 'react';

​

class ErrorBoundary extends Component {

  constructor(props) {

    super(props);

    this.state = {

      hasError: false,

      error: null,

      errorInfo: null,

    };

  }

​

  componentDidCatch(error, errorInfo) {

    this.setState({

      hasError: true,

      error,

      errorInfo,

    });

  }

​

  render() {

    if (this.state.hasError) {

      // You can render a fallback UI here

      return (

        <div>

          <h2>Something went wrong.</h2>

          <p>{this.state.error && this.state.error.toString()}</p>

          <p>Component Stack Error Details:</p>

          <pre>{this.state.errorInfo && this.state.errorInfo.componentStack}</pre>

        </div>

      );

    }

​

    return this.props.children;

  }

}

​

export default ErrorBoundary;