-
Notifications
You must be signed in to change notification settings - Fork 23
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
0 parents
commit adce2f3
Showing
7 changed files
with
141 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,4 @@ | ||
node_modules | ||
lib | ||
*.log | ||
DS_Store |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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/) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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" | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; | ||
}; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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'); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
export default function noop() { | ||
return ReactClass => ReactClass; | ||
} |