@jsenv/core 27.5.1 → 27.6.0

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

@@ -0,0 +1,413 @@
+export const formatError = (
+  error,
+  { rootDirectoryUrl, errorBaseUrl, openInEditor, url, line, column },
+) => {
+  let { message, stack } = normalizeErrorParts(error)
+  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]+)C([0-9]+)\-L([0-9]+)C([0-9]+)(\.[\w]+)$/,
+    )
+    if (inlineUrlMatch) {
+      const htmlUrl = url.slice(0, inlineUrlMatch.index)
+      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 = 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(
+        `${urlObject.pathname.slice(1)}${urlObject.search}`,
+        rootDirectoryUrl,
+      )
+    }
+    if (urlObject.href.startsWith("file:")) {
+      const atFsIndex = urlObject.pathname.indexOf("/@fs/")
+      if (atFsIndex > -1) {
+        const afterAtFs = urlObject.pathname.slice(atFsIndex + "/@fs/".length)
+        return new URL(afterAtFs, "file:///").href
+      }
+    }
+    return urlObject.href
+  }
+
+  const generateClickableText = (text) => {
+    const textWithHtmlLinks = makeLinksClickable(text, {
+      createLink: (url, { line, column }) => {
+        const urlSite = resolveUrlSite({ url, line, column })
+        if (!errorUrlSite && text === stack) {
+          onErrorLocated(urlSite, "error.stack")
+        }
+        if (errorBaseUrl) {
+          if (urlSite.url.startsWith(rootDirectoryUrl)) {
+            urlSite.url = `${errorBaseUrl}${urlSite.url.slice(
+              rootDirectoryUrl.length,
+            )}`
+          } else {
+            urlSite.url = "file:///mocked_for_snapshots"
+          }
+        }
+        const urlWithLineAndColumn = formatUrlWithLineAndColumn(urlSite)
+        return {
+          href:
+            url.startsWith("file:") && openInEditor
+              ? `javascript:window.fetch('/__open_in_editor__/${urlWithLineAndColumn}')`
+              : urlSite.url,
+          text: urlWithLineAndColumn,
+        }
+      },
+    })
+    return textWithHtmlLinks
+  }
+
+  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 (codeFrame) {
+      text += `\n\n${generateClickableText(codeFrame)}`
+    }
+    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
+    })()
+  }
+
+  // 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 &&
+    // ignore window.reportError() it gives no valuable info
+    !url.endsWith("html_supervisor_installer.js")
+  ) {
+    onErrorLocated(resolveUrlSite({ url, line, column }))
+  } else if (errorMeta.url) {
+    onErrorLocated(resolveUrlSite(errorMeta))
+  }
+
+  return {
+    theme:
+      error && error.cause && error.cause.code === "PARSE_ERROR"
+        ? "light"
+        : "dark",
+    title: "An error occured",
+    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
+    : column === undefined
+    ? `${url}:${line}`
+    : `${url}:${line}:${column}`
+}
+
+const normalizeErrorParts = (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 makeLinksClickable = (string, { createLink = (url) => url }) => {
+  // normalize line breaks
+  string = string.replace(/\n/g, "\n")
+  string = escapeHtml(string)
+  // render links
+  string = stringToStringWithLink(string, {
+    transform: (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;")
+}
+
+// `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>`