InvalidStateError: Failed to execute 'transaction' on 'IDBDatabase': The database connection is closing with ios safari

[Q8root]

I am getting error on log when this get executed:-

import React, { useEffect } from "react";
import db from "../config/db";

useEffect(() => {
    db.reads
      .get(props.match.params.id)
      .then((data) => {})
      .catch((e) => {
        console.log(e);
      });
  }, []);

import Dexie from "dexie";
const db = new Dexie("bookDB");
db.version(2).stores({
  reads: "hash,token,sa,ss",
  books: "hash,token",
});

export default db;

I am getting many errors :-

InvalidStateError: Failed to execute 'transaction' on 'IDBDatabase': The database connection is closing.

UserAgent:-

Mozilla/5.0 (iPhone; CPU iPhone OS 13_7 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.1.2 Mobile/15E148 Safari/604.1

I could not find steps that produce the following error, some iPhone's i've tested does not return any error.

[dfahlander]

This happens when database is closing down when the component is mounting. The reason could be if the application at another place calls db.close(), or if the database is forcibly deleted in devtools, or if there is a newer version of the db loaded in another tab or window, so the db has to close down to resume an upgrade.

It could also be a iOS Safari related issue. Do you only see the issue on Safari or have you just tested it there?

[Q8root]

This happens when database is closing down when the component is mounting. The reason could be if the application at another place calls db.close(), or if the database is forcibly deleted in devtools, or if there is a newer version of the db loaded in another tab or window, so the db has to close down to resume an upgrade.

It could also be a iOS Safari related issue. Do you only see the issue on Safari or have you just tested it there?

All the other components files using the same, import db then use .get or .put method, this issue, regarding the version upgade, currently we have version 2 since 4 months ago, and users who got this error are first time they visit our website.
This error only occurred with ios users.

[Q8root]

Screenshot showing the user-agent that got the error

[trackedsupport]

This happens when database is closing down when the component is mounting. The reason could be if the application at another place calls db.close(), or if the database is forcibly deleted in devtools, or if there is a newer version of the db loaded in another tab or window, so the db has to close down to resume an upgrade.

It could also be a iOS Safari related issue. Do you only see the issue on Safari or have you just tested it there?

So how should we catch and fix this issue?

[dfahlander]

So how should we catch and fix this issue?

Too little info about the cause of this issue to tell. Try make a repro.

• Is the reason that your own application is closing down the db? Fix it in your app.
• Is the reason that another tab/window is loading a newer version of the app, making the old close down? Listen to db.on('versionchange') to customize how your app should act when this happens.
• Is the reason due to a bug in Safari? - File an issue in webkit bugzilla.

[trackedsupport]

I never close the dexie db.
I can't reproduce but I know it happened for someone using Firefox 88 on windows. Also I know that once I changed from storing blobs to storing ArrayBuffer that this issue happens a lot more frequently.
I have never changed versions of my db - so that should never be called right?

[dfahlander]

right. Pay attention to errors occurring before this error happens. Are you also getting quotaexceeded errors? I don't see the reason why the browser closes the db for anything else than an unexpected internal error, but i could be wrong. Would be interesting to know.

[trackedsupport]

I wasn’t getting quotaexceeded until I did the ArrayBuffer but still I’m get those error far less frequently.

The one Firefox user didn’t have any issues when saving blob without doing the ArrayBuffer. I wouldn’t know there was an issue until I saw only 15 bytes retrieved from the db.

[Q8root]

So how should we catch and fix this issue?

Too little info about the cause of this issue to tell. Try make a repro.

• Is the reason that your own application is closing down the db? Fix it in your app.
• Is the reason that another tab/window is loading a newer version of the app, making the old close down? Listen to db.on('versionchange') to customize how your app should act when this happens.
• Is the reason due to a bug in Safari? - File an issue in webkit bugzilla.

I begin to think that it's a bug in Safari, because i noticed not only indexedDB data get cleared from those users, also the localStorage get cleared.

If I'm setting the version 2 for more than one year ago, is it possible that user may still using an old version, also most of users having this issue, they are first time ever opened our website ?

[quolpr]

Yep, it is a safari bug - https://bugs.webkit.org/show_bug.cgi?id=197050 . It may happen when you switch the site between foreground and background. For now as one of the solution is to reload the app if such an error happens.

Here is the same issue at firebase - firebase/firebase-js-sdk#3495 . They fixed it with firebase/firebase-js-sdk#3535 . They reopen the DB connection if it was closed. @dfahlander could Dexie have such a feature too?

[dfahlander]

Thanks @quolpr! Yes, that would be great if we could workaround this. I posted an idea on how to fix it Based on mikekreeki's workaround but without having to test IDB state for every request.

[jcimoch]

This is occurring on latest chrome randomly as well, I noticed that it happens more often when browser was put in the background for a while

[jeremad]

#1398

Might fix that?

[dfahlander]

#1398

Might fix that?

Yes, #1398 works around the exact same problem - catches exception thrown when executing db.transaction and reopens the connection. It's released in version 3.2.1.

[jeremad]

Thank you, I'll test test that!

[jeremad]

It seems indeed to workaround the issue pretty well! Thank you!