chore: render errors from all actions inline the source (#21702)

packages/trace-viewer/src/ui/modelUtil.ts

@@ -19,12 +19,18 @@ import type { ResourceSnapshot } from '@trace/snapshot';
 import type * as trace from '@trace/trace';
 import type { ActionTraceEvent, EventTraceEvent } from '@trace/trace';
 import type { ContextEntry, PageEntry } from '../entries';
+import type { SerializedError, StackFrame } from '@protocol/channels';
 
 const contextSymbol = Symbol('context');
 const nextSymbol = Symbol('next');
 const eventsSymbol = Symbol('events');
 const resourcesSymbol = Symbol('resources');
 
+export type SourceModel = {
+  errors: { error: SerializedError['error'], location: StackFrame }[];
+  content: string | undefined;
+};
+
 export class MultiTraceModel {
   readonly startTime: number;
   readonly endTime: number;
@@ -39,6 +45,8 @@ export class MultiTraceModel {
   readonly hasSource: boolean;
   readonly sdkLanguage: Language | undefined;
   readonly testIdAttributeName: string | undefined;
+  readonly sources: Map<string, SourceModel>;
+
 
   constructor(contexts: ContextEntry[]) {
     contexts.forEach(contextEntry => indexModel(contextEntry));
@@ -60,6 +68,7 @@ export class MultiTraceModel {
     this.actions.sort((a1, a2) => a1.startTime - a2.startTime);
     this.events.sort((a1, a2) => a1.time - a2.time);
     this.actions = dedupeActions(this.actions);
+    this.sources = collectSources(this.actions);
   }
 }
 
@@ -160,3 +169,19 @@ export function resourcesForAction(action: ActionTraceEvent): ResourceSnapshot[]
   (action as any)[resourcesSymbol] = result;
   return result;
 }
+
+function collectSources(actions: trace.ActionTraceEvent[]): Map<string, SourceModel> {
+  const result = new Map<string, SourceModel>();
+  for (const action of actions) {
+    for (const frame of action.stack || []) {
+      let source = result.get(frame.file);
+      if (!source) {
+        source = { errors: [], content: undefined };
+        result.set(frame.file, source);
+      }
+    }
+    if (action.error && action.stack?.[0])
+      result.get(action.stack[0].file)!.errors.push({ error: action.error, location: action.stack?.[0] });
+  }
+  return result;
+}

packages/trace-viewer/src/ui/sourceTab.tsx

@@ -14,7 +14,6 @@
  * limitations under the License.
  */
 
-import type { StackFrame } from '@protocol/channels';
 import type { ActionTraceEvent } from '@trace/trace';
 import { SplitView } from '@web/components/splitView';
 import * as React from 'react';
@@ -22,16 +21,14 @@ import { useAsyncMemo } from './helpers';
 import './sourceTab.css';
 import { StackTraceView } from './stackTrace';
 import { CodeMirrorWrapper } from '@web/components/codeMirrorWrapper';
-
+import type { SourceHighlight } from '@web/components/codeMirrorWrapper';
-type StackInfo = {
+import type { SourceModel } from './modelUtil';
-  frames: StackFrame[];
-  fileContent: Map<string, string>;
-};
 
 export const SourceTab: React.FunctionComponent<{
   action: ActionTraceEvent | undefined,
+  sources: Map<string, SourceModel>,
   hideStackFrames?: boolean,
-}> = ({ action, hideStackFrames }) => {
+}> = ({ action, sources, hideStackFrames }) => {
   const [lastAction, setLastAction] = React.useState<ActionTraceEvent | undefined>();
   const [selectedFrame, setSelectedFrame] = React.useState<number>(0);
 
@@ -42,39 +39,32 @@ export const SourceTab: React.FunctionComponent<{
     }
   }, [action, lastAction, setLastAction, setSelectedFrame]);
 
-  const stackInfo = React.useMemo<StackInfo>(() => {
+  const source = useAsyncMemo<SourceModel>(async () => {
-    if (!action)
+    const file = action?.stack?.[selectedFrame].file;
-      return { frames: [], fileContent: new Map() };
+    if (!file)
-    const frames = action.stack || [];
+      return { errors: [], content: undefined };
-    return {
+    const source = sources.get(file)!;
-      frames,
+    if (source.content === undefined) {
-      fileContent: new Map(),
+      const sha1 = await calculateSha1(file);
-    };
-  }, [action]);
-
-  const content = useAsyncMemo<string>(async () => {
-    const filePath = stackInfo.frames[selectedFrame]?.file;
-    if (!filePath)
-      return '';
-    if (!stackInfo.fileContent.has(filePath)) {
-      const sha1 = await calculateSha1(filePath);
       try {
         let response = await fetch(`sha1/src@${sha1}.txt`);
         if (response.status === 404)
-          response = await fetch(`file?path=${filePath}`);
+          response = await fetch(`file?path=${file}`);
-        stackInfo.fileContent.set(filePath, await response.text());
+        source.content = await response.text();
       } catch {
-        stackInfo.fileContent.set(filePath, `<Unable to read "${filePath}">`);
+        source.content = `<Unable to read "${file}">`;
       }
     }
-    return stackInfo.fileContent.get(filePath)!;
+    return source;
-  }, [stackInfo, selectedFrame], '');
+  }, [action, selectedFrame], { errors: [], content: 'Loading\u2026' });
+
+  const targetLine = action?.stack?.[selectedFrame]?.line || 0;
+  const highlight: SourceHighlight[] = source.errors.map(e => ({ type: 'error', line: e.location.line, message: e.error!.message }));
+  highlight.push({ line: targetLine, type: 'running' });
 
-  const targetLine = stackInfo.frames[selectedFrame]?.line || 0;
-  const error = action?.error?.message;
   return <SplitView sidebarSize={200} orientation='horizontal' sidebarHidden={hideStackFrames}>
-    <CodeMirrorWrapper text={content} language='javascript' highlight={[{ line: targetLine, type: error ? 'error' : 'running', message: error }]} revealLine={targetLine} readOnly={true} lineNumbers={true}></CodeMirrorWrapper>
+    <CodeMirrorWrapper text={source.content || ''} language='javascript' highlight={highlight} revealLine={targetLine} readOnly={true} lineNumbers={true} />
-    <StackTraceView action={action} selectedFrame={selectedFrame} setSelectedFrame={setSelectedFrame}></StackTraceView>
+    <StackTraceView action={action} selectedFrame={selectedFrame} setSelectedFrame={setSelectedFrame} />
   </SplitView>;
 };
 

packages/trace-viewer/src/ui/workbench.tsx

@@ -66,7 +66,7 @@ export const Workbench: React.FunctionComponent<{
   const sourceTab: TabbedPaneTabModel = {
     id: 'source',
     title: 'Source',
-    render: () => <SourceTab action={activeAction} hideStackFrames={hideStackFrames}/>
+    render: () => <SourceTab action={activeAction} sources={model?.sources || new Map()} hideStackFrames={hideStackFrames}/>
   };
   const consoleTab: TabbedPaneTabModel = {
     id: 'console',

packages/web/src/components/codeMirrorWrapper.css

@@ -142,13 +142,12 @@ body.dark-mode .CodeMirror span.cm-type {
 }
 
 .CodeMirror .source-line-running {
-  background-color: #b3dbff7f;
+  background-color: var(--vscode-editor-selectionBackground);
   z-index: 2;
 }
 
 .CodeMirror .source-line-paused {
-  background-color: #b3dbff7f;
+  background-color: var(--vscode-editor-selectionHighlightBackground);
-  outline: 1px solid #008aff;
   z-index: 2;
 }