Initial commit

Author: bvaughn

.babelrc

@@ -0,0 +1,46 @@
+{
+  "env": {
+    "commonjs": {
+      "plugins": [
+        "flow-react-proptypes",
+        [
+          "transform-react-remove-prop-types", {
+            "mode": "wrap"
+          }
+        ]
+      ],
+      "presets": [
+        "es2015",
+        "react",
+        "stage-1"
+      ]
+    },
+    "es": {
+      "plugins": [
+        "transform-runtime",
+        "flow-react-proptypes",
+        [
+          "transform-react-remove-prop-types", {
+            "mode": "wrap"
+          }
+        ]
+      ],
+      "presets": [
+        "es2015-rollup",
+        "react",
+        "stage-1"
+      ]
+    },
+    "production": {
+      "comments": false,
+      "plugins": [
+        "transform-runtime"
+      ],
+      "presets": [
+        "es2015",
+        "react",
+        "stage-1"
+      ]
+    },
+  }
+}

.flowconfig

@@ -0,0 +1,9 @@
+[ignore]
+
+[include]
+
+[libs]
+
+[options]
+
+[lints]

.gitignore

@@ -0,0 +1,8 @@
+.DS_Store
+build
+coverage
+dist
+node_modules
+npm-debug.log
+styles.css
+.vscode

package.json

