Merge pull request #576 from alexpermyakov/fix-uncaught-localStorage-exception

Fix uncaught localStorage exception

Author: jxnblk

packages/theme-ui/src/color-modes.js

@@ -5,12 +5,31 @@ import { useThemeUI } from './context'
 import { createColorStyles } from './custom-properties'
 
 const STORAGE_KEY = 'theme-ui-color-mode'
-const HAS_STORAGE = typeof Storage !== 'undefined'
 
 const storage = {
-  get: init =>
-    (HAS_STORAGE && window.localStorage.getItem(STORAGE_KEY)) || init,
-  set: value => HAS_STORAGE && window.localStorage.setItem(STORAGE_KEY, value),
+  get: init => {
+    try {
+      return window.localStorage.getItem(STORAGE_KEY) || init
+    } catch (e) {
+      console.warn(
+        'localStorage is disabled and color mode might not work as expected.',
+        'Please check your Site Settings.',
+        e
+      )
+    }
+  },
+
+  set: value => {
+    try {
+      window.localStorage.setItem(STORAGE_KEY, value)
+    } catch (e) {
+      console.warn(
+        'localStorage is disabled and color mode might not work as expected.',
+        'Please check your Site Settings.',
+        e
+      )
+    }
+  },
 }
 
 export const getMediaQuery = () => {

packages/theme-ui/test/color-modes.js

@@ -37,9 +37,9 @@ test('renders with color modes', () => {
             modes: {
               dark: {
                 text: 'white',
-              }
-            }
-          }
+              },
+            },
+          },
         }}>
         <Mode />
       </ThemeProvider>
@@ -64,8 +64,8 @@ test('renders with initial color mode name', () => {
           colors: {
             modes: {
               dark: {},
-            }
-          }
+            },
+          },
         }}>
         <Mode />
       </ThemeProvider>
@@ -212,8 +212,8 @@ test('inherits color mode state from parent context', () => {
         colors: {
           modes: {
             dark: {},
-          }
-        }
+          },
+        },
       }}>
       <ThemeProvider
         theme={{
@@ -518,3 +518,25 @@ test('raw color values are passed to theme-ui context when custom properties are
   )
   expect(color).toBe('tomato')
 })
+
+test('warns when localStorage is disabled', () => {
+  Object.defineProperty(window, 'localStorage', {
+    get: jest.fn(() => {
+      throw 'SecurityError: The operation is insecure.'
+    }),
+  })
+
+  let mode
+  const Consumer = props => {
+    const [colorMode] = useColorMode()
+    mode = colorMode
+    return false
+  }
+
+  render(
+    <ThemeProvider>
+      <Consumer />
+    </ThemeProvider>
+  )
+  expect(mode).toBe('default')
+})