Add source maps to module server (#126)

Author: calebeby

.changeset/nice-chairs-chew.md

@@ -0,0 +1,5 @@
+---
+'pleasantest': minor
+---
+
+Improve error message display for errors coming from browsers

package-lock.json

@@ -9,6 +9,7 @@
   ],
   "license": "MIT",
   "devDependencies": {
+    "@ampproject/remapping": "1.0.1",
     "@babel/core": "7.14.6",
     "@babel/preset-env": "7.14.7",
     "@babel/preset-typescript": "7.14.5",
@@ -47,6 +48,7 @@
     "rollup-plugin-prettier": "2.1.0",
     "rollup-plugin-terser": "7.0.2",
     "sass": "1.35.1",
+    "simple-code-frame": "1.1.1",
     "smoldash": "0.9.0",
     "typescript": "4.3.4"
   },

package.json

@@ -14,6 +14,8 @@ import { pleasantestUser } from './user';
 import { assertElementHandle, removeFuncFromStackTrace } from './utils';
 import { createModuleServer } from './module-server';
 import { cleanupClientRuntimeServer } from './module-server/client-runtime-server';
+import { Console } from 'console';
+
 export { JSHandle, ElementHandle } from 'puppeteer';
 koloristOpts.enabled = true;
 const ansiRegex = _ansiRegex({ onlyFirst: true });
