Service Worker has a memory leak and crashes the tab

[Roguyt]

Command

pwa

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

It used to work but I couldn't pin point any specific changes related to the Service Worker

Description

Hi,

For a while now I have been having a pretty random and weird issue with my service worker / angular app.
Sometimes, users will be stuck on a blank page while their RAM is getting eaten until crash from the Angular tab.
From what I can see it is related to the service worker, which I only uses for the SwUpdate feature.

I've been trying multiple version, configurations and I can't really seem to find a permanent solution given there is no log, no memory dump, nothing and it is randomly appearing on clients.

The only info I have is that it clears itself if you empty the storage of the app which uninstalls the service worker + removes its cache. Also if you manage to open the task manager, you can see the tab with Service Worker under it, not the regular thread.
Also I can not access the ngsw/state when this occurs.

Any idea to solve this nightmare which has been haunting me for months at this point... I'm open to any suggestion at this point.

Minimal Reproduction

• Setup an Angular Repository
• Setup the Service Worker
• Wait for the bug to randomly happens
• Watch your CPU and RAM burn

Package.json

{
        "@angular/animations": "^15.2.10",
        "@angular/cdk": "^15.2.9",
        "@angular/common": "^15.2.10",
        "@angular/compiler": "^15.2.10",
        "@angular/core": "^15.2.10",
        "@angular/forms": "^15.2.10",
        "@angular/platform-browser": "^15.2.10",
        "@angular/platform-browser-dynamic": "^15.2.10",
        "@angular/router": "^15.2.10",
        "@angular/service-worker": "^15.2.10",
        "@fortawesome/angular-fontawesome": "0.12.1",
        "@fortawesome/fontawesome-svg-core": "^1.2.28",
        "@fortawesome/free-regular-svg-icons": "^5.13.0",
        "@fortawesome/free-solid-svg-icons": "^5.13.0",
        "@ngneat/effects": "^1.1.1",
        "@ngneat/effects-ng": "^2.0.0",
        "@ngneat/elf": "^2.3.1",
        "@ngneat/elf-cli-ng": "^1.0.0",
        "@ngneat/elf-devtools": "^1.2.1",
        "@ngneat/elf-entities": "^4.4.3",
        "@ngneat/elf-pagination": "^1.1.0",
        "@ngneat/elf-persist-state": "^1.1.6",
        "@ngneat/elf-requests": "^1.6.0",
        "@ngneat/elf-state-history": "^1.3.0",
        "@ngneat/until-destroy": "^9.2.3",
        "@sweetalert2/ngx-sweetalert2": "^12.1.0",
        "angular-calendar": "^0.31.0",
        "angular-svg-round-progressbar": "^10.0.0",
        "angularx-qrcode": "^15.0.0",
        "date-fns": "^2.15.0",
        "exceljs": "^4.1.1",
        "jwt-decode": "^3.1.2",
        "lodash.orderby": "^4.6.0",
        "ngx-infinite-scroll": "^15.0.0",
        "ngx-logger": "^5.0.11",
        "ngx-toastr": "~16.0.2",
        "rxjs": "~7.8.0",
        "spinkit": "^2.0.1",
        "sweetalert2": "^11.3.0",
        "tslib": "^2.0.0",
        "validator": "^13.9.0",
        "zone.js": "~0.11.4"
    },
    "devDependencies": {
        "@angular-devkit/build-angular": "^15.2.10",
        "@angular-eslint/builder": "^15.2.1",
        "@angular-eslint/eslint-plugin": "^15.2.1",
        "@angular-eslint/eslint-plugin-template": "^15.2.1",
        "@angular-eslint/schematics": "^15.2.1",
        "@angular-eslint/template-parser": "^15.2.1",
        "@angular/cli": "^15.2.10",
        "@angular/compiler-cli": "^15.2.10",
        "@openapitools/openapi-generator-cli": "^2.5.2",
        "@types/jasmine": "~4.3.1",
        "@types/lodash.orderby": "^4.6.7",
        "@types/node": "^18.13.0",
        "@types/validator": "^13.7.17",
        "@typescript-eslint/eslint-plugin": "^5.43.0",
        "@typescript-eslint/parser": "^5.43.0",
        "autoprefixer": "^10.4.13",
        "eslint": "^8.28.0",
        "eslint-config-prettier": "^8.6.0",
        "eslint-formatter-gitlab": "^4.0.0",
        "eslint-plugin-prettier": "^4.2.1",
        "eslint-plugin-rxjs": "^5.0.2",
        "eslint-plugin-rxjs-angular": "^2.0.0",
        "husky": "^8.0.0",
        "jasmine-core": "~4.5.0",
        "karma": "~6.4.1",
        "karma-chrome-launcher": "~3.1.1",
        "karma-coverage": "^2.2.0",
        "karma-jasmine": "~5.1.0",
        "karma-jasmine-html-reporter": "^2.0.0",
        "postcss": "^8.4.21",
        "prettier": "^2.8.4",
        "prettier-plugin-tailwindcss": "^0.2.2",
        "pretty-quick": "^3.1.3",
        "tailwindcss": "^3.2.4",
        "typescript": "~4.9.5"
    }

Exception or Error

No response

Your Environment

Angular CLI: 15.2.10
Node: 18.17.1
Package Manager: yarn 1.22.19
OS: linux x64

Angular: 15.2.10
... animations, cli, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router
... service-worker

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1502.10
@angular-devkit/build-angular   15.2.10
@angular-devkit/core            15.2.10
@angular-devkit/schematics      15.2.10
@angular/cdk                    15.2.9
@schematics/angular             15.2.10
rxjs                            7.8.0
typescript                      4.9.5

Anything else relevant?

No response

[aceleghin]

Any news? have a similar issue

[Roguyt]

Sorry for the non update.
It was an infinite loop in our auth service. it was actually causing a never ending recursive logout call.

And since the service-worker proxies the http request for SW stuff, it was the service worker which was appearing to be the culprit while having nothing to do with it.

TL;DR: The SW is almost never the issue.

[aceleghin]

Sorry for the non update. It was an infinite loop in our auth service. it was actually causing a never ending recursive logout call.

And since the service-worker proxies the http request for SW stuff, it was the service worker which was appearing to be the culprit while having nothing to do with it.

TL;DR: The SW is almost never the issue.

It seems very similar to my problem, I have a lot of logout, but only in prod.
So can you share what was exactly your problem so maybe it helps me

[aceleghin]

On my side I understand that the problem caused by this code probably

window.addEventListener('storage', (event) => { if (event.storageArea === localStorage) { const token = localStorage.getItem('token'); if (token == null) { // you can update this as per your key this.authenticationService.logout(); } } }, false);

And for some reason it goes in a loop in prod
Maybe you faced a similar issue

[angular-automatic-lock-bot]

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