React-hot-loader: [3.0] Ability to display errors in console instead of redbox

[icek]

Errors displayed in Redbox are useless for me especially when it comes to line numbers.

When sourcemaps are used, Chrome console can show exact error location (eg: SomeComponent.js:12:13) and you can jump directly into that file and chrome will highlight line causing error. Redbox on the other hand show line number in a bundled file (eg: bundle.js:33052:13) if you are patient you can search for this line...

Example of how useless it is:

I digged a little and found that there is a property errorReporter on AppContainer so I tried to implement custom component for redirecting errors back to console, but I don't know how to make it work. Here is my initial approach:

import React from "react";

export default class NormalConsoleErrorInsteadOfRedbox extends React.Component {
    componentDidMount() {
        console.error(this.props.error);
    }

    componentDidUpdate () {
        console.error(this.props.error);
    }

    render() {
        return null; // <div/>
    }
}

used like this:

ReactDOM.render(
    <AppContainer errorReporter="NormalConsoleErrorInsteadOfRedbox">
        <Root/>
    </AppContainer>,
    rootEl
);

and now I get:

Warning: Unknown prop `error` on <NormalConsoleErrorInsteadOfRedbox> tag. Remove this prop from the element. For details, see https://fb.me/react-unknown-prop
    in NormalConsoleErrorInsteadOfRedbox (created by AppContainer)
    in AppContainer

React 15.4.2, react-hot-loader 3.0.0-beta.6

[icek]

Nevermind, here is a quick workaround:

delete AppContainer.prototype.unstable_handleError;

ReactDOM.render(
    <AppContainer>
        <Root/>
    </AppContainer>,
    rootEl
);

and same error in console:

[jtomaszewski]

Same here. Thanks for the workaround @icek , it works for me for now.

I think if redbox would show the error AND log it in the console at the same time, would be okay. Could be switched on/off with a prop.

[calesce]

I'm thinking we can add an <AppContainer> without an unstable_handleError method. Until we either get better (or faster) source maps as well as better error boundaries in React, the Redbox is far from perfect.

[AlexKvazos]

Can't we make it so that Redbox doesn't stop the error from logging into the console with proper sourcemaps?

Edit: suggested originally by @jtomaszewski

[wkwiatek]

I updated PR #494 so that the default behaviour will be console.error.

However, if you like RedBox for some reason there will be a possibility to add custom error catcher (documented in docs/TipsAndTricks.md).

There's still an issue opened for tracking errors #164, so I believe we can continue thinking about better approach. Nice solution would be to have 'redbox' only on a component that fails, and it can be achieved on react-proxy level.

Would that work for most of you guys?

[vincent-ly]

@icek Thanks for the quick fix!

[jeswin]

@icek The workaround saved my day. The red box is a poor developer experience compared to full call stack information in the console.

[twig-openlearning]

Workaround saved my sanity. I don't know why we're forced to use something like RedBox that provides little benefit.