Problems arise

One night, the alarm platform sends a message. Log in to Sentry and find 1.3K errors for one IP in a short period of time. The error message is QuotaExceededError, and the classification is unclassified. There is not much valid information.

Baidu immediately reported an error keyword, in this associated word more for localStorage. In combination with the recent live record, I came up with a new API to use – store.js based on localforage encapsulation.

Localforage & use

Localforage improves the offline experience of applications with asynchronous storage. Can store multiple types of data, not just strings. Use graceful degradation, preferably IndexedDB or WebSQL, or localStorage if the browser does not support it.

In addition, you can also set the expire time, which will be cleared before getItem.

Based on the above advantages, Localforage is ideal for this business scenario:

  1. This time, the data stored locally must be set to expire. If the time exceeds the specified time, the data will be cleared and the latest data will be called again.
  2. There may be a lot of data that needs to be stored locally at a later stage, and in this case, because it is a fringe scenario, test IndexedDB using localforage.
  3. IndexedDB operates asynchronously and does not block the main thread.

Troubleshoot problems

Compatibility issues?

The first suspicion was compatibility issues, but localforage has an elegant fallback mechanism and has been tested on real machines during development, and will be compatible with IndexedDB on both mobile and PC. IndexedDB has been used incorrectly since localStorage was used for a long time.

Recurring problems

Since the inference was that IndexedDB had thrown an exception, an attempt was made to reproduce the error. However, two weeks after the launch of the demand, only three IP reported this error, and the mobile PC did not reproduce after all kinds of violent operations, so will it be the problem of the mobile phone?

Then find a test machine with minimal memory, unexpectedly there is 20GB remaining space, O (╥﹏╥) O. So after a day of downloading the game, the memory usage was reduced to about 100MB, and it finally came back.

Question why

After successfully replicating the error, the relevant data were reviewed to find the cause of the IndexedDB exception.

Unlike browsers, which reserve about 5MB of storage space for localStorage, the IndexedDB quota is calculated dynamically, and although browser implementations vary, the amount of available storage is usually determined by the amount of storage available on the device.

How do I check how much storage is available?

if (navigator.storage && navigator.storage.estimate) {
  const quota = await navigator.storage.estimate();
  // quota.usage -> Number of bytes used.
  // quota.quota -> Maximum number of bytes available.
  const percentageUsed = (quota.usage / quota.quota) * 100;
  console.log(`You've used ${percentageUsed}% of the available storage.`);
  const remaining = quota.quota - quota.usage;
  console.log(`You can write up to ${remaining} more bytes.`);
}
Copy the code

In the reoccurrence stage, when the memory of the mobile phone is 1GB, the remaining storage space of WebView is about 500MB. As the memory of the mobile phone continues to decrease, the quota of the browser also decreases until the memory of the mobile phone is about 300MB, and the quota drops to 0. When the amount of data written is greater than the remaining quota, A QuotaExceededError is raised.

Summary & Reflection

  1. Extreme cases of severely out of memory can cause IndexedDB usage to be abnormal.
  2. You should do some exception handling when using a new API. In this case, while localforage has a downgrade mechanism, indexes that support IndexedDB will not automatically drop to localStorage if an IndexedDB error occurs and will need to be handled manually during development.
  3. When encountering the abnormal use of open source wheels, I first went to issues to have a look. The investigation of this problem took many detours, and finally I found a breakthrough in GitLab.

The resources

Web. Dev/storage – for… In-depth good articles recommended reading

Developer.mozilla.org/zh-CN/docs/…