Catch localStorage getItem and setItem unhandled errors

Author: MananTank

.changeset/flat-emus-repeat.md

@@ -0,0 +1,5 @@
+---
+"thirdweb": patch
+---
+
+Catch localStorage getItem and setItem unhandled errors

apps/dashboard/src/hooks/useLocalStorage.ts

@@ -13,15 +13,22 @@ export function useLocalStorage<TType>(
   // FIXME: ideally we do not need localstorage like this, alernatively we move this into use-query and use-mutation to invalidate etc
   // eslint-disable-next-line no-restricted-syntax
   useEffect(() => {
-    const item = window.localStorage.getItem(key);
-
-    _setValue(item ? JSON.parse(item) : initialValue);
+    try {
+      const item = window.localStorage.getItem(key);
+      _setValue(item ? JSON.parse(item) : initialValue);
+    } catch {
+      // ignore
+    }
   }, [key, initialValue]);
 
   const setValue = (value_: TType) => {
     _setValue(value_);
     if (isBrowser()) {
-      window.localStorage.setItem(key, JSON.stringify(value_));
+      try {
+        window.localStorage.setItem(key, JSON.stringify(value_));
+      } catch {
+        // ignore
+      }
     }
   };
 

apps/playground-web/src/app/connect/sign-in/button/RightSection.tsx

@@ -41,7 +41,11 @@ export function RightSection(props: {
   // fake login for playground
   const playgroundAuth: ConnectButtonProps["auth"] = {
     async doLogin() {
-      localStorage.setItem("playground-loggedin", "true");
+      try {
+        localStorage.setItem("playground-loggedin", "true");
+      } catch {
+        // ignore
+      }
     },
     async doLogout() {
       localStorage.removeItem("playground-loggedin");
@@ -59,7 +63,11 @@ export function RightSection(props: {
       };
     },
     async isLoggedIn() {
-      return !!localStorage.getItem("playground-loggedin");
+      try {
+        return !!localStorage.getItem("playground-loggedin");
+      } catch {
+        return false;
+      }
     },
   };
 

apps/portal/src/components/others/Banner.tsx

@@ -10,8 +10,12 @@ export function Banner(props: { text: string; href: string; id: string }) {
   const bannerCancelledKey = `banner-cancelled${props.href}`;
 
   useEffect(() => {
-    if (localStorage.getItem(bannerCancelledKey) !== "true") {
-      setShowBanner(true);
+    try {
+      if (localStorage.getItem(bannerCancelledKey) !== "true") {
+        setShowBanner(true);
+      }
+    } catch {
+      // ignore
     }
   }, [bannerCancelledKey]);
 
@@ -41,7 +45,11 @@ export function Banner(props: { text: string; href: string; id: string }) {
         className="absolute right-4 shrink-0 bg-none bg-transparent p-1"
         onClick={() => {
           setShowBanner(false);
-          localStorage.setItem(bannerCancelledKey, "true");
+          try {
+            localStorage.setItem(bannerCancelledKey, "true");
+          } catch {
+            // ignore
+          }
         }}
       >
         <XIcon

apps/portal/src/components/others/theme/ThemeSwitcher.tsx

@@ -26,7 +26,11 @@ export function ThemeSwitcher(props: { className?: string }) {
         const newTheme = theme === "light" ? "dark" : "light";
         setTheme(newTheme);
         document.body.dataset.theme = newTheme;
-        localStorage.setItem("website-theme", newTheme);
+        try {
+          localStorage.setItem("website-theme", newTheme);
+        } catch {
+          // ignore
+        }
       }}
       variant="outline"
       className={cn("p-2", props.className)}

packages/thirdweb/src/utils/storage/webStorage.ts

@@ -2,14 +2,23 @@ import type { AsyncStorage } from "./AsyncStorage.js";
 
 export const webLocalStorage: AsyncStorage = {
   async getItem(key: string) {
-    if (typeof window !== "undefined" && window.localStorage) {
-      return localStorage.getItem(key);
+    try {
+      if (typeof window !== "undefined" && window.localStorage) {
+        return localStorage.getItem(key);
+      }
+    } catch {
+      // ignore
     }
+
     return null;
   },
   async setItem(key: string, value: string) {
-    if (typeof window !== "undefined" && window.localStorage) {
-      localStorage.setItem(key, value);
+    try {
+      if (typeof window !== "undefined" && window.localStorage) {
+        localStorage.setItem(key, value);
+      }
+    } catch {
+      // ignore
     }
   },
   async removeItem(key: string) {