import React, { Component } from 'react';
class ErrorBoundary extends Component {
constructor(props) {
super(props);
this.state = {
hasError: false,
};
}
static getDerivedStateFromError(error) {
return { hasError: true };
}
componentDidCatch(error, info) {
console.log(error);
console.log(info);
}
render() {
if (this.state.hasError) {
return (
<div className="container my-5 d-flex">
<div className="row">
<div className="col-md-6">
<img className="img-fluid" src="/images/500Error.svg" />
</div>
<div className="col-md-6 d-flex align-items-center justify-content-center">
<div className="ps-md-5 ms-md-5 ps-0 ms-0">
<div>
<h2>Internal Server Error</h2>
<button
className="btn btn-primary rounded-pill fw-bold mt-4 p-1 p-md-2"
onClick={() => router.push(`/`)}
>
<h6 className="my-2 mx-4">Back To Home</h6>
</button>
</div>
</div>
</div>
</div>
</div>
);
}
return this.props.children;
}
}
export default ErrorBoundary;
<ErrorBoundary>
<MyComponent />
</ErrorBoundary>