Skip to content

Commit

Permalink
Devtool change and error handing (#577)
Browse files Browse the repository at this point in the history
* 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.
  • Loading branch information
arunoda authored Oct 27, 2016
1 parent 9fd819a commit d0fd010
Show file tree
Hide file tree
Showing 8 changed files with 221 additions and 635 deletions.
19 changes: 11 additions & 8 deletions dist/client/preview/render.js
Original file line number Diff line number Diff line change
Expand Up @@ -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 = '';
Expand All @@ -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) {
Expand Down Expand Up @@ -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 = {
Expand Down Expand Up @@ -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);
}
}
15 changes: 0 additions & 15 deletions dist/server/config/error_enhancements.js

This file was deleted.

4 changes: 2 additions & 2 deletions dist/server/config/webpack.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -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'),
Expand Down
2 changes: 0 additions & 2 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
19 changes: 11 additions & 8 deletions src/client/preview/render.js
Original file line number Diff line number Diff line change
Expand Up @@ -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 = '';
Expand All @@ -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) {
Expand Down Expand Up @@ -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 = {
Expand Down Expand Up @@ -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);
}
}
13 changes: 0 additions & 13 deletions src/server/config/error_enhancements.js

This file was deleted.

3 changes: 1 addition & 2 deletions src/server/config/webpack.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -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`,
],
Expand Down
Loading

0 comments on commit d0fd010

Please sign in to comment.