Devtool change and error handing (#577)

* Change the dev time devtool to eval.
Now we don't use source-map and all the helpers used for that.
Source map is slow and cheap source maps doesn't work well in Chrome.
We also remove error enhancements which is also based on source-maps.

Additionally, we now simplified the client side error handling
and always throw the actual error so we can check it from the console.

* Simply error handling and always log the stack to the console.

dist/client/preview/render.js

@@ -35,6 +35,8 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 // check whether we're running on node/browser
 var isBrowser = typeof window !== 'undefined';
 
+var logger = console;
+
 var rootEl = null;
 var previousKind = '';
 var previousStory = '';
@@ -58,6 +60,9 @@ function renderException(error) {
   realError.stack = error.stack;
   var redBox = _react2.default.createElement(_error_display2.default, { error: realError });
   _reactDom2.default.render(redBox, rootEl);
+
+  // Log the stack to the console. So, user could check the source code.
+  logger.error(error.stack);
 }
 
 function renderMain(data, storyStore) {
@@ -100,13 +105,7 @@ function renderMain(data, storyStore) {
     story: selectedStory
   };
 
-  var element = void 0;
-
-  try {
-    element = story(context);
-  } catch (ex) {
-    return renderException(ex);
-  }
+  var element = story(context);
 
   if (!element) {
     var error = {
@@ -138,5 +137,9 @@ function renderPreview(_ref) {
     return renderException(state.error);
   }
 
-  return renderMain(state, storyStore);
+  try {
+    return renderMain(state, storyStore);
+  } catch (ex) {
+    return renderException(ex);
+  }
 }

dist/server/config/webpack.config.js

@@ -6,10 +6,10 @@ Object.defineProperty(exports, "__esModule", {
 
 exports.default = function () {
   var config = {
-    devtool: '#cheap-module-eval-source-map',
+    devtool: 'eval',
     entry: {
       manager: [require.resolve('./polyfills'), require.resolve('../../client/manager')],
-      preview: [require.resolve('./polyfills'), require.resolve('./error_enhancements'), require.resolve('./globals'), require.resolve('webpack-hot-middleware/client') + '?reload=true']
+      preview: [require.resolve('./polyfills'), require.resolve('./globals'), require.resolve('webpack-hot-middleware/client') + '?reload=true']
     },
     output: {
       path: _path2.default.join(__dirname, 'dist'),

package.json

@@ -51,12 +51,10 @@
     "postcss-loader": "0.13.0",
     "qs": "^6.1.0",
     "react-modal": "^1.2.0",
-    "redbox-react": "^1.2.2",
     "redux": "^3.5.2",
     "request": "^2.74.0",
     "serve-favicon": "^2.3.0",
     "shelljs": "^0.7.4",
-    "stack-source-map": "^1.0.5",
     "style-loader": "0.13.1",
     "url-loader": "^0.5.7",
     "uuid": "^2.0.2",

src/client/preview/render.js

@@ -8,6 +8,8 @@ import ErrorDisplay from './error_display';
 // check whether we're running on node/browser
 const isBrowser = typeof window !== 'undefined';
 
+const logger = console;
+
 let rootEl = null;
 let previousKind = '';
 let previousStory = '';
@@ -31,6 +33,9 @@ export function renderException(error) {
   realError.stack = error.stack;
   const redBox = (<ErrorDisplay error={realError} />);
   ReactDOM.render(redBox, rootEl);
+
+  // Log the stack to the console. So, user could check the source code.
+  logger.error(error.stack);
 }
 
 export function renderMain(data, storyStore) {
@@ -65,13 +70,7 @@ export function renderMain(data, storyStore) {
     story: selectedStory,
   };
 
-  let element;
-
-  try {
-    element = story(context);
-  } catch (ex) {
-    return renderException(ex);
-  }
+  const element = story(context);
 
   if (!element) {
     const error = {
@@ -107,5 +106,9 @@ export default function renderPreview({ reduxStore, storyStore }) {
     return renderException(state.error);
   }
 
-  return renderMain(state, storyStore);
+  try {
+    return renderMain(state, storyStore);
+  } catch (ex) {
+    return renderException(ex);
+  }
 }

src/server/config/webpack.config.js

@@ -14,15 +14,14 @@ import babelLoaderConfig from './babel.js';
 
 export default function () {
   const config = {
-    devtool: '#cheap-module-eval-source-map',
+    devtool: 'eval',
     entry: {
       manager: [
         require.resolve('./polyfills'),
         require.resolve('../../client/manager'),
       ],
       preview: [
         require.resolve('./polyfills'),
-        require.resolve('./error_enhancements'),
         require.resolve('./globals'),
         `${require.resolve('webpack-hot-middleware/client')}?reload=true`,
       ],