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

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

PR Close #42776
This commit is contained in:
George Kalpakas 2021-07-07 15:30:57 +03:00 committed by Andrew Scott
parent ed57e2415d
commit 8b95816fc4
2 changed files with 25 additions and 5 deletions

View File

@ -260,10 +260,13 @@ export class DocViewerComponent implements OnDestroy {
* (See https://github.com/angular/angular/issues/28114.) * (See https://github.com/angular/angular/issues/28114.)
*/ */
async function printSwDebugInfo(): Promise<void> { 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') { if (typeof caches === 'undefined') {
console.log('\nCaches: N/A'); console.log(`${sep}\nCaches: N/A`);
} else { } else {
const allCacheNames = await caches.keys(); const allCacheNames = await caches.keys();
const swCacheNames = allCacheNames.filter(name => name.startsWith('ngsw:/:')); 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); await findCachesAndPrintEntries(swCacheNames, 'assets:app-shell:meta', true);
} }
if (swState === 'activated') {
console.log(sep);
await fetchAndPrintSwInternalDebugInfo();
}
console.warn( 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.'); 'https://github.com/angular/angular/issues/new?template=3-docs-bug.md including the above logs.');
// Internal helpers // 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( async function findCachesAndPrintEntries(
swCacheNames: string[], nameSuffix: string, includeValues: boolean, swCacheNames: string[], nameSuffix: string, includeValues: boolean,
ignoredKeys: string[] = []): Promise<void> { ignoredKeys: string[] = []): Promise<void> {

View File

@ -3,7 +3,7 @@
"master": { "master": {
"uncompressed": { "uncompressed": {
"runtime-es2017": 4841, "runtime-es2017": 4841,
"main-es2017": 458609, "main-es2017": 459014,
"polyfills-es2017": 55235, "polyfills-es2017": 55235,
"styles": 69213, "styles": 69213,
"light-theme": 79025, "light-theme": 79025,
@ -15,7 +15,7 @@
"master": { "master": {
"uncompressed": { "uncompressed": {
"runtime-es2017": 4841, "runtime-es2017": 4841,
"main-es2017": 458748, "main-es2017": 459153,
"polyfills-es2017": 55373, "polyfills-es2017": 55373,
"styles": 69213, "styles": 69213,
"light-theme": 79025, "light-theme": 79025,