chore(trace): local network access error message (#38221)

Signed-off-by: Simon Knott <[email protected]>

Author: Skn0tt

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

@@ -100,6 +100,7 @@ function loadTrace(clientId: string, url: URL, isContextRequest: boolean, progre
     return loadedTrace;
   const promise = innerLoadTrace(traceUrl, progress);
   loadedTraces.set(traceUrl, promise);
+  promise.catch(() => loadedTraces.delete(traceUrl));
   return promise;
 }
 
@@ -119,7 +120,14 @@ async function innerLoadTrace(traceUrl: string, progress: Progress): Promise<Loa
       throw new Error('Could not load trace. Did you upload a Playwright HTML report instead? Make sure to extract the archive first and then double-click the index.html file or put it on a web server.');
     if (error instanceof TraceVersionError)
       throw new Error(`Could not load trace from ${traceUrl}. ${error.message}`);
-    throw new Error(`Could not load trace from ${traceUrl}. Make sure a valid Playwright Trace is accessible over this url.`);
+
+    let message = `Could not load trace from ${traceUrl}. Make sure a valid Playwright Trace is accessible over this url.`;
+
+    const lnaPermission = await navigator.permissions.query({ name: 'local-network-access' as PermissionName }).catch(() => { });
+    if (lnaPermission && lnaPermission.state !== 'granted')
+      message += `\n\nIf your trace is in a local or private network, please grant permission for Local Network Access.`; // workbenchLoader.tsx opens the prompt when it sees this message.
+
+    throw new Error(message);
   }
   const snapshotServer = new SnapshotServer(traceLoader.storage(), sha1 => traceLoader.resourceForSha1(sha1));
   return { traceLoader, snapshotServer };
@@ -132,12 +140,6 @@ async function doFetch(event: FetchEvent): Promise<Response> {
   if (request.url.startsWith('chrome-extension://'))
     return fetch(request);
 
-  if (request.headers.get('x-pw-serviceworker') === 'forward') {
-    const request = new Request(event.request);
-    request.headers.delete('x-pw-serviceworker');
-    return fetch(request);
-  }
-
   const url = new URL(request.url);
   let relativePath: string | undefined;
   if (request.url.startsWith(self.registration.scope))
@@ -282,5 +284,8 @@ function isLiveTrace(traceUrl: string): boolean {
 }
 
 self.addEventListener('fetch', function(event: FetchEvent) {
+  if (event.request.headers.get('x-pw-serviceworker') === 'skip')
+    return false;
+
   event.respondWith(doFetch(event));
 });

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

@@ -55,6 +55,7 @@ body .drop-target {
   font-weight: bold;
   text-align: center;
   margin: 30px;
+  white-space: pre-line;
 }
 
 .drop-target input {

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

@@ -124,6 +124,22 @@ export const WorkbenchLoader: React.FunctionComponent<{
     }
   }, []);
 
+  const fetchTrace = React.useCallback(async (traceURL: string): Promise<string | undefined> => {
+    const params = new URLSearchParams();
+    params.set('trace', traceURL);
+    const response = await fetch(`contexts?${params.toString()}`);
+    if (!response.ok) {
+      const { error } = await response.json();
+      setProcessingErrorMessage(error);
+      return error;
+    }
+    const contextEntries = await response.json();
+    const model = new TraceModel(traceURL, contextEntries);
+    setProgress({ done: 0, total: 0 });
+    setProcessingErrorMessage(null);
+    setModel(model);
+  }, []);
+
   React.useEffect(() => {
     (async () => {
       if (!traceURL) {
@@ -138,25 +154,21 @@ export const WorkbenchLoader: React.FunctionComponent<{
       try {
         navigator.serviceWorker.addEventListener('message', swListener);
         setProgress({ done: 0, total: 1 });
-
-        const params = new URLSearchParams();
-        params.set('trace', traceURL);
-        const response = await fetch(`contexts?${params.toString()}`);
-        if (!response.ok) {
+        let error = await fetchTrace(traceURL);
+        if (error?.includes('please grant permission for Local Network Access')) {
+          // fetching the asset opens the permission prompt. but only from window, not from SW (https://issues.chromium.org/issues/460180743)
+          await fetch(traceURL, { method: 'HEAD', headers: { 'x-pw-serviceworker': 'skip' } });
+          error = await fetchTrace(traceURL);
+        }
+        if (error) {
           if (!isServer)
             setTraceURL(undefined);
-          setProcessingErrorMessage((await response.json()).error);
-          return;
         }
-        const contextEntries = await response.json();
-        const model = new TraceModel(traceURL, contextEntries);
-        setProgress({ done: 0, total: 0 });
-        setModel(model);
       } finally {
         navigator.serviceWorker.removeEventListener('message', swListener);
       }
     })();
-  }, [isServer, traceURL, uploadedTraceName]);
+  }, [isServer, traceURL, uploadedTraceName, fetchTrace]);
 
   const showLoading = progress.done !== progress.total && progress.total !== 0 && !processingErrorMessage;