GithubHelp home page GithubHelp logo

react-transform-catch-errors's Introduction

This Project Is Deprecated

React Hot Loader 3 is on the horizon, and you can try it today (boilerplate branch, upgrade example). It fixes some long-standing issues with both React Hot Loader and React Transform, and is intended as a replacement for both. The docs are not there yet, but they will be added before the final release. For now, this commit is a good reference.

react-transform-catch-errors

react-transform channel on discord

A React Transform that catches errors inside render() function and renders a React component with an error message instead.

It’s up to you to choose the React component to render an error message. For example, you may use redbox-react that imitates React Native “red screen of death”.

🚧🚧🚧🚧🚧

This is highly experimental tech. If you’re enthusiastic about hot reloading, by all means, give it a try, but don’t bet your project on it. Either of the technologies it relies upon may change drastically or get deprecated any day. You’ve been warned 😉 .

This technology exists to prototype next-generation React developer experience. Please don’t use it blindly if you don’t know the underlying technologies well. Otherwise you are likely to get disillusioned with JavaScript tooling.

No effort went into making this user-friendly yet. The goal is to eventually kill this technology in favor of less hacky technologies baked into React. These projects are not long term.

Installation

First, install the Babel plugin:

npm install --save-dev babel-plugin-react-transform

Then, install the transform:

npm install --save-dev react-transform-catch-errors

Finally, install the component for rendering errors, for example:

npm install --save-dev redbox-react

You may also use a custom component instead.

Now edit your .babelrc to include extra.babel-plugin-react-transform.
It must be an array of the transforms you want to use:

{
  "presets": ["es2015", "stage-0"],
  "env": {
    // only enable it when process.env.NODE_ENV is 'development' or undefined
    "development": {
      "plugins": [["react-transform", {
        "transforms": [{
          "transform": "react-transform-catch-errors",
          // now go the imports!
          "imports": [

            // the first import is your React distribution
            // (if you use React Native, pass "react-native" instead)

            "react",

            // the second import is the React component to render error
            // (it can be a local path too, like "./src/ErrorReporter")

            "redbox-react"

            // the third import is OPTIONAL!
            // when specified, its export is used as options to the reporter.
            // see specific reporter's docs for the options it needs.

            // it will be imported from different files so it either has to be a Node module
            // or a file that you configure with Webpack/Browserify/SystemJS to resolve correctly.
            // for example, see https://github.com/gaearon/babel-plugin-react-transform/pull/28#issuecomment-144536185

            // , "my-reporter-options"
          ]
        }]
        // note: you can put more transforms into array
        // this is just one of them!
      }]]
    }
  }
}

It is up to you to ensure that the transform is not enabled when you compile the app in production mode. The easiest way to do this is to put React Transform configuration inside env.development in .babelrc and ensure you’re calling babel with NODE_ENV=development. See babelrc documentation for more details about using env option.

License

MIT

react-transform-catch-errors's People

Contributors

apaleslimghost avatar colinmeinke avatar davecoates avatar gaearon avatar hoegrammer avatar jamiebuilds avatar jedwards1211 avatar mischkew avatar smashercosmo avatar weblancaster avatar zalmoxisus avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

react-transform-catch-errors's Issues

Document usage of custom ErrorReporter component

It would be great if there were some more documentation on how to use a local component as the ErrorReporter. I have been struggling with this for some time.

Using relative paths did not work, and setting a webpack alias did not seem to work either.

I get undefined as the value of ErrorReporter if I use a default export for the component:
export default class AppError extends...
And i get an empty object if using module.exports.
module.exports = AppError

Would be useful to turn off in test env as well as production

When running unit tests the errors are caught which means you don't get an informative stack trace. Might it be useful to treat NODE_ENV=test the same as production, or perhaps to allow the user to set options as to which envs to catch errors in?

Broken source maps?

I'm still confused about what's going on here, but when I use this with redbox-react or delicate-error-reporter, the source maps don't quite seem to work. Here's a screenshot. You can see that it shows ProxyClass instead of App.jsx. Also the error printed to the console links directly into the webpack bundle instead of the original source.

image

This was first brought to my attention here: jedwards1211/meteor-webpack-react#40

Reproducible with the latest version of meteor-webpack-react, if you change App.jsx's render to throw an Error: jedwards1211/meteor-webpack-react@353f8c4

