Replace redbox-react with react-error-overlay (#1306)

Author: frenzzy

package.json

@@ -24,7 +24,6 @@
     "express": "^4.15.3",
     "express-graphql": "^0.6.6",
     "express-jwt": "^5.3.0",
-    "fastclick": "^1.0.6",
     "graphql": "^0.10.1",
     "graphql-relay": "^0.5.1",
     "graphql-sequelize": "^5.3.2",
@@ -116,9 +115,10 @@
     "pre-commit": "^1.2.2",
     "raw-loader": "^0.5.1",
     "react-deep-force-update": "^2.0.1",
+    "react-dev-utils": "^3.0.0",
+    "react-error-overlay": "^1.0.7",
     "react-hot-loader": "^3.0.0-beta.7",
     "react-test-renderer": "^15.5.4",
-    "redbox-react": "^1.4.1",
     "redux-mock-store": "^1.2.3",
     "rimraf": "^2.6.1",
     "sass-loader": "6.0.3",

src/client.js

@@ -10,7 +10,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { Router } from 'react-router';
-import ErrorReporter from 'redbox-react';
 import deepForceUpdate from 'react-deep-force-update';
 import queryString from 'query-string';
 import { createPath } from 'history/PathUtils';
@@ -119,11 +118,7 @@ async function onLocationChange(location, action) {
       () => onRenderComplete(location),
     );
   } catch (error) {
-    // Display the error in full-screen for development mode
     if (__DEV__) {
-      appInstance = null;
-      document.title = `Error: ${error.message}`;
-      ReactDOM.render(<ErrorReporter error={error} />, container);
       throw error;
     }
 
@@ -141,29 +136,12 @@ async function onLocationChange(location, action) {
 history.listen(onLocationChange);
 onLocationChange(currentLocation);
 
-// Handle errors that might happen after rendering
-// Display the error in full-screen for development mode
-if (__DEV__) {
-  window.addEventListener('error', (event) => {
-    appInstance = null;
-    document.title = `Runtime Error: ${event.error.message}`;
-    ReactDOM.render(<ErrorReporter error={event.error} />, container);
-  });
-}
-
- // Enable Hot Module Replacement (HMR)
+// Enable Hot Module Replacement (HMR)
 if (module.hot) {
   module.hot.accept('./components/App', () => {
     if (appInstance) {
-      try {
-        // Force-update the whole tree, including components that refuse to update
-        deepForceUpdate(appInstance);
-      } catch (error) {
-        appInstance = null;
-        document.title = `Hot Update Error: ${error.message}`;
-        ReactDOM.render(<ErrorReporter error={error} />, container);
-        return;
-      }
+      // Force-update the whole tree, including components that refuse to update
+      deepForceUpdate(appInstance);
     }
 
     onLocationChange(currentLocation);

tools/start.js

@@ -12,6 +12,9 @@ import webpack from 'webpack';
 import webpackDevMiddleware from 'webpack-dev-middleware';
 import webpackHotMiddleware from 'webpack-hot-middleware';
 import WriteFilePlugin from 'write-file-webpack-plugin';
+import url from 'url';
+import querystring from 'querystring';
+import launchEditor from 'react-dev-utils/launchEditor';
 import run from './run';
 import runServer from './runServer';
 import webpackConfig from './webpack.config';
@@ -39,6 +42,7 @@ async function start() {
     if (isDebug) {
       clientConfig.entry.client = [...new Set([
         'babel-polyfill',
+        'react-error-overlay',
         'react-hot-loader/patch',
         'webpack-hot-middleware/client',
       ].concat(clientConfig.entry.client))];
@@ -75,7 +79,19 @@ async function start() {
 
         proxy: {
           target: server.host,
-          middleware: [wpMiddleware, hotMiddleware],
+          middleware: [
+            {
+              // Keep this in sync with react-error-overlay
+              route: '/__open-stack-frame-in-editor',
+              handle(req, res) {
+                const query = querystring.parse(url.parse(req.url).query);
+                launchEditor(query.fileName, query.lineNumber);
+                res.end();
+              },
+            },
+            wpMiddleware,
+            hotMiddleware,
+          ],
           proxyOptions: {
             xfwd: true,
           },

tools/webpack.config.js

@@ -29,6 +29,7 @@ const config = {
     path: path.resolve(__dirname, '../build/public/assets'),
     publicPath: '/assets/',
     pathinfo: isVerbose,
+    devtoolModuleFilenameTemplate: info => path.resolve(info.absoluteResourcePath),
   },
 
   module: {
@@ -142,10 +143,6 @@ const config = {
 
       // Exclude dev modules from production build
       ...isDebug ? [] : [
-        {
-          test: path.resolve(__dirname, '../node_modules/redbox-react/lib/index.js'),
-          use: 'null-loader',
-        },
         {
           test: path.resolve(__dirname, '../node_modules/react-deep-force-update/lib/index.js'),
           use: 'null-loader',