IndexedDB：未捕获（承诺）DOMException

Question

I am using indexedDB(via npm's idb wrapper) to store 2D Float32 arrays which represent audio channel data. It works fine for some time, however, when the length of one of the arrays reaches approximately 16658432 , idb crashes with the exception in the title. Stack trace is pretty useless as I am using React in conjunction with Next.js, however from what I dag out, it appears it crashes at idb's caching part. Note: I can store multiple large arrays no problem, but everything breaks once either of them exceeds this "limit"

Is this a limitation I just have to deal with, or can this be worked around in some way? I could potentially split the 2D array into two arrays and store them as separate entries, but this is a less than ideal solution, which will cause the same problem once they grow too.

Just a simple wrapper around idb's transactions:

export const asyncPut = async (
  dbName: string,
  tableName: string,
  key: string,
  value: any // [Float32Array, Float32Array]
): Promise<void> => {
  try {
    const db = await asyncOpenDb(dbName, tableName);
    const transaction = db.transaction(tableName, "readwrite");
    await transaction.objectStore(tableName).put(value, key);
  } catch (error) {
    // I catch the error here
    console.error("**IDB Error:", error);
  }
};

Answer 1

I just tested this in Chrome and they might have improved the errors since you've tested.

The error that I'm getting when I tried to insert this array:

ar = new Array(16658432).fill(1)

is that it exceeds the max size of a single object:

target: IDBRequest
error: DOMException
code: 0
message: "The serialized keys and/or value are too large (size=515354750 bytes, max=133169152 bytes)."
name: "UnknownError"
__proto__: DOMException

Tested in:

• Google Chrome
• Version 76.0.3809.100 (Official Build) (64-bit)