Human readable error messages

Author: W4G1

package-lock.json

@@ -1,7 +1,7 @@
 {
   "name": "multithreading",
-  "version": "0.1.15",
-  "description": "⚡ Multithreading functions in JavaScript, designed to be as simple and fast as possible.",
+  "version": "0.1.16",
+  "description": "⚡ Multithreading functions in JavaScript to speedup heavy workloads, designed to feel like writing vanilla functions.",
   "author": "Walter van der Giessen <[email protected]>",
   "homepage": "https://multithreading.io",
   "license": "MIT",

package.json

@@ -15,6 +15,7 @@ export default ["cjs"].flatMap((type) => {
           replace({
             __INLINE_WORKER__: fs
               .readFileSync(`.temp/worker.${type}${version}.js`, "utf8")
+              .replaceAll("\\", "\\\\")
               .replaceAll("`", "\\`")
               .replaceAll("$", "\\$"),
           }),

rollup.config.dev.js

@@ -33,6 +33,7 @@ export default ["esm", "cjs"].flatMap((type) => {
           replace({
             __INLINE_WORKER__: fs
               .readFileSync(`.temp/worker.${type}${version}.js`, "utf8")
+              .replaceAll("\\", "\\\\")
               .replaceAll("`", "\\`")
               .replaceAll("$", "\\$"),
           }),

rollup.config.js

@@ -0,0 +1,49 @@
+const colorRed = "\x1b[31m";
+const colorReset = "\x1b[39m";
+
+export function getErrorPreview(error: Error) {
+  const [message, ...serializedStackFrames] = error.stack!.split("\n");
+
+  const stackFrame = decodeURIComponent(serializedStackFrames[0]);
+
+  const [functionPart, ...otherParts] = stackFrame.split(
+    " (data:text/javascript;charset=utf-8,"
+  );
+
+  const other = otherParts.join();
+  const codeLines = other.split(/\r?\n/);
+  const lastLine = codeLines.pop()!;
+
+  const [lineNumber, columnNumber] = lastLine
+    .slice(0, -1)
+    .split(":")
+    .slice(-2)
+    .map((n) => parseInt(n));
+
+  const amountOfPreviousLines = Math.min(3, lineNumber - 1);
+  const amountOfNextLines = 2;
+
+  const previewLines = codeLines.slice(
+    lineNumber - (amountOfPreviousLines + 1),
+    lineNumber + amountOfNextLines
+  );
+
+  const previousLineLength =
+    codeLines[lineNumber - 1].trimEnd().length - columnNumber;
+
+  previewLines.splice(
+    amountOfPreviousLines + 1,
+    0,
+    colorRed +
+      " ".repeat(columnNumber - 1) +
+      "^".repeat(previousLineLength) +
+      " " +
+      message +
+      colorReset
+  );
+
+  const preview =
+    `${error.name} ${functionPart.trim()}:\n\n` + previewLines.join("\n");
+
+  return preview;
+}

src/lib/getErrorPreview.ts

@@ -11,6 +11,7 @@ import {
   ThreadEvent,
 } from "./types";
 import { replaceContents } from "./replaceContents.ts";
+import { getErrorPreview } from "./getErrorPreview.ts";
 
 declare var pid: number;
 
@@ -35,12 +36,17 @@ globalThis.onmessage = async (e: MessageEvent<MainEvent>) => {
   }
 };
 
-const cyanStart = "\x1b[36m";
-const cyanEnd = "\x1b[39m";
+const colorCyan = "\x1b[36m";
+const colorRed = "\x1b[31m";
+const colorReset = "\x1b[39m";
 
 const originalLog = console.log;
 console.log = (...args) => {
-  originalLog(`${cyanStart}[Thread_${pid}]${cyanEnd}`, ...args);
+  originalLog(`${colorCyan}[Thread_${pid}]${colorReset}`, ...args);
+};
+const originalError = console.error;
+console.error = (...args) => {
+  originalError(`${colorRed}[Thread_${pid}]${colorReset}`, ...args);
 };
 
 const $claim = async function $claim(value: Object) {
@@ -125,11 +131,17 @@ namespace Thread {
   ): Promise<void> {
     const gen = globalThis[GLOBAL_FUNCTION_NAME](...data[$.Args]);
 
-    hasYield && gen.next();
-    const returnValue = await gen.next({
-      $claim,
-      $unclaim,
-    });
+    let returnValue = { value: undefined };
+
+    try {
+      hasYield && gen.next();
+      returnValue = await gen.next({
+        $claim,
+        $unclaim,
+      });
+    } catch (error) {
+      console.error(getErrorPreview(error));
+    }
 
     globalThis.postMessage({
       [$.EventType]: $.Return,