domexception: failed to execute 'keys' on 'cache': operation too large.

[jaybo]

mapbox-gl-js version: 2.15.0

browser: Chrome Version 119.0.6045.12

Steps to Trigger Behavior

1. Build sprawling PWA using mapboxgl / Quasar / Vue / workbox that's been happily working for years until yesterday.
2. Attempt to debug app in VSCode
3. Experience continuous domexception: failed to execute 'keys' on 'cache': operation too large.

Link to Demonstration

Sorry, this is a pathetic, incomplete bug report. It drove me crazy for a day and is now not reproducible. But I just wanted to leave a signpost in case somebody else experiences this issue. I failed to save a stack trace when the problem was active, but the last call on the stack was in tile_request_cache.js enforceCacheSizeLimit(), resulting in the exception failed to execute 'keys' on 'cache': operation too large. This exception occurred so frequently that my app was unusable and not debuggable.

The problem happened when debugging with both Chrome and Edge.

Web searches offered no clue. Rebooted many times. Cleared browser storage: Empty cache and hard reload. Updated my NVidia driver. sfc /scannow on Windows. Rolled back to earlier versions of all node components and rebuilt from scratch. No effect.

What made it go away was adding the line of code to my app startup: mapboxgl.clearStorage();

After running this ONCE, the issue disappeared, and I removed the above line of code. Magic!

Expected Behavior

Actual Behavior

[mourner]

This is likely a browser bug. mapboxgl.clearStorage() simply deletes the app cache, but doing so through DevTools would do the same. Not sure if there's anything we can do on the GL JS side to prevent the issue.

[farrokh-charoghchi]

Hello, just a hint maybe help to undrestand the problem:

I'm buiding a PWA with a map, and faced this issue too.

I create a service worker to cache fetched map tiles for offline access, and also create a page for the user to manage memory usage of this app. when the number of cached files increases too much (more than 10,000 files for example), the memory management page stops working. the code looks like this:

window.caches.open(cacheName).then(cache=>cache.keys().then( keys => [grab cached items operations is written here] ).cache( err => 'this cache is fired with the error: [Failed to execute 'keys' on 'Cache': Operation too large.]' ))