Cross-origin error passed to componentDidCatch incorrectly

[bvaughn]

tl;dr React is passing "A cross-origin error was thrown" to componentDidCatch when there are no cross-origin scripts.

See this discussion thread and this repro case.

I was able to confirm the behavior. A quick look at onError showed a null event.error.

[bvaughn]

cc @acdlite, @gaearon, @leidegre

[gaearon]

Could be something funky caused by e.g. eval?

[bvaughn]

Not sure I understand. Are you asking if the user-code is maybe using eval?

The repro is just accessing a prop on a null value.

[bvaughn]

Looks like the repro case (starting with the tessin_mini repo) can be reduced to:

import React, { Component } from "react";

export default class App extends Component {
  state = {
    doError: false,
  };

  render() {
    return (
      <ErrorBoundary>
        {this.state.doError
          ? <ComponentThatFails/>
          : <button onClick={() => this.setState({doError: true})}>Click me</button>}
      </ErrorBoundary>
    )
  }
}

class ErrorBoundary extends Component {
  state = {
    error: null
  };

  componentDidCatch(error) {
    this.setState({error})
  }

  render() {
    if (this.state.error) {
      return this.state.error.message;
    }
    return this.props.children
  }
}

class ComponentThatFails extends Component {
  render() {
    const data = null;
    return <p>{data.foo}</p>;
  }
}

The console will log:

Uncaught TypeError: Cannot read property 'foo' of null

But the error we pass to componentDidCatch will be:

A cross-origin error was thrown...

[bvaughn]

I think this has something to do with the bundling code in the tessin_mini repo. The same code in a CRA-created app works as expected.

Maybe it has to do with the SSR logic?

[bvaughn]

Creating a small, standalone project with no SSR/Webpack/etc, I am able to reproduce the unexpected behavior only for Chrome when loading content via file://....

Here's what I'm seeing:

Browser	standalone file://	standalone http://	tessin_mini dev	tessin_mini prod
Chrome	✖ 1	✓	✖	✓ 2
Firefox	✓	✓	✓	✓
Safari	✓	✓	✓	✓

^1: I believe Chrome considers files loaded with file:// to always be a different domain. If I launch Chrome with the --allow-file-access-from-files flag, the standalone file works with when loaded via the file:// protocol as well.

^2: Also worth adding that the tessin_mini example works as expected in production mode (b'c we use a regular try/catch). The unexpected cross-origin error only affects dev-mode.

[gaearon]

By eval I meant the Webpack devtool: "eval" setting which is commonly used and turns every module into eval call so that it's shown separately in DevTools despite no sourcemaps. But seems like we determined that isn't the issue.

[bvaughn]

😭 Thanks for clarifying!

You're absolutely right. That was the cause. Removing that property from the Webpack config clears the issue up in the tessin_mini project.

[gaearon]

We can probably encourage people to stop using it and use cheap-module-source-map instead. It's just as fast (afaik) and doesn't have some issues.

[bvaughn]

It's interesting that I use the devtool: "eval" setting in react-virtualized's Webpack config also but it doesn't show this error.

I'm not super familiar with Webpack. 😄

Edit This was working for the RV project b'c of redbox-react + react-transform-catch-errors.

[bvaughn]

For what it's worth, I ran through the all of the devtools settings and here's what I found:

devtool	works?
default	✖
eval	✖
cheap-eval-source-map	✖
cheap-source-map	✓
cheap-module-eval-source-map	✖
cheap-module-source-map	✓
eval-source-map	✖
source-map	✓
inline-source-map	✓
hidden-source-map	✓
nosources-source-map	✓

It looks like the default setting (and any of the *eval ones) will cause problems.

[bvaughn]

I'll put up a PR that adds addition verbiage to the cross-origin (dev-mode) error to mention this.