@jsenv/core 27.5.1 → 27.6.0

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

@@ -1,32 +1,38 @@
+import { formatError } from "./error_formatter.js"
+
 const JSENV_ERROR_OVERLAY_TAGNAME = "jsenv-error-overlay"
 
 export const displayErrorInDocument = (
   error,
   {
     rootDirectoryUrl,
+    errorBaseUrl,
     openInEditor,
     url,
     line,
     column,
-    reportedBy,
-    requestedRessource,
+    codeFrame,
   },
 ) => {
-  document.querySelectorAll(JSENV_ERROR_OVERLAY_TAGNAME).forEach((node) => {
-    node.parentNode.removeChild(node)
-  })
-  const { theme, title, message, stack, tip } = errorToHTML(error, {
+  const { theme, title, text, tip, errorDetailsPromise } = formatError(error, {
+    rootDirectoryUrl,
+    errorBaseUrl,
+    openInEditor,
     url,
     line,
     column,
-    reportedBy,
-    requestedRessource,
+    codeFrame,
   })
+
   let jsenvErrorOverlay = new JsenvErrorOverlay({
     theme,
     title,
-    text: createErrorText({ rootDirectoryUrl, openInEditor, message, stack }),
+    text,
     tip,
+    errorDetailsPromise,
+  })
+  document.querySelectorAll(JSENV_ERROR_OVERLAY_TAGNAME).forEach((node) => {
+    node.parentNode.removeChild(node)
   })
   document.body.appendChild(jsenvErrorOverlay)
   const removeErrorOverlay = () => {
@@ -45,29 +51,24 @@ export const displayErrorInDocument = (
   return removeErrorOverlay
 }
 
-const createErrorText = ({
-  rootDirectoryUrl,
-  openInEditor,
-  message,
-  stack,
-}) => {
-  if (message && stack) {
-    return `${replaceLinks(message, {
-      rootDirectoryUrl,
-      openInEditor,
-    })}\n${replaceLinks(stack, { rootDirectoryUrl, openInEditor })}`
-  }
-  if (stack) {
-    return replaceLinks(stack, { rootDirectoryUrl, openInEditor })
-  }
-  return replaceLinks(message, { rootDirectoryUrl, openInEditor })
-}
-
 class JsenvErrorOverlay extends HTMLElement {
-  constructor({ theme, title, text, tip }) {
+  constructor({ theme, title, text, tip, errorDetailsPromise }) {
     super()
     this.root = this.attachShadow({ mode: "open" })
-    this.root.innerHTML = overlayHtml
+    this.root.innerHTML = `
+<style>
+  ${overlayCSS}
+</style>
+<div class="backdrop"></div>
+<div class="overlay" data-theme=${theme}>
+  <h1 class="title">
+    ${title}
+  </h1>
+  <pre class="text">${text}</pre>
+  <div class="tip">
+    ${tip}
+  </div>
+</div>`
     this.root.querySelector(".backdrop").onclick = () => {
       if (!this.parentNode) {
         // not in document anymore
@@ -76,19 +77,44 @@ class JsenvErrorOverlay extends HTMLElement {
       this.root.querySelector(".backdrop").onclick = null
       this.parentNode.removeChild(this)
     }
-    this.root.querySelector(".overlay").setAttribute("data-theme", theme)
-    this.root.querySelector(".title").innerHTML = title
-    this.root.querySelector(".text").innerHTML = text
-    this.root.querySelector(".tip").innerHTML = tip
+    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)
 }
 
-const overlayHtml = `
-<style>
+const overlayCSS = `
 :host {
   position: fixed;
   z-index: 99999;
@@ -162,240 +188,4 @@ pre {
 
 pre a {
   color: inherit;
-}
-</style>
-<div class="backdrop"></div>
-<div class="overlay">
-  <h1 class="title"></h1>
-  <pre class="text"></pre>
-  <div class="tip"></div>
-</div>
-`
-
-const parseErrorInfo = (error) => {
-  if (error === undefined) {
-    return {
-      message: "undefined",
-    }
-  }
-  if (error === null) {
-    return {
-      message: "null",
-    }
-  }
-  if (typeof error === "string") {
-    return {
-      message: error,
-    }
-  }
-  if (error instanceof Error) {
-    if (error.name === "SyntaxError") {
-      return {
-        message: error.message,
-      }
-    }
-    if (error.cause && error.cause.code === "PARSE_ERROR") {
-      if (error.messageHTML) {
-        return {
-          message: error.messageHTML,
-        }
-      }
-      return {
-        message: error.message,
-      }
-    }
-    // stackTrace formatted by V8
-    if (Error.captureStackTrace) {
-      return {
-        message: error.message,
-        stack: getErrorStackWithoutErrorMessage(error),
-      }
-    }
-    return {
-      message: error.message,
-      stack: error.stack ? `  ${error.stack}` : null,
-    }
-  }
-  if (typeof error === "object") {
-    return error
-  }
-  return {
-    message: JSON.stringify(error),
-  }
-}
-
-const getErrorStackWithoutErrorMessage = (error) => {
-  let stack = error.stack
-  const messageInStack = `${error.name}: ${error.message}`
-  if (stack.startsWith(messageInStack)) {
-    stack = stack.slice(messageInStack.length)
-  }
-  const nextLineIndex = stack.indexOf("\n")
-  if (nextLineIndex > -1) {
-    stack = stack.slice(nextLineIndex + 1)
-  }
-  return stack
-}
-
-const errorToHTML = (
-  error,
-  { url, line, column, reportedBy, requestedRessource },
-) => {
-  let { message, stack } = parseErrorInfo(error)
-  if (url) {
-    if (!stack || (error && error.name === "SyntaxError")) {
-      stack = `  at ${appendLineAndColumn(url, { line, column })}`
-    }
-  }
-  let tip = formatTip({ reportedBy, requestedRessource })
-  return {
-    theme:
-      error && error.cause && error.cause.code === "PARSE_ERROR"
-        ? "light"
-        : "dark",
-    title: "An error occured",
-    message,
-    stack,
-    tip: `${tip}
-<br />
-Click outside to close.`,
-  }
-}
-
-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 replaceLinks = (string, { rootDirectoryUrl, openInEditor }) => {
-  // normalize line breaks
-  string = string.replace(/\n/g, "\n")
-  string = escapeHtml(string)
-  // render links
-  string = stringToStringWithLink(string, {
-    transform: (url, { line, column }) => {
-      const urlObject = new URL(url)
-
-      const onFileUrl = (fileUrlObject) => {
-        const atFsIndex = fileUrlObject.pathname.indexOf("/@fs/")
-        let fileUrl
-        if (atFsIndex > -1) {
-          const afterAtFs = fileUrlObject.pathname.slice(
-            atFsIndex + "/@fs/".length,
-          )
-          fileUrl = new URL(afterAtFs, "file:///").href
-        } else {
-          fileUrl = fileUrlObject.href
-        }
-        fileUrl = appendLineAndColumn(fileUrl, {
-          line,
-          column,
-        })
-        return link({
-          href: openInEditor
-            ? `javascript:window.fetch('/__open_in_editor__/${fileUrl}')`
-            : fileUrl,
-          text: fileUrl,
-        })
-      }
-
-      if (urlObject.origin === window.origin) {
-        const fileUrlObject = new URL(
-          `${urlObject.pathname.slice(1)}${urlObject.search}`,
-          rootDirectoryUrl,
-        )
-        return onFileUrl(fileUrlObject)
-      }
-      if (urlObject.href.startsWith("file:")) {
-        return onFileUrl(urlObject)
-      }
-      return link({
-        href: url,
-        text: appendLineAndColumn(url, { line, column }),
-      })
-    },
-  })
-  return string
-}
-
-const escapeHtml = (string) => {
-  return string
-    .replace(/&/g, "&amp;")
-    .replace(/</g, "&lt;")
-    .replace(/>/g, "&gt;")
-    .replace(/"/g, "&quot;")
-    .replace(/'/g, "&#039;")
-}
-
-const appendLineAndColumn = (url, { line, column }) => {
-  if (line !== undefined && column !== undefined) {
-    return `${url}:${line}:${column}`
-  }
-  if (line !== undefined) {
-    return `${url}:${line}`
-  }
-  return url
-}
-
-// `Error: yo
-// at Object.execute (http://127.0.0.1:57300/build/src/__test__/file-throw.js:9:13)
-// at doExec (http://127.0.0.1:3000/src/__test__/file-throw.js:452:38)
-// at postOrderExec (http://127.0.0.1:3000/src/__test__/file-throw.js:448:16)
-// at http://127.0.0.1:3000/src/__test__/file-throw.js:399:18`.replace(/(?:https?|ftp|file):\/\/(.*+)$/gm, (...args) => {
-//   debugger
-// })
-const stringToStringWithLink = (
-  source,
-  {
-    transform = (url) => {
-      return {
-        href: url,
-        text: url,
-      }
-    },
-  } = {},
-) => {
-  return source.replace(/(?:https?|ftp|file):\/\/\S+/gm, (match) => {
-    let linkHTML = ""
-
-    const lastChar = match[match.length - 1]
-
-    // hotfix because our url regex sucks a bit
-    const endsWithSeparationChar = lastChar === ")" || lastChar === ":"
-    if (endsWithSeparationChar) {
-      match = match.slice(0, -1)
-    }
-
-    const lineAndColumnPattern = /:([0-9]+):([0-9]+)$/
-    const lineAndColumMatch = match.match(lineAndColumnPattern)
-    if (lineAndColumMatch) {
-      const lineAndColumnString = lineAndColumMatch[0]
-      const lineNumber = lineAndColumMatch[1]
-      const columnNumber = lineAndColumMatch[2]
-      linkHTML = transform(match.slice(0, -lineAndColumnString.length), {
-        line: lineNumber,
-        column: columnNumber,
-      })
-    } else {
-      const linePattern = /:([0-9]+)$/
-      const lineMatch = match.match(linePattern)
-      if (lineMatch) {
-        const lineString = lineMatch[0]
-        const lineNumber = lineMatch[1]
-        linkHTML = transform(match.slice(0, -lineString.length), {
-          line: lineNumber,
-        })
-      } else {
-        linkHTML = transform(match, {})
-      }
-    }
-    if (endsWithSeparationChar) {
-      return `${linkHTML}${lastChar}`
-    }
-    return linkHTML
-  })
-}
-
-const link = ({ href, text = href }) => `<a href="${href}">${text}</a>`
+}`

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
+}

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

@@ -11,6 +11,7 @@ export const installHtmlSupervisor = ({
   logs,
   measurePerf,
   errorOverlay,
+  errorBaseUrl,
   openInEditor,
 }) => {
   const errorTransformer = null // could implement error stack remapping if needed
@@ -87,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) {
@@ -109,6 +114,7 @@ export const installHtmlSupervisor = ({
         console.log(`${type} load ended`)
         console.groupEnd()
       }
+      __html_supervisor__.currentExecution = null
       return
     }
     const executionResult = {
@@ -139,6 +145,7 @@ export const installHtmlSupervisor = ({
     if (logs) {
       console.groupEnd()
     }
+    __html_supervisor__.currentExecution = null
   }
 
   const classicExecutionQueue = createExecutionQueue(performExecution)
@@ -219,86 +226,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 } = errorEvent
-      displayErrorInDocument(error, {
-        rootDirectoryUrl,
-        openInEditor,
-        url: errorEvent.filename,
-        line: errorEvent.lineno,
-        column: errorEvent.colno,
-        reportedBy: "browser",
+      const { error, filename, lineno, colno } = errorEvent
+      onErrorReportedByBrowser(error, {
+        url: filename,
+        line: lineno,
+        column: colno,
       })
     })
-    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
-          }
-          // setTimeout is to ensure the error
-          // dispatched on window by browser is displayed first,
-          // then the server error replaces it (because it contains more information)
-          setTimeout(() => {
-            displayErrorInDocument(
-              {
-                message,
-                stack:
-                  stack && traceMessage
-                    ? `${stack}\n\n${traceMessage}`
-                    : stack
-                    ? stack
-                    : traceMessage
-                    ? `\n${traceMessage}`
-                    : "",
-              },
-              {
-                rootDirectoryUrl,
-                openInEditor,
-                url: traceUrl,
-                line: traceLine,
-                column: traceColumn,
-                reportedBy: "server",
-                requestedRessource,
-              },
-            )
-          }, 10)
-        },
-      })
-    }
   }
 }