We are using indexedDB to store files locally. We have an issue when the browser is running out of space (reaching the available quota). It seems that the transaction is being marked with an error (dom exception quota exceeded indexdb). This is something though that is not being bubbled up in the .onerror handle. We have this following example where the objectStoreRequest.onerror does not seem to work properly. If we simulate custom storage quota equal to 0MB from the dev tools, so that we’ll trigger the error, we don’t see a log from objectStoreRequest.onerror, which is something that we’d expect. To be able to see that there is an error we had to put a setTimeout which will be invoked after few seconds and at that point we’ll be able to see an error within the transaction. Is it something that we’re missing, is there someone that managed to handle this error properly?

const simulateStorageQuotaError = () => {// Let us open our database
  var DBOpenRequest = window.indexedDB.open("toDoList", 4);

  var db = null;
  DBOpenRequest.onsuccess = function (event) {
    db = DBOpenRequest.result;

    // open a read/write db transaction, ready for adding the data
    //@ts-ignore
    var transaction = db.transaction(["toDoList"], "readwrite");

    // report on the success of the transaction completing, when everything is done
    transaction.oncomplete = function (event: any) {
      console.log('Transaction completed.', event);
    };

    transaction.onerror = function (event: any) {
      console.log('Transaction not opened due to error. Duplicate items not allowed.', event);
    };

    // create an object store on the transaction
    var objectStore = transaction.objectStore("toDoList");

    for (let i = 0; i < 100; i  ) {
      // Create a new item to add in to the object store
      var newItem = { taskTitle: `Task Title ${i}`, hours: 19, minutes: 30, day: 24, month: 'December', year: 2013, notified: "no" };

      // make a request to add our newItem object to the object store
      var objectStoreRequest = objectStore.add(newItem);

      objectStoreRequest.onsuccess = function (event: any) {
        console.log('Request successful.', event);
        console.log('Request successful: transaction', transaction);

        setTimeout(() => {
          console.log('transaction from setTimeout', transaction);
        }, 1000);
      }
    }
  };

  // This event handles the event whereby a new version of
  // the database needs to be created Either one has not
  // been created before, or a new version number has been
  // submitted via the window.indexedDB.open line above
  DBOpenRequest.onupgradeneeded = function (event) {
    //@ts-ignore
    var db = event.target.result;

    db.onerror = function (event: any) {
      console.log('Error loading database.', event);
    };

    // Create an objectStore for this database
    var objectStore = db.createObjectStore("toDoList", { keyPath: "taskTitle" });

    // define what data items the objectStore will contain
    objectStore.createIndex("hours", "hours", { unique: false });
    objectStore.createIndex("minutes", "minutes", { unique: false });
    objectStore.createIndex("day", "day", { unique: false });
    objectStore.createIndex("month", "month", { unique: false });
    objectStore.createIndex("year", "year", { unique: false });

    objectStore.createIndex("notified", "notified", { unique: false });
  };
}

CodePudding user response：

According to this guide:

IndexedDB

If the origin has exceeded its quota, attempts to write to IndexedDB will fail. The transaction's onabort() handler will be called, passing an event. The event will include a DOMException in the error property. Checking the error name will return QuotaExceededError.

const transaction = idb.transaction(['entries'], 'readwrite');
transaction.onabort = function(event) {
  const error = event.target.error; // DOMException
  if (error.name == 'QuotaExceededError') {
    // Fallback code goes here
  }
};