react-whitebox
Version:
A component to display your errors.
526 lines (443 loc) • 18.5 kB
JavaScript
(function webpackUniversalModuleDefinition(root, factory) {
if(typeof exports === 'object' && typeof module === 'object')
module.exports = factory(require("react"));
else if(typeof define === 'function' && define.amd)
define(["react"], factory);
else if(typeof exports === 'object')
exports["redbox"] = factory(require("react"));
else
root["redbox"] = factory(root["React"]);
})(this, function(__WEBPACK_EXTERNAL_MODULE_5__) {
return /******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/ // Check if module is in cache
/******/ if(installedModules[moduleId])
/******/ return installedModules[moduleId].exports;
/******/ // Create a new module (and put it into the cache)
/******/ var module = installedModules[moduleId] = {
/******/ exports: {},
/******/ id: moduleId,
/******/ loaded: false
/******/ };
/******/ // Execute the module function
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/ // Flag the module as loaded
/******/ module.loaded = true;
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/ // expose the modules object (__webpack_modules__)
/******/ __webpack_require__.m = modules;
/******/ // expose the module cache
/******/ __webpack_require__.c = installedModules;
/******/ // __webpack_public_path__
/******/ __webpack_require__.p = "";
/******/ // Load entry module and return exports
/******/ return __webpack_require__(0);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ function(module, exports, __webpack_require__) {
'use strict';
exports.__esModule = true;
var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }
function _inherits(subClass, superClass) { if (typeof superClass !== 'function' && superClass !== null) { throw new TypeError('Super expression must either be null or a function, not ' + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
var _react = __webpack_require__(5);
var _react2 = _interopRequireDefault(_react);
var _styleJs = __webpack_require__(1);
var _styleJs2 = _interopRequireDefault(_styleJs);
var _errorStackParser = __webpack_require__(2);
var _errorStackParser2 = _interopRequireDefault(_errorStackParser);
var _objectAssign = __webpack_require__(4);
var _objectAssign2 = _interopRequireDefault(_objectAssign);
var RedBox = (function (_Component) {
_inherits(RedBox, _Component);
function RedBox() {
_classCallCheck(this, RedBox);
_Component.apply(this, arguments);
}
RedBox.prototype.render = function render() {
var error = this.props.error;
var _assign = _objectAssign2['default']({}, _styleJs2['default'], this.props.style);
var redbox = _assign.redbox;
var message = _assign.message;
var stack = _assign.stack;
var frame = _assign.frame;
var file = _assign.file;
var linkToFile = _assign.linkToFile;
var frames = _errorStackParser2['default'].parse(error).map(function (f, index) {
var link = f.fileName + ':' + f.lineNumber + ':' + f.columnNumber;
return _react2['default'].createElement(
'div',
{ style: frame, key: index },
_react2['default'].createElement(
'div',
null,
f.functionName
),
_react2['default'].createElement(
'div',
{ style: file },
_react2['default'].createElement(
'a',
{ href: link, style: linkToFile },
link
)
)
);
});
return _react2['default'].createElement(
'div',
{ style: redbox },
_react2['default'].createElement(
'div',
{ style: message },
error.name,
': ',
error.message
),
_react2['default'].createElement(
'div',
{ style: stack },
frames
)
);
};
_createClass(RedBox, null, [{
key: 'propTypes',
value: {
error: _react.PropTypes.instanceOf(Error).isRequired
},
enumerable: true
}, {
key: 'displayName',
value: 'RedBox',
enumerable: true
}]);
return RedBox;
})(_react.Component);
exports['default'] = RedBox;
module.exports = exports['default'];
/***/ },
/* 1 */
/***/ function(module, exports) {
'use strict';
exports.__esModule = true;
exports['default'] = {
redbox: {
boxSizing: 'border-box',
fontFamily: 'sans-serif',
position: 'fixed',
padding: 10,
top: 0,
left: 0,
bottom: 0,
right: 0,
width: '100%',
background: 'white',
color: '#20202F',
zIndex: 9999,
textAlign: 'left',
fontSize: '16px',
lineHeight: 1.2
},
message: {
fontWeight: 'bold'
},
stack: {
fontFamily: 'monospace',
marginTop: '2em'
},
frame: {
marginTop: '1em'
},
file: {
fontSize: '0.8em',
color: '#A5A5A5'
},
linkToFile: {
textDecoration: 'none',
color: '#A5A5A5'
}
};
module.exports = exports['default'];
/***/ },
/* 2 */
/***/ function(module, exports, __webpack_require__) {
var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;(function (root, factory) {
'use strict';
// Universal Module Definition (UMD) to support AMD, CommonJS/Node.js, Rhino, and browsers.
/* istanbul ignore next */
if (true) {
!(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(3)], __WEBPACK_AMD_DEFINE_FACTORY__ = (factory), __WEBPACK_AMD_DEFINE_RESULT__ = (typeof __WEBPACK_AMD_DEFINE_FACTORY__ === 'function' ? (__WEBPACK_AMD_DEFINE_FACTORY__.apply(exports, __WEBPACK_AMD_DEFINE_ARRAY__)) : __WEBPACK_AMD_DEFINE_FACTORY__), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__));
} else if (typeof exports === 'object') {
module.exports = factory(require('stackframe'));
} else {
root.ErrorStackParser = factory(root.StackFrame);
}
}(this, function ErrorStackParser(StackFrame) {
'use strict';
var FIREFOX_SAFARI_STACK_REGEXP = /(^|@)\S+\:\d+/;
var CHROME_IE_STACK_REGEXP = /\s+at .*(\S+\:\d+|\(native\))/;
return {
/**
* Given an Error object, extract the most information from it.
* @param error {Error}
* @return Array[StackFrame]
*/
parse: function ErrorStackParser$$parse(error) {
if (typeof error.stacktrace !== 'undefined' || typeof error['opera#sourceloc'] !== 'undefined') {
return this.parseOpera(error);
} else if (error.stack && error.stack.match(CHROME_IE_STACK_REGEXP)) {
return this.parseV8OrIE(error);
} else if (error.stack && error.stack.match(FIREFOX_SAFARI_STACK_REGEXP)) {
return this.parseFFOrSafari(error);
} else {
throw new Error('Cannot parse given Error object');
}
},
/**
* Separate line and column numbers from a URL-like string.
* @param urlLike String
* @return Array[String]
*/
extractLocation: function ErrorStackParser$$extractLocation(urlLike) {
// Fail-fast but return locations like "(native)"
if (urlLike.indexOf(':') === -1) {
return [urlLike];
}
var locationParts = urlLike.replace(/[\(\)\s]/g, '').split(':');
var lastNumber = locationParts.pop();
var possibleNumber = locationParts[locationParts.length - 1];
if (!isNaN(parseFloat(possibleNumber)) && isFinite(possibleNumber)) {
var lineNumber = locationParts.pop();
return [locationParts.join(':'), lineNumber, lastNumber];
} else {
return [locationParts.join(':'), lastNumber, undefined];
}
},
parseV8OrIE: function ErrorStackParser$$parseV8OrIE(error) {
return error.stack.split('\n').filter(function (line) {
return !!line.match(CHROME_IE_STACK_REGEXP);
}, this).map(function (line) {
var tokens = line.replace(/^\s+/, '').split(/\s+/).slice(1);
var locationParts = this.extractLocation(tokens.pop());
var functionName = (!tokens[0] || tokens[0] === 'Anonymous') ? undefined : tokens[0];
return new StackFrame(functionName, undefined, locationParts[0], locationParts[1], locationParts[2], line);
}, this);
},
parseFFOrSafari: function ErrorStackParser$$parseFFOrSafari(error) {
return error.stack.split('\n').filter(function (line) {
return !!line.match(FIREFOX_SAFARI_STACK_REGEXP);
}, this).map(function (line) {
var tokens = line.split('@');
var locationParts = this.extractLocation(tokens.pop());
var functionName = tokens.shift() || undefined;
return new StackFrame(functionName, undefined, locationParts[0], locationParts[1], locationParts[2], line);
}, this);
},
parseOpera: function ErrorStackParser$$parseOpera(e) {
if (!e.stacktrace || (e.message.indexOf('\n') > -1 &&
e.message.split('\n').length > e.stacktrace.split('\n').length)) {
return this.parseOpera9(e);
} else if (!e.stack) {
return this.parseOpera10(e);
} else {
return this.parseOpera11(e);
}
},
parseOpera9: function ErrorStackParser$$parseOpera9(e) {
var lineRE = /Line (\d+).*script (?:in )?(\S+)/i;
var lines = e.message.split('\n');
var result = [];
for (var i = 2, len = lines.length; i < len; i += 2) {
var match = lineRE.exec(lines[i]);
if (match) {
result.push(new StackFrame(undefined, undefined, match[2], match[1], undefined, lines[i]));
}
}
return result;
},
parseOpera10: function ErrorStackParser$$parseOpera10(e) {
var lineRE = /Line (\d+).*script (?:in )?(\S+)(?:: In function (\S+))?$/i;
var lines = e.stacktrace.split('\n');
var result = [];
for (var i = 0, len = lines.length; i < len; i += 2) {
var match = lineRE.exec(lines[i]);
if (match) {
result.push(new StackFrame(match[3] || undefined, undefined, match[2], match[1], undefined, lines[i]));
}
}
return result;
},
// Opera 10.65+ Error.stack very similar to FF/Safari
parseOpera11: function ErrorStackParser$$parseOpera11(error) {
return error.stack.split('\n').filter(function (line) {
return !!line.match(FIREFOX_SAFARI_STACK_REGEXP) &&
!line.match(/^Error created at/);
}, this).map(function (line) {
var tokens = line.split('@');
var locationParts = this.extractLocation(tokens.pop());
var functionCall = (tokens.shift() || '');
var functionName = functionCall
.replace(/<anonymous function(: (\w+))?>/, '$2')
.replace(/\([^\)]*\)/g, '') || undefined;
var argsRaw;
if (functionCall.match(/\(([^\)]*)\)/)) {
argsRaw = functionCall.replace(/^[^\(]+\(([^\)]*)\)$/, '$1');
}
var args = (argsRaw === undefined || argsRaw === '[arguments not available]') ? undefined : argsRaw.split(',');
return new StackFrame(functionName, args, locationParts[0], locationParts[1], locationParts[2], line);
}, this);
}
};
}));
/***/ },
/* 3 */
/***/ function(module, exports, __webpack_require__) {
var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;(function (root, factory) {
'use strict';
// Universal Module Definition (UMD) to support AMD, CommonJS/Node.js, Rhino, and browsers.
/* istanbul ignore next */
if (true) {
!(__WEBPACK_AMD_DEFINE_ARRAY__ = [], __WEBPACK_AMD_DEFINE_FACTORY__ = (factory), __WEBPACK_AMD_DEFINE_RESULT__ = (typeof __WEBPACK_AMD_DEFINE_FACTORY__ === 'function' ? (__WEBPACK_AMD_DEFINE_FACTORY__.apply(exports, __WEBPACK_AMD_DEFINE_ARRAY__)) : __WEBPACK_AMD_DEFINE_FACTORY__), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__));
} else if (typeof exports === 'object') {
module.exports = factory();
} else {
root.StackFrame = factory();
}
}(this, function () {
'use strict';
function _isNumber(n) {
return !isNaN(parseFloat(n)) && isFinite(n);
}
function StackFrame(functionName, args, fileName, lineNumber, columnNumber, source) {
if (functionName !== undefined) {
this.setFunctionName(functionName);
}
if (args !== undefined) {
this.setArgs(args);
}
if (fileName !== undefined) {
this.setFileName(fileName);
}
if (lineNumber !== undefined) {
this.setLineNumber(lineNumber);
}
if (columnNumber !== undefined) {
this.setColumnNumber(columnNumber);
}
if (source !== undefined) {
this.setSource(source);
}
}
StackFrame.prototype = {
getFunctionName: function () {
return this.functionName;
},
setFunctionName: function (v) {
this.functionName = String(v);
},
getArgs: function () {
return this.args;
},
setArgs: function (v) {
if (Object.prototype.toString.call(v) !== '[object Array]') {
throw new TypeError('Args must be an Array');
}
this.args = v;
},
// NOTE: Property name may be misleading as it includes the path,
// but it somewhat mirrors V8's JavaScriptStackTraceApi
// https://code.google.com/p/v8/wiki/JavaScriptStackTraceApi and Gecko's
// http://mxr.mozilla.org/mozilla-central/source/xpcom/base/nsIException.idl#14
getFileName: function () {
return this.fileName;
},
setFileName: function (v) {
this.fileName = String(v);
},
getLineNumber: function () {
return this.lineNumber;
},
setLineNumber: function (v) {
if (!_isNumber(v)) {
throw new TypeError('Line Number must be a Number');
}
this.lineNumber = Number(v);
},
getColumnNumber: function () {
return this.columnNumber;
},
setColumnNumber: function (v) {
if (!_isNumber(v)) {
throw new TypeError('Column Number must be a Number');
}
this.columnNumber = Number(v);
},
getSource: function () {
return this.source;
},
setSource: function (v) {
this.source = String(v);
},
toString: function() {
var functionName = this.getFunctionName() || '{anonymous}';
var args = '(' + (this.getArgs() || []).join(',') + ')';
var fileName = this.getFileName() ? ('@' + this.getFileName()) : '';
var lineNumber = _isNumber(this.getLineNumber()) ? (':' + this.getLineNumber()) : '';
var columnNumber = _isNumber(this.getColumnNumber()) ? (':' + this.getColumnNumber()) : '';
return functionName + args + fileName + lineNumber + columnNumber;
}
};
return StackFrame;
}));
/***/ },
/* 4 */
/***/ function(module, exports) {
/* eslint-disable no-unused-vars */
'use strict';
var hasOwnProperty = Object.prototype.hasOwnProperty;
var propIsEnumerable = Object.prototype.propertyIsEnumerable;
function toObject(val) {
if (val === null || val === undefined) {
throw new TypeError('Object.assign cannot be called with null or undefined');
}
return Object(val);
}
module.exports = Object.assign || function (target, source) {
var from;
var to = toObject(target);
var symbols;
for (var s = 1; s < arguments.length; s++) {
from = Object(arguments[s]);
for (var key in from) {
if (hasOwnProperty.call(from, key)) {
to[key] = from[key];
}
}
if (Object.getOwnPropertySymbols) {
symbols = Object.getOwnPropertySymbols(from);
for (var i = 0; i < symbols.length; i++) {
if (propIsEnumerable.call(from, symbols[i])) {
to[symbols[i]] = from[symbols[i]];
}
}
}
}
return to;
};
/***/ },
/* 5 */
/***/ function(module, exports) {
module.exports = __WEBPACK_EXTERNAL_MODULE_5__;
/***/ }
/******/ ])
});
;