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

Question

I have issue since Aug 2020 and i still don't know how to reproduce, I am using dfahlander/Dexie.js to use browser indexedDB.

This is sample of how i am using dexie:-

import db from "./db";
import { useState, useEffect } from "react";
import axios from "axios";
import {   useParams } from "react-router-dom";

export default function App() {
  const params =   useParams();
  const [storedRead, setStoredRead] = useState();
  const [data,setData] = useState();

  useEffect(() => {
          db.reads
            .get({ hash: params.id })
            .then((data) => {
              setStoredRead(data);
              readRequest(data ? data.token : "");
            })
            .catch((e) => {
              //Here i am getting error with ios users, not all of them
              // InvalidStateError: Failed to execute 'transaction' on 'IDBDatabase': The database connection is closing.   
            });
 
  }, []);

  const readRequest = (token) => {
    axios
      .post(`${process.env.REACT_APP_API_URL}khatma/read`, {
        khatma: params.id,
        part: params.part,
        section: params.section,
        token: token, 
      })
      .then((res) => {
        if (res.data.token) {
          db.reads
            .put(
              {
                hash: params.id,
                token: res.data.token,
                ss: "",
                sa: "",
              },
              params.id
            )
            .then((event) => {
              db.reads.get({ hash: params.id }).then((read) => {
                setStoredRead(read);
                setData(res.data);
              });
              
            })
            .catch((e) => {
             
            });
  
        } else {
          setData(res.data);
  
          db.reads.get({ hash: params.id }).then((read) => {
            setStoredRead(read);
            setData(res.data);
          
          });
          
        }
    
      })
      .catch((error) => {
      
      });
  };

  return (
    <div className="App">
     
    </div>
  );
}

db.js file:-

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

console.log("dexie version", db.verno);

export default db;

Since Aug 2020 i have about 25K log record with the following error:-

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

Its happens only with user-agent = ios safari with different ios versions (11 to 14) Mozilla/5.0 (iPhone; CPU iPhone OS 14_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/14.0 Mobile/15E148 Safari/604.1

If we asked the user to clear his browser website data (iPhone setting > safari > advanced > website data > delete website data). Issue get resolved even-though they have available iPhone storage space more than 20GB, but we cannot ask each user to delete their websites data.

Any idea what is the causes of this issue?

Answer 1

hmmm.... i did some RND on this for this issue you just create the global error handling service you can put check for this issue and just reload the app it will work

if(err.message.search( 'transaction' on 'IDBDatabase' )>-1) { window.location.reload() `}