Fix issue #275 of bad error handling.

storybookjs · Jun 27, 2016 · 52d538e · 52d538e
1 parent 83e1cab
commit 52d538e
Show file tree

Hide file tree

Showing 9 changed files with 147 additions and 29 deletions.
diff --git a/dist/client/preview/error_display.js b/dist/client/preview/error_display.js
@@ -0,0 +1,67 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var mainStyle = {
+  position: 'fixed',
+  top: 0, bottom: 0, left: 0, right: 0,
+  padding: 20,
+  backgroundColor: 'rgb(187, 49, 49)',
+  color: '#FFF',
+  fontFamily: '\n    -apple-system, ".SFNSText-Regular", "San Francisco", Roboto, "Segoe UI",\n    "Helvetica Neue", "Lucida Grande", sans-serif\'\n    '
+};
+
+var headingStyle = {
+  fontFamily: 'inherit',
+  fontSize: 20,
+  fontWeight: 600,
+  letterSpacing: 'normal',
+  margin: '10px 0'
+};
+
+var codeStyle = {
+  fontSize: 14,
+  width: '100vw',
+  overflow: 'auto'
+};
+
+var ErrorDisplay = function ErrorDisplay(_ref) {
+  var error = _ref.error;
+  return _react2.default.createElement(
+    'div',
+    { style: mainStyle, __self: undefined
+    },
+    _react2.default.createElement(
+      'div',
+      { style: headingStyle, __self: undefined
+      },
+      error.message
+    ),
+    _react2.default.createElement(
+      'pre',
+      { style: codeStyle, __self: undefined
+      },
+      _react2.default.createElement(
+        'code',
+        {
+          __self: undefined
+        },
+        error.stack
+      )
+    )
+  );
+};
+
+ErrorDisplay.propTypes = {
+  error: _react2.default.PropTypes.object.isRequired
+};
+
+exports.default = ErrorDisplay;
diff --git a/dist/client/preview/render.js b/dist/client/preview/render.js
@@ -17,9 +17,9 @@ var _reactDom = require('react-dom');
 
 var _reactDom2 = _interopRequireDefault(_reactDom);
 
-var _redboxReact = require('redbox-react');
+var _error_display = require('./error_display');
 
