fix(docs-infra): print info to help debugging SW cache issue by gkalpak · Pull Request #41106 · angular/angular

gkalpak · 2021-03-07T09:13:42Z

From time to time, an angular.io page fails to load due to requesting a file that cannot be found neither on the server nor in the cache. We believe this is caused by the browser's partially clearing a cache. See #28114 for more details.

Some time ago, we introduced SwUpdate#unrecoverable to help work around this issue by reloading the page when such an error is detected.

However, this issue still pops up occasionally (for example, #41073).

In an attempt to help diagnose the issue, this commit prints more info regarding the SW state and cache content when this error occurs. It will result in something like the following being printed to the console:

ServiceWorker: activated

Cache: ngsw:/:db:control (2 entries)
  - https://angular.io/assignments: {"f5f02035-ee1f-463c-946c-e8b85badca25":"5c95f89a85255a6fefb4045a20f751ef32b2f3a4"}
  - https://angular.io/latest: {"latest":"5c95f89a85255a6fefb4045a20f751ef32b2f3a4"}

Cache: ngsw:/:5c95f89a85255a6fefb4045a20f751ef32b2f3a4:assets:app-shell:cache (24 entries)
  - https://angular.io/0-es2015.867022f8bb092ae1efb1.worker.js
  - https://angular.io/announcement-bar-announcement-bar-module-es2015.1b5b762c9c8837c770f8.js
  - https://angular.io/api-api-list-module-es2015.40a43cd22f50f64d63bb.js
  ...

Cache: ngsw:/:db:ngsw:/:5c95f89a85255a6fefb4045a20f751ef32b2f3a4:assets:app-shell:meta (1 entries)
  - https://angular.io/https://fonts.gstatic.com/s/robotomono/v13/L0x5DF4xlVMF-BfR8bXMIjhLq3-cXbKD.woff2: {"ts":1615031956601,"used":true}

If 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.

NOTE:
This change increases the main bundle by 1649B (0.37%), but it can be reverted as soon as we gather enough info to diagnose the issue.

mary-poppins · 2021-03-07T09:21:46Z

You can preview 485f6f4 at https://pr41106-485f6f4.ngbuilds.io/.

mary-poppins · 2021-03-07T09:43:02Z

You can preview f1619e1 at https://pr41106-f1619e1.ngbuilds.io/.

mary-poppins · 2021-03-07T10:26:33Z

You can preview a86a072 at https://pr41106-a86a072.ngbuilds.io/.

petebacondarwin

As long as we create an issue to track removing this code (so it doesn't get lost) then I am cool with the size change for now.

Reviewed-for: docs-infra, size-tracking

petebacondarwin · 2021-03-07T11:49:49Z

aio/src/app/layout/doc-viewer/doc-viewer.component.ts

You always pass the includeValues param so there is no need for a default here.

petebacondarwin · 2021-03-07T11:56:44Z

aio/src/app/layout/doc-viewer/doc-viewer.component.ts

What an expression!

Do these async functions get downlevelled in ES2015 code? If so, I wonder if the distributable size could be lowered by handcrafting "old fashioned" promise based functions?

Good question!
I played with this and found out that converting all async/await code added in this PR to promises reduced the main bundle size from 450959B to 450581B (i.e. by 378B), which I don't think is worth the readability hit.

WDYT?

Fine not to handcraft as long as this change is time-boxed

For reference, here is the commit that switches to promises: 88fed01

From time to time, an angular.io page fails to load due to requesting a file that cannot be found neither on the server nor in the cache. We believe this is caused by the browser's partially clearing a cache. See angular#28114 for more details. Some time ago, we introduced [SwUpdate#unrecoverable][1] to help work around this issue by [reloading the page][2] when such an error is detected. However, this issue still pops up occasionally (for example, angular#41073). In an attempt to help diagnose the issue, this commit prints more info regarding the SW state and cache content when this error occurs. It will result in something like the following being printed to the console: ``` ServiceWorker: activated Cache: ngsw:/:db:control (2 entries) - https://angular.io/assignments: {"f5f02035-ee1f-463c-946c-e8b85badca25":"5c95f89a85255a6fefb4045a20f751ef32b2f3a4"} - https://angular.io/latest: {"latest":"5c95f89a85255a6fefb4045a20f751ef32b2f3a4"} Cache: ngsw:/:5c95f89a85255a6fefb4045a20f751ef32b2f3a4:assets:app-shell:cache (24 entries) - https://angular.io/0-es2015.867022f8bb092ae1efb1.worker.js - https://angular.io/announcement-bar-announcement-bar-module-es2015.1b5b762c9c8837c770f8.js - https://angular.io/api-api-list-module-es2015.40a43cd22f50f64d63bb.js ... Cache: ngsw:/:db:ngsw:/:5c95f89a85255a6fefb4045a20f751ef32b2f3a4:assets:app-shell:meta (1 entries) - https://angular.io/https://fonts.gstatic.com/s/robotomono/v13/L0x5DF4xlVMF-BfR8bXMIjhLq3-cXbKD.woff2: {"ts":1615031956601,"used":true} If 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. ``` NOTE: This change increases the main bundle by 1649B (0.37%), but it can be reverted as soon as we gather enough info to diagnose the issue. [1]: https://angular.io/api/service-worker/SwUpdate#unrecoverable [2]: https://github.com/angular/angular/blob/c676ec1ce5d586d4bc46/aio/src/app/sw-updates/sw-updates.service.ts#L55-L61

gkalpak · 2021-03-08T16:08:16Z

FYI, I've created #41117 to track reverting this in the future (in case we decide to merge this).

mary-poppins · 2021-03-08T16:46:42Z

You can preview aa034b8 at https://pr41106-aa034b8.ngbuilds.io/.

jessicajaniuk

LGTM

reviewed-for: size-tracking

AndrewKushnir · 2021-03-09T16:55:31Z

@gkalpak the changes in this PR had conflicts withe the patch branch (11.2.x), so I merged it to the master branch only. Could you please create a patch-only version of this PR if needed? Thank you.

…#41106) From time to time, an angular.io page fails to load due to requesting a file that cannot be found neither on the server nor in the cache. We believe this is caused by the browser's partially clearing a cache. See angular#28114 for more details. Some time ago, we introduced [SwUpdate#unrecoverable][1] to help work around this issue by [reloading the page][2] when such an error is detected. However, this issue still pops up occasionally (for example, angular#41073). In an attempt to help diagnose the issue, this commit prints more info regarding the SW state and cache content when this error occurs. It will result in something like the following being printed to the console: ``` ServiceWorker: activated Cache: ngsw:/:db:control (2 entries) - https://angular.io/assignments: {"f5f02035-ee1f-463c-946c-e8b85badca25":"5c95f89a85255a6fefb4045a20f751ef32b2f3a4"} - https://angular.io/latest: {"latest":"5c95f89a85255a6fefb4045a20f751ef32b2f3a4"} Cache: ngsw:/:5c95f89a85255a6fefb4045a20f751ef32b2f3a4:assets:app-shell:cache (24 entries) - https://angular.io/0-es2015.867022f8bb092ae1efb1.worker.js - https://angular.io/announcement-bar-announcement-bar-module-es2015.1b5b762c9c8837c770f8.js - https://angular.io/api-api-list-module-es2015.40a43cd22f50f64d63bb.js ... Cache: ngsw:/:db:ngsw:/:5c95f89a85255a6fefb4045a20f751ef32b2f3a4:assets:app-shell:meta (1 entries) - https://angular.io/https://fonts.gstatic.com/s/robotomono/v13/L0x5DF4xlVMF-BfR8bXMIjhLq3-cXbKD.woff2: {"ts":1615031956601,"used":true} If 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. ``` NOTE: This change increases the main bundle by 1649B (0.37%), but it can be reverted as soon as we gather enough info to diagnose the issue. [1]: https://angular.io/api/service-worker/SwUpdate#unrecoverable [2]: https://github.com/angular/angular/blob/c676ec1ce5d586d4bc46/aio/src/app/sw-updates/sw-updates.service.ts#L55-L61 PR Close angular#41106

…#41139) From time to time, an angular.io page fails to load due to requesting a file that cannot be found neither on the server nor in the cache. We believe this is caused by the browser's partially clearing a cache. See #28114 for more details. Some time ago, we introduced [SwUpdate#unrecoverable][1] to help work around this issue by [reloading the page][2] when such an error is detected. However, this issue still pops up occasionally (for example, #41073). In an attempt to help diagnose the issue, this commit prints more info regarding the SW state and cache content when this error occurs. It will result in something like the following being printed to the console: ``` ServiceWorker: activated Cache: ngsw:/:db:control (2 entries) - https://angular.io/assignments: {"f5f02035-ee1f-463c-946c-e8b85badca25":"5c95f89a85255a6fefb4045a20f751ef32b2f3a4"} - https://angular.io/latest: {"latest":"5c95f89a85255a6fefb4045a20f751ef32b2f3a4"} Cache: ngsw:/:5c95f89a85255a6fefb4045a20f751ef32b2f3a4:assets:app-shell:cache (24 entries) - https://angular.io/0-es2015.867022f8bb092ae1efb1.worker.js - https://angular.io/announcement-bar-announcement-bar-module-es2015.1b5b762c9c8837c770f8.js - https://angular.io/api-api-list-module-es2015.40a43cd22f50f64d63bb.js ... Cache: ngsw:/:db:ngsw:/:5c95f89a85255a6fefb4045a20f751ef32b2f3a4:assets:app-shell:meta (1 entries) - https://angular.io/https://fonts.gstatic.com/s/robotomono/v13/L0x5DF4xlVMF-BfR8bXMIjhLq3-cXbKD.woff2: {"ts":1615031956601,"used":true} If 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. ``` NOTE: This change increases the main bundle by 1649B (0.37%), but it can be reverted as soon as we gather enough info to diagnose the issue. [1]: https://angular.io/api/service-worker/SwUpdate#unrecoverable [2]: https://github.com/angular/angular/blob/c676ec1ce5d586d4bc46/aio/src/app/sw-updates/sw-updates.service.ts#L55-L61 PR Close #41106 PR Close #41139

angular-automatic-lock-bot · 2021-04-09T16:07:15Z

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}

gkalpak added type: bug/fix action: review The PR is still awaiting reviews from at least one requested reviewer comp: docs-infra target: patch This PR is targeted for the next patch release labels Mar 7, 2021

gkalpak added this to the docs-infra-aio-app milestone Mar 7, 2021

google-cla bot added the cla: yes label Mar 7, 2021

gkalpak force-pushed the fix-aio-debug-caches branch from 485f6f4 to f1619e1 Compare March 7, 2021 09:35

gkalpak marked this pull request as ready for review March 7, 2021 10:16

pullapprove bot requested review from IgorMinar, alxhub, jessicajaniuk and petebacondarwin March 7, 2021 10:16

gkalpak force-pushed the fix-aio-debug-caches branch from f1619e1 to a86a072 Compare March 7, 2021 10:18

petebacondarwin approved these changes Mar 7, 2021

View reviewed changes

pullapprove bot requested a review from jelbourn March 7, 2021 11:58

gkalpak added 4 commits March 8, 2021 17:59

fixup! fix(docs-infra): print info to help debugging SW cache issue

88fed01

fixup! fix(docs-infra): print info to help debugging SW cache issue

b176edb

fixup! fix(docs-infra): print info to help debugging SW cache issue

aa034b8

gkalpak force-pushed the fix-aio-debug-caches branch from a86a072 to aa034b8 Compare March 8, 2021 16:01

gkalpak mentioned this pull request Mar 8, 2021

[docs-infra] Remove the code added in #41106 to reduce bundle size #41117

Closed

jessicajaniuk approved these changes Mar 8, 2021

View reviewed changes

gkalpak removed request for IgorMinar, alxhub and jelbourn March 8, 2021 18:54

gkalpak added action: merge The PR is ready for merge by the caretaker and removed action: review The PR is still awaiting reviews from at least one requested reviewer labels Mar 9, 2021

AndrewKushnir added target: major This PR is targeted for the next major release and removed target: patch This PR is targeted for the next patch release labels Mar 9, 2021

AndrewKushnir closed this in f281310 Mar 9, 2021

gkalpak deleted the fix-aio-debug-caches branch March 9, 2021 17:37

gkalpak mentioned this pull request Mar 9, 2021

[11.2.x] fix(docs-infra): print info to help debugging SW cache issue (#41106) #41139

Closed

angular-automatic-lock-bot bot locked and limited conversation to collaborators Apr 9, 2021

Conversation

gkalpak commented Mar 7, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

mary-poppins commented Mar 7, 2021

Uh oh!

mary-poppins commented Mar 7, 2021

Uh oh!

mary-poppins commented Mar 7, 2021

Uh oh!

petebacondarwin left a comment

Choose a reason for hiding this comment

Uh oh!

petebacondarwin Mar 7, 2021

Choose a reason for hiding this comment

Uh oh!

gkalpak Mar 8, 2021

Choose a reason for hiding this comment

Uh oh!

petebacondarwin Mar 7, 2021

Choose a reason for hiding this comment

Uh oh!

gkalpak Mar 8, 2021

Choose a reason for hiding this comment

Uh oh!

petebacondarwin Mar 8, 2021

Choose a reason for hiding this comment

Uh oh!

gkalpak Mar 8, 2021

Choose a reason for hiding this comment

Uh oh!

gkalpak commented Mar 8, 2021

Uh oh!

mary-poppins commented Mar 8, 2021

Uh oh!

jessicajaniuk left a comment

Choose a reason for hiding this comment

Uh oh!

AndrewKushnir commented Mar 9, 2021

Uh oh!

angular-automatic-lock-bot bot commented Apr 9, 2021

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

gkalpak commented Mar 7, 2021 •

edited

Loading