Skip to content

Commit

Permalink
Initial commit
Browse files Browse the repository at this point in the history
  • Loading branch information
gaearon committed Sep 3, 2015
0 parents commit adce2f3
Show file tree
Hide file tree
Showing 7 changed files with 141 additions and 0 deletions.
4 changes: 4 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
node_modules
lib
*.log
DS_Store
13 changes: 13 additions & 0 deletions CODE_OF_CONDUCT.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
# Contributor Code of Conduct

As contributors and maintainers of this project, we pledge to respect all people who contribute through reporting issues, posting feature requests, updating documentation, submitting pull requests or patches, and other activities.

We are committed to making participation in this project a harassment-free experience for everyone, regardless of level of experience, gender, gender identity and expression, sexual orientation, disability, personal appearance, body size, race, age, or religion.

Examples of unacceptable behavior by participants include the use of sexual language or imagery, derogatory comments or personal attacks, trolling, public or private harassment, insults, or other unprofessional conduct.

Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct. Project maintainers who do not follow the Code of Conduct may be removed from the project team.

Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by opening an issue or contacting one or more of the project maintainers.

This Code of Conduct is adapted from the [Contributor Covenant](http://contributor-covenant.org), version 1.0.0, available at [http://contributor-covenant.org/version/1/0/0/](http://contributor-covenant.org/version/1/0/0/)
59 changes: 59 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
# react-transform-catch-errors

A [React Transform](https://github.com/gaearon/babel-plugin-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](https://github.com/KeywordBrain/redbox-react) that imitates React Native “red screen of death”.

## Installation

First, install the [Babel plugin](https://raw.githubusercontent.com/gaearon/babel-plugin-react-transform):

```
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:

```js
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:

```js
{
"stage": 0,
"plugins": [
"react-transform"
],
"extra": {
// must be defined and be an array
"react-transform": [{
"target": "react-transform-catch-errors",
// now go the imports!
// the first import is your React distribution
// (if you use React Native, pass "react-native" instead)
// the second import is the React component to render error
// (it can be a local path too, like "./src/ErrorReporter")
"imports": ["react", "redbox-react"]
}]
// note: you can put more transforms into array
// this is just one of them!
}
}
```

This transform has no effect when `process.env.NODE_ENV` is set to `'production'`.

## License

MIT
33 changes: 33 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
{
"name": "react-transform-catch-errors",
"version": "0.1.0",
"description": "React Transform that catches errors inside React components",
"main": "lib/index.js",
"repository": {
"type": "git",
"url": "git+https://github.com/gaearon/react-transform-catch-errors.git"
},
"author": "Dan Abramov <dan.abramov@me.com>",
"license": "MIT",
"bugs": {
"url": "https://github.com/gaearon/react-transform-catch-errors/issues"
},
"homepage": "https://github.com/gaearon/react-transform-catch-errors#readme",
"scripts": {
"clean": "rimraf lib",
"build": "babel src --out-dir lib",
"prepublish": "npm run clean && npm run build"
},
"keywords": [
"react-transform",
"react",
"reactjs",
"errors",
"rhl",
"dx"
],
"devDependencies": {
"babel": "^5.8.23",
"rimraf": "^2.4.3"
}
}
24 changes: 24 additions & 0 deletions src/development.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
export default function catchErrors({ filename, components, imports }) {
const [React, ErrorReporter] = imports;
if (!React || !React.Component) {
throw new Error('imports[0] for react-transform-catch-errors does not look like React.');
}
if (typeof ErrorReporter !== 'function') {
throw new Error('imports[1] for react-transform-catch-errors does not look like a React component.');
}

return function wrapToCatchErrors(ReactClass, componentId) {
const originalRender = ReactClass.prototype.render;
ReactClass.prototype.render = function tryRender() {
try {
return originalRender.apply(this, arguments);
} catch (err) {
console.error(err);
return React.createElement(ErrorReporter, {
error: err
});
}
};
return ReactClass;
};
}
5 changes: 5 additions & 0 deletions src/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
if (process.env.NODE_ENV === 'production') {
module.exports = require('./production');
} else {
module.exports = require('./development');
}
3 changes: 3 additions & 0 deletions src/production.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
export default function noop() {
return ReactClass => ReactClass;
}

0 comments on commit adce2f3

Please sign in to comment.