InvalidStateError：无法在“IDBDatabase”上执行“事务”：数据库连接正在关闭 ios safari

Question

自 2020 年 8 月以来我遇到了问题，但我仍然不知道如何重现，我正在使用dfahlander/Dexie.js来使用浏览器 indexedDB。

这是我如何使用 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 文件：-

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;

自 2020 年 8 月以来，我有大约 25K 条日志记录，并出现以下错误：-

InvalidStateError：无法在“IDBDatabase”上执行“事务”：数据库连接正在关闭。

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

如果我们要求用户清除他的浏览器网站数据（iPhone 设置 > safari > 高级 > 网站数据 > 删除网站数据）。 即使他们有超过 20GB 的可用 iPhone 存储空间，问题也会得到解决，但我们不能要求每个用户删除他们的网站数据。

知道这个问题的原因是什么吗？

Answer 1

嗯....我为此问题做了一些 RND，您只需创建全局错误处理服务，您可以检查此问题并重新加载应用程序即可

如果（err.message.search（ 'transaction' on 'IDBDatabase' ）>-1）{ window.location.reload（）`}