@jsenv/plugin-supervisor 1.4.0 → 1.4.2

package/src/client/supervisor.js

@@ -13,13 +13,18 @@ window.__supervisor__ = (() => {
     typeof window.webkitConvertPointFromNodeToPage === "function";
 
   const executionResults = {};
-  let documentExecutionStartTime;
+  let documentTimingsOrigin;
   try {
-    documentExecutionStartTime = window.performance.timing.navigationStart;
+    documentTimingsOrigin = window.performance.timing.navigationStart;
   } catch (e) {
-    documentExecutionStartTime = Date.now();
+    documentTimingsOrigin = Date.now();
   }
-  let documentExecutionEndTime;
+  const documentTimings = {
+    origin: documentTimingsOrigin,
+    start: Date.now() - documentTimingsOrigin,
+    end: null,
+  };
+
   supervisor.setup = ({
     rootDirectoryUrl,
     scriptInfos,
@@ -80,10 +85,13 @@ window.__supervisor__ = (() => {
     const createExecutionController = (src, type) => {
       const result = {
         status: "pending",
-        duration: null,
         coverage: null,
         exception: null,
         value: null,
+        timings: {
+          start: null,
+          end: null,
+        },
       };
 
       let resolve;
@@ -94,7 +102,7 @@ window.__supervisor__ = (() => {
       executionResults[src] = result;
 
       const start = () => {
-        result.duration = null;
+        result.timings.start = Date.now() - documentTimingsOrigin;
         result.coverage = null;
         result.status = "started";
         result.exception = null;
@@ -103,16 +111,15 @@ window.__supervisor__ = (() => {
         }
       };
       const end = () => {
-        const now = Date.now();
         remainingScriptCount--;
-        result.duration = now - documentExecutionStartTime;
+        result.timings.end = Date.now() - documentTimingsOrigin;
         result.coverage = window.__coverage__;
         if (logs) {
           console.log(`execution ${result.status}`);
           console.groupEnd();
         }
         if (remainingScriptCount === 0) {
-          documentExecutionEndTime = now;
+          documentTimings.end = Date.now() - documentTimingsOrigin;
         }
         resolve();
       };
@@ -160,16 +167,20 @@ window.__supervisor__ = (() => {
         }
         const scriptLoadPromise = getScriptLoadPromise(currentScriptClone);
         parentNode.replaceChild(currentScriptClone, nodeToReplace);
-        const { detectedBy, failed, error } = await scriptLoadPromise;
+        const { detectedBy, failed, errorEvent } = await scriptLoadPromise;
         if (failed) {
+          const messageDefault = `Error while loading script`;
+          const { error, message, filename, lineno, colno } = errorEvent;
           if (detectedBy === "script_error_event") {
             // window.error won't be dispatched for this error
-            reportErrorBackToBrowser(error);
+            reportErrorBackToBrowser(error || errorEvent);
           }
-          fail(error, {
-            message: `Error while loading script: ${urlObject.href}`,
+          fail(error || message || messageDefault, {
+            message: messageDefault,
             reportedBy: "script_error_event",
-            url: urlObject.href,
+            url: filename || urlObject.href,
+            line: lineno,
+            column: colno,
           });
           if (detectedBy === "script_error_event") {
             supervisor.reportException(result.exception);
@@ -222,7 +233,7 @@ window.__supervisor__ = (() => {
           return result;
         } catch (e) {
           fail(e, {
-            message: `Error while importing module: ${urlObject.href}`,
+            message: `Error while importing module`,
             reportedBy: "dynamic_import",
             url: urlObject.href,
           });
@@ -268,16 +279,21 @@ window.__supervisor__ = (() => {
         const scriptLoadResultPromise =
           getScriptLoadPromise(currentScriptClone);
         parentNode.replaceChild(currentScriptClone, nodeToReplace);
-        const { detectedBy, failed, error } = await scriptLoadResultPromise;
+        const { detectedBy, failed, errorEvent } =
+          await scriptLoadResultPromise;
 
         if (failed) {
+          const messageDefault = `Error while loading module`;
+          const { error, message, filename, lineno, colno } = errorEvent;
           // if (detectedBy === "script_error_event") {
           //   reportErrorBackToBrowser(error)
           // }
-          fail(error, {
-            message: `Error while loading module: ${urlObject.href}`,
+          fail(error || message || messageDefault, {
+            message: messageDefault,
             reportedBy: "script_error_event",
-            url: urlObject.href,
+            url: filename || urlObject.href,
+            line: lineno,
+            column: colno,
           });
           if (detectedBy === "script_error_event") {
             supervisor.reportException(result.exception);
@@ -391,8 +407,7 @@ window.__supervisor__ = (() => {
     supervisor.getDocumentExecutionResult = async () => {
       await Promise.all(promises);
       return {
-        startTime: documentExecutionStartTime,
-        endTime: documentExecutionEndTime,
+        timings: documentTimings,
         status: "completed",
         executionResults,
       };
@@ -435,10 +450,11 @@ window.__supervisor__ = (() => {
         stackSourcemapped: null,
         stackOriginal: "", // the stack from runtime, not normalized to v8
         stackTrace: "", // the stack trace (without error name and message)
+        stackFrames: undefined,
         withServerUrls: {
           message: "",
-          stackTrace: "",
           stack: "",
+          stackTrace: "",
         },
         meta: null,
         site: {
@@ -463,78 +479,154 @@ window.__supervisor__ = (() => {
           exception.message = reason;
           return;
         }
-        if (reason instanceof Error) {
-          const error = reason;
-          exception.isError = true;
-          exception.name = error.name || "Error";
-          exception.message = error.message || "";
-          if (
-            Error.captureStackTrace &&
-            // captureStackTrace exists on webkit but error.stack is not v8
-            !isWebkitOrSafari
-          ) {
-            // stackTrace formatted by V8
-            exception.stackSourcemapped = true;
-            exception.stack = error.stack;
-            exception.stackTrace = getErrorStackTrace(error);
-          } else if (error.stack) {
-            exception.stackSourcemapped = false;
-            exception.stackTrace = error.stack;
-            exception.stack = stringifyStack(exception);
-          }
+        if (typeof reason !== "object") {
+          exception.message = JSON.stringify(reason);
+          return;
+        }
+        // isError can be false when reason is an ErrorEvent for instance
+        exception.isError = reason instanceof Error;
+        exception.name = reason.name || "Error";
+        exception.message = reason.message || message || "";
 
-          if (error.reportedBy) {
-            exception.reportedBy = error.reportedBy;
-          }
-          if (error.url) {
-            Object.assign(exception.site, resolveUrlSite({ url: error.url }));
-          }
-          export_missing: {
-            // chrome
-            if (error.message.includes("does not provide an export named")) {
-              exception.code = DYNAMIC_IMPORT_EXPORT_MISSING;
-              return;
-            }
-            // firefox
-            if (
-              error.message.startsWith("import not found:") ||
-              error.message.startsWith("ambiguous indirect export:")
-            ) {
-              exception.code = DYNAMIC_IMPORT_EXPORT_MISSING;
-              return;
+        let stackFrames;
+        if (
+          exception.isError &&
+          Error.captureStackTrace &&
+          // captureStackTrace exists on webkit but error.stack is not v8
+          !isWebkitOrSafari
+        ) {
+          // stackTrace formatted by V8
+          const { prepareStackTrace } = Error;
+          Error.prepareStackTrace = (e, callSites) => {
+            Error.prepareStackTrace = prepareStackTrace;
+
+            const getPropertiesFromEvalOrigin = (origin) => {
+              // Most eval() calls are in this format
+              const topLevelEvalMatch =
+                /^eval at ([^(]+) \((.+):(\d+):(\d+)\)$/.exec(origin);
+              if (topLevelEvalMatch) {
+                const source = topLevelEvalMatch[2];
+                const line = Number(topLevelEvalMatch[3]);
+                const column = topLevelEvalMatch[4] - 1;
+                return {
+                  url: source,
+                  line,
+                  column,
+                };
+              }
+              // Parse nested eval() calls using recursion
+              const nestedEvalMatch = /^eval at ([^(]+) \((.+)\)$/.exec(origin);
+              if (nestedEvalMatch) {
+                return getPropertiesFromEvalOrigin(nestedEvalMatch[2]);
+              }
+              return null;
+            };
+
+            stackFrames = [];
+            for (const callSite of callSites) {
+              const url =
+                callSite.getFileName() || callSite.getScriptNameOrSourceURL();
+              const line = callSite.getLineNumber();
+              const column = callSite.getColumnNumber();
+              const site = resolveUrlSite({ url, line, column });
+              const stackFrame = {
+                raw: `  at ${String(callSite)}`,
+                url: site.url,
+                line: site.line,
+                column: site.column,
+                functionName: callSite.getFunctionName(),
+                isNative: callSite.isNative(),
+                isEval: callSite.isEval(),
+                isConstructor: callSite.isConstructor(),
+                isAsync: callSite.isAsync(),
+                evalSite: null,
+              };
+              if (stackFrame.isEval) {
+                const evalOrigin = stackFrame.getEvalOrigin();
+                if (evalOrigin) {
+                  stackFrame.evalSite = getPropertiesFromEvalOrigin(evalOrigin);
+                }
+              }
+              stackFrames.push(stackFrame);
             }
-            // safari
-            if (error.message.startsWith("import binding name")) {
-              exception.code = DYNAMIC_IMPORT_EXPORT_MISSING;
-              return;
+            let stackTrace = "";
+            for (const stackFrame of stackFrames) {
+              if (stackTrace) stackTrace += "\n";
+              stackTrace += stackFrame.raw;
             }
-            if (error.message.includes("Importing a module script failed")) {
-              exception.code = DYNAMIC_IMPORT_FETCH_ERROR;
-              return;
+            exception.stackTrace = stackTrace;
+
+            let stack = "";
+            const name = reason.name || "Error";
+            const message = reason.message || "";
+            stack += `${name}: ${message}`;
+            if (stackTrace) {
+              stack += `\n${stackTrace}`;
             }
-          }
-          js_syntax_error: {
-            if (error.name === "SyntaxError" && typeof line === "number") {
-              exception.code = DYNAMIC_IMPORT_SYNTAX_ERROR;
-              return;
+            return stack;
+          };
+
+          exception.stackSourcemapped = true;
+          exception.stack = reason.stack;
+          if (stackFrames === undefined) {
+            // Error.prepareStackTrace not trigerred
+            // - reason is not an error
+            // - reason.stack already get
+            Error.prepareStackTrace = prepareStackTrace;
+            exception.stackTrace = getErrorStackTrace(reason);
+          } else {
+            exception.stackFrames = stackFrames;
+            const [firstCallFrame] = stackFrames;
+            if (
+              exception.site.url === null &&
+              firstCallFrame &&
+              firstCallFrame.url
+            ) {
+              Object.assign(exception.site, {
+                url: firstCallFrame.url,
+                line: firstCallFrame.line,
+                column: firstCallFrame.column,
+              });
             }
           }
-          return;
+        } else {
+          exception.stackSourcemapped = false;
+          exception.stackTrace = reason.stack;
+          exception.stack = stringifyStack(exception);
         }
-        if (typeof reason === "object") {
-          // happens when reason is an Event for instance
-          exception.code = reason.code;
-          exception.message = reason.message || message;
-          exception.stack = reason.stack;
-          if (reason.reportedBy) {
-            exception.reportedBy = reason.reportedBy;
+
+        if (exception.site.url === null && reason.url) {
+          Object.assign(exception.site, resolveUrlSite({ url: reason.url }));
+        }
+        export_missing: {
+          // chrome
+          if (exception.message.includes("does not provide an export named")) {
+            exception.code = DYNAMIC_IMPORT_EXPORT_MISSING;
+          }
+          // firefox
+          if (
+            exception.message.startsWith("import not found:") ||
+            exception.message.startsWith("ambiguous indirect export:")
+          ) {
+            exception.code = DYNAMIC_IMPORT_EXPORT_MISSING;
           }
-          if (reason.url) {
-            Object.assign(exception.site, resolveUrlSite({ url: reason.url }));
+          // safari
+          if (exception.message.startsWith("import binding name")) {
+            exception.code = DYNAMIC_IMPORT_EXPORT_MISSING;
+          }
+          if (exception.message.includes("Importing a module script failed")) {
+            exception.code = DYNAMIC_IMPORT_FETCH_ERROR;
+          }
+        }
+        js_syntax_error: {
+          if (
+            !exception.code &&
+            exception.name === "SyntaxError" &&
+            typeof line === "number"
+          ) {
+            exception.code = DYNAMIC_IMPORT_SYNTAX_ERROR;
           }
-          return;
         }
-        exception.message = JSON.stringify(reason);
       };
       writeBasicProperties();
 
@@ -549,7 +641,8 @@ window.__supervisor__ = (() => {
         const fileUrlSite = resolveUrlSite({ url, line, column });
         if (
           fileUrlSite.isInline &&
-          exception.code === DYNAMIC_IMPORT_SYNTAX_ERROR
+          exception.name === "SyntaxError" &&
+          exception.code !== DYNAMIC_IMPORT_EXPORT_MISSING
         ) {
           // syntax error on inline script need line-1 for some reason
           fileUrlSite.line = fileUrlSite.line - 1;
@@ -588,14 +681,15 @@ window.__supervisor__ = (() => {
       return exception;
     };
 
-    const stringifyStack = ({ name, message, stackTrace }) => {
-      let stack;
+    const stringifyStack = ({ codeFrame, name, message, stackTrace }) => {
+      let stack = "";
+      if (codeFrame) {
+        stack += `${codeFrame}\n`;
+      }
       if (name && message) {
-        stack = `${name}: ${message}`;
+        stack += `${name}: ${message}`;
       } else if (message) {
-        stack = message;
-      } else {
-        stack = "";
+        stack += message;
       }
       if (stackTrace) {
         stack += `\n${stackTrace}`;
@@ -737,153 +831,6 @@ window.__supervisor__ = (() => {
       });
     };
 
-    let formatError;
-    error_formatter: {
-      formatError = (exceptionInfo) => {
-        const errorParts = {
-          theme: "dark",
-          title: "An error occured",
-          text: "",
-          tip: "",
-          errorDetailsPromise: null,
-        };
-        const tips = [];
-        tips.push("Click outside to close.");
-        errorParts.tip = tips.join(`\n    <br />\n    `);
-
-        const generateClickableText = (text) => {
-          const textWithHtmlLinks = makeLinksClickable(text, {
-            createLink: ({ url, line, column }) => {
-              const urlSite = resolveUrlSite({ url, line, column });
-              if (errorBaseUrl) {
-                if (urlSite.url.startsWith(rootDirectoryUrl)) {
-                  urlSite.url = `${errorBaseUrl}${urlSite.url.slice(
-                    rootDirectoryUrl.length,
-                  )}`;
-                } else {
-                  urlSite.url = "file:///mocked_for_snapshots";
-                }
-              }
-              const urlWithLineAndColumn = stringifyUrlSite(urlSite);
-              return {
-                href:
-                  urlSite.url.startsWith("file:") && openInEditor
-                    ? `javascript:window.fetch('/__open_in_editor__/${encodeURIComponent(
-                        urlWithLineAndColumn,
-                      )}')`
-                    : urlSite.url,
-                text: urlWithLineAndColumn,
-              };
-            },
-          });
-          return textWithHtmlLinks;
-        };
-
-        errorParts.text = stringifyStack({
-          name: exceptionInfo.name,
-          message: exceptionInfo.message
-            ? generateClickableText(exceptionInfo.message)
-            : "",
-          stackTrace: exceptionInfo.stackTrace
-            ? generateClickableText(exceptionInfo.stackTrace)
-            : "",
-        });
-        if (exceptionInfo.site.url) {
-          errorParts.errorDetailsPromise = (async () => {
-            if (!serverIsJsenvDevServer) {
-              return null;
-            }
-            try {
-              if (
-                exceptionInfo.code === DYNAMIC_IMPORT_FETCH_ERROR ||
-                exceptionInfo.reportedBy === "script_error_event"
-              ) {
-                const response = await window.fetch(
-                  `/__get_error_cause__/${encodeURIComponent(
-                    exceptionInfo.site.isInline
-                      ? exceptionInfo.site.originalUrl
-                      : exceptionInfo.site.url,
-                  )}`,
-                );
-                if (response.status !== 200) {
-                  return null;
-                }
-                const causeInfo = await response.json();
-                if (!causeInfo) {
-                  return null;
-                }
-                const causeText =
-                  causeInfo.code === "NOT_FOUND"
-                    ? stringifyStack({
-                        name: causeInfo.name,
-                        message: generateClickableText(causeInfo.reason),
-                        stackTrace: generateClickableText(causeInfo.codeFrame),
-                      })
-                    : stringifyStack({
-                        name: causeInfo.name,
-                        message: generateClickableText(causeInfo.stack),
-                        stackTrace: generateClickableText(causeInfo.codeFrame),
-                      });
-                return {
-                  cause: causeText,
-                };
-              }
-              if (exceptionInfo.site.line !== undefined) {
-                const urlToFetch = new URL(
-                  `/__get_code_frame__/${encodeURIComponent(
-                    stringifyUrlSite(exceptionInfo.site),
-                  )}`,
-                  window.origin,
-                );
-                if (!exceptionInfo.stackSourcemapped) {
-                  urlToFetch.searchParams.set("remap", "");
-                }
-                const response = await window.fetch(urlToFetch);
-                if (response.status !== 200) {
-                  return null;
-                }
-                const codeFrame = await response.text();
-                return {
-                  codeFrame: generateClickableText(codeFrame),
-                };
-              }
-            } catch (e) {
-              // happens if server is closed for instance
-              return null;
-            }
-            return null;
-          })();
-        }
-        return errorParts;
-      };
-
-      const makeLinksClickable = (
-        string,
-        { createLink = ({ url }) => url },
-      ) => {
-        // normalize line breaks
-        string = string.replace(/\n/g, "\n");
-        string = escapeHtml(string);
-        // render links
-        string = replaceUrls(string, ({ url, line, column }) => {
-          const { href, text } = createLink({ url, line, column });
-          return link({ href, text });
-        });
-        return string;
-      };
-
-      const escapeHtml = (string) => {
-        return string
-          .replace(/&/g, "&amp;")
-          .replace(/</g, "&lt;")
-          .replace(/>/g, "&gt;")
-          .replace(/"/g, "&quot;")
-          .replace(/'/g, "&#039;");
-      };
-
-      const link = ({ href, text = href }) => `<a href="${href}">${text}</a>`;
-    }
-
     let displayErrorNotification;
     error_notification: {
       const { Notification } = window;
@@ -928,51 +875,178 @@ window.__supervisor__ = (() => {
       };
 
       class JsenvErrorOverlay extends HTMLElement {
-        constructor({ theme, title, text, tip, errorDetailsPromise }) {
+        constructor(exception) {
           super();
-          this.root = this.attachShadow({ mode: "open" });
-          this.root.innerHTML = `
+          const root = this.attachShadow({ mode: "open" });
+          const tips = [];
+          tips.push("Click outside to close.");
+          const tip = tips.join(`\n    <br />\n    `);
+          root.innerHTML = `
 <style>
   ${overlayCSS}
 </style>
 <div class="backdrop"></div>
-<div class="overlay" data-theme=${theme}>
+<div class="overlay" data-theme="dark">
   <h1 class="title">
-    ${title}
+    An error occured
   </h1>
-  <pre class="text">${text}</pre>
+  <pre class="text"></pre>
   <div class="tip">
     ${tip}
   </div>
 </div>`;
-          this.root.querySelector(".backdrop").onclick = () => {
+          root.querySelector(".backdrop").onclick = () => {
             if (!this.parentNode) {
               // not in document anymore
               return;
             }
-            this.root.querySelector(".backdrop").onclick = null;
+            root.querySelector(".backdrop").onclick = null;
             this.parentNode.removeChild(this);
           };
-          if (errorDetailsPromise) {
-            errorDetailsPromise.then((errorDetails) => {
-              if (!errorDetails || !this.parentNode) {
-                return;
+
+          const renderException = () => {
+            const { cause = {} } = exception;
+            const { trace = {} } = cause;
+
+            root.querySelector(".text").innerHTML = stringifyStack({
+              codeFrame: trace.codeFrame
+                ? generateClickableText(trace.codeFrame)
+                : "",
+              name: exception.name,
+              message: exception.message
+                ? generateClickableText(exception.message)
+                : "",
+              stackTrace: exception.stackTrace
+                ? generateClickableText(exception.stackTrace)
+                : "",
+            });
+            if (cause) {
+              const causeText = stringifyStack({
+                name: cause.name,
+                message: cause.reason
+                  ? generateClickableText(cause.reason)
+                  : cause.stack
+                    ? generateClickableText(cause.stack)
+                    : "",
+              });
+              if (causeText) {
+                const causeTextIndented = prefixRemainingLines(causeText, "  ");
+                root.querySelector(".text").innerHTML +=
+                  `\n  [cause]: ${causeTextIndented}`;
               }
-              const { codeFrame, cause } = errorDetails;
-              if (codeFrame) {
-                this.root.querySelector(".text").innerHTML +=
-                  `\n\n${codeFrame}`;
+            }
+            if (
+              !exception.stackTrace &&
+              (exception.reportedBy === "script_error_event" ||
+                exception.reportedBy === "window_error_event" ||
+                exception.name === "SyntaxError" ||
+                exception.code === DYNAMIC_IMPORT_FETCH_ERROR ||
+                exception.code === DYNAMIC_IMPORT_EXPORT_MISSING ||
+                exception.code === DYNAMIC_IMPORT_SYNTAX_ERROR)
+            ) {
+              let traceSite = stringifyUrlSite(trace);
+              if (traceSite) {
+                root.querySelector(".text").innerHTML +=
+                  `\n  at ${generateClickableText(traceSite)}`;
               }
-              if (cause) {
-                const causeIndented = prefixRemainingLines(cause, "  ");
-                this.root.querySelector(".text").innerHTML +=
-                  `\n  [cause]: ${causeIndented}`;
+            }
+          };
+          renderException();
+          if (exception.site.url && serverIsJsenvDevServer) {
+            (async () => {
+              try {
+                if (
+                  exception.code === DYNAMIC_IMPORT_FETCH_ERROR ||
+                  exception.reportedBy === "script_error_event"
+                ) {
+                  const response = await window.fetch(
+                    `/__get_error_cause__/${encodeURIComponent(
+                      exception.site.isInline
+                        ? exception.site.originalUrl
+                        : exception.site.url,
+                    )}`,
+                  );
+                  if (response.status !== 200) {
+                    return;
+                  }
+                  const causeInfo = await response.json();
+                  if (!causeInfo) {
+                    return;
+                  }
+                  exception.cause = causeInfo;
+                  renderException();
+                  return;
+                }
+                if (exception.site.line !== undefined) {
+                  const urlToFetch = new URL(
+                    `/__get_cause_trace__/${encodeURIComponent(
+                      stringifyUrlSite(exception.site),
+                    )}`,
+                    window.origin,
+                  );
+                  if (!exception.stackSourcemapped) {
+                    urlToFetch.searchParams.set("remap", "");
+                  }
+                  const response = await window.fetch(urlToFetch);
+                  if (response.status !== 200) {
+                    return;
+                  }
+                  const causeTrace = await response.json();
+                  exception.cause = {
+                    trace: causeTrace,
+                  };
+                  renderException();
+                  return;
+                }
+              } catch (e) {
+                // happens if server is closed for instance
+                return;
               }
-            });
+            })();
           }
         }
       }
-
+      const generateClickableText = (text) => {
+        const textWithHtmlLinks = makeLinksClickable(text, {
+          createLink: ({ url, line, column }) => {
+            const urlSite = resolveUrlSite({ url, line, column });
+            if (errorBaseUrl) {
+              if (urlSite.url.startsWith(rootDirectoryUrl)) {
+                urlSite.url = `${errorBaseUrl}${urlSite.url.slice(
+                  rootDirectoryUrl.length,
+                )}`;
+              } else {
+                urlSite.url = "file:///mocked_for_snapshots";
+              }
+            }
+            const urlWithLineAndColumn = stringifyUrlSite(urlSite);
+            return {
+              href:
+                urlSite.url.startsWith("file:") && openInEditor
+                  ? `javascript:window.fetch('/__open_in_editor__/${encodeURIComponent(
+                      urlWithLineAndColumn,
+                    )}')`
+                  : urlSite.url,
+              text: urlWithLineAndColumn,
+            };
+          },
+        });
+        return textWithHtmlLinks;
+      };
+      const makeLinksClickable = (
+        string,
+        { createLink = ({ url }) => url },
+      ) => {
+        // normalize line breaks
+        string = string.replace(/\r\n/g, "\n");
+        string = escapeHtml(string);
+        // render links
+        string = replaceUrls(string, ({ url, line, column }) => {
+          const { href, text } = createLink({ url, line, column });
+          return link({ href, text });
+        });
+        return string;
+      };
       const prefixRemainingLines = (text, prefix) => {
         const lines = text.split(/\r?\n/);
         const firstLine = lines.shift();
@@ -985,6 +1059,15 @@ window.__supervisor__ = (() => {
         }
         return result;
       };
+      const escapeHtml = (string) => {
+        return string
+          .replace(/&/g, "&amp;")
+          .replace(/</g, "&lt;")
+          .replace(/>/g, "&gt;")
+          .replace(/"/g, "&quot;")
+          .replace(/'/g, "&#039;");
+      };
+      const link = ({ href, text = href }) => `<a href="${href}">${text}</a>`;
 
       if (customElements && !customElements.get(JSENV_ERROR_OVERLAY_TAGNAME)) {
         customElements.define(JSENV_ERROR_OVERLAY_TAGNAME, JsenvErrorOverlay);
@@ -1069,17 +1152,8 @@ window.__supervisor__ = (() => {
 
     supervisor.createException = createException;
     supervisor.reportException = (exception) => {
-      const { theme, title, text, tip, errorDetailsPromise } =
-        formatError(exception);
-
       if (errorOverlay) {
-        const removeErrorOverlay = displayJsenvErrorOverlay({
-          theme,
-          title,
-          text,
-          tip,
-          errorDetailsPromise,
-        });
+        const removeErrorOverlay = displayJsenvErrorOverlay(exception);
         if (window.__reloader__) {
           const onchange = window.__reloader__.status.onchange;
           window.__reloader__.status.onchange = () => {
@@ -1092,8 +1166,8 @@ window.__supervisor__ = (() => {
       }
       if (errorNotification) {
         displayErrorNotification({
-          title,
-          text,
+          title: "An error occured",
+          text: "todo",
         });
       }
       return exception;
@@ -1114,6 +1188,7 @@ window.__supervisor__ = (() => {
         // when error is reported within a worker error is null
         // but there is a message property on errorEvent
         reportedBy: "window_error_event",
+        message,
         url: filename,
         line: lineno,
         column: colno,
@@ -1159,7 +1234,7 @@ window.__supervisor__ = (() => {
           resolve({
             detectedBy: "window_error_event",
             failed: true,
-            error: errorEvent,
+            errorEvent,
           });
         }
       };
@@ -1172,7 +1247,7 @@ window.__supervisor__ = (() => {
         resolve({
           detectedBy: "script_error_event",
           failed: true,
-          error: errorEvent,
+          errorEvent,
         });
       });
       script.addEventListener("load", () => {