prevent reload of page if an error occurs in onClick event handler

[MeiKatz]

Solves: #6709

1. catch exception of onClick
2. prevent default event handler
3. re-throw exception

[timdorr]

Perfect. Can we add a test?

[StringEpsilon]

@MeiKatz Unit test:

it("prevents default on exception in onClick callback", () => {
  const memoryHistory = createMemoryHistory();
  memoryHistory.push = jest.fn();
  const onClick = () => { throw new Error };
  const mockPreventDefault = jest.fn();

  renderStrict(
    <Router history={memoryHistory}>
      <Link to="/foo/bar" onClick={onClick}>link</Link>
    </Router>,
    node
  );
  console.error = jest.fn(); // keep console clean. Dunno why the catch doesn't do the job correctly.
  try {
    const a = node.querySelector("a");
    ReactTestUtils.Simulate.click(a, {
      defaultPrevented: false,
      preventDefault: mockPreventDefault,
      button: 1,
    });
  } catch (e) {
    // nothing to do.
  }

  console.error.mockRestore();
  expect(mockPreventDefault).toHaveBeenCalled();
  expect(memoryHistory.push).toBeCalledTimes(0);
})

[MeiKatz]

@StringEpsilon I have tried something similar to yours with an error boundary but was stuck at the same problem like you: why does console.error print an error even so I catch it? Nevertheless, I merged the best of your test and mine together 😄

[timdorr]

That works for me. Thanks!