From 52d538e50bd209ce3297cb7f90a5f399387a6d73 Mon Sep 17 00:00:00 2001 From: Arunoda Susiripala Date: Mon, 27 Jun 2016 14:25:24 +0530 Subject: [PATCH] Fix issue #275 of bad error handling. --- dist/client/preview/error_display.js | 67 ++++++++++++++++++++++++++++ dist/client/preview/render.js | 12 +++-- dist/manager.js | 37 ++++++++------- dist/manager.js.map | 2 +- dist/server/iframe.html.js | 2 +- package.json | 1 - src/client/preview/error_display.js | 44 ++++++++++++++++++ src/client/preview/render.js | 10 +++-- src/server/iframe.html.js | 1 + 9 files changed, 147 insertions(+), 29 deletions(-) create mode 100644 dist/client/preview/error_display.js create mode 100644 src/client/preview/error_display.js diff --git a/dist/client/preview/error_display.js b/dist/client/preview/error_display.js new file mode 100644 index 000000000000..311fc395a666 --- /dev/null +++ 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; \ No newline at end of file diff --git a/dist/client/preview/render.js b/dist/client/preview/render.js index 100dcfeefc27..132a2e44fc1c 100644 --- 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 index 84fdea57eea2..e1f7c96f548f 100644 --- a/dist/manager.js +++ b/dist/manager.js @@ -1,5 +1,5 @@ -!function(e){function t(r){if(n[r])return n[r].exports;var o=n[r]={exports:{},id:r,loaded:!1};return e[r].call(o.exports,o,o.exports,t),o.loaded=!0,o.exports}var n={};return t.m=e,t.c=n,t.p="",t(0)}(function(e){for(var t in e)if(Object.prototype.hasOwnProperty.call(e,t))switch(typeof e[t]){case"function":break;case"object":e[t]=function(t){var n=t.slice(1),r=e[t[0]];return function(e,t,o){r.apply(this,[e,t,o].concat(n))}}(e[t]);break;default:e[t]=e[e[t]]}return e}([function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{"default":e}}n(197);var o=n(122),i=r(o),a=n(196),u=r(a),s=document.getElementById("root");(0,i["default"])(s,new u["default"])},function(e,t,n){"use strict";function r(e,t,n,r,o,i,a,u){if(!e){var s;if(void 0===t)s=new Error("Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings.");else{var l=[n,r,o,i,a,u],c=0;s=new Error(t.replace(/%s/g,function(){return l[c++]})),s.name="Invariant Violation"}throw s.framesToPop=1,s}}e.exports=r},function(e,t,n){"use strict";var r=n(9),o=r;e.exports=o},function(e,t,n){"use strict";e.exports=n(395)},function(e,t){"use strict";function n(e){if(null===e||void 0===e)throw new TypeError("Object.assign cannot be called with null or undefined");return Object(e)}function r(){try{if(!Object.assign)return!1;var e=new String("abc");if(e[5]="de","5"===Object.getOwnPropertyNames(e)[0])return!1;for(var t={},n=0;10>n;n++)t["_"+String.fromCharCode(n)]=n;var r=Object.getOwnPropertyNames(t).map(function(e){return t[e]});if("0123456789"!==r.join(""))return!1;var o={};return"abcdefghijklmnopqrst".split("").forEach(function(e){o[e]=e}),"abcdefghijklmnopqrst"===Object.keys(Object.assign({},o)).join("")}catch(i){return!1}}var o=Object.prototype.hasOwnProperty,i=Object.prototype.propertyIsEnumerable;e.exports=r()?Object.assign:function(e,t){for(var r,a,u=n(e),s=1;s1){for(var d=Array(p),h=0;p>h;h++)d[h]=arguments[h+2];o.children=d}if(e&&e.defaultProps){var y=e.defaultProps;for(r in y)void 0===o[r]&&(o[r]=y[r])}return s(e,a,l,c,f,i.current,o)},s.createFactory=function(e){var t=s.createElement.bind(null,e);return t.type=e,t},s.cloneAndReplaceKey=function(e,t){var n=s(e.type,t,e.ref,e._self,e._source,e._owner,e.props);return n},s.cloneElement=function(e,t,n){var r,a=o({},e.props),l=e.key,c=e.ref,f=e._self,p=e._source,d=e._owner;if(null!=t){void 0!==t.ref&&(c=t.ref,d=i.current),void 0!==t.key&&(l=""+t.key);var h;e.type&&e.type.defaultProps&&(h=e.type.defaultProps);for(r in t)t.hasOwnProperty(r)&&!u.hasOwnProperty(r)&&(void 0===t[r]&&void 0!==h?a[r]=h[r]:a[r]=t[r])}var y=arguments.length-2;if(1===y)a.children=n;else if(y>1){for(var v=Array(y),m=0;y>m;m++)v[m]=arguments[m+2];a.children=v}return s(e.type,l,c,f,p,d,a)},s.isValidElement=function(e){return"object"===("undefined"==typeof e?"undefined":r(e))&&null!==e&&e.$$typeof===a},e.exports=s},[461,263],function(e,t,n){"use strict";var r=n(93)("wks"),o=n(56),i=n(19).Symbol,a="function"==typeof i,u=e.exports=function(e){return r[e]||(r[e]=a&&i[e]||(a?i:o)("Symbol."+e))};u.store=r},function(e,t,n){"use strict";function r(){P.ReactReconcileTransaction&&E?void 0:v(!1)}function o(){this.reinitializeTransaction(),this.dirtyComponentsLength=null,this.callbackQueue=f.getPooled(),this.reconcileTransaction=P.ReactReconcileTransaction.getPooled(!0)}function i(e,t,n,o,i,a){r(),E.batchedUpdates(e,t,n,o,i,a)}function a(e,t){return e._mountOrder-t._mountOrder}function u(e){var t=e.dirtyComponentsLength;t!==m.length?v(!1):void 0,m.sort(a),b++;for(var n=0;t>n;n++){var r=m[n],o=r._pendingCallbacks;r._pendingCallbacks=null;var i;if(d.logTopLevelRenders){var u=r;r._currentElement.props===r._renderedComponent._currentElement&&(u=r._renderedComponent),i="React update: "+u.getName(),console.time(i)}if(h.performUpdateIfNecessary(r,e.reconcileTransaction,b),i&&console.timeEnd(i),o)for(var s=0;s1){for(var d=Array(p),h=0;p>h;h++)d[h]=arguments[h+2];i.children=d}if(e&&e.defaultProps){var y=e.defaultProps;for(r in y)void 0===i[r]&&(i[r]=y[r])}return u(e,s,l,c,f,o.current,i)},u.createFactory=function(e){var t=u.createElement.bind(null,e);return t.type=e,t},u.cloneAndReplaceKey=function(e,t){var n=u(e.type,t,e.ref,e._self,e._source,e._owner,e.props);return n},u.cloneElement=function(e,t,n){var i,s=r({},e.props),l=e.key,c=e.ref,f=e._self,p=e._source,d=e._owner;if(null!=t){void 0!==t.ref&&(c=t.ref,d=o.current),void 0!==t.key&&(l=""+t.key);var h;e.type&&e.type.defaultProps&&(h=e.type.defaultProps);for(i in t)t.hasOwnProperty(i)&&!a.hasOwnProperty(i)&&(void 0===t[i]&&void 0!==h?s[i]=h[i]:s[i]=t[i])}var y=arguments.length-2;if(1===y)s.children=n;else if(y>1){for(var v=Array(y),m=0;y>m;m++)v[m]=arguments[m+2];s.children=v}return u(e.type,l,c,f,p,d,s)},u.isValidElement=function(e){return"object"==typeof e&&null!==e&&e.$$typeof===i},e.exports=u},function(e,t,n){"use strict";var r=n(19),o=n(7),i=n(85),a=n(37),u="prototype",s=function l(e,t,n){var s,c,f,p=e&l.F,d=e&l.G,h=e&l.S,y=e&l.P,v=e&l.B,m=e&l.W,b=d?o:o[t]||(o[t]={}),g=b[u],_=d?r:h?r[t]:(r[t]||{})[u];d&&(n=t);for(s in n)c=!p&&_&&void 0!==_[s],c&&s in b||(f=c?_[s]:n[s],b[s]=d&&"function"!=typeof _[s]?n[s]:v&&c?i(f,r):m&&_[s]==f?function(e){var t=function(t,n,r){if(this instanceof e){switch(arguments.length){case 0:return new e;case 1:return new e(t);case 2:return new e(t,n)}return new e(t,n,r)}return e.apply(this,arguments)};return t[u]=e[u],t}(f):y&&"function"==typeof f?i(Function.call,f):f,y&&((b.virtual||(b.virtual={}))[s]=f,e&l.R&&g&&!g[s]&&a(g,s,f)))};s.F=1,s.G=2,s.S=4,s.P=8,s.B=16,s.W=32,s.U=64,s.R=128,e.exports=s},function(e,t){"use strict";var n=e.exports="undefined"!=typeof window&&window.Math==Math?window:"undefined"!=typeof self&&self.Math==Math?self:Function("return this")();"number"==typeof __g&&(__g=n)},function(e,t,n){"use strict";var r=n(27),o=n(133),i=n(95),a=Object.defineProperty;t.f=n(28)?Object.defineProperty:function(e,t,n){if(r(e),t=i(t,!0),r(n),o)try{return a(e,t,n)}catch(u){}if("get"in n||"set"in n)throw TypeError("Accessors not supported!");return"value"in n&&(e[t]=n.value),e}},function(e,t){"use strict";var n=function(e){var t;for(t in e)if(e.hasOwnProperty(t))return t;return null};e.exports=n},function(e,t,n){"use strict";var r=n(1),o=function(e){var t=this;if(t.instancePool.length){var n=t.instancePool.pop();return t.call(n,e),n}return new t(e)},i=function(e,t){var n=this;if(n.instancePool.length){var r=n.instancePool.pop();return n.call(r,e,t),r}return new n(e,t)},a=function(e,t,n){var r=this;if(r.instancePool.length){var o=r.instancePool.pop();return r.call(o,e,t,n),o}return new r(e,t,n)},u=function(e,t,n,r){var o=this;if(o.instancePool.length){var i=o.instancePool.pop();return o.call(i,e,t,n,r),i}return new o(e,t,n,r)},s=function(e,t,n,r,o){var i=this;if(i.instancePool.length){var a=i.instancePool.pop();return i.call(a,e,t,n,r,o),a}return new i(e,t,n,r,o)},l=function(e){var t=this;e instanceof t?void 0:r(!1),e.destructor(),t.instancePool.length-1?void 0:a(!1),!l.plugins[n]){t.extractEvents?void 0:a(!1),l.plugins[n]=t;var r=t.eventTypes;for(var i in r)o(r[i],t,i)?void 0:a(!1)}}}function o(e,t,n){l.eventNameDispatchConfigs.hasOwnProperty(n)?a(!1):void 0,l.eventNameDispatchConfigs[n]=e;var r=e.phasedRegistrationNames;if(r){for(var o in r)if(r.hasOwnProperty(o)){var u=r[o];i(u,t,n)}return!0}return e.registrationName?(i(e.registrationName,t,n),!0):!1}function i(e,t,n){l.registrationNameModules[e]?a(!1):void 0,l.registrationNameModules[e]=t,l.registrationNameDependencies[e]=t.eventTypes[n].dependencies}var a=n(1),u=null,s={},l={plugins:[],eventNameDispatchConfigs:{},registrationNameModules:{},registrationNameDependencies:{},possibleRegistrationNames:null,injectEventPluginOrder:function(e){u?a(!1):void 0,u=Array.prototype.slice.call(e),r()},injectEventPluginsByName:function(e){var t=!1;for(var n in e)if(e.hasOwnProperty(n)){var o=e[n];s.hasOwnProperty(n)&&s[n]===o||(s[n]?a(!1):void 0,s[n]=o,t=!0)}t&&r()},getPluginModuleForEvent:function(e){var t=e.dispatchConfig;if(t.registrationName)return l.registrationNameModules[t.registrationName]||null;for(var n in t.phasedRegistrationNames)if(t.phasedRegistrationNames.hasOwnProperty(n)){var r=l.registrationNameModules[t.phasedRegistrationNames[n]];if(r)return r}return null},_resetEventPlugins:function(){u=null;for(var e in s)s.hasOwnProperty(e)&&delete s[e];l.plugins.length=0;var t=l.eventNameDispatchConfigs;for(var n in t)t.hasOwnProperty(n)&&delete t[n];var r=l.registrationNameModules;for(var o in r)r.hasOwnProperty(o)&&delete r[o]}};e.exports=l},function(e,t,n){"use strict";function r(e){return Object.prototype.hasOwnProperty.call(e,v)||(e[v]=h++,p[e[v]]={}),p[e[v]]}var o,i=n(4),a=n(15),u=n(64),s=n(418),l=n(184),c=n(446),f=n(117),p={},d=!1,h=0,y={topAbort:"abort",topAnimationEnd:c("animationend")||"animationend",topAnimationIteration:c("animationiteration")||"animationiteration",topAnimationStart:c("animationstart")||"animationstart",topBlur:"blur",topCanPlay:"canplay",topCanPlayThrough:"canplaythrough",topChange:"change",topClick:"click",topCompositionEnd:"compositionend",topCompositionStart:"compositionstart",topCompositionUpdate:"compositionupdate",topContextMenu:"contextmenu",topCopy:"copy",topCut:"cut",topDoubleClick:"dblclick",topDrag:"drag",topDragEnd:"dragend",topDragEnter:"dragenter",topDragExit:"dragexit",topDragLeave:"dragleave",topDragOver:"dragover",topDragStart:"dragstart",topDrop:"drop",topDurationChange:"durationchange", -topEmptied:"emptied",topEncrypted:"encrypted",topEnded:"ended",topError:"error",topFocus:"focus",topInput:"input",topKeyDown:"keydown",topKeyPress:"keypress",topKeyUp:"keyup",topLoadedData:"loadeddata",topLoadedMetadata:"loadedmetadata",topLoadStart:"loadstart",topMouseDown:"mousedown",topMouseMove:"mousemove",topMouseOut:"mouseout",topMouseOver:"mouseover",topMouseUp:"mouseup",topPaste:"paste",topPause:"pause",topPlay:"play",topPlaying:"playing",topProgress:"progress",topRateChange:"ratechange",topScroll:"scroll",topSeeked:"seeked",topSeeking:"seeking",topSelectionChange:"selectionchange",topStalled:"stalled",topSuspend:"suspend",topTextInput:"textInput",topTimeUpdate:"timeupdate",topTouchCancel:"touchcancel",topTouchEnd:"touchend",topTouchMove:"touchmove",topTouchStart:"touchstart",topTransitionEnd:c("transitionend")||"transitionend",topVolumeChange:"volumechange",topWaiting:"waiting",topWheel:"wheel"},v="_reactListenersID"+String(Math.random()).slice(2),m=i({},s,{ReactEventListener:null,injection:{injectReactEventListener:function(e){e.setHandleTopLevel(m.handleTopLevel),m.ReactEventListener=e}},setEnabled:function(e){m.ReactEventListener&&m.ReactEventListener.setEnabled(e)},isEnabled:function(){return!(!m.ReactEventListener||!m.ReactEventListener.isEnabled())},listenTo:function(e,t){for(var n=t,o=r(n),i=u.registrationNameDependencies[e],s=a.topLevelTypes,l=0;l":">","<":"<",'"':""","'":"'"},i=/[&><"']/g;e.exports=r},function(e,t){"use strict";function n(e){return function(){return e}}function r(){}r.thatReturns=n,r.thatReturnsFalse=n(!1),r.thatReturnsTrue=n(!0),r.thatReturnsNull=n(null),r.thatReturnsThis=function(){return this},r.thatReturnsArgument=function(e){return e},e.exports=r},function(e,t){"use strict";function n(e){if(null===e||void 0===e)throw new TypeError("Object.assign cannot be called with null or undefined");return Object(e)}var r=Object.prototype.hasOwnProperty,o=Object.prototype.propertyIsEnumerable;e.exports=Object.assign||function(e,t){for(var i,a,u=n(e),s=1;s";for(t.style.display="none",n(279).appendChild(t),t.src="javascript:",e=t.contentWindow.document,e.open(),e.write("\n React Storybook\n ' + headHtml + '\n \n \n
\n \n \n \n '; + return '\n \n \n \n \n \n \n React Storybook\n ' + headHtml + '\n \n \n
\n
\n \n \n \n '; }; var _url = require('url'); diff --git a/package.json b/package.json index d7cf06657fac..fa0778aa68a9 100644 --- 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 new file mode 100644 index 000000000000..2df196868ce4 --- /dev/null +++ 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 }) => ( +
+
{error.message}
+ 
+      
+        {error.stack}
+      
+
+
+); + +ErrorDisplay.propTypes = { + error: React.PropTypes.object.isRequired, +}; + +export default ErrorDisplay; diff --git a/src/client/preview/render.js b/src/client/preview/render.js index cb7fbc92ea84..5ecec3ea0b14 100644 --- 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 = (); + const redBox = (); 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 index 396f7087179c..73821b532481 100644 --- a/src/server/iframe.html.js +++ b/src/server/iframe.html.js @@ -17,6 +17,7 @@ export default function (headHtml, publicPath) {
+