@shuvi/error-overlay 1.0.0-rc.6

package/lib/client.d.ts

@@ -0,0 +1,15 @@
+declare global {
+    interface Window {
+        __SHUVI_ERROR_OVERLAY_GLOBAL_HOOK__: string | {};
+    }
+}
+declare function startReportingRuntimeErrors({ onError }: {
+    onError: () => void;
+}): void;
+declare function stopReportingRuntimeErrors(): void;
+declare function onBuildOk(): void;
+declare function onBuildError(message: string): void;
+declare function onRefresh(): void;
+export { getErrorByType } from './view/helpers/getErrorByType';
+export { getServerError } from './view/helpers/nodeStackFrames';
+export { onBuildError, onBuildOk, onRefresh, startReportingRuntimeErrors, stopReportingRuntimeErrors };

package/lib/client.js

@@ -0,0 +1,168 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.stopReportingRuntimeErrors = exports.startReportingRuntimeErrors = exports.onRefresh = exports.onBuildOk = exports.onBuildError = exports.getServerError = exports.getErrorByType = void 0;
+const iframeScript_1 = __importDefault(require("iframeScript"));
+const constants_1 = require("./constants");
+const parseStack_1 = require("./view/helpers/parseStack");
+let isRegistered = false;
+let stackTraceLimit = undefined;
+let iframe = null;
+let isLoadingIframe = false;
+let isIframeReady = false;
+let errorType;
+const iframeStyle = {
+    position: 'fixed',
+    top: '0',
+    left: '0',
+    width: '100%',
+    height: '100%',
+    border: 'none',
+    'z-index': 2147483647
+};
+function onUnhandledError(ev) {
+    const error = ev === null || ev === void 0 ? void 0 : ev.error;
+    if (!error || !(error instanceof Error) || typeof error.stack !== 'string') {
+        // A non-error was thrown, we don't have anything to show.
+        return;
+    }
+    errorType = {
+        type: constants_1.TYPE_UNHANDLED_ERROR,
+        reason: error,
+        frames: (0, parseStack_1.parseStack)(error.stack)
+    };
+    update();
+}
+function onUnhandledRejection(ev) {
+    const reason = ev === null || ev === void 0 ? void 0 : ev.reason;
+    if (!reason ||
+        !(reason instanceof Error) ||
+        typeof reason.stack !== 'string') {
+        // A non-error was thrown, we don't have anything to show.
+        return;
+    }
+    errorType = {
+        type: constants_1.TYPE_UNHANDLED_REJECTION,
+        reason: reason,
+        frames: (0, parseStack_1.parseStack)(reason.stack)
+    };
+    update();
+}
+function startReportingRuntimeErrors({ onError }) {
+    if (isRegistered) {
+        return;
+    }
+    isRegistered = true;
+    try {
+        const limit = Error.stackTraceLimit;
+        Error.stackTraceLimit = constants_1.STACK_TRACE_LIMIT;
+        stackTraceLimit = limit;
+    }
+    catch (_a) { }
+    window.addEventListener('error', ev => {
+        onError();
+        onUnhandledError(ev);
+    });
+    window.addEventListener('unhandledrejection', ev => {
+        onError();
+        onUnhandledRejection(ev);
+    });
+}
+exports.startReportingRuntimeErrors = startReportingRuntimeErrors;
+function stopReportingRuntimeErrors() {
+    if (!isRegistered) {
+        return;
+    }
+    isRegistered = false;
+    if (stackTraceLimit !== undefined) {
+        try {
+            Error.stackTraceLimit = stackTraceLimit;
+        }
+        catch (_a) { }
+        stackTraceLimit = undefined;
+    }
+    window.removeEventListener('error', onUnhandledError);
+    window.removeEventListener('unhandledrejection', onUnhandledRejection);
+}
+exports.stopReportingRuntimeErrors = stopReportingRuntimeErrors;
+function onBuildOk() {
+    errorType = { type: constants_1.TYPE_BUILD_OK };
+    update();
+}
+exports.onBuildOk = onBuildOk;
+function onBuildError(message) {
+    errorType = { type: constants_1.TYPE_BUILD_ERROR, message };
+    update();
+}
+exports.onBuildError = onBuildError;
+function onRefresh() {
+    errorType = { type: constants_1.TYPE_REFRESH };
+}
+exports.onRefresh = onRefresh;
+function applyStyles(element, styles) {
+    element.setAttribute('style', '');
+    for (const key in styles) {
+        if (!Object.prototype.hasOwnProperty.call(styles, key)) {
+            continue;
+        }
+        //@ts-ignore
+        element.style[key] = styles[key];
+    }
+}
+function update() {
+    // Loading iframe can be either sync or async depending on the browser.
+    if (isLoadingIframe) {
+        // Iframe is loading.
+        // First render will happen soon--don't need to do anything.
+        return;
+    }
+    if (isIframeReady) {
+        // Iframe is ready.
+        // Just update it.
+        updateIframeContent();
+        return;
+    }
+    // We need to schedule the first render.
+    isLoadingIframe = true;
+    const loadingIframe = window.document.createElement('iframe');
+    applyStyles(loadingIframe, iframeStyle);
+    loadingIframe.onload = function () {
+        const iframeDocument = loadingIframe.contentDocument;
+        if (iframeDocument != null && iframeDocument.body != null) {
+            iframe = loadingIframe;
+            const script = loadingIframe.contentWindow.document.createElement('script');
+            script.type = 'text/javascript';
+            script.innerHTML = iframeScript_1.default;
+            iframeDocument.body.appendChild(script);
+        }
+    };
+    const appDocument = window.document;
+    appDocument.body.appendChild(loadingIframe);
+}
+function updateIframeContent() {
+    if (!iframe) {
+        throw new Error('Iframe has not been created yet.');
+    }
+    //@ts-ignore
+    const isRendered = iframe.contentWindow.updateContent(errorType);
+    if (!isRendered) {
+        window.document.body.removeChild(iframe);
+        iframe = null;
+        isIframeReady = false;
+    }
+}
+window.__SHUVI_ERROR_OVERLAY_GLOBAL_HOOK__ =
+    window.__SHUVI_ERROR_OVERLAY_GLOBAL_HOOK__ || {};
+//@ts-ignore
+window.__SHUVI_ERROR_OVERLAY_GLOBAL_HOOK__.iframeReady =
+    function iframeReady() {
+        isIframeReady = true;
+        isLoadingIframe = false;
+        updateIframeContent();
+    };
+var getErrorByType_1 = require("./view/helpers/getErrorByType");
+Object.defineProperty(exports, "getErrorByType", { enumerable: true, get: function () { return getErrorByType_1.getErrorByType; } });
+var nodeStackFrames_1 = require("./view/helpers/nodeStackFrames");
+Object.defineProperty(exports, "getServerError", { enumerable: true, get: function () { return nodeStackFrames_1.getServerError; } });