We are doing one weird thing in that project: serving the webpack bundle from localhost:9090 whereas the rest of the page is served by Meteor from localhost:3000.

Any ideas what would be the issue?

Does not catch errors inside components that are decorated

This is interesting, I have been debugging this for a while, but I've noticed that when a component is wrapped by a decorator, thrown errors in its render function do not get caught!

// index.js

require('!!file?name=index.html!../index.html');

import React from 'react';
import ReactDOM from 'react-dom';

const mountNode = document.getElementById('app');

const loading = Component => {
  return class extends React.Component {
    render() {
      return <Component/>;
    }
  };
};

@loading
class App extends React.Component {
  render() {
    throw new Error('hello');

    return <div>
      App2
    </div>;
  }
}

ReactDOM.render(
  <App/>,
  mountNode
);

This is my babel config:

// babel config

const babelConfig = {
  presets: ['react', 'es2015', 'stage-0'],
  env: {
    development: {
      presets: ['react-hmre'],
    },
  },
};

Incorrect error stack

When error occurs in render method, console.error(err) will be called and it will show wrong callstack:
wrong-stack

I think you should use console.error(err.stack) instead. It will produce correct call stack:
right-stack

New release?

Hi guys, could you make a new release so we can take advantage of PR #10?

react-transform-catch-errors and webpack-dev-server

Currently trying to get react-transform-catch-errors to work with redbox-react while still using webpack-dev-server. I was able to get the react-transform-hmr to work with webpack-dev-server but am still not able to set it up with react-transform-catch-errors. Is this possible or does it have to be set up with webpack-hot-middleware (and express)?

.babelrc in npm installation

I tried to install react-transform-catch-errors using npm install.

However, the .babelrc in the installation still had the {stage:0} option which is now deprecated.

Please fix this.

Server-side code transpiling issues with redbox-react

I use babel to transpile my server-side code, but as window is not defined on the server, adding the react-transform-catch-errors transformation to .babelrc throws an error. The server.js example given here just uses ES5 syntax, but I would rather have babel transpile my ES6 code.

Is there a good way around this issue? I've been fiddling around with the rc file and require hooks but didn't find a way to make this work.

Plugin tries to wrap PropTypes.shape

Source:

import React, { PropTypes } from "react";
import { PureComponent } from "react-pure-render";

export default class Table extends PureComponent {
    static propTypes = {
        columns: PropTypes.arrayOf(PropTypes.shape({
            title: PropTypes.string,
            render: PropTypes.func
        })),
        data: PropTypes.array
    };

    ...

Output

var Table = _wrapComponent("Table")((_temp = _class = function (_PureComponent) {
    _inherits(Table, _PureComponent);

    function Table() {
        _classCallCheck(this, Table);

        return _possibleConstructorReturn(this, Object.getPrototypeOf(Table).apply(this, arguments));
    }

    _createClass(Table, [{
        key: "render",
        value: function render() {
             ...
        }
    }]);

    return Table;
}(_reactPureRender.PureComponent), _class.propTypes = {
    columns: _react2.PropTypes.arrayOf(_wrapComponent("_component")(_react2.PropTypes.shape({
        title: _react2.PropTypes.string,
        render: _react2.PropTypes.func
    }))),
    data: _react2.PropTypes.array
}, _temp));

And it fails on the line

var originalRender = ReactClass.prototype.render;

with the following error because PropTypes.Shape.prototype.render is undefined

Uncaught TypeError: Cannot read property 'render' of undefined
wrapToCatchErrors @ index.js:30(anonymous function)
@ Table.js:65(anonymous function)
@ Table.js:151(anonymous function) 
...

Doesn't work when used together with babel-plugin-transform-decorators-legacy

Yep, I know that both transforms are use-on-your-own-risk kind of thing) But just FYI, these transforms don't work together. You get this error in console:

Uncaught TypeError: Cannot set property render of #<ComponentName> which has only a getter

removing either babel-plugin-transform-decorators-legacy or react-transform-catch-errors fixes the issue.

[question] Webpack transform?

First of all, I love this idea and I've been waiting for it ever since your react-europe talk. But I don't use Babel, I write CJSX with Webpack. Any plans to make this a Webpack transform too? Thanks.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.