@jsenv/plugin-supervisor 1.4.0 → 1.4.1

package/dist/js/supervisor.js

@@ -163,17 +163,27 @@ window.__supervisor__ = (() => {
         const {
           detectedBy,
           failed,
-          error
+          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: ".concat(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);
@@ -236,7 +246,7 @@ window.__supervisor__ = (() => {
           return result;
         } catch (e) {
           fail(e, {
-            message: "Error while importing module: ".concat(urlObject.href),
+            message: "Error while importing module",
             reportedBy: "dynamic_import",
             url: urlObject.href
           });
@@ -289,16 +299,26 @@ window.__supervisor__ = (() => {
         const {
           detectedBy,
           failed,
-          error
+          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: ".concat(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);
@@ -471,10 +491,11 @@ window.__supervisor__ = (() => {
         // the stack from runtime, not normalized to v8
         stackTrace: "",
         // the stack trace (without error name and message)
+        stackFrames: undefined,
         withServerUrls: {
           message: "",
-          stackTrace: "",
-          stack: ""
+          stack: "",
+          stackTrace: ""
         },
         meta: null,
         site: {
@@ -498,76 +519,140 @@ 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 (error.reportedBy) {
-            exception.reportedBy = error.reportedBy;
-          }
-          if (error.url) {
-            Object.assign(exception.site, resolveUrlSite({
-              url: error.url
-            }));
-          }
-          {
-            // 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;
+        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 || "";
+        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 ".concat(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 += "".concat(name, ": ").concat(message);
+            if (stackTrace) {
+              stack += "\n".concat(stackTrace);
             }
-          }
-          {
-            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
+          }));
+        }
+        {
+          // chrome
+          if (exception.message.includes("does not provide an export named")) {
+            exception.code = DYNAMIC_IMPORT_EXPORT_MISSING;
           }
-          if (reason.url) {
-            Object.assign(exception.site, resolveUrlSite({
-              url: reason.url
-            }));
+          // firefox
+          if (exception.message.startsWith("import not found:") || exception.message.startsWith("ambiguous indirect export:")) {
+            exception.code = DYNAMIC_IMPORT_EXPORT_MISSING;
+          }
+          // 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;
+          }
+        }
+        {
+          if (!exception.code && exception.name === "SyntaxError" && typeof line === "number") {
+            exception.code = DYNAMIC_IMPORT_SYNTAX_ERROR;
           }
-          return;
         }
-        exception.message = JSON.stringify(reason);
       };
       writeBasicProperties();
 
@@ -584,7 +669,7 @@ window.__supervisor__ = (() => {
           line,
           column
         });
-        if (fileUrlSite.isInline && exception.code === DYNAMIC_IMPORT_SYNTAX_ERROR) {
+        if (fileUrlSite.isInline && 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;
         }
@@ -617,17 +702,19 @@ window.__supervisor__ = (() => {
       return exception;
     };
     const stringifyStack = ({
+      codeFrame,
       name,
       message,
       stackTrace
     }) => {
-      let stack;
+      let stack = "";
+      if (codeFrame) {
+        stack += "".concat(codeFrame, "\n");
+      }
       if (name && message) {
-        stack = "".concat(name, ": ").concat(message);
+        stack += "".concat(name, ": ").concat(message);
       } else if (message) {
-        stack = message;
-      } else {
-        stack = "";
+        stack += message;
       }
       if (stackTrace) {
         stack += "\n".concat(stackTrace);
@@ -764,140 +851,6 @@ window.__supervisor__ = (() => {
         return replacement;
       });
     };
-    let formatError;
-    {
-      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 = "".concat(errorBaseUrl).concat(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__/".concat(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__/".concat(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__/".concat(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=\"".concat(href, "\">").concat(text, "</a>");
-    }
     let displayErrorNotification;
     {
       const {
@@ -941,46 +894,151 @@ window.__supervisor__ = (() => {
         return removeErrorOverlay;
       };
       class JsenvErrorOverlay extends HTMLElement {
-        constructor({
-          theme,
-          title,
-          text,
-          tip,
-          errorDetailsPromise
-        }) {
+        constructor(exception) {
           super();
-          this.root = this.attachShadow({
+          const root = this.attachShadow({
             mode: "open"
           });
-          this.root.innerHTML = "\n<style>\n  ".concat(overlayCSS, "\n</style>\n<div class=\"backdrop\"></div>\n<div class=\"overlay\" data-theme=").concat(theme, ">\n  <h1 class=\"title\">\n    ").concat(title, "\n  </h1>\n  <pre class=\"text\">").concat(text, "</pre>\n  <div class=\"tip\">\n    ").concat(tip, "\n  </div>\n</div>");
-          this.root.querySelector(".backdrop").onclick = () => {
+          const tips = [];
+          tips.push("Click outside to close.");
+          const tip = tips.join("\n    <br />\n    ");
+          root.innerHTML = "\n<style>\n  ".concat(overlayCSS, "\n</style>\n<div class=\"backdrop\"></div>\n<div class=\"overlay\" data-theme=\"dark\">\n  <h1 class=\"title\">\n    An error occured\n  </h1>\n  <pre class=\"text\"></pre>\n  <div class=\"tip\">\n    ").concat(tip, "\n  </div>\n</div>");
+          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]: ".concat(causeTextIndented);
               }
-              const {
-                codeFrame,
-                cause
-              } = errorDetails;
-              if (codeFrame) {
-                this.root.querySelector(".text").innerHTML += "\n\n".concat(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 ".concat(generateClickableText(traceSite));
               }
-              if (cause) {
-                const causeIndented = prefixRemainingLines(cause, "  ");
-                this.root.querySelector(".text").innerHTML += "\n  [cause]: ".concat(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__/".concat(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__/".concat(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 = "".concat(errorBaseUrl).concat(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__/".concat(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();
@@ -993,6 +1051,13 @@ 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=\"".concat(href, "\">").concat(text, "</a>");
       if (customElements && !customElements.get(JSENV_ERROR_OVERLAY_TAGNAME)) {
         customElements.define(JSENV_ERROR_OVERLAY_TAGNAME, JsenvErrorOverlay);
       }
@@ -1000,21 +1065,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 = () => {
@@ -1027,8 +1079,8 @@ window.__supervisor__ = (() => {
       }
       if (errorNotification) {
         displayErrorNotification({
-          title,
-          text
+          title: "An error occured",
+          text: "todo"
         });
       }
       return exception;
@@ -1055,6 +1107,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
@@ -1097,7 +1150,7 @@ window.__supervisor__ = (() => {
           resolve({
             detectedBy: "window_error_event",
             failed: true,
-            error: errorEvent
+            errorEvent
           });
         }
       };
@@ -1110,7 +1163,7 @@ window.__supervisor__ = (() => {
         resolve({
           detectedBy: "script_error_event",
           failed: true,
-          error: errorEvent
+          errorEvent
         });
       });
       script.addEventListener("load", () => {