GitHub/storybook
1
0
Fork 0
mirror of https://github.com/storybookjs/storybook.git synced 2025-04-03 05:04:51 +08:00
Code Issues Packages Projects Releases Wiki Activity

Fix issue #275 of bad error handling.

Browse Source
This commit is contained in:
Arunoda Susiripala 2016-06-27 14:25:24 +05:30
parent 83e1cabe60
commit 52d538e50b
9 changed files with 147 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

67
dist/client/preview/error_display.js vendored Normal file
View File

@ -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;

12
dist/client/preview/render.js vendored
View File

@ -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) {

37
dist/manager.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/manager.js.map vendored
View File

@ -1 +1 @@
{"version":3,"file":"manager.js","sources":["webpack:///manager.js","webpack:///"],"mappings":"AAAA;AC+pIA;;;;;;;;;;;;;;AA6zFA;;;;;;;;;;;AAqtFA;AAk4IA;;;;;;;;;AA2BA;AAyzEA;AAqkGA;AAu4FA;;;;;AAi8CA;;;;;AA+rCA;;;AAimDA;AAgoHA;AAi8HA;AA26GA","sourceRoot":""}
{"version":3,"file":"manager.js","sources":["webpack:///manager.js","webpack:///"],"mappings":"AAAA;ACi6HA;;;;;;;;;;;;;;AAonFA;;;;;;;;;;;AA07DA;AAq5IA;AA+/EA;;;;;AA+oBA;;;;;;;;;AAopCA;AA6zEA;;;;;AAyrDA;;;AAirDA;AAqjHA;AAyqIA;AAuhHA","sourceRoot":""}

2
dist/server/iframe.html.js vendored
View File

@ -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');

1
package.json
View File

@ -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",

44
src/client/preview/error_display.js Normal file
View File

@ -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;

10
src/client/preview/render.js
View File

@ -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 }) {

1
src/server/iframe.html.js
View File

@ -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>