I'm trying to send the user to a generic error page when the App breaks, thing is I'm trying with the ErrorBoundary method and then rendering out the Redirect;

export default class ErrorBoundary extends Component {
    state = { has_error: false }

    ponentDidCatch(error, info)
        this.setState({ has_error: true });
    }


    render() {
        if (this.state.has_error)
            return <Redirect to="/somewhere/else" />
        }
        return this.props.children;
    }
};

And then using the ErrorBoundary to wrap all the routes and sub ponents inside the Router

<Router history={history}>
    <ErrorBoundary>
        <Header />
        <Switch>
            <Route exact path="/" ponent={Home} />
            <Route
                path="/createManager/:managerId"
                ponent={CreateManager}
            />
            <Route path="/login" ponent={LoginComp} />
            <Route path="/test" ponent={Test} />
            <Route path="/register" ponent={RegisterAccount} />
            <Route ponent={NotFound} />
        </Switch>
        <Footer />
    </ErrorBoundary>
</Router>

The ponentDidCatch is never triggered, thus, never leaving the current error page, neither in the dev nor prod version. How can I send the user to a X route when the App breaks or tries to throw an error?

In order to trigger an error, I leave one Component with an empty prop, and later on click trying to use the function that should be passed in the prop.

I'm trying to send the user to a generic error page when the App breaks, thing is I'm trying with the ErrorBoundary method and then rendering out the Redirect;

export default class ErrorBoundary extends Component {
    state = { has_error: false }

    ponentDidCatch(error, info)
        this.setState({ has_error: true });
    }


    render() {
        if (this.state.has_error)
            return <Redirect to="/somewhere/else" />
        }
        return this.props.children;
    }
};

And then using the ErrorBoundary to wrap all the routes and sub ponents inside the Router

<Router history={history}>
    <ErrorBoundary>
        <Header />
        <Switch>
            <Route exact path="/" ponent={Home} />
            <Route
                path="/createManager/:managerId"
                ponent={CreateManager}
            />
            <Route path="/login" ponent={LoginComp} />
            <Route path="/test" ponent={Test} />
            <Route path="/register" ponent={RegisterAccount} />
            <Route ponent={NotFound} />
        </Switch>
        <Footer />
    </ErrorBoundary>
</Router>

The ponentDidCatch is never triggered, thus, never leaving the current error page, neither in the dev nor prod version. How can I send the user to a X route when the App breaks or tries to throw an error?

In order to trigger an error, I leave one Component with an empty prop, and later on click trying to use the function that should be passed in the prop.

• javascript
• reactjs
• ecmascript-6
• react-router
• react-dom

• what exactly isn't working? – Sagiv b.g Commented Apr 3, 2018 at 22:01
• The ponentDidCatch is never triggered, thus, never leaving the current error page – Nicolas M. Pardo Commented Apr 3, 2018 at 22:02
• Where have you defined ErrorBoundary ponent – Aaqib Commented Apr 3, 2018 at 22:04
• can you share the code that throws the error as well? – Sagiv b.g Commented Apr 3, 2018 at 22:08
• Sorry, made an small edit, since I had copy pasted from another ponent I kept the class name but it doesn't affect since it's the default export and the nave is given when importing in the router p import ErrorBoundary from "./ErrorBoundary"; – Nicolas M. Pardo Commented Apr 3, 2018 at 22:08

1 Answer 1

ponentDidCatch only triggers if the error is thrown inside the render method.

The reason why your ponentDidCatch is not triggered is because events like onClick is not in the render lifecycle. So ponentDidCatch won't be able to catch this kind of error.

One way to test out the your ponentDidCatch is throwing an error inside the render method.

For errors outside of the render method you have to be careful and add try/catches in places you think might have errors in your action handlers.

Also a good way to prevent undefined onClick is to add flow or typescript.

https://reactjs/blog/2017/07/26/error-handling-in-react-16.html#ponent-stack-traces

React 16 prints all errors that occurred during rendering to the console in development, even if the application accidentally swallows them. In addition to the error message and the JavaScript stack, it also provides ponent stack traces. Now you can see where exactly in the ponent tree the failure has happened: