fix(docs): try-catch local and session storage (#6268)

QwikDev · May 7, 2024 · 1f9f6d0 · 1f9f6d0
1 parent b8e93e9
commit 1f9f6d0
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 17 deletions.
diff --git a/packages/docs/src/components/docsearch/stored-searches.ts b/packages/docs/src/components/docsearch/stored-searches.ts
@@ -29,7 +29,12 @@ function createStorage<TItem>(key: string) {
       return window.localStorage.setItem(key, JSON.stringify(item));
     },
     getItem(): TItem[] {
-      const item = window.localStorage.getItem(key);
+      let item;
+      try {
+        window.localStorage.getItem(key);
+      } catch (err) {
+        //
+      }
 
       return item ? JSON.parse(item) : [];
     },

diff --git a/packages/docs/src/components/router-head/theme-script.tsx b/packages/docs/src/components/router-head/theme-script.tsx
@@ -2,10 +2,12 @@ export const themeStorageKey = 'theme-preference';
 
 export const ThemeScript = () => {
   const themeScript = `
-        document.firstElementChild
-            .setAttribute('data-theme',
-                localStorage.getItem('${themeStorageKey}') ??
-                (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light')
-            )`;
+        try {
+          document.firstElementChild
+              .setAttribute('data-theme',
+                  localStorage.getItem('${themeStorageKey}') ??
+                  (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light')
+              );
+        } catch (err) { }`;
   return <script dangerouslySetInnerHTML={themeScript} />;
 };
diff --git a/packages/docs/src/components/sidebar/sidebar.tsx b/packages/docs/src/components/sidebar/sidebar.tsx
@@ -70,19 +70,23 @@ export const SideBar = component$((props: { allOpen?: boolean }) => {
   useOnDocument(
     'DOMContentLoaded',
     sync$(() => {
-      const val = sessionStorage.getItem('qwik-sidebar');
-      const savedScroll = !val || /null|NaN/.test(val) ? 0 : +val;
-      const el = document.getElementById('qwik-sidebar');
-      if (el) {
-        el.scrollTop = savedScroll;
-        el.style.visibility = 'visible';
+      try {
+        const val = sessionStorage.getItem('qwik-sidebar');
+        const savedScroll = !val || /null|NaN/.test(val) ? 0 : +val;
+        const el = document.getElementById('qwik-sidebar');
+        if (el) {
+          el.scrollTop = savedScroll;
+          el.style.visibility = 'visible';
+        }
+      } catch (err) {
+        //
       }
     })
   );
 
   return (
     <aside class="sidebar">
-      <nav id="qwik-sidebar" class="menu" style="visibility: hidden">
+      <nav id="qwik-sidebar" class="menu">
         <button
           class="menu-close lg:hidden"
           onClick$={() => (globalStore.sideMenuOpen = !globalStore.sideMenuOpen)}
@@ -96,8 +100,12 @@ export const SideBar = component$((props: { allOpen?: boolean }) => {
           allOpen={allOpen}
           markdownItems={markdownItems.value}
           onClick$={sync$(() => {
-            const scrollTop = document.getElementById('qwik-sidebar')!.scrollTop;
-            sessionStorage.setItem('qwik-sidebar', String(scrollTop));
+            try {
+              const scrollTop = document.getElementById('qwik-sidebar')!.scrollTop;
+              sessionStorage.setItem('qwik-sidebar', String(scrollTop));
+            } catch (err) {
+              //
+            }
           })}
         />
       </nav>

diff --git a/packages/docs/src/components/theme-toggle/theme-toggle.tsx b/packages/docs/src/components/theme-toggle/theme-toggle.tsx
@@ -28,8 +28,14 @@ export const reflectPreference = (theme: ThemePreference) => {
 };
 
 export const getColorPreference = (): ThemePreference => {
-  if (localStorage.getItem(themeStorageKey)) {
-    return localStorage.getItem(themeStorageKey) as ThemePreference;
+  let theme;
+  try {
+    theme = localStorage.getItem(themeStorageKey);
+  } catch (err) {
+    //
+  }
+  if (theme) {
+    return theme as ThemePreference;
   } else {
     return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
   }