mapbox / mapbox/mapbox-gl-js

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

Open
#12,965 2 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

needs investigation :mag:
Dominant language
TypeScript
Stars
12.4k
Forks
2.4k
PR merge metrics
No merged PRs in 30d

Description

**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

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by reading tile_request_cache.js, especially enforceCacheSizeLimit(), and investigate the reported Cache API exception in Chrome and Edge. The report provides no reproducible demonstration, stack trace, expected behavior, or test location; done would require reproducing the failure and establishing a verified fix or regression test.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
frontend, web-dev
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
20/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.