Search code examples
javascriptreactjsreduxindexeddb

ReactJS, Redux and DexieJS (IndexedDB) - Error in incognito mode and Chrome v69

I'm currently learning ReactJS and I decided to create a simple application.

The stack is:

  • React
  • Redux
  • React-router
  • DexieJS (IndexedDB)

The application is working. The problem is that when I try to test it on Firefox or incognito mode (in Chrome), I get this error:

TypeError: Cannot read property 'apply' of undefined enter image description here

Anyone knows why I get this error and how I could handle that? I found that IndexedDB is not available in Firefox and incognito mode, so I tried to make a simple check:

if(!window.indexedDB) {
 alert('Indexed DB is not supported by your browser. If you are running in incognito mode, please use the normal mode.')
}

But this is not working, I get the error again.

Here is the Github repo if you want to see the whole code: https://github.com/Webd01/BM

Thanks for your help!

Solution

  • IndexedDB works fine in Chrome incognito mode, so if you have a problem there, it might be caused my something else.

    But you are right that IndexedDB is not good in Firefox private browsing mode, although you're wrong about specifically how. window.indexedDB is not null in Firefox private browsing mode, but it does give you an error on upgradeneeded. I use something like this to detect it (this has some other browser compatibility checks too):

    var checkIDB = function () {
  if (typeof window.indexedDB === "undefined") {
    console.log("IndexedDB not supported at all!");
    return;
  }

  try {
    keyRange.only([1]);
  } catch (e) {
    console.log("Buggy Microsoft IndexedDB implementation");
    return;
  }

  var openRequest = window.indexedDB.open('firefox-private-test', 1);

  openRequest.onerror = function (evt) {
    console.error(evt.target.error);
    if (evt.target.error.message.includes("aborted")) {
      console.log("Some other error, maybe quota related:");
      console.log(evt.target.error);
    } else {
      console.log("Firefox private mode, probably:");
      console.log(evt.target.error);
    }
  }

  openRequest.onupgradeneeded = function (evt) {
    var db = evt.target.result;
    var one = db.createObjectStore('one', {
      autoIncrement: true,
      keyPath: 'key'
    });
    one.createIndex('one', 'one');
    one.add({one: 1});
    var two = db.createObjectStore('two', {
      autoIncrement: true,
      keyPath: 'key'
    });
    two.createIndex ('two', 'two');
    two.add({two: 2});
  };

  openRequest.onsuccess = function (evt) {
    var db = evt.target.result;
    var transaction;
    try {
      transaction = db.transaction(['one', 'two'], 'readwrite');
    } catch (e) {
      console.log("Some browser failed here, maybe an old version of Safari, I forget");
      console.log(e.target.error);
      return;
    }

    var count = 0;
    transaction.objectStore('one').index('one').openCursor().onsuccess = function (evt) {
      cursor = evt.target.result;
      if (cursor) {
        count += 1;
        cursor.continue();
      }
    };

    transaction.oncomplete = function () {
      db.close();
      if (count === 1) {
        console.log("All good!");
      } else {
        console.log("Buggy Safari 10 IndexedDB implementation")
      }
    };
  };
};