fix(trace viewer): limit the number of contexts loaded in sw (#33244)

packages/trace-viewer/src/sw/main.ts

@@ -36,16 +36,16 @@ const scopePath = new URL(self.registration.scope).pathname;
 
 const loadedTraces = new Map<string, { traceModel: TraceModel, snapshotServer: SnapshotServer }>();
 
-const clientIdToTraceUrls = new Map<string, Set<string>>();
+const clientIdToTraceUrls = new Map<string, { limit: number | undefined, traceUrls: Set<string> }>();
 
-async function loadTrace(traceUrl: string, traceFileName: string | null, clientId: string, progress: (done: number, total: number) => undefined): Promise<TraceModel> {
+async function loadTrace(traceUrl: string, traceFileName: string | null, clientId: string, limit: number | undefined, progress: (done: number, total: number) => undefined): Promise<TraceModel> {
   await gc();
-  let set = clientIdToTraceUrls.get(clientId);
-  if (!set) {
-    set = new Set();
-    clientIdToTraceUrls.set(clientId, set);
+  let data = clientIdToTraceUrls.get(clientId);
+  if (!data) {
+    data = { limit, traceUrls: new Set() };
+    clientIdToTraceUrls.set(clientId, data);
   }
-  set.add(traceUrl);
+  data.traceUrls.add(traceUrl);
 
   const traceModel = new TraceModel();
   try {
@@ -97,7 +97,8 @@ async function doFetch(event: FetchEvent): Promise<Response> {
 
     if (relativePath === '/contexts') {
       try {
-        const traceModel = await loadTrace(traceUrl!, url.searchParams.get('traceFileName'), event.clientId, (done: number, total: number) => {
+        const limit = url.searchParams.has('limit') ? +url.searchParams.get('limit')! : undefined;
+        const traceModel = await loadTrace(traceUrl!, url.searchParams.get('traceFileName'), event.clientId, limit, (done: number, total: number) => {
           client.postMessage({ method: 'progress', params: { done, total } });
         });
         return new Response(JSON.stringify(traceModel!.contextEntries), {
@@ -179,12 +180,18 @@ async function gc() {
   const clients = await self.clients.matchAll();
   const usedTraces = new Set<string>();
 
-  for (const [clientId, traceUrls] of clientIdToTraceUrls) {
+  for (const [clientId, data] of clientIdToTraceUrls) {
     // @ts-ignore
-    if (!clients.find(c => c.id === clientId))
+    if (!clients.find(c => c.id === clientId)) {
       clientIdToTraceUrls.delete(clientId);
-    else
-      traceUrls.forEach(url => usedTraces.add(url));
+      continue;
+    }
+    if (data.limit !== undefined) {
+      const ordered = [...data.traceUrls];
+      // Leave the newest requested traces.
+      data.traceUrls = new Set(ordered.slice(ordered.length - data.limit));
+    }
+    data.traceUrls.forEach(url => usedTraces.add(url));
   }
 
   for (const traceUrl of loadedTraces.keys()) {

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

@@ -65,6 +65,7 @@ export const EmbeddedWorkbenchLoader: React.FunctionComponent = () => {
           const url = traceURLs[i];
           const params = new URLSearchParams();
           params.set('trace', url);
+          params.set('limit', String(traceURLs.length));
           const response = await fetch(`contexts?${params.toString()}`);
           if (!response.ok) {
             setProcessingErrorMessage((await response.json()).error);

packages/trace-viewer/src/ui/recorder/modelContext.tsx

@@ -58,6 +58,7 @@ export const ModelProvider: React.FunctionComponent<React.PropsWithChildren<{
 async function loadSingleTraceFile(url: string): Promise<{ model: MultiTraceModel, sha1: string }> {
   const params = new URLSearchParams();
   params.set('trace', url);
+  params.set('limit', '1');
   const response = await fetch(`contexts?${params.toString()}`);
   const contextEntries = await response.json() as ContextEntry[];
 

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

@@ -111,6 +111,7 @@ const outputDirForTestCase = (testCase: reporterTypes.TestCase): string | undefi
 async function loadSingleTraceFile(url: string): Promise<MultiTraceModel> {
   const params = new URLSearchParams();
   params.set('trace', url);
+  params.set('limit', '1');
   const response = await fetch(`contexts?${params.toString()}`);
   const contextEntries = await response.json() as ContextEntry[];
   return new MultiTraceModel(contextEntries);

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

@@ -131,6 +131,7 @@ export const WorkbenchLoader: React.FunctionComponent<{
           params.set('trace', url);
           if (uploadedTraceNames.length)
             params.set('traceFileName', uploadedTraceNames[i]);
+          params.set('limit', String(traceURLs.length));
           const response = await fetch(`contexts?${params.toString()}`);
           if (!response.ok) {
             if (!isServer)