Redirect to error page ReactJS and react-router

Question

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 }

    componentDidCatch(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 components inside the Router

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

The componentDidCatch 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.

The componentDidCatch is never triggered, thus, never leaving the current error page — Nicolas M. Pardo
– Nicolas M. Pardo, Commented Apr 3, 2018 at 22:02
Sorry, made an small edit, since I had copy pasted from another component 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 comp import ErrorBoundary from "./ErrorBoundary"; — Nicolas M. Pardo
– Nicolas M. Pardo, Commented Apr 3, 2018 at 22:08

Kenneth Truong · Accepted Answer · 2018-04-04 01:49:17Z

8

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

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

One way to test out the your componentDidCatch 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.org/blog/2017/07/26/error-handling-in-react-16.html#component-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 component stack traces. Now you can see where exactly in the component tree the failure has happened:

edited Apr 4, 2018 at 1:49

answered Apr 3, 2018 at 23:00

Kenneth Truong

4,1763 gold badges32 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Sagiv b.g Over a year ago

exactly. but with no code it's hard to guess this is the issue.

Collectives™ on Stack Overflow

Redirect to error page ReactJS and react-router

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related