@@ -0,0 +1,43 @@
+{
+  "name": "react-error-boundary",
+  "version": "0.0.1",
+  "description": "Simple reusable React error boundary component",
+  "main": "dist/commonjs/react-error-boundary.js",
+  "scripts": {
+    "build": "npm run build:commonjs && npm run build:es && npm run build:umd",
+    "build:commonjs": "npm run clean:commonjs && cross-env NODE_ENV=production cross-env BABEL_ENV=commonjs babel src --out-dir dist/commonjs",
+    "build:es": "npm run clean:es && cross-env NODE_ENV=production cross-env BABEL_ENV=es babel src --out-dir dist/es",
+    "build:umd": "npm run clean:umd && cross-env NODE_ENV=production webpack --config webpack.config.umd.js --bail",
+    "clean": "npm run clean:commonjs && npm run clean:es && npm run clean:umd",
+    "clean:commonjs": "rimraf dist/commonjs",
+    "clean:es": "rimraf dist/es",
+    "clean:umd": "rimraf dist/umd",
+    "flow": "flow check src",
+    "lint": "eslint 'src/**/*.js'",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "Brian Vaughn <brian.david.vaughn@gmail.com>",
+  "license": "MIT",
+  "devDependencies": {
+    "babel-cli": "^6.24.1",
+    "babel-plugin-flow-react-proptypes": "^3.4.2",
+    "babel-plugin-transform-react-remove-prop-types": "^0.4.6",
+    "babel-plugin-transform-runtime": "^6.23.0",
+    "babel-plugin-typecheck": "^3.9.0",
+    "babel-preset-es2015": "^6.24.1",
+    "babel-preset-es2015-rollup": "^3.0.0",
+    "babel-preset-react": "^6.24.1",
+    "babel-preset-stage-1": "^6.24.1",
+    "cross-env": "^5.0.1",
+    "eslint": "^4.2.0",
+    "flow-cli": "^0.0.0-pre",
+    "rimraf": "^2.6.1"
+  },
+  "dependencies": {
+    "babel-core": "^6.25.0",
+    "babel-loader": "^7.1.1",
+    "babel-runtime": "^6.23.0",
+    "prop-types": "^15.5.10",
+    "webpack": "^3.3.0"
+  }
+}

src/ErrorBoundary.js

@@ -0,0 +1,61 @@
+/** @flow */
+
+import React, { Component } from 'react';
+import ErrorBoundaryFallbackComponent from './ErrorBoundaryFallbackComponent';
+
+type Props = {
+  children?: any,
+  FallbackComponent: any,
+  onError?: (error: Error) => void,
+};
+
+type ErrorInfo = {
+  componentStack: string,
+};
+
+type State = {
+  error: ?Error,
+  info: ?ErrorInfo,
+};
+
+class ErrorBoundary extends Component {
+  props: Props;
+  state: State;
+
+  static defaultProps = {
+    FallbackComponent: ErrorBoundaryFallbackComponent,
+  };
+
+  constructor(props: Props, context: any) {
+    super(props, context);
+
+    this.state = {
+      error: null,
+      info: null,
+    };
+  }
+
+  unstable_handleError(error: Error, info: ErrorInfo):void {
+    // This method is a fallback for react <= 16.0.0-alpha.13
+    this.componentDidError(error, info);
+  }
+
+  componentDidError(error: Error, info: ErrorInfo):void {
+    this.setState({error, info});
+  }
+
+  render() {
+    const {children, FallbackComponent} = this.props;
+    const {error, info} = this.state;
+
+    if (error !== null) {
+      return (
+        <FallbackComponent componentStack={info && info.componentStack} error={error} />
+      );
+    }
+
+    return children;
+  }
+}
+
+export default ErrorBoundary;

src/ErrorBoundaryFallbackComponent.js

@@ -0,0 +1,43 @@
+/** @flow */
+
+import React from 'react';
+
+type Props = {
+  componentStack: string,
+  error: Error,
+};
+
+const ErrorBoundaryFallbackComponent = ({ componentStack, error }: Props) => (
+  <div style={style} title={error.toString()}>
+    <svg style={svgStyle} viewBox="0 0 24 24" preserveAspectRatio="xMidYMid">
+      <path d={`M20,12A8,8 0 0,0 12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20A8,8 0 0,0 20,
+        12M22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2A10,10 0 0,1 22,
+        12M15.5,8C16.3,8 17,8.7 17,9.5C17,10.3 16.3,11 15.5,11C14.7,11 14,10.3 14,
+        9.5C14,8.7 14.7,8 15.5,8M10,9.5C10,10.3 9.3,11 8.5,11C7.7,11 7,10.3 7,9.5C7,
+        8.7 7.7,8 8.5,8C9.3,8 10,8.7 10,9.5M12,14C13.75,14 15.29,14.72 16.19,
+        15.81L14.77,17.23C14.32,16.5 13.25,16 12,16C10.75,16 9.68,16.5 9.23,
+        17.23L7.81,15.81C8.71,14.72 10.25,14 12,14Z`} />
+    </svg>
+  </div>
+);
+
+const style = {
+  height: '100%',
+  maxHeight: '100vh',
+  width: '100%',
+  maxWidth: '100vw',
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+  textAlign: 'center',
+  backgroundColor: '#C00',
+  color: '#FFF',
+  boxSizing: 'border-box',
+};
+
+const svgStyle = {
+  fill: 'currentColor',
+  flex: '1 1 auto',
+};
+
+export default ErrorBoundaryFallbackComponent;

src/index.js

@@ -0,0 +1,3 @@
+/** @flow */
+
+export default from './ErrorBoundary';

webpack.config.umd.js

@@ -0,0 +1,35 @@
+const path = require('path')
+const webpack = require('webpack')
+
+module.exports = {
+  devtool: 'source-map',
+  entry: {
+    'react-error-boundary': './src/index.js'
+  },
+  output: {
+    path: path.join(__dirname, 'dist/umd'),
+    filename: '[name].js',
+    libraryTarget: 'umd',
+    library: 'ReactErrorBoundary'
+  },
+  externals: {
+    'react': 'React',
+    'react-dom': 'ReactDOM'
+  },
+  plugins: [
+    new webpack.optimize.UglifyJsPlugin({
+      beautify: true,
+      comments: true,
+      mangle: false
+    })
+  ],
+  module: {
+    loaders: [
+      {
+        test: /\.js$/,
+        loaders: ['babel-loader'],
+        include: path.join(__dirname, 'src')
+      }
+    ]
+  }
+}