Error event fired twice when in development mode #12093

marcellomontemagno · 2018-01-25T17:01:43Z

Do you want to request a feature or report a bug?

bug

What is the current behavior?

Error event fired twice when in development mode.

In the example you can see that '>>>>>>error' is logged twice while I only expect to see it once.

Note: this issue doesn't happen with the production version of react

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code and it doesn't have dependencies other than React. Paste the link to your JSFiddle (https://jsfiddle.net/Luktwrdm/) or CodeSandbox (https://codesandbox.io/s/new) example below:

codepen demo:
https://codepen.io/anon/pen/ppXZXP?editors=0011

static html reproducing the problem:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello World</title>
    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
  </head>
  <body>
    <div id="root"></div>
    <script type="text/babel">

      function handleErr(event){
        console.log('>>>>>>error')
      }

      window.addEventListener('error', handleErr);

      function onClick (e) {
        e.stopPropagation()
        e.preventDefault()
        throw new Error('-------------');
      }

      ReactDOM.render(
        <button onClick={onClick}>button</button>,
        document.getElementById('root')
      );

    </script>
  </body>
</html>

What is the expected behavior?

I expect to see '>>>>>>error' logged once

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?

reproduced on:

react v16.2.0
Chrome 63.0.3239.132
OSX 10.10.5

The text was updated successfully, but these errors were encountered:

aulisius · 2018-01-26T09:42:28Z

I think it has something to do with invokeGuardedCallback. in _DEV_ mode. They dispatch a fake event to preserver dev-tool behaviour. This comment block would give a better idea

// To preserve the expected "Pause on exceptions" behavior, we don't use a
// try-catch in DEV. Instead, we synchronously dispatch a fake event to a fake
// DOM node, and call the user-provided callback from inside an event handler
// for that fake event. If the callback throws, the error is "captured" using
// a global event handler. But because the error happens in a different
// event loop context, it does not interrupt the normal program flow.
// Effectively, this gives us try-catch behavior without actually using
// try-catch. Neat!

This is more like the intended behavior and not a bug.

marcellomontemagno · 2018-01-26T11:21:52Z

Hey @aulisius thanks for your reply :)

I understand the intention of preserving the expected "Pause on exceptions" behaviour of the dev tools, I doubt the react developers expect an user defined error event listener to be invoked twice with the same instance of the error though.

I'm not even sure invokeGuardedCallback is the culprit here (the user callbacks are executed in a next message of the event loop but I don't see where the extra throw is happening), I'll try to dig better in the react code asap.

As an extra info I've also noticed that 'error' events are fired twice while 'unhandledrejection' events behave correctly

gaearon · 2018-01-28T13:30:58Z

I think this is a duplicate of #10474.

marcellomontemagno changed the title ~~error event fired twice when in development mode~~ Error event fired twice when in development mode Jan 25, 2018

gaearon closed this as completed Jan 28, 2018

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Error event fired twice when in development mode #12093

Error event fired twice when in development mode #12093

marcellomontemagno commented Jan 25, 2018 •

edited

aulisius commented Jan 26, 2018 •

edited

marcellomontemagno commented Jan 26, 2018

gaearon commented Jan 28, 2018

Error event fired twice when in development mode #12093

Error event fired twice when in development mode #12093

Comments

marcellomontemagno commented Jan 25, 2018 • edited

aulisius commented Jan 26, 2018 • edited

marcellomontemagno commented Jan 26, 2018

gaearon commented Jan 28, 2018

marcellomontemagno commented Jan 25, 2018 •

edited

aulisius commented Jan 26, 2018 •

edited