package/lib/constants.d.ts

@@ -0,0 +1,7 @@
+export declare const SERVER_TYPE_ERROR = "server";
+export declare const TYPE_BUILD_OK = "build-ok";
+export declare const TYPE_REFRESH = "fast-refresh";
+export declare const TYPE_BUILD_ERROR = "build-error";
+export declare const TYPE_UNHANDLED_ERROR = "unhandled-error";
+export declare const TYPE_UNHANDLED_REJECTION = "unhandled-rejection";
+export declare const STACK_TRACE_LIMIT = 50;

package/lib/constants.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.STACK_TRACE_LIMIT = exports.TYPE_UNHANDLED_REJECTION = exports.TYPE_UNHANDLED_ERROR = exports.TYPE_BUILD_ERROR = exports.TYPE_REFRESH = exports.TYPE_BUILD_OK = exports.SERVER_TYPE_ERROR = void 0;
+exports.SERVER_TYPE_ERROR = 'server';
+exports.TYPE_BUILD_OK = 'build-ok';
+exports.TYPE_REFRESH = 'fast-refresh';
+exports.TYPE_BUILD_ERROR = 'build-error';
+exports.TYPE_UNHANDLED_ERROR = 'unhandled-error';
+exports.TYPE_UNHANDLED_REJECTION = 'unhandled-rejection';
+exports.STACK_TRACE_LIMIT = 50;