fix(docs-infra): log more SW debug info

gkalpak · gkalpak · commit 52c54cea5977 · 2021-07-07T15:30:57.000+03:00
This commit expands the info printed to the console to help diagnose ServiceWorker issues to include the [internal debug info][1] retrieved from `/ngsw/state`. This will provide more useful data, such as the activated SW's version, state, clients, recent operations and any recent errors. NOTE: This temporarily increases the payload size. Removing this code and reclaiming the payload size is being tracked in #41117. [1]: https://angular.io/guide/service-worker-devops#locating-and-analyzing-debugging-information
diff --git a/aio/src/app/layout/doc-viewer/doc-viewer.component.ts b/aio/src/app/layout/doc-viewer/doc-viewer.component.ts
@@ -260,10 +260,13 @@ export class DocViewerComponent implements OnDestroy {
  * (See https://github.com/angular/angular/issues/28114.)
  */
 async function printSwDebugInfo(): Promise<void> {
-  console.log(`\nServiceWorker: ${navigator.serviceWorker?.controller?.state ?? 'N/A'}`);
+  const sep = '\n----------';
+  const swState = navigator.serviceWorker?.controller?.state ?? 'N/A';
+
+  console.log(`\nServiceWorker: ${swState}`);
 
   if (typeof caches === 'undefined') {
-    console.log('\nCaches: N/A');
+    console.log(`${sep}\nCaches: N/A`);
   } else {
     const allCacheNames = await caches.keys();
     const swCacheNames = allCacheNames.filter(name => name.startsWith('ngsw:/:'));
@@ -273,11 +276,28 @@ async function printSwDebugInfo(): Promise<void> {
     await findCachesAndPrintEntries(swCacheNames, 'assets:app-shell:meta', true);
   }
 
+  if (swState === 'activated') {
+    console.log(sep);
+    await fetchAndPrintSwInternalDebugInfo();
+  }
+
   console.warn(
-      '\nIf you see this error, please report an issue at ' +
+      `${sep}\nIf you see this error, please report an issue at ` +
       'https://github.com/angular/angular/issues/new?template=3-docs-bug.md including the above logs.');
 
   // Internal helpers
+  async function fetchAndPrintSwInternalDebugInfo() {
+    try {
+      const res = await fetch('/ngsw/state');
+      if (!res.ok) {
+        throw new Error(`Response ${res.status} ${res.statusText}`);
+      }
+      console.log(await res.text());
+    } catch (err) {
+      console.log(`Failed to retrieve debug info from '/ngsw/state': ${err.message || err}`);
+    }
+  }
+
   async function findCachesAndPrintEntries(
       swCacheNames: string[], nameSuffix: string, includeValues: boolean,
       ignoredKeys: string[] = []): Promise<void> {
diff --git a/goldens/size-tracking/aio-payloads.json b/goldens/size-tracking/aio-payloads.json
@@ -3,7 +3,7 @@
     "master": {
       "uncompressed": {
         "runtime-es2017": 4841,
-        "main-es2017": 458609,
+        "main-es2017": 459014,
         "polyfills-es2017": 55235,
         "styles": 69213,
         "light-theme": 79025,
@@ -15,7 +15,7 @@
     "master": {
       "uncompressed": {
         "runtime-es2017": 4841,
-        "main-es2017": 458748,
+        "main-es2017": 459153,
         "polyfills-es2017": 55373,
         "styles": 69213,
         "light-theme": 79025,
