IndexedDb isn't responding whenever I install any other extension

[Joy Gupta]

Hii,
I am facing this weird issue while developing extension in manifest version 3. I am using indexedDB to pass data from background script to some html page (refer it as report.html).  The data payload was quite large that is why I am using indexedDb otherwise would have used messaging API. 
The extension stores some technical details about user like network, consoles, mouse clicks & all other details that are required for bug reporting.

Now whenever I install any extension, and open up the report.html and ask background script to save corresponding data into indexedDB, it does not work. Neither it throws any error nor logs any confirmation message. 

function updateRecord(record) {

const update_transaction = db.transaction('testbuddy', 'readwrite');

const objectStore = update_transaction.objectStore('testbuddy');

return new Promise((resolve, reject) => {

update_transaction.oncomplete = function () {

console.log("updatation done"); //doesn't log

resolve(true);

};

update_transaction.onerror = function () {

console.log('error occured'); //doesn't log

resolve(false);

};

let request = objectStore.put(record);

request.onsuccess = function () {

console.log("everything's done"); //doesn't log

};

});

}

[Joy Gupta]

Upon adding debugger I found that it is raising this error
Uncaught (in promise) DOMException: Failed to execute 'put' on 'IDBObjectStore': The transaction is not active.

[David Roland]

I believe the DOMException is thrown because you didn't call the put method within the event loop where you created the transaction. It's not an extension-specific issue,  but an issue with asynchronous functions and indexeddb. If you create a transaction, then await the result of an asynchronous call, and then call a put on the objectstore returned from the transaction, you'll get an error that the transaction is not active. I remember having a similar problem with indexeddb, but I'm not an expert on the architecture.

[Joy Gupta]

function updateRecord(record) {

const updateTransaction = db.transaction('testing', 'readwrite');

const objectStore = updateTransaction.objectStore('testing');

const promise = new Promise((resolve, reject) => {

updateTransaction.oncomplete = () => {

resolve();

};

updateTransaction.onerror = () => {

reject(new Error('error occurred'));

};

const request = objectStore.put(record);

request.onsuccess = () => {

resolve();

};

request.onerror = () => {

reject(new Error('error occurred'));

};

});

promise

.then(() => {

console.log("everything's done");

})

.catch((error) => {

console.log(error.message);

});

} if you are talking about using this approach, then its not working too

[David Roland]

If you move the call to objectStore.put(record) out of the function you pass to the new Promise, and into the updateRecord function body,  I think the put call will work (it won't throw the DOM Exception). That may not be how you'd like to structure your code (it seems you're intending to return a promise that resolves or rejects when the transaction completes), but at least you'll see why it's failing.

[David Roland]

Alternatively,  create the transaction and object store in the function that you pass to the new Promise. That probably works better for your code structure, and just leave the put call where it is.