@@ -215,7 +217,7 @@ const createTab = async ({
   const browser = await connectToBrowser('chromium', headless);
   const browserContext = await browser.createIncognitoBrowserContext();
   const page = await browserContext.newPage();
-  const { port, close: closeServer } = await createModuleServer();
+  const { requestCache, port, close: closeServer } = await createModuleServer();
 
   if (device) {
     if (!headless) {
@@ -245,6 +247,9 @@ const createTab = async ({
     // So we don't need to print it _again_ in node, since it already came from node
     if (text.includes('%c')) return;
     const type = message.type();
+    // Create a new console instance instead of using the global one
+    // Because the global one is overridden by Jest, and it adds a misleading second stack trace and code frame below it
+    const console = new Console(process.stdout, process.stderr);
     if (type === 'error') {
       const error = new Error(text);
       const location = message.location();
@@ -278,7 +283,8 @@ const createTab = async ({
   };
 
   const runJS: PleasantestUtils['runJS'] = async (code, args) => {
-    const encodedCode = encodeURIComponent(code);
+    // For some reason encodeURIComponent doesn't encode '
+    const encodedCode = encodeURIComponent(code).replace(/'/g, '%27');
     // This uses the testPath as the url so that if there are relative imports
     // in the inline code, the relative imports are resolved relative to the test file
     const url = `http://localhost:${port}/${testPath}?inline-code=${encodedCode}`;
@@ -299,49 +305,51 @@ const createTab = async ({
     )) as undefined | { message: string; stack: string };
     if (res === undefined) return;
     if (typeof res !== 'object') throw res;
-    const { message, stack } = res;
-    // TODO: re-enable source map usage once source map support is added to module server
-    // Const parsedStack = parseStackTrace(stack);
-    // const modifiedStack = parsedStack.map(async (stackItem) => {
-    //   if (!stackItem.fileName) return stackItem.raw;
-    //   let fileName = stackItem.fileName;
-    //   let line = stackItem.line;
-    //   let column = stackItem.column;
-    //   if (!fileName.startsWith(`http://localhost:${port}`))
-    //     return stackItem.raw;
-    //   const url = new URL(fileName);
-    //   const localFileName = path.join(process.cwd(), url.pathname);
-    //   const transformResult = await server.transformRequest(
-    //     url.pathname + url.search,
-    //   );
-    //   const map = typeof transformResult === 'object' && transformResult?.map;
-    //   if (!map) return stackItem.raw;
-
-    //   const { SourceMapConsumer } = await import('source-map');
-    //   const consumer = await new SourceMapConsumer(map as any);
-    //   const sourceLocation = consumer.originalPositionFor({ line, column });
-    //   consumer.destroy();
-    //   if (sourceLocation.line === null || sourceLocation.column === null)
-    //     return stackItem.raw;
-
-    //   const inlineCode = url.searchParams.get('inline-code');
-    //   if (inlineCode) {
-    //     const fileSrc = await fs.readFile(localFileName, 'utf8');
-    //     const inlineStartIdx = fileSrc.indexOf(inlineCode);
-    //     if (inlineStartIdx === -1) return stackItem.raw;
-    //     const linesTillInlineCode = (
-    //       fileSrc.slice(0, inlineStartIdx).match(/\n/g) || []
-    //     ).length;
-    //     column = sourceLocation.column + 1;
-    //     line = sourceLocation.line + linesTillInlineCode;
-    //   } else {
-    //     column = sourceLocation.column + 1;
-    //     line = sourceLocation.line;
-    //   }
-
-    //   fileName = localFileName;
-    //   return `    at ${fileName}:${line}:${column}`;
-    // });
+    let { message, stack } = res;
+    if (message.includes(`Failed to fetch dynamically imported module: ${url}`))
+      message =
+        'Failed to load runJS code (most likely due to a transpilation error)';
+
+    const parsedStack = parseStackTrace(stack);
+    let isFirst = true;
+    const modifiedStack = parsedStack.map(async (stackItem) => {
+      if (stackItem.raw.startsWith(stack.slice(0, stack.indexOf('\n'))))
+        return null;
+      if (!stackItem.fileName) return stackItem.raw;
+      const fileName = stackItem.fileName;
+      const line = stackItem.line;
+      const column = stackItem.column;
+      if (!fileName.startsWith(`http://localhost:${port}`))
+        return stackItem.raw;
+      const url = new URL(fileName);
+      const id = `.${url.pathname}`;
+      const transformResult = requestCache.get(id);
+      const map = typeof transformResult === 'object' && transformResult.map;
+      if (!map) return stackItem.raw;
+      const { SourceMapConsumer } = await import('source-map');
+      const consumer = await new SourceMapConsumer(map as any);
+      const sourceLocation = consumer.originalPositionFor({ line, column });
+      consumer.destroy();
+      if (sourceLocation.line === null || sourceLocation.column === null)
+        return stackItem.raw;
+      const mappedColumn = sourceLocation.column + 1;
+      const mappedLine = sourceLocation.line;
+      const mappedPath = sourceLocation.source || url.pathname;
+      // If the stack frame has a name (i.e. function name), then display it
+      // _unless_ the stack frame is the first frame
+      // because if the function name is displayed in the first stack frame,
+      // then Jest cannot parse the stack trace to display the code frame
+      const location =
+        stackItem.name && !isFirst // Have to use isFirst instead of array loop index because function has early returns
+          ? `${stackItem.name} (${mappedPath}:${mappedLine}:${mappedColumn})`
+          : `${
+              // The first line has to be an absolute path,
+              // otherwise Jest won't recognize it for the code frame
+              isFirst ? path.join(process.cwd(), mappedPath) : mappedPath
+            }:${mappedLine}:${mappedColumn}`;
+      isFirst = false;
+      return `    at ${location}`;
+    });
     const errorName = stack.slice(0, stack.indexOf(':')) || 'Error';
     const specializedErrors = {
       EvalError,
@@ -351,14 +359,29 @@ const createTab = async ({
       TypeError,
       URIError,
     } as any;
-    const ErrorConstructor = specializedErrors[errorName] || Error;
+    const ErrorConstructor: ErrorConstructor =
+      specializedErrors[errorName] || Error;
     const error = new ErrorConstructor(message);
-    error.stack = stack;
 
-    // TODO: re-enable source map usage once source map support is added to module server
-    // Error.stack = `${errorName}: ${message}\n${(
-    //   await Promise.all(modifiedStack)
-    // ).join('\n')}`;
+    const finalStack = (await Promise.all(modifiedStack))
+      .filter(Boolean)
+      .join('\n');
+
+    // If the browser error did not provide a stack, use the stack trace from node
+    if (finalStack) {
+      error.stack = `${errorName}: ${message}\n${finalStack}`;
+    } else {
+      removeFuncFromStackTrace(error, runJS);
+      if (error.stack)
+        error.stack = error.stack
+          .split('\n')
+          .filter(
+            // This was appearing in stack traces and it messed up the Jest output
+            (line) => !(/runMicrotasks/.test(line) && /<anonymous>/.test(line)),
+          )
+          .join('\n');
+    }
+
     throw error;
   };
 

src/index.ts

@@ -0,0 +1,80 @@
+// Copied from https://github.com/vitejs/vite/blob/d97b33a8cb9a72ed64244f239900a9a862b6ba68/packages/vite/src/node/utils.ts#L431
+
+/*
+  https://github.com/vitejs/vite/blob/main/LICENSE
+  MIT License
+  Copyright (c) 2019-present, Yuxi (Evan) You and Vite contributors
+  Permission is hereby granted, free of charge, to any person obtaining a copy
+  of this software and associated documentation files (the "Software"), to deal
+  in the Software without restriction, including without limitation the rights
+  to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+  copies of the Software, and to permit persons to whom the Software is
+  furnished to do so, subject to the following conditions:
+  The above copyright notice and this permission notice shall be included in all
+  copies or substantial portions of the Software.
+  THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+  IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+  FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+  AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+  SOFTWARE.
+  */
+
+/*
+  Differences from original:
+  - Function style changed
+  - ESLint fixes
+  - Order of source maps is reversed in input
+  - Make it not break if a sourcemap is missing sources
+  */
+
+import remapping from '@ampproject/remapping';
+import type {
+  DecodedSourceMap,
+  RawSourceMap,
+} from '@ampproject/remapping/dist/types/types';
+
+// Based on https://github.com/sveltejs/svelte/blob/abf11bb02b2afbd3e4cac509a0f70e318c306364/src/compiler/utils/mapped_code.ts#L221
+const nullSourceMap: RawSourceMap = {
+  names: [],
+  sources: [],
+  mappings: '',
+  version: 3,
+};
+export const combineSourceMaps = (
+  filename: string,
+  _sourceMapList: (DecodedSourceMap | RawSourceMap)[],
+): RawSourceMap => {
+  const sourceMapList = _sourceMapList
+    .map((map) => {
+      // eslint-disable-next-line @cloudfour/typescript-eslint/no-unnecessary-condition
+      if (!map.sources) map.sources = [];
+      return map;
+    })
+    .reverse();
+  if (
+    sourceMapList.length === 0 ||
+    sourceMapList.every((m) => m.sources.length === 0)
+  )
+    return { ...nullSourceMap };
+
+  let mapIndex = 1;
+  const useArrayInterface =
+    sourceMapList.slice(0, -1).find((m) => m.sources.length !== 1) ===
+    undefined;
+  const map = useArrayInterface
+    ? remapping(sourceMapList, () => null, true)
+    : remapping(
+        sourceMapList[0],
+        (sourcefile) =>
+          sourcefile === filename && sourceMapList[mapIndex]
+            ? sourceMapList[mapIndex++]
+            : { ...nullSourceMap },
+        true,
+      );
+
+  if (!map.file) delete map.file;
+
+  return map as RawSourceMap;
+};