Wrap local/session storage calls in try/catch (take 2) (#3066)

Steve tried this in #3043, but we reverted it in #3063. Steve's version
added `JSON.parse`/`JSON.stringify` to the helpers without checking for
where we were already `JSON.parse`ing (or not). In some places we just
store strings directly rather than wanting them jsonified, so in this
version we leave the jsonification to the callers - the helpers just do
the reading/writing and return the string values.

### Change Type

- [x] `patch` — Bug fix

.eslintrc.js

@@ -57,6 +57,14 @@ module.exports = {
 			'error',
 			{ selector: "MethodDefinition[kind='set']", message: 'Property setters are not allowed' },
 			{ selector: "MethodDefinition[kind='get']", message: 'Property getters are not allowed' },
+			{
+				selector: 'Identifier[name=localStorage]',
+				message: 'Use the getFromLocalStorage/setInLocalStorage helpers instead',
+			},
+			{
+				selector: 'Identifier[name=sessionStorage]',
+				message: 'Use the getFromSessionStorage/setInSessionStorage helpers instead',
+			},
 		],
 	},
 	parser: '@typescript-eslint/parser',
@@ -88,6 +96,7 @@ module.exports = {
 			files: ['apps/examples/**/*'],
 			rules: {
 				'import/no-internal-modules': 'off',
+				'no-restricted-syntax': 'off',
 			},
 		},
 		{

apps/dotcom/src/utils/scratch-persistence-key.ts

@@ -8,10 +8,12 @@
  * Many users still have that random string in their localStorage so we need to load it. But for new
  * users it does not need to be unique and we can just use a constant.
  */
+
+import { getFromLocalStorage, setInLocalStorage } from 'tldraw'
+
 // DO NOT CHANGE THESE WITHOUT ADDING MIGRATION LOGIC. DOING SO WOULD WIPE ALL EXISTING LOCAL DATA.
 const defaultDocumentKey = 'TLDRAW_DEFAULT_DOCUMENT_NAME_v2'
-const w = typeof window === 'undefined' ? undefined : window
 
 export const SCRATCH_PERSISTENCE_KEY =
-	(w?.localStorage.getItem(defaultDocumentKey) as any) ?? 'tldraw_document_v3'
+	getFromLocalStorage(defaultDocumentKey) ?? 'tldraw_document_v3'
-w?.localStorage.setItem(defaultDocumentKey, SCRATCH_PERSISTENCE_KEY)
+setInLocalStorage(defaultDocumentKey, SCRATCH_PERSISTENCE_KEY)

apps/dotcom/src/utils/userPreferences.ts

@@ -1,4 +1,4 @@
-import { T, atom } from 'tldraw'
+import { T, atom, getFromLocalStorage, setInLocalStorage } from 'tldraw'
 
 const channel =
 	typeof BroadcastChannel !== 'undefined' ? new BroadcastChannel('tldrawUserPreferences') : null
@@ -37,9 +37,7 @@ function createPreference<Type>(key: string, validator: T.Validator<Type>, defau
 }
 
 function loadItemFromStorage<Type>(key: string, validator: T.Validator<Type>): Type | null {
-	if (typeof localStorage === 'undefined' || !localStorage) return null
+	const item = getFromLocalStorage(`tldrawUserPreferences.${key}`)
-
-	const item = localStorage.getItem(`tldrawUserPreferences.${key}`)
 	if (item == null) return null
 	try {
 		return validator.validate(JSON.parse(item))
@@ -49,11 +47,5 @@ function loadItemFromStorage<Type>(key: string, validator: T.Validator<Type>): T
 }
 
 function saveItemToStorage(key: string, value: unknown): void {
-	if (typeof localStorage === 'undefined' || !localStorage) return
+	setInLocalStorage(`tldrawUserPreferences.${key}`, JSON.stringify(value))
-
-	try {
-		localStorage.setItem(`tldrawUserPreferences.${key}`, JSON.stringify(value))
-	} catch (e) {
-		// not a big deal
-	}
 }

packages/editor/src/lib/config/TLSessionStateSnapshot.ts

@@ -17,7 +17,12 @@ import {
 	pageIdValidator,
 	shapeIdValidator,
 } from '@tldraw/tlschema'
-import { objectMapFromEntries } from '@tldraw/utils'
+import {
+	deleteFromSessionStorage,
+	getFromSessionStorage,
+	objectMapFromEntries,
+	setInSessionStorage,
+} from '@tldraw/utils'
 import { T } from '@tldraw/validate'
 import { uniqueId } from '../utils/uniqueId'
 
@@ -26,8 +31,6 @@ const tabIdKey = 'TLDRAW_TAB_ID_v2' as const
 const window = globalThis.window as
 	| {
 			navigator: Window['navigator']
-			localStorage: Window['localStorage']
-			sessionStorage: Window['sessionStorage']
 			addEventListener: Window['addEventListener']
 			TLDRAW_TAB_ID_v2?: string
 	  }
@@ -51,7 +54,7 @@ function iOS() {
  * @public
  */
 export const TAB_ID: string = window
-	? window[tabIdKey] ?? window.sessionStorage[tabIdKey] ?? `TLDRAW_INSTANCE_STATE_V1_` + uniqueId()
+	? window[tabIdKey] ?? getFromSessionStorage(tabIdKey) ?? `TLDRAW_INSTANCE_STATE_V1_` + uniqueId()
 	: '<error>'
 if (window) {
 	window[tabIdKey] = TAB_ID
@@ -62,14 +65,14 @@ if (window) {
 		// in which case they'll have two tabs with the same UI state.
 		// It's not a big deal, but it's not ideal.
 		// And anyway I can't see a way to duplicate a tab in iOS Safari.
-		window.sessionStorage[tabIdKey] = TAB_ID
+		setInSessionStorage(tabIdKey, TAB_ID)
 	} else {
-		delete window.sessionStorage[tabIdKey]
+		deleteFromSessionStorage(tabIdKey)
 	}
 }
 
 window?.addEventListener('beforeunload', () => {
-	window.sessionStorage[tabIdKey] = TAB_ID
+	setInSessionStorage(tabIdKey, TAB_ID)
 })
 
 const Versions = {

packages/editor/src/lib/config/TLUserPreferences.ts

@@ -1,6 +1,7 @@
 import { atom } from '@tldraw/state'
 import { defineMigrations, migrate } from '@tldraw/store'
 import { getDefaultTranslationLocale } from '@tldraw/tlschema'
+import { getFromLocalStorage, setInLocalStorage } from '@tldraw/utils'
 import { T } from '@tldraw/validate'
 import { uniqueId } from '../utils/uniqueId'
 
@@ -200,11 +201,8 @@ function migrateUserPreferences(userData: unknown) {
 }
 
 function loadUserPreferences(): TLUserPreferences {
-	const userData =
+	const userData = (JSON.parse(getFromLocalStorage(USER_DATA_KEY) || 'null') ??
-		typeof window === 'undefined'
+		null) as null | UserDataSnapshot
-			? null
-			: ((JSON.parse(window?.localStorage?.getItem(USER_DATA_KEY) || 'null') ??
-					null) as null | UserDataSnapshot)
 
 	return migrateUserPreferences(userData)
 }
@@ -212,15 +210,10 @@ function loadUserPreferences(): TLUserPreferences {
 const globalUserPreferences = atom<TLUserPreferences | null>('globalUserData', null)
 
 function storeUserPreferences() {
-	if (typeof window !== 'undefined' && window.localStorage) {
+	setInLocalStorage(
-		window.localStorage.setItem(
+		USER_DATA_KEY,
-			USER_DATA_KEY,
+		JSON.stringify({ version: userMigrations.currentVersion, user: globalUserPreferences.get() })
-			JSON.stringify({
+	)
-				version: userMigrations.currentVersion,
-				user: globalUserPreferences.get(),
-			})
-		)
-	}
 }
 
 /** @public */

packages/editor/src/lib/utils/debug-flags.ts

@@ -1,4 +1,5 @@
 import { Atom, atom, react } from '@tldraw/state'
+import { deleteFromSessionStorage, getFromSessionStorage, setInSessionStorage } from '@tldraw/utils'
 
 // --- 1. DEFINE ---
 //
@@ -126,14 +127,10 @@ function createDebugValueBase<T>(def: DebugFlagDef<T>): DebugFlag<T> {
 		if (def.shouldStoreForSession) {
 			react(`debug:${def.name}`, () => {
 				const currentValue = valueAtom.get()
-				try {
+				if (currentValue === defaultValue) {
-					if (currentValue === defaultValue) {
+					deleteFromSessionStorage(`tldraw_debug:${def.name}`)
-						window.sessionStorage.removeItem(`tldraw_debug:${def.name}`)
+				} else {
-					} else {
+					setInSessionStorage(`tldraw_debug:${def.name}`, JSON.stringify(currentValue))
-						window.sessionStorage.setItem(`tldraw_debug:${def.name}`, JSON.stringify(currentValue))
-					}
-				} catch {
-					// not a big deal
 				}
 			})
 		}
@@ -154,7 +151,7 @@ function createDebugValueBase<T>(def: DebugFlagDef<T>): DebugFlag<T> {
 
 function getStoredInitialValue(name: string) {
 	try {
-		return JSON.parse(window?.sessionStorage.getItem(`tldraw_debug:${name}`) ?? 'null')
+		return JSON.parse(getFromSessionStorage(`tldraw_debug:${name}`) ?? 'null')
 	} catch (err) {
 		return null
 	}

packages/editor/src/lib/utils/sync/hardReset.ts

@@ -1,3 +1,4 @@
+import { clearLocalStorage, clearSessionStorage } from '@tldraw/utils'
 import { deleteDB } from 'idb'
 import { getAllIndexDbNames } from './indexedDb'
 
@@ -6,11 +7,11 @@ import { getAllIndexDbNames } from './indexedDb'
  *
  * @public */
 export async function hardReset({ shouldReload = true } = {}) {
-	sessionStorage.clear()
+	clearSessionStorage()
 
 	await Promise.all(getAllIndexDbNames().map((db) => deleteDB(db)))
 
-	localStorage.clear()
+	clearLocalStorage()
 	if (shouldReload) {
 		window.location.reload()
 	}

packages/editor/src/lib/utils/sync/indexedDb.test.ts

@@ -1,4 +1,5 @@
 import { createTLSchema } from '@tldraw/tlschema'
+import { clearLocalStorage } from '@tldraw/utils'
 import {
 	getAllIndexDbNames,
 	loadDataFromStore,
@@ -9,7 +10,7 @@ import {
 const clearAll = async () => {
 	const dbs = (indexedDB as any)._databases as Map<any, any>
 	dbs.clear()
-	localStorage.clear()
+	clearLocalStorage()
 }
 
 beforeEach(async () => {

packages/editor/src/lib/utils/sync/indexedDb.ts

@@ -1,5 +1,6 @@
 import { RecordsDiff, SerializedSchema, SerializedStore } from '@tldraw/store'
 import { TLRecord, TLStoreSchema } from '@tldraw/tlschema'
+import { getFromLocalStorage, setInLocalStorage } from '@tldraw/utils'
 import { IDBPDatabase, openDB } from 'idb'
 import { TLSessionStateSnapshot } from '../../config/TLSessionStateSnapshot'
 
@@ -221,7 +222,7 @@ async function pruneSessionState({
 
 /** @internal */
 export function getAllIndexDbNames(): string[] {
-	const result = JSON.parse(window?.localStorage.getItem(dbNameIndexKey) || '[]') ?? []
+	const result = JSON.parse(getFromLocalStorage(dbNameIndexKey) || '[]') ?? []
 	if (!Array.isArray(result)) {
 		return []
 	}
@@ -231,5 +232,5 @@ export function getAllIndexDbNames(): string[] {
 function addDbName(name: string) {
 	const all = new Set(getAllIndexDbNames())
 	all.add(name)
-	window?.localStorage.setItem(dbNameIndexKey, JSON.stringify([...all]))
+	setInLocalStorage(dbNameIndexKey, JSON.stringify([...all]))
 }

packages/tldraw/src/lib/ui/hooks/useLocalStorageState.ts

@@ -1,3 +1,4 @@
+import { getFromLocalStorage, setInLocalStorage } from '@tldraw/editor'
 import React from 'react'
 
 /** @public */
@@ -5,7 +6,7 @@ export function useLocalStorageState<T = any>(key: string, defaultValue: T) {
 	const [state, setState] = React.useState(defaultValue)
 
 	React.useLayoutEffect(() => {
-		const value = localStorage.getItem(key)
+		const value = getFromLocalStorage(key)
 		if (value) {
 			try {
 				setState(JSON.parse(value))
@@ -19,7 +20,7 @@ export function useLocalStorageState<T = any>(key: string, defaultValue: T) {
 		(setter: T | ((value: T) => T)) => {
 			setState((s) => {
 				const value = typeof setter === 'function' ? (setter as any)(s) : setter
-				localStorage.setItem(key, JSON.stringify(value))
+				setInLocalStorage(key, JSON.stringify(value))
 				return value
 			})
 		},

packages/utils/api-report.md

@@ -19,6 +19,12 @@ export const assert: (value: unknown, message?: string) => asserts value;
 // @internal (undocumented)
 export const assertExists: <T>(value: T, message?: string | undefined) => NonNullable<T>;
 
+// @internal
+export function clearLocalStorage(): void;
+
+// @internal
+export function clearSessionStorage(): void;
+
 // @internal (undocumented)
 export function compact<T>(arr: T[]): NonNullable<T>[];
 
@@ -34,6 +40,12 @@ export function dedupe<T>(input: T[], equals?: (a: any, b: any) => boolean): T[]
 // @public
 export function deepCopy<T = unknown>(obj: T): T;
 
+// @internal
+export function deleteFromLocalStorage(key: string): void;
+
+// @internal
+export function deleteFromSessionStorage(key: string): void;
+
 // @public (undocumented)
 export type ErrorResult<E> = {
     readonly ok: false;
@@ -68,6 +80,12 @@ export function getErrorAnnotations(error: Error): ErrorAnnotations;
 // @public
 export function getFirstFromIterable<T = unknown>(set: Map<any, T> | Set<T>): T;
 
+// @internal
+export function getFromLocalStorage(key: string): null | string;
+
+// @internal
+export function getFromSessionStorage(key: string): null | string;
+
 // @public
 export function getHashForBuffer(buffer: ArrayBuffer): string;
 
@@ -273,6 +291,12 @@ export function rng(seed?: string): () => number;
 // @public
 export function rotateArray<T>(arr: T[], offset: number): T[];
 
+// @internal
+export function setInLocalStorage(key: string, value: string): void;
+
+// @internal
+export function setInSessionStorage(key: string, value: string): void;
+
 // @public (undocumented)
 export function sortById<T extends {
     id: any;

packages/utils/src/index.ts

@@ -53,6 +53,16 @@ export {
 	validateIndexKey,
 } from './lib/reordering/reordering'
 export { sortById } from './lib/sort'
+export {
+	clearLocalStorage,
+	clearSessionStorage,
+	deleteFromLocalStorage,
+	deleteFromSessionStorage,
+	getFromLocalStorage,
+	getFromSessionStorage,
+	setInLocalStorage,
+	setInSessionStorage,
+} from './lib/storage'
 export type { Expand, RecursivePartial, Required } from './lib/types'
 export { isDefined, isNonNull, isNonNullish, structuredClone } from './lib/value'
 export { warnDeprecatedGetter } from './lib/warnDeprecatedGetter'

packages/utils/src/lib/storage.tsx

@@ -0,0 +1,119 @@
+/* eslint-disable no-restricted-syntax */
+
+/**
+ * Get a value from local storage.
+ *
+ * @param key - The key to get.
+ *
+ * @internal
+ */
+export function getFromLocalStorage(key: string) {
+	try {
+		return localStorage.getItem(key)
+	} catch {
+		return null
+	}
+}
+
+/**
+ * Set a value in local storage. Will not throw an error if localStorage is not available.
+ *
+ * @param key - The key to set.
+ * @param value - The value to set.
+ *
+ * @internal
+ */
+export function setInLocalStorage(key: string, value: string) {
+	try {
+		localStorage.setItem(key, value)
+	} catch {
+		// noop
+	}
+}
+
+/**
+ * Remove a value from local storage. Will not throw an error if localStorage is not available.
+ *
+ * @param key - The key to set.
+ *
+ * @internal
+ */
+export function deleteFromLocalStorage(key: string) {
+	try {
+		localStorage.removeItem(key)
+	} catch {
+		// noop
+	}
+}
+
+/**
+ * Clear all values from local storage. Will not throw an error if localStorage is not available.
+ *
+ * @internal
+ */
+export function clearLocalStorage() {
+	try {
+		localStorage.clear()
+	} catch {
+		// noop
+	}
+}
+
+/**
+ * Get a value from session storage.
+ *
+ * @param key - The key to get.
+ *
+ * @internal
+ */
+export function getFromSessionStorage(key: string) {
+	try {
+		return sessionStorage.getItem(key)
+	} catch {
+		return null
+	}
+}
+
+/**
+ * Set a value in session storage. Will not throw an error if sessionStorage is not available.
+ *
+ * @param key - The key to set.
+ * @param value - The value to set.
+ *
+ * @internal
+ */
+export function setInSessionStorage(key: string, value: string) {
+	try {
+		sessionStorage.setItem(key, value)
+	} catch {
+		// noop
+	}
+}
+
+/**
+ * Remove a value from session storage. Will not throw an error if sessionStorage is not available.
+ *
+ * @param key - The key to set.
+ *
+ * @internal
+ */
+export function deleteFromSessionStorage(key: string) {
+	try {
+		sessionStorage.removeItem(key)
+	} catch {
+		// noop
+	}
+}
+
+/**
+ * Clear all values from session storage. Will not throw an error if sessionStorage is not available.
+ *
+ * @internal
+ */
+export function clearSessionStorage() {
+	try {
+		sessionStorage.clear()
+	} catch {
+		// noop
+	}
+}