6

I'm having an issue with exception handling with react-router@3.0.0

My router is attached like this:

try {
  ReactDOM.render(<Router history={appHistory}>
    <Route path='/' component={Wrapper}>
      <Route path='bad' component={BadComponent}/>
    </Route>
  </Router>, domElement);
} catch(ex) {
  ReactDOM.render(<Exception ex={ex}/>, domElement);
}

My issue is that if Wrapper throws a render exception we end up in the catch block. Great!

If Wrapper works fine, but BadComponent throws a render exception we do not. Boo!

If we reach this point, then the router completely stops working and we can't navigate to any known good routes.

The react-router API doesn't mention error handling, so I'm a little stuck.

Is there a way of getting the exception back to the top layer so it can fail gracefully?

user7637745
  • 965
  • 2
  • 14
  • 27
Charlie
  • 81
  • 5
  • I don' think there's a way to do this. But I'm wondering... why do you want to catch render exceptions? Why not just debug the component? – Chris Dec 12 '16 at 15:00
  • It's more about the user experience if I've made a typo than a development aid.Catching exceptions in components and breaking the whole render tree seems really brittle and unlike other React libraries I've used. Surely, the router should log and throw? – Charlie Dec 14 '16 at 07:19
  • I'm quite sure that what you're asking isn't possible, unless you wrap every single component in a try catch. Again though, you should be testing your components before pushing your build to your live environment. – Chris Dec 14 '16 at 23:56

1 Answers1

0

I know this is probably too late to answer, and you might have found a solution or even not using this code anymore.

In case you haven't found out yet, check the error boundaries that react offers https://reactjs.org/docs/error-boundaries.html

Iban Dominguez Noda
  • 858
  • 9
  • 16