@jsenv/core 27.5.3 → 27.6.0

package/src/omega/url_graph/url_graph_load.js

@@ -7,7 +7,6 @@ export const loadUrlGraph = async ({
   startLoading,
   writeGeneratedFiles,
   outDirectoryUrl,
-  clientRuntimeCompat,
 }) => {
   if (writeGeneratedFiles && outDirectoryUrl) {
     await ensureEmptyDirectory(outDirectoryUrl)
@@ -19,7 +18,6 @@ export const loadUrlGraph = async ({
     if (promiseFromData) return promiseFromData
     const promise = _cook(urlInfo, {
       outDirectoryUrl,
-      clientRuntimeCompat,
       ...context,
     })
     promises.push(promise)

package/src/omega/url_graph/url_info_transformations.js

@@ -11,12 +11,29 @@ import {
 export const createUrlInfoTransformer = ({
   logger,
   sourcemaps,
+  sourcemapsSourcesProtocol,
   sourcemapsSourcesContent,
   sourcemapsRelativeSources,
   urlGraph,
+  clientRuntimeCompat,
   injectSourcemapPlaceholder,
   foundSourcemap,
 }) => {
+  const runtimeNames = Object.keys(clientRuntimeCompat)
+  const chromeAsSingleRuntime =
+    runtimeNames.length === 1 && runtimeNames[0] === "chrome"
+  if (sourcemapsSourcesProtocol === undefined) {
+    sourcemapsSourcesProtocol = "file:///"
+  }
+  if (sourcemapsSourcesContent === undefined) {
+    if (chromeAsSingleRuntime && sourcemapsSourcesProtocol === "file:///") {
+      // chrome is able to fetch source when referenced with "file:"
+      sourcemapsSourcesContent = false
+    } else {
+      sourcemapsSourcesContent = true
+    }
+  }
+
   const sourcemapsEnabled =
     sourcemaps === "inline" ||
     sourcemaps === "file" ||
@@ -172,6 +189,16 @@ export const createUrlInfoTransformer = ({
           return sourceRelative || "."
         })
       }
+      if (sourcemapsSourcesProtocol !== "file:///") {
+        sourcemap.sources = sourcemap.sources.map((source) => {
+          if (source.startsWith("file:///")) {
+            return `${sourcemapsSourcesProtocol}${source.slice(
+              "file:///".length,
+            )}`
+          }
+          return source
+        })
+      }
       sourcemapUrlInfo.content = JSON.stringify(sourcemap, null, "  ")
       if (!urlInfo.sourcemapIsWrong) {
         if (sourcemaps === "inline") {

package/src/omega/url_graph.js

@@ -218,6 +218,7 @@ export const createUrlGraph = ({
 
 const createUrlInfo = (url) => {
   return {
+    error: null,
     modifiedTimestamp: 0,
     contentEtag: null,
     dependsOnPackageJson: false,

package/src/plugins/autoreload/client/autoreload.js

@@ -15,6 +15,7 @@ const reloader = {
   isAutoreloadEnabled,
   setAutoreloadPreference,
   status: "idle",
+  currentExecution: null,
   onstatuschange: () => {},
   setStatus: (status) => {
     reloader.status = status
@@ -49,6 +50,7 @@ const reloader = {
       promise.then(
         () => {
           onApplied(reloadMessage)
+          reloader.currentExecution = null
         },
         (e) => {
           reloader.setStatus("failed")
@@ -61,6 +63,7 @@ const reloader = {
             `[jsenv] Hot reload failed after ${reloadMessage.reason}.
 This could be due to syntax errors or importing non-existent modules (see errors in console)`,
           )
+          reloader.currentExecution = null
         },
       )
     }
@@ -146,6 +149,10 @@ const applyHotReload = async ({ hotInstructions }) => {
           await urlHotMeta.disposeCallback()
         }
         console.log(`importing js module`)
+        reloader.currentExecution = {
+          type: "dynamic_import",
+          url: urlToFetch,
+        }
         const namespace = await reloadJsImport(urlToFetch)
         if (urlHotMeta.acceptCallback) {
           await urlHotMeta.acceptCallback(namespace)

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

@@ -1,33 +1,59 @@
 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]+$/)
+    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 + (line === undefined ? 0 : parseInt(line))
+      // 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 + (column === undefined ? 0 : parseInt(column))
+      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 +65,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 +76,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 +100,64 @@ 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 () => {
+      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) {
+        const response = await window.fetch(
+          `/__get_code_frame__/${formatUrlWithLineAndColumn(urlSite)}`,
+        )
+        const codeFrame = await response.text()
+        return {
+          codeFrame: formatErrorText({ message: codeFrame }),
+        }
+      }
+      return null
     })()
   }
 
@@ -110,20 +170,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,14 +180,81 @@ 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 }) => {
   return line === undefined && column === undefined
     ? url
@@ -213,13 +328,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/error_site_remap.js

@@ -0,0 +1,85 @@
+import { memoize } from "@jsenv/utils/src/memoize/memoize.js"
+import { remapSourcePosition } from "@jsenv/sourcemap/src/error_stack_remap/remap_source_position.js"
+import { SOURCEMAP } from "@jsenv/sourcemap/src/sourcemap_comment.js"
+import { DATA_URL } from "@jsenv/urls/src/data_url.js"
+
+const loadSourceMapConsumer = memoize(async () => {
+  const script = document.createElement("script")
+  script.src = "https://unpkg.com/source-map@0.7.3/dist/source-map.js"
+
+  const scriptLoadedPromise = new Promise((resolve) => {
+    script.onload = resolve
+  })
+  document.head.appendChild(script)
+  await scriptLoadedPromise
+  const { SourceMapConsumer } = window.sourceMap
+  await SourceMapConsumer.initialize({
+    "lib/mappings.wasm": "https://unpkg.com/source-map@0.7.3/lib/mappings.wasm",
+  })
+  return SourceMapConsumer
+})
+
+export const remapErrorSite = async ({ url, line, column }) => {
+  const asServerUrl = (url) => {
+    if (url.startsWith("file:///")) {
+      url = `${window.origin}/@fs/${url.slice("file:///".length)}`
+    }
+    return url
+  }
+
+  const SourceMapConsumer = await loadSourceMapConsumer()
+  const original = await remapSourcePosition({
+    source: url,
+    line,
+    column,
+    resolveFile: (specifier) => new URL(specifier, `${window.origin}/`).href,
+    urlToSourcemapConsumer: async (url) => {
+      const serverUrl = asServerUrl(url)
+      const fileResponse = await window.fetch(serverUrl)
+      const text = await fileResponse.text()
+      const jsSourcemapComment = SOURCEMAP.readComment({
+        contentType: "text/javascript",
+        content: text,
+      })
+
+      const jsSourcemapUrl = jsSourcemapComment.specifier
+      let sourcemapUrl
+      let sourcemapUrlContent
+      if (jsSourcemapUrl.startsWith("data:")) {
+        sourcemapUrl = url
+        sourcemapUrlContent = window.atob(DATA_URL.parse(jsSourcemapUrl).data)
+      } else {
+        sourcemapUrl = new URL(jsSourcemapUrl, url).href
+        const sourcemapResponse = await window.fetch(sourcemapUrl)
+        sourcemapUrlContent = await sourcemapResponse.text()
+      }
+
+      const sourceMap = JSON.parse(sourcemapUrlContent)
+      let { sourcesContent } = sourceMap
+      if (!sourcesContent) {
+        sourcesContent = []
+        sourceMap.sourcesContent = sourcesContent
+      }
+      let firstSourceMapSourceFailure = null
+      await Promise.all(
+        sourceMap.sources.map(async (source, index) => {
+          if (index in sourcesContent) return
+          let sourceUrl = new URL(source, sourcemapUrl).href
+          sourceUrl = asServerUrl(sourceUrl)
+          try {
+            const sourceResponse = await window.fetch(sourceUrl)
+            const sourceContent = await sourceResponse.text()
+            sourcesContent[index] = sourceContent
+          } catch (e) {
+            firstSourceMapSourceFailure = e
+          }
+        }),
+      )
+      if (firstSourceMapSourceFailure) {
+        return null
+      }
+      return new SourceMapConsumer(sourceMap)
+    },
+  })
+  return original
+}