@jsenv/core 27.5.3 → 27.7.0

package/src/plugins/html_supervisor/client/error_formatter.js

@@ -1,33 +1,62 @@
 export const formatError = (
   error,
-  {
-    rootDirectoryUrl,
-    errorBaseUrl,
-    openInEditor,
-    url,
-    line,
-    column,
-    codeFrame,
-    requestedRessource,
-    reportedBy,
-  },
+  { rootDirectoryUrl, errorBaseUrl, openInEditor, url, line, column },
 ) => {
   let { message, stack } = normalizeErrorParts(error)
-  let codeFramePromiseReference = { current: null }
-  let tip = formatTip({ reportedBy, requestedRessource })
+  let errorDetailsPromiseReference = { current: null }
+  let tip = `Reported by the browser while executing <code>${window.location.pathname}${window.location.search}</code>.`
   let errorUrlSite
 
+  const errorMeta = extractErrorMeta(error, { url, line, column })
+
   const resolveUrlSite = ({ url, line, column }) => {
-    const inlineUrlMatch = url.match(/@L([0-9]+)\-L([0-9]+)\.[\w]+$/)
+    if (typeof line === "string") line = parseInt(line)
+    if (typeof column === "string") column = parseInt(column)
+
+    const inlineUrlMatch = url.match(
+      /@L([0-9]+)C([0-9]+)\-L([0-9]+)C([0-9]+)(\.[\w]+)$/,
+    )
     if (inlineUrlMatch) {
       const htmlUrl = url.slice(0, inlineUrlMatch.index)
-      const tagLine = parseInt(inlineUrlMatch[1])
-      const tagColumn = parseInt(inlineUrlMatch[2])
+      const tagLineStart = parseInt(inlineUrlMatch[1])
+      const tagColumnStart = parseInt(inlineUrlMatch[2])
+      const tagLineEnd = parseInt(inlineUrlMatch[3])
+      const tagColumnEnd = parseInt(inlineUrlMatch[4])
+      const extension = inlineUrlMatch[5]
       url = htmlUrl
-      line = tagLine + parseInt(line) - 1
-      column = tagColumn + parseInt(column)
+      line = tagLineStart + (typeof line === "number" ? line : 0)
+      // stackTrace formatted by V8 (chrome)
+      if (Error.captureStackTrace) {
+        line--
+      }
+      if (errorMeta.type === "dynamic_import_syntax_error") {
+        // syntax error on inline script need line-1 for some reason
+        if (Error.captureStackTrace) {
+          line--
+        } else {
+          // firefox and safari need line-2
+          line -= 2
+        }
+      }
+      column = tagColumnStart + (typeof column === "number" ? column : 0)
+      const fileUrl = resolveFileUrl(url)
+      return {
+        isInline: true,
+        originalUrl: `${fileUrl}@L${tagLineStart}C${tagColumnStart}-L${tagLineEnd}C${tagColumnEnd}${extension}`,
+        url: fileUrl,
+        line,
+        column,
+      }
     }
+    return {
+      isInline: false,
+      url: resolveFileUrl(url),
+      line,
+      column,
+    }
+  }
 
+  const resolveFileUrl = (url) => {
     let urlObject = new URL(url)
     if (urlObject.origin === window.origin) {
       urlObject = new URL(
@@ -39,19 +68,10 @@ export const formatError = (
       const atFsIndex = urlObject.pathname.indexOf("/@fs/")
       if (atFsIndex > -1) {
         const afterAtFs = urlObject.pathname.slice(atFsIndex + "/@fs/".length)
-        url = new URL(afterAtFs, "file:///").href
-      } else {
-        url = urlObject.href
+        return new URL(afterAtFs, "file:///").href
       }
-    } else {
-      url = urlObject.href
-    }
-
-    return {
-      url,
-      line,
-      column,
     }
+    return urlObject.href
   }
 
   const generateClickableText = (text) => {
@@ -59,7 +79,7 @@ export const formatError = (
       createLink: (url, { line, column }) => {
         const urlSite = resolveUrlSite({ url, line, column })
         if (!errorUrlSite && text === stack) {
-          onErrorLocated(urlSite)
+          onErrorLocated(urlSite, "error.stack")
         }
         if (errorBaseUrl) {
           if (urlSite.url.startsWith(rootDirectoryUrl)) {
@@ -83,21 +103,74 @@ export const formatError = (
     return textWithHtmlLinks
   }
 
-  const onErrorLocated = (urlSite) => {
-    errorUrlSite = urlSite
-    if (codeFrame) {
-      return
+  const formatErrorText = ({ message, stack, codeFrame }) => {
+    let text
+    if (message && stack) {
+      text = `${generateClickableText(message)}\n${generateClickableText(
+        stack,
+      )}`
+    } else if (stack) {
+      text = generateClickableText(stack)
+    } else {
+      text = generateClickableText(message)
     }
-    if (reportedBy !== "browser") {
-      return
+    if (codeFrame) {
+      text += `\n\n${generateClickableText(codeFrame)}`
     }
-    codeFramePromiseReference.current = (async () => {
-      const response = await window.fetch(
-        `/__get_code_frame__/${formatUrlWithLineAndColumn(urlSite)}`,
-      )
-      const codeFrame = await response.text()
-      const codeFrameClickable = generateClickableText(codeFrame)
-      return codeFrameClickable
+    return text
+  }
+
+  const onErrorLocated = (urlSite) => {
+    errorUrlSite = urlSite
+    errorDetailsPromiseReference.current = (async () => {
+      try {
+        if (errorMeta.type === "dynamic_import_fetch_error") {
+          const response = await window.fetch(
+            `/__get_error_cause__/${
+              urlSite.isInline ? urlSite.originalUrl : urlSite.url
+            }`,
+          )
+
+          if (response.status !== 200) {
+            return null
+          }
+          const causeInfo = await response.json()
+          if (!causeInfo) {
+            return null
+          }
+
+          const causeText =
+            causeInfo.code === "NOT_FOUND"
+              ? formatErrorText({
+                  message: causeInfo.reason,
+                  stack: causeInfo.codeFrame,
+                })
+              : formatErrorText({
+                  message: causeInfo.stack,
+                  stack: causeInfo.codeFrame,
+                })
+          return {
+            cause: causeText,
+          }
+        }
+        if (urlSite.line !== undefined) {
+          let ressourceToFetch = `/__get_code_frame__/${formatUrlWithLineAndColumn(
+            urlSite,
+          )}`
+          if (!Error.captureStackTrace) {
+            ressourceToFetch += `?remap`
+          }
+          const response = await window.fetch(ressourceToFetch)
+          const codeFrame = await response.text()
+          return {
+            codeFrame: formatErrorText({ message: codeFrame }),
+          }
+        }
+      } catch (e) {
+        // happens if server is closed for instance
+        return null
+      }
+      return null
     })()
   }
 
@@ -110,20 +183,8 @@ export const formatError = (
     !url.endsWith("html_supervisor_installer.js")
   ) {
     onErrorLocated(resolveUrlSite({ url, line, column }))
-  }
-
-  let text
-
-  if (message && stack) {
-    text = `${generateClickableText(message)}\n${generateClickableText(stack)}`
-  } else if (stack) {
-    text = generateClickableText(stack)
-  } else {
-    text = generateClickableText(message)
-  }
-
-  if (codeFrame) {
-    text += `\n\n${generateClickableText(codeFrame)}`
+  } else if (errorMeta.url) {
+    onErrorLocated(resolveUrlSite(errorMeta))
   }
 
   return {
@@ -132,12 +193,79 @@ export const formatError = (
         ? "light"
         : "dark",
     title: "An error occured",
-    text,
-    codeFramePromise: codeFramePromiseReference.current,
+    text: formatErrorText({ message, stack }),
     tip: `${tip}
     <br />
     Click outside to close.`,
+    errorDetailsPromise: errorDetailsPromiseReference.current,
+  }
+}
+
+const extractErrorMeta = (error, { line }) => {
+  if (!error) {
+    return {}
+  }
+  const { message } = error
+  if (!message) {
+    return {}
+  }
+
+  export_missing: {
+    // chrome
+    if (message.includes("does not provide an export named")) {
+      return {
+        type: "dynamic_import_export_missing",
+      }
+    }
+    // firefox
+    if (message.startsWith("import not found:")) {
+      return {
+        type: "dynamic_import_export_missing",
+        browser: "firefox",
+      }
+    }
+    // safari
+    if (message.startsWith("import binding name")) {
+      return {
+        type: "dynamic_import_export_missing",
+      }
+    }
+  }
+
+  js_syntax_error: {
+    if (error.name === "SyntaxError" && typeof line === "number") {
+      return {
+        type: "dynamic_import_syntax_error",
+      }
+    }
+  }
+
+  fetch_error: {
+    // chrome
+    if (message.startsWith("Failed to fetch dynamically imported module: ")) {
+      const url = error.message.slice(
+        "Failed to fetch dynamically imported module: ".length,
+      )
+      return {
+        type: "dynamic_import_fetch_error",
+        url,
+      }
+    }
+    // firefox
+    if (message === "error loading dynamically imported module") {
+      return {
+        type: "dynamic_import_fetch_error",
+      }
+    }
+    // safari
+    if (message === "Importing a module script failed.") {
+      return {
+        type: "dynamic_import_fetch_error",
+      }
+    }
   }
+
+  return {}
 }
 
 const formatUrlWithLineAndColumn = ({ url, line, column }) => {
@@ -213,13 +341,6 @@ const getErrorStackWithoutErrorMessage = (error) => {
   return stack
 }
 
-const formatTip = ({ reportedBy, requestedRessource }) => {
-  if (reportedBy === "browser") {
-    return `Reported by the browser while executing <code>${window.location.pathname}${window.location.search}</code>.`
-  }
-  return `Reported by the server while serving <code>${requestedRessource}</code>`
-}
-
 const makeLinksClickable = (string, { createLink = (url) => url }) => {
   // normalize line breaks
   string = string.replace(/\n/g, "\n")

package/src/plugins/html_supervisor/client/error_overlay.js

@@ -2,8 +2,6 @@ import { formatError } from "./error_formatter.js"
 
 const JSENV_ERROR_OVERLAY_TAGNAME = "jsenv-error-overlay"
 
-let previousErrorInfo = null
-
 export const displayErrorInDocument = (
   error,
   {
@@ -14,30 +12,9 @@ export const displayErrorInDocument = (
     line,
     column,
     codeFrame,
-    reportedBy,
-    requestedRessource,
   },
 ) => {
-  const nowMs = Date.now()
-  // ensure error dispatched on window by browser is displayed first
-  // then the server error replaces it (because it contains more information)
-  if (previousErrorInfo) {
-    const previousErrorReportedBy = previousErrorInfo.reportedBy
-    const msEllapsedSincePreviousError = nowMs - previousErrorInfo.ms
-    if (
-      previousErrorReportedBy === "server" &&
-      reportedBy === "browser" &&
-      msEllapsedSincePreviousError < 50
-    ) {
-      return () => {}
-    }
-  }
-  previousErrorInfo = {
-    ms: nowMs,
-    reportedBy,
-  }
-
-  const { theme, title, text, codeFramePromise, tip } = formatError(error, {
+  const { theme, title, text, tip, errorDetailsPromise } = formatError(error, {
     rootDirectoryUrl,
     errorBaseUrl,
     openInEditor,
@@ -45,16 +22,14 @@ export const displayErrorInDocument = (
     line,
     column,
     codeFrame,
-    reportedBy,
-    requestedRessource,
   })
 
   let jsenvErrorOverlay = new JsenvErrorOverlay({
     theme,
     title,
     text,
-    codeFramePromise,
     tip,
+    errorDetailsPromise,
   })
   document.querySelectorAll(JSENV_ERROR_OVERLAY_TAGNAME).forEach((node) => {
     node.parentNode.removeChild(node)
@@ -77,7 +52,7 @@ export const displayErrorInDocument = (
 }
 
 class JsenvErrorOverlay extends HTMLElement {
-  constructor({ theme, title, text, codeFramePromise, tip }) {
+  constructor({ theme, title, text, tip, errorDetailsPromise }) {
     super()
     this.root = this.attachShadow({ mode: "open" })
     this.root.innerHTML = `
@@ -102,16 +77,39 @@ class JsenvErrorOverlay extends HTMLElement {
       this.root.querySelector(".backdrop").onclick = null
       this.parentNode.removeChild(this)
     }
-    if (codeFramePromise) {
-      codeFramePromise.then((codeFrame) => {
-        if (this.parentNode) {
+    if (errorDetailsPromise) {
+      errorDetailsPromise.then((errorDetails) => {
+        if (!errorDetails || !this.parentNode) {
+          return
+        }
+        const { codeFrame, cause } = errorDetails
+        if (codeFrame) {
           this.root.querySelector(".text").innerHTML += `\n\n${codeFrame}`
         }
+        if (cause) {
+          const causeIndented = prefixRemainingLines(cause, "  ")
+          this.root.querySelector(
+            ".text",
+          ).innerHTML += `\n  [cause]: ${causeIndented}`
+        }
       })
     }
   }
 }
 
+const prefixRemainingLines = (text, prefix) => {
+  const lines = text.split(/\r?\n/)
+  const firstLine = lines.shift()
+  let result = firstLine
+  let i = 0
+  while (i < lines.length) {
+    const line = lines[i]
+    i++
+    result += line.length ? `\n${prefix}${line}` : `\n`
+  }
+  return result
+}
+
 if (customElements && !customElements.get(JSENV_ERROR_OVERLAY_TAGNAME)) {
   customElements.define(JSENV_ERROR_OVERLAY_TAGNAME, JsenvErrorOverlay)
 }

package/src/plugins/html_supervisor/client/html_supervisor_installer.js

@@ -88,11 +88,15 @@ export const installHtmlSupervisor = ({
     let completed
     let result
     let error
+    const urlObject = new URL(src, window.location)
+    if (reload) {
+      urlObject.searchParams.set("hmr", Date.now())
+    }
+    __html_supervisor__.currentExecution = {
+      type: type === "module" ? "dynamic_import" : "script_injection",
+      url: urlObject.href,
+    }
     try {
-      const urlObject = new URL(src, window.location)
-      if (reload) {
-        urlObject.searchParams.set("hmr", Date.now())
-      }
       result = await execute(urlObject.href)
       completed = true
     } catch (e) {
@@ -110,6 +114,7 @@ export const installHtmlSupervisor = ({
         console.log(`${type} load ended`)
         console.groupEnd()
       }
+      __html_supervisor__.currentExecution = null
       return
     }
     const executionResult = {
@@ -127,9 +132,7 @@ export const installHtmlSupervisor = ({
     }
     executionResult.error = error
     onExecutionSettled(src, executionResult)
-    onExecutionError(executionResult, {
-      currentScript,
-    })
+    onExecutionError(executionResult, { currentScript })
     if (errorExposureInConsole) {
       if (typeof window.reportError === "function") {
         window.reportError(error)
@@ -140,6 +143,7 @@ export const installHtmlSupervisor = ({
     if (logs) {
       console.groupEnd()
     }
+    __html_supervisor__.currentExecution = null
   }
 
   const classicExecutionQueue = createExecutionQueue(performExecution)
@@ -175,7 +179,6 @@ export const installHtmlSupervisor = ({
     const useDeferQueue =
       scriptToExecute.defer || scriptToExecute.type === "module"
     if (useDeferQueue) {
-      // defer must wait for classic script to be done
       const classicExecutionPromise = classicExecutionQueue.getPromise()
       if (classicExecutionPromise) {
         deferedExecutionQueue.waitFor(classicExecutionPromise)
@@ -220,76 +223,28 @@ export const installHtmlSupervisor = ({
   })
 
   if (errorOverlay) {
+    const onErrorReportedByBrowser = (error, { url, line, column }) => {
+      displayErrorInDocument(error, {
+        rootDirectoryUrl,
+        errorBaseUrl,
+        openInEditor,
+        url,
+        line,
+        column,
+      })
+    }
     window.addEventListener("error", (errorEvent) => {
       if (!errorEvent.isTrusted) {
         // ignore custom error event (not sent by browser)
         return
       }
       const { error, filename, lineno, colno } = errorEvent
-      displayErrorInDocument(error, {
-        rootDirectoryUrl,
-        errorBaseUrl,
-        openInEditor,
+      onErrorReportedByBrowser(error, {
         url: filename,
         line: lineno,
         column: colno,
-        reportedBy: "browser",
       })
     })
-    if (window.__server_events__) {
-      const isExecuting = () => {
-        if (pendingExecutionCount > 0) {
-          return true
-        }
-        if (
-          document.readyState === "loading" ||
-          document.readyState === "interactive"
-        ) {
-          return true
-        }
-        if (window.__reloader__ && window.__reloader__.status === "reloading") {
-          return true
-        }
-        return false
-      }
-      window.__server_events__.addEventCallbacks({
-        error_while_serving_file: (serverErrorEvent) => {
-          if (!isExecuting()) {
-            return
-          }
-          const {
-            message,
-            stack,
-            traceUrl,
-            traceLine,
-            traceColumn,
-            traceMessage,
-            requestedRessource,
-            isFaviconAutoRequest,
-          } = JSON.parse(serverErrorEvent.data)
-          if (isFaviconAutoRequest) {
-            return
-          }
-          displayErrorInDocument(
-            {
-              message,
-              stack,
-            },
-            {
-              rootDirectoryUrl,
-              errorBaseUrl,
-              openInEditor,
-              url: traceUrl,
-              line: traceLine,
-              column: traceColumn,
-              codeFrame: traceMessage,
-              reportedBy: "server",
-              requestedRessource,
-            },
-          )
-        },
-      })
-    }
   }
 }
 

package/src/plugins/html_supervisor/client/html_supervisor_setup.js

@@ -9,11 +9,12 @@ window.__html_supervisor__ = {
     window.__html_supervisor__.scriptsToExecute.push(scriptToExecute)
   },
   superviseScript: ({ src, isInline, crossorigin, integrity }) => {
+    const { currentScript } = document
     window.__html_supervisor__.addScriptToExecute({
       src,
       type: "js_classic",
       isInline,
-      currentScript: document.currentScript,
+      currentScript,
       execute: (url) => {
         return new Promise((resolve, reject) => {
           const script = document.createElement("script")
@@ -50,7 +51,14 @@ window.__html_supervisor__ = {
               resolve()
             }
           })
-          document.body.appendChild(script)
+          if (currentScript) {
+            currentScript.parentNode.insertBefore(
+              script,
+              currentScript.nextSibling,
+            )
+          } else {
+            document.body.appendChild(script)
+          }
         })
       },
     })