如何在iOS14中复现IndexedDB「Database deleted by request of the user」错误

问题背景 #

我使用idb包在Web应用中实现简单的IndexedDB管理。近期错误上报系统显示大量iOS用户遇到「UnknownError: Database deleted by request of the user」报错，我暂时无法复现该问题。

影响范围 #

目前该报错仅影响以下场景用户：

• Mobile Safari 14.6、14.4.2版本，报错可被try/catch捕获
• iOS 14.7.1版本的Instagram webview，报错无法被try/catch捕获

我判断该报错来源于WebKit源码中的对应实现，似乎和服务端连接关闭相关。

实现代码 #

我的简化实现代码如下：

// ./store.js
import { openDB } from 'idb'

export const upgrade = (db) => {
  if (!db?.createObjectStore) return null
  db.createObjectStore('example_store_name_1')
}

export const set = async (storeName, val, key) => {
  const dbPromise = openDB('example_db_name', 1, { upgrade })
  if (!window.indexedDB) return null
  return (await dbPromise).put(storeName, val, key)
}

export const count = async (storeName) => {
  const dbPromise = openDB('example_db_name', 1, { upgrade })
  if (!window.indexedDB) return null
  return (await dbPromise).count(storeName)
}

// ./index.js
import { set, count } from './store.js'

export const storeEvent = async (storeName, value, key) => {
  try {
    const rowCount = await count(storeName)
    // 我在应用其他部分处理并清空数据库，此处计数仅作为粗略限制
    // 避免数据库未正常清空时持续向存储写入数据
    if (rowCount < 500) {
      await set(storeName, value, key)
    }
  } catch (error) {
    // 错误上报至错误监控工具
  }
}

已尝试的复现操作 #

我已在iOS14.7.1的Instagram webview、Mobile Safari14.6环境下尝试以下复现操作，均未成功：

• 向idb写入超大对象的过程中关闭或后台化Instagram/Safari
• 同时在多个Safari标签页向idb写入超大对象
• 事务执行过程中手动删除Safari中的idb数据库，此时仅触发「UnknownError: Connection is closing.」或「AbortError: The transaction was aborted, so the request cannot be fulfilled.」，且均可被try/catch捕获
• Safari无痕模式
• 将Safari隐私设置调整为不存储任何Cookie或其他浏览器存储
• 复现idb官方提到的事务生命周期bug
• 谷歌搜索相关资料，除WebKit源码外无其他相关内容

求助 #

恳请各位提供可复现该问题的思路，以便我后续修复该问题，感谢！

内容的提问来源于stack exchange，提问作者greenbricks