dev-error-reporter
Version:
Tools to make errors more visible during development.
86 lines (85 loc) • 3.94 kB
JavaScript
;
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.DevErrorHandler = void 0;
var DevErrorHandler = /** @class */ (function () {
function DevErrorHandler(config) {
this.errors = [];
this.defaultConfig = {
appendToElement: 'body',
};
this.config = __assign(__assign({}, this.defaultConfig), config);
}
DevErrorHandler.prototype.showError = function (error) {
var _this = this;
if (!error.stack) {
return;
}
if (this.errors.some(function (x) { return x === error.stack; })) {
return;
}
if (document.getElementsByTagName(this.config.appendToElement).length === 0) {
throw Error("Could not find element with name '" + this.config.appendToElement + "'");
}
this.errors.push(error.stack);
var $errorMsg = document.createElement('div');
$errorMsg.className += 'msg-backdrop';
$errorMsg.style.overflowY = 'auto';
$errorMsg.style.maxHeight = '90vh';
$errorMsg.style.maxWidth = '100%';
$errorMsg.style.overflowX = 'auto';
$errorMsg.style.position = 'fixed';
$errorMsg.style.left = '0';
$errorMsg.style.bottom = '0';
$errorMsg.style.fontSize = '11px';
$errorMsg.style.fontFamily = 'calibri';
$errorMsg.style.padding = '10px';
$errorMsg.style.zIndex = "10000" + (this.errors.length + 1);
$errorMsg.style.color = 'white';
$errorMsg.style.boxSizing = 'border-box';
$errorMsg.style.backgroundColor = 'rgba(0,0,0,0.8)';
$errorMsg.innerHTML = " <p style=\"\n font-size: 16px;\n font-weight: bold;\n color:#ff6c37;\">PLEASE CHECK YOUR CONSOLE!!!!</p>\n <pre style=\"color:white; max-width:100%; overflow-y:auto\">" + error.stack + "</pre>";
var $errorClose = document.createElement('a');
$errorClose.href = 'javascript:void(0)';
$errorClose.style.textDecoration = 'none';
$errorClose.style.position = 'absolute';
$errorClose.style.right = '0';
$errorClose.style.top = '0';
$errorClose.style.fontSize = '16px';
$errorClose.style.fontFamily = 'calibri';
$errorClose.style.padding = '8px';
$errorClose.style.color = 'white';
$errorClose.style.backgroundColor = '#ff6c37';
$errorClose.innerHTML = '×';
if (this.errors.length > 1) {
var widths = [];
var msgBackDrops = document.getElementsByClassName('msg-backdrop');
var msgBackDropsLength = msgBackDrops.length;
for (var i = 0; i < msgBackDropsLength; i++) {
widths.push(msgBackDrops.item(i).clientWidth);
}
var maxWidth = widths.reduce(function (a, b) { return Math.max(a, b); });
for (var i = 0; i < msgBackDropsLength; i++) {
msgBackDrops.item(i).style.width = maxWidth + "px";
}
}
$errorClose.addEventListener('click', function () {
$errorMsg.remove();
_this.errors = _this.errors.filter(function (x) { return x !== error.stack; });
});
$errorMsg.append($errorClose);
document.getElementsByTagName(this.config.appendToElement)[0].append($errorMsg);
};
return DevErrorHandler;
}());
exports.DevErrorHandler = DevErrorHandler;