I am working on a SPA using React.
Currently, in production, user only sees a blank page when the app crashes.
So, I am trying to set a custom error page.
Since I am using BugSnag for error monitoring in my react app; I have used the ErrorBoundary provided by BugSnag.
Following is the code for initializing and placing the ErrorBoundary.
const bugsnagClient = bugsnag('8XXXXXXXXXXXXXXXbac')
bugsnagClient.use(bugsnagReact, React)
const ErrorBoundary = bugsnagClient.getPlugin('react')
ReactDOM.render(
<ErrorBoundary FallbackComponent={FallBack}>
<IntlProvider locale={language} messages={messages[language]}>
<Provider store={store}>
<App />
</Provider>
</IntlProvider>
</ErrorBoundary>,
document.getElementById('root')
);
Following is the custom error code:
import React, { Component } from 'react';
import fallbackVector from '../assets/500-error-vector.svg';
import { Link } from "react-router-dom";
export default class FallBack extends Component{
render(){
return(
<div className="container-fluid mt-3 mb-3 mt-md-5 mb-md-5">
<div className="row">
<div className="col-12 col--404 text-center">
<img src={fallbackVector} alt="page not found" />
<p className="mt-5 font-weight-bold">Something went wrong!</p>
<Link to="/">
<button className="btn btn-primary mt-3">GO TO HOME</button>
</Link>
</div>
</div>
</div>
)
}
}
Somehow, it is still showing the blank page.
There can be a possibility that error is happening outside of the React component tree and therefore it is not being caught by ErrorBoundry.
Any ideas about how to solve this issue?
