fix(utils): avoid catching storage error in atomWithStorage (#1363)

* fix(utils): avoid catching storage error in atomWithStorage

* mark the symbol unstable

Author: dai-shi

src/utils.ts

@@ -13,6 +13,7 @@ export { splitAtom } from './utils/splitAtom'
 export { atomWithDefault } from './utils/atomWithDefault'
 export { waitForAll } from './utils/waitForAll'
 export {
+  NO_STORAGE_VALUE as unstable_NO_STORAGE_VALUE,
   atomWithStorage,
   atomWithHash,
   createJSONStorage,

src/utils/atomWithStorage.ts

@@ -2,6 +2,8 @@ import { atom } from 'jotai'
 import type { WritableAtom } from 'jotai'
 import { RESET } from './constants'
 
+export const NO_STORAGE_VALUE = Symbol()
+
 type Unsubscribe = () => void
 
 type SetStateActionWithReset<Value> =
@@ -10,15 +12,15 @@ type SetStateActionWithReset<Value> =
   | ((prev: Value) => Value | typeof RESET)
 
 export interface AsyncStorage<Value> {
-  getItem: (key: string) => Promise<Value>
+  getItem: (key: string) => Promise<Value | typeof NO_STORAGE_VALUE>
   setItem: (key: string, newValue: Value) => Promise<void>
   removeItem: (key: string) => Promise<void>
   delayInit?: boolean
   subscribe?: (key: string, callback: (value: Value) => void) => Unsubscribe
 }
 
 export interface SyncStorage<Value> {
-  getItem: (key: string) => Value
+  getItem: (key: string) => Value | typeof NO_STORAGE_VALUE
   setItem: (key: string, newValue: Value) => void
   removeItem: (key: string) => void
   delayInit?: boolean
@@ -46,45 +48,56 @@ export function createJSONStorage<Value>(
 ): SyncStorage<Value>
 
 export function createJSONStorage<Value>(
-  getStringStorage: () => AsyncStringStorage | SyncStringStorage
+  getStringStorage: () => AsyncStringStorage | SyncStringStorage | undefined
 ): AsyncStorage<Value> | SyncStorage<Value> {
   let lastStr: string | undefined
   let lastValue: any
-  return {
+  const storage: AsyncStorage<Value> | SyncStorage<Value> = {
     getItem: (key) => {
       const parse = (str: string | null) => {
         str = str || ''
         if (lastStr !== str) {
-          lastValue = JSON.parse(str)
+          try {
+            lastValue = JSON.parse(str)
+          } catch {
+            return NO_STORAGE_VALUE
+          }
           lastStr = str
         }
         return lastValue
       }
-      const str = getStringStorage().getItem(key)
+      const str = getStringStorage()?.getItem(key) ?? null
       if (str instanceof Promise) {
         return str.then(parse)
       }
       return parse(str)
     },
     setItem: (key, newValue) =>
-      getStringStorage().setItem(key, JSON.stringify(newValue)),
-    removeItem: (key) => getStringStorage().removeItem(key),
+      getStringStorage()?.setItem(key, JSON.stringify(newValue)),
+    removeItem: (key) => getStringStorage()?.removeItem(key),
   }
-}
-
-const defaultStorage = createJSONStorage(() => localStorage)
-defaultStorage.subscribe = (key, callback) => {
-  const storageEventCallback = (e: StorageEvent) => {
-    if (e.key === key && e.newValue) {
-      callback(JSON.parse(e.newValue))
+  if (typeof window !== 'undefined') {
+    storage.subscribe = (key, callback) => {
+      const storageEventCallback = (e: StorageEvent) => {
+        if (e.key === key && e.newValue) {
+          callback(JSON.parse(e.newValue))
+        }
+      }
+      window.addEventListener('storage', storageEventCallback)
+      return () => {
+        window.removeEventListener('storage', storageEventCallback)
+      }
     }
   }
-  window.addEventListener('storage', storageEventCallback)
-  return () => {
-    window.removeEventListener('storage', storageEventCallback)
-  }
+  return storage
 }
 
+const defaultStorage = createJSONStorage(() =>
+  typeof window !== 'undefined'
+    ? window.localStorage
+    : (undefined as unknown as Storage)
+)
+
 export function atomWithStorage<Value>(
   key: string,
   initialValue: Value,
@@ -116,15 +129,11 @@ export function atomWithStorage<Value>(
     | AsyncStorage<Value> = defaultStorage as SyncStorage<Value>
 ) {
   const getInitialValue = () => {
-    try {
-      const value = storage.getItem(key)
-      if (value instanceof Promise) {
-        return value.catch(() => initialValue)
-      }
-      return value
-    } catch {
-      return initialValue
+    const value = storage.getItem(key)
+    if (value instanceof Promise) {
+      return value.then((v) => (v === NO_STORAGE_VALUE ? initialValue : v))
     }
+    return value === NO_STORAGE_VALUE ? initialValue : value
   }
 
   const baseAtom = atom(storage.delayInit ? initialValue : getInitialValue())
@@ -175,14 +184,22 @@ export function atomWithHash<Value>(
   initialValue: Value,
   options?: {
     serialize?: (val: Value) => string
-    deserialize?: (str: string) => Value
+    deserialize?: (str: string | null) => Value | typeof NO_STORAGE_VALUE
     delayInit?: boolean
     replaceState?: boolean
     subscribe?: (callback: () => void) => () => void
   }
 ): WritableAtom<Value, SetStateActionWithReset<Value>> {
   const serialize = options?.serialize || JSON.stringify
-  const deserialize = options?.deserialize || JSON.parse
+  const deserialize =
+    options?.deserialize ||
+    ((str) => {
+      try {
+        return JSON.parse(str || '')
+      } catch {
+        return NO_STORAGE_VALUE
+      }
+    })
   const subscribe =
     options?.subscribe ||
     ((callback) => {
@@ -195,9 +212,6 @@ export function atomWithHash<Value>(
     getItem: (key) => {
       const searchParams = new URLSearchParams(location.hash.slice(1))
       const storedValue = searchParams.get(key)
-      if (storedValue === null) {
-        throw new Error('no value stored')
-      }
       return deserialize(storedValue)
     },
     setItem: (key, newValue) => {

tests/utils/atomWithStorage.test.tsx

@@ -2,6 +2,7 @@ import { Suspense } from 'react'
 import { fireEvent, render, waitFor } from '@testing-library/react'
 import { useAtom } from 'jotai'
 import {
+  unstable_NO_STORAGE_VALUE as NO_STORAGE_VALUE,
   RESET,
   atomWithHash,
   atomWithStorage,
@@ -18,7 +19,7 @@ describe('atomWithStorage (sync)', () => {
   const dummyStorage = {
     getItem: (key: string) => {
       if (!(key in storageData)) {
-        throw new Error('no value stored')
+        return NO_STORAGE_VALUE
       }
       return storageData[key] as number
     },
@@ -195,7 +196,7 @@ describe('atomWithStorage (async)', () => {
     getItem: async (key: string) => {
       await new Promise((r) => setTimeout(r, 100))
       if (!(key in asyncStorageData)) {
-        throw new Error('no value stored')
+        return NO_STORAGE_VALUE
       }
       return asyncStorageData[key] as number
     },
@@ -310,14 +311,12 @@ describe('atomWithStorage (async)', () => {
   })
 })
 
-describe('atomWithStorage (no storage) (#949)', () => {
-  it('can throw in createJSONStorage', async () => {
+describe('atomWithStorage (without localStorage) (#949)', () => {
+  it('createJSONStorage without localStorage', async () => {
     const countAtom = atomWithStorage(
       'count',
       1,
-      createJSONStorage(() => {
-        throw new Error('no storage')
-      })
+      createJSONStorage(() => undefined as any)
     )
 
     const Counter = () => {