CODEWITHSUNDEEP
javascriptreactjsbugsnag
Vikas Roy
Vikas Roy

Reputation: 864

BugSnag ErrorBoundary not showing custom error page in react

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?

Upvotes: 1

Views: 816

Answers (1)

Bugsnag Support
Bugsnag Support

Reputation: 411

If the error happens outside of the React component tree then it wouldn't be caught by the ErrorBoundary and the Fallback component won't be rendered.

If you have a reproduction case which triggers an error in the React component tree where this isn't working then please contact us at Bugsnag Support and we'll take a look.

Upvotes: 2

Related Questions