Link reloads the page if error happens in the onClick handler

[marton-levay]

Version

    "react": "16.8.3",
    "react-dom": "16.8.3",
    "react-redux": "5.0.7",
    "react-router": "5.0.0",
    "react-router-dom": "5.0.0",

Test Case

• Add any onClick handler to a Link component and make it fail

<Link to="/about"  onClick={() => {throw "up";}}> Click me! </Link>

Example:

https://codesandbox.io/s/yknnw1k959

Steps to reproduce

Add an onClick handler to a Link component which throws any type of exception or error.

Expected Behavior

Not to reload the page so I would have chance to see the error in the console

Actual Behavior

The Link navigates to the desired page but also reloads the page deleting any chance of seeing that an error even happened.

[timdorr]

That's because it's just a plain <a> and goes to the provided href if the click handler bails out and doesn't preventDefault on the event. I guess we can wrap things in a try/catch block. If you want to make a PR for it, I can take a look.

[pshrmn]

If the only real issue is that you cannot see the error because of the navigation, you can always preserve the log (in chrome, click the gear and select "Preserve log").

[StringEpsilon]

@timdorr I think #5352 does that.

[timdorr]

Old school! Yeah, if we can get that updated, that would fix it.

[MeiKatz]

I could create a new pull request with the old changes but without conflicts. But there is one thing that I would change: in the pull request mentioned by @StringEpsilon the exception in the onClick callback is catched but not shown to the user at all. Shouldn't we re-throw the exception at the end so the user can see what was wrong?

[timdorr]

Yeah, I was going to say just wrap the onClick() call with a try/catch, event.preventDefault() and re-throw in the catch block. We shouldn't be navigating when there's an error, either via the Router or the browser.

[MeiKatz]

@timdorr Good point. So shall it be.

[StringEpsilon]

@timdorr You should probably close #5352, as it's obsolete now.

[marton-levay]

Hoooly hell you guys working fast. All them kudos in world!

[MeiKatz]

@marton-levay It was not that much of a big bug 😉