feat(test-runner): filter out internal stack traces

.changeset/long-ads-drum.md

@@ -0,0 +1,7 @@
+---
+'@web/browser-logs': patch
+'@web/test-runner-core': patch
+'@web/test-runner-mocha': patch
+---
+
+filter out internal stack traces

packages/browser-logs/src/parseStackTrace.ts

@@ -25,10 +25,24 @@ export interface ParseStackTraceOptions {
 
 // regexp to match a stack track that is only a full address
 const REGEXP_ADDRESS = /^(http(s)?:\/\/.*)(:\d+)(:\d+)$/;
+const FILTERED_STACKS = [
+  '@web/test-runner',
+  '@web/dev-runner',
+  '__web-test-runner__',
+  '__web-dev-server__',
+];
 
 const validString = (str: unknown) => typeof str === 'string' && str !== '';
 const validNumber = (nr: unknown) => typeof nr === 'number' && nr !== -1;
 
+function filterStackFrames(frames: errorStacks.StackFrame[]) {
+  const withoutNative = frames.filter(f => f.type !== 'native');
+  const withoutInternal = withoutNative.filter(
+    f => !FILTERED_STACKS.some(p => f.fileName.includes(p)),
+  );
+  return withoutInternal.length > 0 ? withoutInternal : withoutNative;
+}
+
 async function mapLocation(
   url: URL,
   loc: RawLocation,
@@ -122,7 +136,8 @@ export async function parseStackTrace(
     mapBrowserUrl = p => path.join(browserRootDir, p.pathname.split('/').join(path.sep)),
   } = options;
 
-  const frames = errorStacks.parseStackTrace(rawStack).filter(f => f.type !== 'native');
+  const allFrames = errorStacks.parseStackTrace(rawStack);
+  const frames = filterStackFrames(allFrames);
   if (frames.length === 0) {
     return undefined;
   }

packages/test-runner-core/src/server/plugins/serveTestFrameworkPlugin.ts

@@ -5,7 +5,6 @@ import { Plugin } from '@web/dev-server-core';
 import { TestFramework } from '../../test-framework/TestFramework';
 
 const TEST_FRAMEWORK_IMPORT_ROOT = '/__web-test-runner__/test-framework/';
-const REGEXP_SOURCE_MAP = /\/\/# sourceMappingURL=.*/;
 
 async function readFile(codePath: string) {
   if (!fs.existsSync(codePath)) {
@@ -15,7 +14,7 @@ async function readFile(codePath: string) {
     );
   }
 
-  return (await promisify(fs.readFile)(codePath, 'utf-8')).replace(REGEXP_SOURCE_MAP, '');
+  return await promisify(fs.readFile)(codePath, 'utf-8');
 }
 
 /**
@@ -39,6 +38,7 @@ export function serveTestFrameworkPlugin(testFramework: TestFramework) {
         if (path.sep === '/') {
           filePath = `/${filePath}`;
         }
+
         const body = await readFile(filePath);
         return { body, type: 'js', headers: { 'cache-control': 'public, max-age=31536000' } };
       }

packages/test-runner-mocha/package.json

@@ -39,7 +39,6 @@
     "@web/test-runner-core": "^0.10.0"
   },
   "devDependencies": {
-    "clean-css": "^5.0.1",
     "mocha": "^8.2.1"
   }
 }

packages/test-runner-mocha/rollup.config.js

@@ -1,19 +1,9 @@
-import CleanCSS from 'clean-css';
 import deepmerge from 'deepmerge';
 import createConfig from '../../rollup.browser.config';
 
 const REGEXP_DTS_MOCHA = /'..\/..\/..\/node_modules\/mocha\/mocha.js'/g;
 const REGEXP_DTS_CORE = /'..\/..\/test-runner-core\/browser\/session.js'/g;
 
-const cssPlugin = {
-  transform(code, id) {
-    if (id.endsWith('.css')) {
-      const minified = new CleanCSS().minify(code);
-      return { code: `export default ${JSON.stringify(minified.styles)}`, map: null };
-    }
-  },
-};
-
 const rewriteDtsPlugin = {
   generateBundle(options, bundle) {
     for (const [name, file] of Object.entries(bundle)) {
@@ -27,20 +17,35 @@ const rewriteDtsPlugin = {
 };
 
 const rewriteWebSocketImportPlugin = {
-  renderChunk(code) {
-    // undo rollup rewrite of import path
-    return code.replace(
-      /['"].*\/__web-dev-server__web-socket\.js['"]/,
-      '"/__web-dev-server__web-socket.js"',
-    );
+  resolveId(id) {
+    if (id === '/__web-dev-server__web-socket.js') {
+      // rollup treats external absolute paths as relative to the root of the file sytem,
+      // while we want to preserve the absolute path. we use a bare import which is mapped
+      // again later
+      return { id: 'wds-socket', external: true };
+    }
   },
 };
 
 export default [
   deepmerge(createConfig('src/autorun.ts'), {
-    plugins: [cssPlugin, rewriteDtsPlugin, rewriteWebSocketImportPlugin],
+    output: {
+      paths: {
+        // resolve bare import to an absolute import to avoid rollup
+        // from normalizing the import relative to the root of the file system
+        'wds-socket': '/__web-dev-server__web-socket.js',
+      },
+    },
+    plugins: [rewriteDtsPlugin, rewriteWebSocketImportPlugin],
   }),
   deepmerge(createConfig('src/standalone.ts'), {
-    plugins: [cssPlugin, rewriteDtsPlugin, rewriteWebSocketImportPlugin],
+    output: {
+      paths: {
+        // resolve bare import to an absolute import to avoid rollup
+        // from normalizing the import relative to the root of the file system
+        'wds-socket': '/__web-dev-server__web-socket.js',
+      },
+    },
+    plugins: [rewriteDtsPlugin, rewriteWebSocketImportPlugin],
   }),
 ];

rollup.browser.config.js

@@ -7,13 +7,14 @@ export default input => ({
   input,
   output: {
     dir: './dist',
-    sourcemap: true,
+    sourcemap: false,
     format: 'es',
   },
   plugins: [
     nodeResolve(),
     typescript({
       composite: false,
+      sourceMap: false,
     }),
     terser({
       output: {

yarn.lock

@@ -3584,13 +3584,6 @@ clean-css@^4.1.11, clean-css@^4.2.1, clean-css@^4.2.3:
   dependencies:
     source-map "~0.6.0"
 
-clean-css@^5.0.1:
-  version "5.0.1"
-  resolved "https://registry.yarnpkg.com/clean-css/-/clean-css-5.0.1.tgz#f84c6ad82c5a8246a680206da8bceef483ccc0b6"
-  integrity sha512-F1zAGOowUCg8yxT0O4UR+nmbMauf3YwbiUS60CPxpzJU7ulpamGzQomFrJSK4w/HqHtMmQKSHJUNue+dQQYQdg==
-  dependencies:
-    source-map "~0.6.0"
-
 clean-stack@^2.0.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/clean-stack/-/clean-stack-2.2.0.tgz#ee8472dbb129e727b31e8a10a427dee9dfe4008b"