[JavaScript][indexedDB] NotFoundError: Failed to execute 'transaction' on 'IDBDatabase': One of the specified object stores was not found

Question

I am working on a website that will take user data from the form and show it in the table below. I am using indexedDB and everything works locally on my laptop, but when I deploy it to GitHub pages, I get this error: NotFoundError: Failed to execute 'transaction' on 'IDBDatabase': One of the specified object stores was not found.

let db;
let request = window.indexedDB.open("newDatabase", 1);

request.onupgradeneeded = function (event) {var db = event.target.result;
var objectStore = db.createObjectStore("client", {autoIncrement: true,});

objectStore.createIndex("name", "name", { unique: false });
objectStore.createIndex("lastName", "lastName", { unique: false });
objectStore.createIndex("email", "email", { unique: true });
objectStore.createIndex("ID", "ID", { unique: true });
objectStore.createIndex("postal", "postal", { unique: false });
objectStore.createIndex("phoneNumber", "phoneNumber", { unique: true });

var formElements = document.getElementById("form");

  var request = db
  .transaction(["client"], 'readwrite')
  .objectStore("client")
  .add({
    name: formElements[0].value,
    lastName: formElements[1].value,
    email: formElements[2].value,
    postal: formElements[3].value,
    ID: formElements[4].value,
    phoneNumber: formElements[5].value,
  });

I read on the internet that it may happen when the name of an objectStore is different from the name in the transaction, but it is not the case here, they are both the same. I tried changing them to other names, but the issue was still there...

db.createObjectStore("client", {autoIncrement: true,});
.
.
.
var request = db
  .transaction(["client"], 'readwrite')

Ferland

Answer 1

The problem was in request.onupgradeneeded callback, in my implementation I was adding to objectStore two clients with the same ID. As you can see in the code below the ID should be unique. By adding those two clients the function was throwing an error and was calling request.onerror, and that is why the database could not be opened and objectStore was not created.

request.onupgradeneeded = function (event) {
var db = event.target.result;
console.log("Object Store creation");
var objectstore = db.createObjectStore("client", {
    autoIncrement: true,
});

objectstore.createIndex("name", "name", { unique: false });
objectstore.createIndex("lastName", "lastName", { unique: false });
objectstore.createIndex("email", "email", { unique: true});
objectstore.createIndex("ID", "ID", { unique: true }); //HERE WAS THE PROBLEM
objectstore.createIndex("postal", "postal", { unique: false });
objectstore.createIndex("phoneNumber", "phoneNumber", { unique: true});

for (var i in clientData) {
    objectstore.add(clientData[i]); // Here was the error thrown
}
};

const clientData = [
    {
      name: "Piotr",
      lastName: "Wesoly",
      email: "[email protected]",
      ID: 'CCU238293', //The same ID as in the other client
      postal: "90-234",
      phoneNumber: "500500200"
    },
    {
      name: "Pawel",
      lastName: "Rosiak",
      email: "[email protected]",
      ID: 'CCU238293', //The same ID as in the other client
      postal: "93-234",
      phoneNumber: "500400200"
    },
  ];

The fix was easy: either set unique to false or change the ID of one of the clients to something unique.

Ferland

Answer 2

onupgradeneeded only get's called, if the database version provided in open is newer than the current. You might have, due to some testing already an existing database, which does not contains the client object store. I recommend to use the development tools in order to debug whatever databases already exists.

Here is an example view for SO:

Naseby

You are right, I do already have a database, which does not contain the clients, but this is weird. Because all of the databases I created should have a client object store. If I run: let request = window.indexedDB.open("newDatabase", 1); again, but with different name, would that create a new database, but this time with clients ? Here is my problem, for some reason my code sometimes creates client object store and sometimes it doesn't... apparently it doesn't do it on github pages – Ferland

I found out what is the issue, but I have no idea why this is happening: when I open page for the first time, the database gets created, but it cannot be opened, therefore the elements of the database do not get added to it. The next time I go to the page, the database is there already (so the new one does not get created). Because the database is already there, the code tries to retrieve data from the elements but is unable since elements in this database do not exist. It happens everytime and on different browsers... – Ferland

seems like an order of operations issue. May the examples given on Morzilla dev will help you: click me – Naseby