Преглед изворни кода

fix: fix app crash

this commit fixes a crash due to unavailability of localStorage

https://github.com/zyachel/libremdb/issues/31
zyachel пре 2 година
родитељ
комит
71d1d5b34e
3 измењених фајлова са 24 додато и 3 уклоњено
  1. 5 2
      src/context/theme-context.tsx
  2. 9 1
      src/pages/_document.tsx
  3. 10 0
      src/utils/helpers.ts

+ 5 - 2
src/context/theme-context.tsx

@@ -1,10 +1,13 @@
 import React, { useState, createContext, ReactNode } from 'react';
+import { isLocalStorageAvailable } from '../utils/helpers';
 
 const getInitialTheme = () => {
   // for server-side rendering, as window isn't availabe there
   if (typeof window === 'undefined') return 'light';
 
-  const userPrefersTheme = window.localStorage.getItem('theme') || null;
+  const userPrefersTheme = isLocalStorageAvailable()
+    ? window.localStorage.getItem('theme')
+    : null;
   const browserPrefersDarkTheme = window.matchMedia(
     '(prefers-color-scheme: dark)'
   ).matches;
@@ -35,7 +38,7 @@ const ThemeProvider = ({ children }: { children: ReactNode }) => {
 
   const setTheme = (theme: string) => {
     setCurTheme(theme);
-    window.localStorage.setItem('theme', theme);
+    if (isLocalStorageAvailable()) window.localStorage.setItem('theme', theme);
     document.documentElement.dataset.theme = theme;
     updateMetaTheme();
   };

+ 9 - 1
src/pages/_document.tsx

@@ -5,9 +5,17 @@ import Document, { Html, Head, Main, NextScript } from 'next/document';
 const setInitialTheme = `
 (() => {
   document.documentElement.dataset.js = true;
+  const isLocalStorageAvailable = () => {
+    try {
+      window.localStorage.getItem('test');
+      return true;
+    } catch (e) {
+      return false;
+    }
+  }
   let theme = 'light';
   let themeColor = '#ffe5ef';
-  const userPrefersTheme = window.localStorage.getItem('theme') || null;
+  const userPrefersTheme = isLocalStorageAvailable() ? window.localStorage.getItem('theme') : null;
   const browserPrefersDarkTheme = window.matchMedia('(prefers-color-scheme: dark)').matches;
   if (userPrefersTheme) theme = userPrefersTheme;
   else if (browserPrefersDarkTheme) theme = 'dark';

+ 10 - 0
src/utils/helpers.ts

@@ -103,3 +103,13 @@ export const getResTitleTypeHeading = (
     if (el.id === titleType) return el.name;
   }
 };
+
+
+export const isLocalStorageAvailable = () => {
+  try {
+    localStorage.getItem('test');
+    return true;
+  } catch (e) {
+    return false;
+  }
+};