Issue 1:
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

Issue 2:
I'm trying to make use of componentDidCatch in the React 16 beta. I already had a global window error handler which was working fine, but it unexpectedly catches errors that I would expect componentDidCatch to have handled. That is, component-local errors are being treated as window-global errors in dev builds.

The problem seems to stem from invokeGuardedCallbackDev in ReactErrorUtils.js. I think that this entire __DEV__ block of code is problematic. The stated rational is:

// In DEV mode, we swap out invokeGuardedCallback for a special version
// that plays more nicely with the browser's DevTools. The idea is to preserve
// "Pause on exceptions" behavior. Because React wraps all user-provided
// functions in invokeGuardedCallback, and the production version of
// invokeGuardedCallback uses a try-catch, all user exceptions are treated
// like caught exceptions, and the DevTools won't pause unless the developer
// takes the extra step of enabling pause on caught exceptions. This is
// untintuitive, though, because even though React has caught the error, from
// the developer's perspective, the error is uncaught.

This is misguided because it's not about pausing on exceptions, it's about "pause on uncaught exceptions." However, componentDidCatch makes exceptions caught!

Rather than switching on prod vs dev and using try/catch in prod and window's error handler in dev, React should always use try/catch, but rethrow if you reach the root without hitting a componentDidCatch handler. This would preserve the correct "pause on uncaught exceptions" behavior without messing with global error handlers.