Reactive storage infinite loop caused by race conditions

[flytaly]

Describe the bug

The reactive storage introduced in #157 could lead to an infinite loop if properties of an object were changed in rapid succession inside asynchronous code. If this happens in a background script, it can make the browser unusable.

Example (full reproduction also included):

 async function fn() {
  storageData.value.timestamp = Date.now()
  await Promise.resolve()
  storageData.value.timestamp = Date.now()
}

Reproduction

flytaly@3d93d8f

System Info

System:
    OS: Linux 6.7 Arch Linux
    CPU: (12) x64 Intel(R) Core(TM) i5-10400 CPU @ 2.90GHz
    Memory: 3.84 GB / 15.47 GB
    Container: Yes
    Shell: 5.2.26 - /bin/bash
  Binaries:
    Node: 21.6.1 - /run/user/1000/fnm_multishells/76639_1708848850539/bin/node
    npm: 10.4.0 - /run/user/1000/fnm_multishells/76639_1708848850539/bin/npm
    pnpm: 8.3.1 - /run/user/1000/fnm_multishells/76639_1708848850539/bin/pnpm
    bun: 1.0.3 - ~/.bun/bin/bun

Used Package Manager

pnpm

Validations

• Follow our Code of Conduct
• Read the Contributing Guide.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Check that this is a concrete bug. For Q&A, please open a GitHub Discussion instead.
• The provided reproduction is a minimal reproducible of the bug.

[flytaly]

Ok, I have found a way to handle this by using the throttleFilter (or debounceFilter) from vueuse.

useWebExtensionStorage(key, initial, { eventFilter: throttleFilter(200) })