@jsenv/core 27.3.3 → 27.5.0

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

@@ -0,0 +1,401 @@
+const JSENV_ERROR_OVERLAY_TAGNAME = "jsenv-error-overlay"
+
+export const displayErrorInDocument = (
+  error,
+  {
+    rootDirectoryUrl,
+    openInEditor,
+    url,
+    line,
+    column,
+    reportedBy,
+    requestedRessource,
+  },
+) => {
+  document.querySelectorAll(JSENV_ERROR_OVERLAY_TAGNAME).forEach((node) => {
+    node.parentNode.removeChild(node)
+  })
+  const { theme, title, message, stack, tip } = errorToHTML(error, {
+    url,
+    line,
+    column,
+    reportedBy,
+    requestedRessource,
+  })
+  let jsenvErrorOverlay = new JsenvErrorOverlay({
+    theme,
+    title,
+    text: createErrorText({ rootDirectoryUrl, openInEditor, message, stack }),
+    tip,
+  })
+  document.body.appendChild(jsenvErrorOverlay)
+  const removeErrorOverlay = () => {
+    if (jsenvErrorOverlay && jsenvErrorOverlay.parentNode) {
+      document.body.removeChild(jsenvErrorOverlay)
+      jsenvErrorOverlay = null
+    }
+  }
+  if (window.__reloader__) {
+    window.__reloader__.onstatuschange = () => {
+      if (window.__reloader__.status === "reloading") {
+        removeErrorOverlay()
+      }
+    }
+  }
+  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 }) {
+    super()
+    this.root = this.attachShadow({ mode: "open" })
+    this.root.innerHTML = overlayHtml
+    this.root.querySelector(".backdrop").onclick = () => {
+      if (!this.parentNode) {
+        // not in document anymore
+        return
+      }
+      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 (customElements && !customElements.get(JSENV_ERROR_OVERLAY_TAGNAME)) {
+  customElements.define(JSENV_ERROR_OVERLAY_TAGNAME, JsenvErrorOverlay)
+}
+
+const overlayHtml = `
+<style>
+:host {
+  position: fixed;
+  z-index: 99999;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  overflow-y: scroll;
+  margin: 0;
+  background: rgba(0, 0, 0, 0.66);
+}
+
+.backdrop {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+}
+
+.overlay {
+  position: relative;
+  background: rgba(0, 0, 0, 0.95);
+  width: 800px;
+  margin: 30px auto;
+  padding: 25px 40px;
+  padding-top: 0;
+  overflow: hidden; /* for h1 margins */
+  border-radius: 4px 8px;
+  box-shadow: 0 20px 40px rgb(0 0 0 / 30%), 0 15px 12px rgb(0 0 0 / 20%);
+  box-sizing: border-box;
+  font-family: monospace;
+  direction: ltr;
+}
+
+h1 {
+  color: red;
+  text-align: center;
+}
+
+pre {
+  overflow: auto;
+  max-width: 100%;
+  /* padding is nice + prevents scrollbar from hiding the text behind it */
+  /* does not work nicely on firefox though https://bugzilla.mozilla.org/show_bug.cgi?id=748518 */
+  padding: 20px; 
+}
+
+.tip {
+  border-top: 1px solid #999;
+  padding-top: 12px;
+}
+
+[data-theme="dark"] {
+  color: #999;
+}
+[data-theme="dark"] pre {
+  background: #111;
+  border: 1px solid #333;
+  color: #eee;
+}
+
+[data-theme="light"] {
+  color: #EEEEEE;
+}
+[data-theme="light"] pre {
+  background: #1E1E1E;
+  border: 1px solid white;
+  color: #EEEEEE;
+}
+
+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/html_supervisor_installer.js

@@ -1,10 +1,18 @@
 import { unevalException } from "./uneval_exception.js"
-import { displayErrorInDocument } from "./error_in_document.js"
+import { displayErrorInDocument } from "./error_overlay.js"
 import { displayErrorNotification } from "./error_in_notification.js"
 
 const { __html_supervisor__ } = window
 
-export const installHtmlSupervisor = ({ logs, measurePerf }) => {
+const supervisedScripts = []
+
+export const installHtmlSupervisor = ({
+  rootDirectoryUrl,
+  logs,
+  measurePerf,
+  errorOverlay,
+  openInEditor,
+}) => {
   const errorTransformer = null // could implement error stack remapping if needed
   const scriptExecutionResults = {}
   let collectCalled = false
@@ -32,17 +40,13 @@ export const installHtmlSupervisor = ({ logs, measurePerf }) => {
   }
   const onExecutionError = (
     executionResult,
-    {
-      currentScript,
-      errorExposureInNotification = false,
-      errorExposureInDocument = true,
-    },
+    { currentScript, errorExposureInNotification = false },
   ) => {
     const error = executionResult.error
     if (error && error.code === "NETWORK_FAILURE") {
       if (currentScript) {
-        const errorEvent = new Event("error")
-        currentScript.dispatchEvent(errorEvent)
+        const currentScriptErrorEvent = new Event("error")
+        currentScript.dispatchEvent(currentScriptErrorEvent)
       }
     } else if (typeof error === "object") {
       const globalErrorEvent = new Event("error")
@@ -55,9 +59,6 @@ export const installHtmlSupervisor = ({ logs, measurePerf }) => {
     if (errorExposureInNotification) {
       displayErrorNotification(error)
     }
-    if (errorExposureInDocument) {
-      displayErrorInDocument(error)
-    }
     executionResult.exceptionSource = unevalException(error)
     delete executionResult.error
   }
@@ -69,13 +70,16 @@ export const installHtmlSupervisor = ({ logs, measurePerf }) => {
     }
   }
 
-  const performExecution = async ({
-    src,
-    type,
-    currentScript,
-    execute,
-    // https://developer.mozilla.org/en-US/docs/web/html/element/script
-  }) => {
+  const performExecution = async (
+    {
+      src,
+      type,
+      currentScript,
+      execute,
+      // https://developer.mozilla.org/en-US/docs/web/html/element/script
+    },
+    { reload = false } = {},
+  ) => {
     if (logs) {
       console.group(`[jsenv] loading ${type} ${src}`)
     }
@@ -84,7 +88,11 @@ export const installHtmlSupervisor = ({ logs, measurePerf }) => {
     let result
     let error
     try {
-      result = await execute()
+      const urlObject = new URL(src, window.location)
+      if (reload) {
+        urlObject.searchParams.set("hmr", Date.now())
+      }
+      result = await execute(urlObject.href)
       completed = true
     } catch (e) {
       completed = false
@@ -152,12 +160,19 @@ export const installHtmlSupervisor = ({ logs, measurePerf }) => {
     }),
   )
   __html_supervisor__.addScriptToExecute = async (scriptToExecute) => {
+    if (!supervisedScripts.includes(scriptToExecute)) {
+      supervisedScripts.push(scriptToExecute)
+      scriptToExecute.reload = () => {
+        return performExecution(scriptToExecute, { reload: true })
+      }
+    }
+
     if (scriptToExecute.async) {
       performExecution(scriptToExecute)
       return
     }
     const useDeferQueue =
-      scriptToExecute.defer || scriptToExecute.type === "js_module"
+      scriptToExecute.defer || scriptToExecute.type === "module"
     if (useDeferQueue) {
       // defer must wait for classic script to be done
       const classicExecutionPromise = classicExecutionQueue.getPromise()
@@ -202,14 +217,114 @@ export const installHtmlSupervisor = ({ logs, measurePerf }) => {
   copy.forEach((scriptToExecute) => {
     __html_supervisor__.addScriptToExecute(scriptToExecute)
   })
+
+  if (errorOverlay) {
+    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",
+      })
+    })
+    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)
+        },
+      })
+    }
+  }
+}
+
+__html_supervisor__.reloadSupervisedScript = ({ type, src }) => {
+  const supervisedScript = supervisedScripts.find(
+    (supervisedScriptCandidate) => {
+      if (type && supervisedScriptCandidate.type !== type) {
+        return false
+      }
+      if (supervisedScriptCandidate.src !== src) {
+        return false
+      }
+      return true
+    },
+  )
+  if (supervisedScript) {
+    supervisedScript.reload()
+  }
 }
 
 export const superviseScriptTypeModule = ({ src, isInline }) => {
   __html_supervisor__.addScriptToExecute({
     src,
-    type: "js_module",
+    type: "module",
     isInline,
-    execute: () => import(new URL(src, document.location.href).href),
+    execute: (url) => import(url),
   })
 }
 

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

@@ -14,7 +14,7 @@ window.__html_supervisor__ = {
       type: "js_classic",
       isInline,
       currentScript: document.currentScript,
-      execute: () => {
+      execute: (url) => {
         return new Promise((resolve, reject) => {
           const script = document.createElement("script")
           if (crossorigin) {
@@ -23,8 +23,7 @@ window.__html_supervisor__ = {
           if (integrity) {
             script.integrity = integrity
           }
-          script.src = src
-          const scriptUrl = new URL(src, window.location).href
+          script.src = url
           let lastWindowErrorUrl
           let lastWindowError
           const windowErrorCallback = (e) => {
@@ -45,7 +44,7 @@ window.__html_supervisor__ = {
           })
           script.addEventListener("load", () => {
             cleanup()
-            if (lastWindowErrorUrl === scriptUrl) {
+            if (lastWindowErrorUrl === url) {
               reject(lastWindowError)
             } else {
               resolve()