Error Boundary Component for React

1import React, { Component } from "react";
2import { ReactComponent as Icon } from "../../commons/svg/emojiError2.svg";
3import "./index.scss";
4
5const ErrorComponent = () => {
6  const onClick = () => {
7    window.history.back();
8    setTimeout(() => {
9      window.location.reload();
10    }, 400);
11  };
12  
13  return (
14    <div className="error_boundry">
15      <p className="title"> Oops! Something went wrong...</p>
16      <div className="error_emoji">
17        <Icon />
18      </div>
19      <div className="flex  flex--align-items-end">
20        <button
21          className="btn  btn--blue"
22          type="button"
23            onClick={onClick}
24        >
25          Go back
26        </button>
27        <a className="btn" href="/">
28          Back to Home
29		</a>
30      </div>
31    </div>
32  );
33};
34
35export default class ErrorBoundry extends Component {
36  constructor(props) {
37    super(props);
38    this.state = { hasError: false };
39  }
40
41  // You can also log the error to an error reporting service
42  // componentDidCatch(error, info) {
43  //   logErrorToMyService(error, info);
44  // }
45  
46  static getDerivedStateFromError(error) {
47    // Update state so the next render will show the fallback UI.
48    return { hasError: true };
49  }
50  
51  render() {
52    if (this.state.hasError) {
53      // You can render any custom fallback UI
54      return <ErrorComponent />;
55    }
56    return this.props.children;
57  }
58}
59

1import * as ReactDOMClient from "react-dom/client";
2import ErrorBoundary from './components/error-boundary';
3
4const container = document.getElementById("root");
5const root = ReactDOMClient.createRoot(container);
6
7root.render(
8  <Provider store={store}>
9      <ErrorBoundary>
10          <App />
11       </ErrorBoundary>
12   </Provider>
13);