-var _redboxReact2 = _interopRequireDefault(_redboxReact);
+var _error_display2 = _interopRequireDefault(_error_display);
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -32,7 +32,7 @@ function renderError(error) {
   // Since this is an error, this affects to the main page as well.
   var realError = new Error(error.message);
   realError.stack = error.stack;
-  var redBox = _react2.default.createElement(_redboxReact2.default, { error: realError, __self: this
+  var redBox = _react2.default.createElement(_error_display2.default, { error: realError, __self: this
   });
   _reactDom2.default.render(redBox, rootEl);
 }
@@ -82,7 +82,11 @@ function renderMain(data, storyStore) {
     story: selectedStory
   };
 
-  return _reactDom2.default.render(story(context), rootEl);
+  try {
+    return _reactDom2.default.render(story(context), rootEl);
+  } catch (ex) {
+    return renderError(ex);
+  }
 }
 
 function renderPreview(_ref) {

diff --git a/dist/manager.js b/dist/manager.js
diff --git a/dist/manager.js.map b/dist/manager.js.map
diff --git a/dist/server/iframe.html.js b/dist/server/iframe.html.js
@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 
 exports.default = function (headHtml, publicPath) {
-  return '\n    <!DOCTYPE html>\n    <html>\n      <head>\n        <meta charset="utf-8">\n        <meta name="viewport" content="width=device-width, initial-scale=1">\n        <script>\n          if (window.parent !== window) {\n            window.__REACT_DEVTOOLS_GLOBAL_HOOK__ = window.parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;\n          }\n        </script>\n        <title>React Storybook</title>\n        ' + headHtml + '\n      </head>\n      <body>\n        <div id="root"></div>\n        <script src="' + _url2.default.resolve(publicPath, 'preview.bundle.js') + '"></script>\n      </body>\n    </html>\n  ';
+  return '\n    <!DOCTYPE html>\n    <html>\n      <head>\n        <meta charset="utf-8">\n        <meta name="viewport" content="width=device-width, initial-scale=1">\n        <script>\n          if (window.parent !== window) {\n            window.__REACT_DEVTOOLS_GLOBAL_HOOK__ = window.parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;\n          }\n        </script>\n        <title>React Storybook</title>\n        ' + headHtml + '\n      </head>\n      <body>\n        <div id="root"></div>\n        <div id="error-display"></div>\n        <script src="' + _url2.default.resolve(publicPath, 'preview.bundle.js') + '"></script>\n      </body>\n    </html>\n  ';
 };
 
 var _url = require('url');

diff --git a/package.json b/package.json
@@ -52,7 +52,6 @@
   "devDependencies": {
     "@kadira/react-split-pane": "^1.4.0",
     "react-modal": "^1.2.0",
-    "redbox-react": "^1.2.2",
     "react": "^15.0.0",
     "react-dom": "^15.0.0",
     "lodash.pick": "^4.2.0",

diff --git a/src/client/preview/error_display.js b/src/client/preview/error_display.js
@@ -0,0 +1,44 @@
+import React from 'react';
+
+const mainStyle = {
+  position: 'fixed',
+  top: 0, bottom: 0, left: 0, right: 0,
+  padding: 20,
+  backgroundColor: 'rgb(187, 49, 49)',
+  color: '#FFF',
+  fontFamily: `
+    -apple-system, ".SFNSText-Regular", "San Francisco", Roboto, "Segoe UI",
+    "Helvetica Neue", "Lucida Grande", sans-serif'
+    `,
+};
+
+const headingStyle = {
+  fontFamily: 'inherit',
+  fontSize: 20,
+  fontWeight: 600,
+  letterSpacing: 'normal',
+  margin: '10px 0',
+};
+
+const codeStyle = {
+  fontSize: 14,
+  width: '100vw',
+  overflow: 'auto',
+};
+
+const ErrorDisplay = ({ error }) => (
+  <div style={mainStyle}>
+    <div style={headingStyle}>{error.message}</div>
+    <pre style={codeStyle}>
+      <code>
+        {error.stack}
+      </code>
+    </pre>
+  </div>
+);
+
+ErrorDisplay.propTypes = {
+  error: React.PropTypes.object.isRequired,
+};
+
+export default ErrorDisplay;
diff --git a/src/client/preview/render.js b/src/client/preview/render.js
@@ -1,7 +1,7 @@
 import 'airbnb-js-shims';
 import React from 'react';
 import ReactDOM from 'react-dom';
-import ReadBox from 'redbox-react';
+import ErrorDisplay from './error_display';
 
 const rootEl = document.getElementById('root');
 let previousKind = '';
@@ -12,7 +12,7 @@ export function renderError(error) {
   // Since this is an error, this affects to the main page as well.
   const realError = new Error(error.message);
   realError.stack = error.stack;
-  const redBox = (<ReadBox error={realError} />);
+  const redBox = (<ErrorDisplay error={realError} />);
   ReactDOM.render(redBox, rootEl);
 }
 
@@ -47,7 +47,11 @@ export function renderMain(data, storyStore) {
     story: selectedStory,
   };
 
-  return ReactDOM.render(story(context), rootEl);
+  try {
+    return ReactDOM.render(story(context), rootEl);
+  } catch (ex) {
+    return renderError(ex);
+  }
 }
 
 export default function renderPreview({ reduxStore, storyStore }) {

diff --git a/src/server/iframe.html.js b/src/server/iframe.html.js
@@ -17,6 +17,7 @@ export default function (headHtml, publicPath) {
       </head>
       <body>
         <div id="root"></div>
+        <div id="error-display"></div>
         <script src="${url.resolve(publicPath, 'preview.bundle.js')}"></script>
       </body>
     </html>
-Original file line number
+Diff line change
@@ Expand Up / @@ -17,6 +17,7 @@ export default function (headHtml, publicPath) { @@
           </head>
           <body>
             <div id="root"></div>
+            <div id="error-display"></div>
             <script src="${url.resolve(publicPath, 'preview.bundle.js')}"></script>
           </body>
         </html>
@@ Expand Down @@