Error Reporting / Logging for Persisted Cache Data

[sbdchd]

While debugging why persisting the cache wasn't working I noticed that caching errors aren't surfaced in the UI.

Currently with persisted cache setup, if there size of the value is too large for localStorage, then react-query won't be able to save the data but also won't report anything about the error

I have the following to log the error to the console, but I think the storage API could be updated to have an onError style callback so users could more easily log errors / send them to Sentry.

const storage = {
  getItem: (key: string): string | null => {
    console.info(`getting item: key=${key}`)
    const res = localStorage.getItem(key)
    if (res == null) {
      console.info(`no item found: key=${key}`)
    } else {
      console.info(`item found: key=${key}`)
    }
    return res
  },
  setItem: (key: string, value: string): void => {
    console.info(
      `setting item: key=${key} valueSize=${Math.round(value.length / 1000)}KB`,
    )
    try {
      localStorage.setItem(key, value)
    } catch (e) {
      console.error("error saving item with key", key)
      console.error(e)
      throw e
    }
  },
  removeItem: (key: string): void => {
    console.info(`removing item: key=${key}`)
    localStorage.removeItem(key)
  },
}

In this case the error is related to the storage API but JSON serialize / deserialize could also fail -- not sure if those errors would be grouped under one onError callback or if it would make sense to have a onSaveError and onSerializeDeserializeError.

TL;DR:

Support error logging for persistence with it defaulting to console.error

updated:

query/packages/query-sync-storage-persister/src/index.ts

Line 13 in afbd788

interface CreateSyncStoragePersisterOptions {

diff --git a/index.ts b/index.ts
index 7433781..a1b2e4f 100644
--- a/index.ts
+++ b/index.ts
@@ -18,6 +18,8 @@ interface CreateSyncStoragePersisterOptions {
    * @default `JSON.parse`
    */
   deserialize?: (cachedString: string) => PersistedClient
+  /** Callback to report errors, defaults to console.error */
+  onError?: (error: unknown) => void;
 
   retry?: PersistRetryer
 }

updated:

query/packages/query-sync-storage-persister/src/index.ts

Line 37 in afbd788

export function createSyncStoragePersister({

diff --git a/index.ts b/index.ts
index ec1a75e..4aee579 100644
--- a/index.ts
+++ b/index.ts
@@ -5,6 +5,7 @@ export function createSyncStoragePersister({
   serialize = JSON.stringify,
   deserialize = JSON.parse,
   deserialize = JSON.parse,
+  onError = console.error,
   retry,
 }: CreateSyncStoragePersisterOptions): Persister {
   if (typeof storage !== 'undefined') {
@@ -13,6 +14,7 @@ export function createSyncStoragePersister({
         storage.setItem(key, serialize(persistedClient))
         return
       } catch (error) {
+        onError(error)
         return error as Error
       }
     }

[TkDodo]

the persisters already support retry, which gets the error passed:

• https://tanstack.com/query/v4/docs/react/plugins/createSyncStoragePersister#retries