Skip to content

Commit 070b350

Browse files
huumnhuumn
committed
catch when indexeddb is not available fix #1462 
1 parent 154c0e0 commit 070b350

File tree

2 files changed

+76
-45
lines changed

2 files changed

+76
-45
lines changed

‎components/use-indexeddb.js‎

Lines changed: 44 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { useState, useEffect, useCallback, useRef } from 'react'
33
function useIndexedDB (dbName, storeName, version = 1, indices = []) {
44
const [db, setDb] = useState(null)
55
const [error, setError] = useState(null)
6+
const [notSupported, setNotSupported] = useState(false)
67
const operationQueue = useRef([])
78

89
const handleError = useCallback((error) => {
@@ -27,36 +28,47 @@ function useIndexedDB (dbName, storeName, version = 1, indices = []) {
2728

2829
useEffect(() => {
2930
let isMounted = true
30-
const request = window.indexedDB.open(dbName, version)
31+
let request
32+
try {
33+
if (!window.indexedDB) {
34+
console.log('IndexedDB is not supported')
35+
setNotSupported(true)
36+
return
37+
}
3138

32-
request.onerror = (event) => {
33-
handleError(new Error('Error opening database'))
34-
}
39+
request = window.indexedDB.open(dbName, version)
3540

36-
request.onsuccess = (event) => {
37-
if (isMounted) {
38-
const database = event.target.result
39-
database.onversionchange = () => {
40-
database.close()
41-
setDb(null)
42-
handleError(new Error('Database is outdated, please reload the page'))
41+
request.onerror = (event) => {
42+
handleError(new Error('Error opening database'))
43+
}
44+
45+
request.onsuccess = (event) => {
46+
if (isMounted) {
47+
const database = event.target.result
48+
database.onversionchange = () => {
49+
database.close()
50+
setDb(null)
51+
handleError(new Error('Database is outdated, please reload the page'))
52+
}
53+
setDb(database)
54+
processQueue(database)
4355
}
44-
setDb(database)
45-
processQueue(database)
4656
}
47-
}
4857

49-
request.onupgradeneeded = (event) => {
50-
const database = event.target.result
51-
try {
52-
const store = database.createObjectStore(storeName, { keyPath: 'id', autoIncrement: true })
58+
request.onupgradeneeded = (event) => {
59+
const database = event.target.result
60+
try {
61+
const store = database.createObjectStore(storeName, { keyPath: 'id', autoIncrement: true })
5362

54-
indices.forEach(index => {
55-
store.createIndex(index.name, index.keyPath, index.options)
56-
})
57-
} catch (error) {
58-
handleError(new Error('Error upgrading database: ' + error.message))
63+
indices.forEach(index => {
64+
store.createIndex(index.name, index.keyPath, index.options)
65+
})
66+
} catch (error) {
67+
handleError(new Error('Error upgrading database: ' + error.message))
68+
}
5969
}
70+
} catch (error) {
71+
handleError(new Error('Error opening database: ' + error.message))
6072
}
6173

6274
return () => {
@@ -68,6 +80,13 @@ function useIndexedDB (dbName, storeName, version = 1, indices = []) {
6880
}, [dbName, storeName, version, indices, handleError, processQueue])
6981

7082
const queueOperation = useCallback((operation) => {
83+
if (notSupported) {
84+
return Promise.reject(new Error('IndexedDB is not supported'))
85+
}
86+
if (error) {
87+
return Promise.reject(new Error('Database error: ' + error.message))
88+
}
89+
7190
return new Promise((resolve, reject) => {
7291
const wrappedOperation = (db) => {
7392
try {
@@ -81,7 +100,7 @@ function useIndexedDB (dbName, storeName, version = 1, indices = []) {
81100
operationQueue.current.push(wrappedOperation)
82101
processQueue(db)
83102
})
84-
}, [processQueue, db])
103+
}, [processQueue, db, notSupported, error])
85104

86105
const add = useCallback((value) => {
87106
return queueOperation((db) => {
@@ -267,7 +286,7 @@ function useIndexedDB (dbName, storeName, version = 1, indices = []) {
267286
})
268287
}, [queueOperation, storeName])
269288

270-
return { add, get, getAll, update, remove, clear, getByIndex, getAllByIndex, getPage, error }
289+
return { add, get, getAll, update, remove, clear, getByIndex, getAllByIndex, getPage, error, notSupported }
271290
}
272291

273292
export default useIndexedDB

‎components/wallet-logger.js‎

Lines changed: 32 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ export function WalletLogs ({ wallet, embedded }) {
1515
const { logs, setLogs, hasMore, loadMore, loadLogs, loading } = useWalletLogs(wallet)
1616
useEffect(() => {
1717
loadLogs()
18-
}, [wallet])
18+
}, [loadLogs])
1919

2020
const showModal = useShowModal()
2121

@@ -93,22 +93,26 @@ function useWalletLogDB () {
9393
const { me } = useMe()
9494
const dbName = `app:storage${me ? `:${me.id}` : ''}`
9595
const idbStoreName = 'wallet_logs'
96-
const { add, getPage, clear, error: idbError } = useIndexedDB(dbName, idbStoreName, 1, INDICES)
97-
return { add, getPage, clear, error: idbError }
96+
const { add, getPage, clear, error, notSupported } = useIndexedDB(dbName, idbStoreName, 1, INDICES)
97+
return { add, getPage, clear, error, notSupported }
9898
}
9999

100100
export function useWalletLogger (wallet, setLogs) {
101-
const { add, clear } = useWalletLogDB()
101+
const { add, clear, notSupported } = useWalletLogDB()
102102

103103
const appendLog = useCallback(async (wallet, level, message) => {
104104
const log = { wallet: tag(wallet), level, message, ts: +new Date() }
105105
try {
106-
await add(log)
106+
if (notSupported) {
107+
console.log('cannot persist wallet log: indexeddb not supported')
108+
} else {
109+
await add(log)
110+
}
107111
setLogs?.(prevLogs => [log, ...prevLogs])
108112
} catch (error) {
109-
console.error('Failed to append log:', error)
113+
console.error('Failed to append wallet log:', error)
110114
}
111-
}, [add])
115+
}, [add, notSupported])
112116

113117
const [deleteServerWalletLogs] = useMutation(
114118
gql`
@@ -130,13 +134,17 @@ export function useWalletLogger (wallet, setLogs) {
130134
if (!wallet || wallet.sendPayment) {
131135
try {
132136
const walletTag = wallet ? tag(wallet) : null
133-
await clear('wallet_ts', walletTag ? window.IDBKeyRange.bound([walletTag, 0], [walletTag, Infinity]) : null)
137+
if (notSupported) {
138+
console.log('cannot clear wallet logs: indexeddb not supported')
139+
} else {
140+
await clear('wallet_ts', walletTag ? window.IDBKeyRange.bound([walletTag, 0], [walletTag, Infinity]) : null)
141+
}
134142
setLogs?.(logs => logs.filter(l => wallet ? l.wallet !== tag(wallet) : false))
135143
} catch (e) {
136144
console.error('failed to delete logs', e)
137145
}
138146
}
139-
}, [clear, deleteServerWalletLogs, setLogs])
147+
}, [clear, deleteServerWalletLogs, setLogs, notSupported])
140148

141149
const log = useCallback(level => message => {
142150
if (!wallet) {
@@ -169,20 +177,24 @@ export function useWalletLogs (wallet, initialPage = 1, logsPerPage = 10) {
169177
const [cursor, setCursor] = useState(null)
170178
const [loading, setLoading] = useState(true)
171179

172-
const { getPage, error: idbError } = useWalletLogDB()
180+
const { getPage, error, notSupported } = useWalletLogDB()
173181
const [getWalletLogs] = useLazyQuery(WALLET_LOGS, SSR ? {} : { fetchPolicy: 'cache-and-network' })
174182

175183
const loadLogsPage = useCallback(async (page, pageSize, wallet) => {
176184
try {
177185
let result = { data: [], hasMore: false }
178-
const indexName = wallet ? 'wallet_ts' : 'ts'
179-
const query = wallet ? window.IDBKeyRange.bound([tag(wallet), -Infinity], [tag(wallet), Infinity]) : null
180-
result = await getPage(page, pageSize, indexName, query, 'prev')
181-
// no walletType means we're using the local IDB
182-
if (wallet && !wallet.walletType) {
183-
return result
186+
if (notSupported) {
187+
console.log('cannot get client wallet logs: indexeddb not supported')
188+
} else {
189+
const indexName = wallet ? 'wallet_ts' : 'ts'
190+
const query = wallet ? window.IDBKeyRange.bound([tag(wallet), -Infinity], [tag(wallet), Infinity]) : null
191+
192+
result = await getPage(page, pageSize, indexName, query, 'prev')
193+
// no walletType means we're using the local IDB
194+
if (wallet && !wallet.walletType) {
195+
return result
196+
}
184197
}
185-
186198
const { data } = await getWalletLogs({
187199
variables: {
188200
type: wallet?.walletType,
@@ -207,10 +219,10 @@ export function useWalletLogs (wallet, initialPage = 1, logsPerPage = 10) {
207219
console.error('Error loading logs from IndexedDB:', error)
208220
return { data: [], total: 0, hasMore: false }
209221
}
210-
}, [getPage, setCursor, cursor])
222+
}, [getPage, setCursor, cursor, notSupported])
211223

212-
if (idbError) {
213-
console.error('IndexedDB error:', idbError)
224+
if (error) {
225+
console.error('IndexedDB error:', error)
214226
}
215227

216228
const loadMore = useCallback(async () => {

0 commit comments

Comments
 (0)