@jsenv/core 27.5.2 → 27.6.1

package/src/omega/server/file_service.js

@@ -34,17 +34,11 @@ export const createFileService = ({
   cooldownBetweenFileEvents,
   explorer,
   sourcemaps,
+  sourcemapsSourcesProtocol,
+  sourcemapsSourcesContent,
   writeGeneratedFiles,
 }) => {
   const jsenvDirectoryUrl = new URL(".jsenv/", rootDirectoryUrl).href
-  const onErrorWhileServingFileCallbacks = []
-  const onErrorWhileServingFile = (data) => {
-    onErrorWhileServingFileCallbacks.forEach(
-      (onErrorWhileServingFileCallback) => {
-        onErrorWhileServingFileCallback(data)
-      },
-    )
-  }
 
   const clientFileChangeCallbackList = []
   const clientFilesPruneCallbackList = []
@@ -113,6 +107,9 @@ export const createFileService = ({
       rootDirectoryUrl,
       scenario,
       runtimeCompat,
+      clientRuntimeCompat: {
+        [runtimeName]: runtimeVersion,
+      },
       urlGraph,
       plugins: [
         ...plugins,
@@ -134,6 +131,8 @@ export const createFileService = ({
         }),
       ],
       sourcemaps,
+      sourcemapsSourcesProtocol,
+      sourcemapsSourcesContent,
       writeGeneratedFiles,
     })
     serverStopCallbacks.push(() => {
@@ -170,28 +169,6 @@ export const createFileService = ({
             },
           })
         })
-        onErrorWhileServingFileCallbacks.push((data) => {
-          serverEventsDispatcher.dispatchToRoomsMatching(
-            {
-              type: "error_while_serving_file",
-              data,
-            },
-            (room) => {
-              // send only to page depending on this file
-              const errorFileUrl = data.url
-              const roomEntryPointUrl = new URL(
-                room.request.ressource.slice(1),
-                rootDirectoryUrl,
-              ).href
-              const isErrorRelatedToEntryPoint = Boolean(
-                urlGraph.findDependent(errorFileUrl, (dependentUrlInfo) => {
-                  return dependentUrlInfo.url === roomEntryPointUrl
-                }),
-              )
-              return isErrorRelatedToEntryPoint
-            },
-          )
-        })
         // "unshift" because serve must come first to catch event source client request
         kitchen.pluginController.unshiftPlugin({
           name: "jsenv:provide_server_events",
@@ -286,6 +263,7 @@ export const createFileService = ({
         !urlInfo.isInline &&
         urlInfo.type !== "sourcemap"
       ) {
+        urlInfo.error = null
         urlInfo.sourcemap = null
         urlInfo.sourcemapReference = null
         urlInfo.content = null
@@ -298,9 +276,6 @@ export const createFileService = ({
       await kitchen.cook(urlInfo, {
         request,
         reference,
-        clientRuntimeCompat: {
-          [runtimeName]: runtimeVersion,
-        },
         outDirectoryUrl:
           scenario === "dev"
             ? `${rootDirectoryUrl}.jsenv/${runtimeName}@${runtimeVersion}/`
@@ -333,18 +308,9 @@ export const createFileService = ({
       )
       return response
     } catch (e) {
+      urlInfo.error = e
       const code = e.code
       if (code === "PARSE_ERROR") {
-        onErrorWhileServingFile({
-          requestedRessource: request.ressource,
-          code: "PARSE_ERROR",
-          message: e.reason,
-          url: e.url,
-          traceUrl: e.traceUrl,
-          traceLine: e.traceLine,
-          traceColumn: e.traceColumn,
-          traceMessage: e.traceMessage,
-        })
         return {
           url: reference.url,
           status: 200, // let the browser re-throw the syntax error
@@ -375,19 +341,6 @@ export const createFileService = ({
         }
       }
       if (code === "NOT_FOUND") {
-        onErrorWhileServingFile({
-          requestedRessource: request.ressource,
-          isFaviconAutoRequest:
-            request.ressource === "/favicon.ico" &&
-            reference.type === "http_request",
-          code: "NOT_FOUND",
-          message: e.reason,
-          url: e.url,
-          traceUrl: e.traceUrl,
-          traceLine: e.traceLine,
-          traceColumn: e.traceColumn,
-          traceMessage: e.traceMessage,
-        })
         return {
           url: reference.url,
           status: 404,
@@ -395,16 +348,6 @@ export const createFileService = ({
           statusMessage: e.message,
         }
       }
-      onErrorWhileServingFile({
-        requestedRessource: request.ressource,
-        code: "UNEXPECTED",
-        stack: e.stack,
-        url: e.url,
-        traceUrl: e.traceUrl,
-        traceLine: e.traceLine,
-        traceColumn: e.traceColumn,
-        traceMessage: e.traceMessage,
-      })
       return {
         url: reference.url,
         status: 500,

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,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,42 +103,82 @@ 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) {
+        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 }),
+        }
+      }
+      return null
     })()
   }
 
   // error.stack is more reliable than url/line/column reported on window error events
   // so use it only when error.stack is not available
-  if (url && !stack) {
+  if (
+    url &&
+    !stack &&
+    // ignore window.reportError() it gives no valuable info
+    !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 {
@@ -127,12 +187,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 }) => {
@@ -208,13 +335,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

@@ -12,11 +12,9 @@ export const displayErrorInDocument = (
     line,
     column,
     codeFrame,
-    reportedBy,
-    requestedRessource,
   },
 ) => {
-  const { theme, title, text, codeFramePromise, tip } = formatError(error, {
+  const { theme, title, text, tip, errorDetailsPromise } = formatError(error, {
     rootDirectoryUrl,
     errorBaseUrl,
     openInEditor,
@@ -24,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)
@@ -56,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 = `
@@ -81,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)
 }