catch localforage error and let the application work, add an alert for user to dismiss

src/App.js

@@ -107,6 +107,9 @@ export default {
       return {
         'order': this.$store.state.instance.sidebarRight ? 99 : 0
       }
+    },
+    showStorageError () {
+      return this.$store.state.interface.storageError === 'show'
     }
   },
   methods: {
@@ -129,6 +132,9 @@ export default {
       if (changed) {
         this.$store.dispatch('setMobileLayout', mobileLayout)
       }
+    },
+    hideStorageError () {
+      this.$store.dispatch('setStorageError', 'hide')
     }
   }
 }

src/App.scss

@@ -806,6 +806,15 @@ nav {
   }
 }
 
+.storage-error-notice {
+  text-align: center;
+  i {
+    cursor: pointer;
+    color: $fallback--text;
+    color: var(--alertErrorText, $fallback--text);
+  }
+}
+
 .button-icon {
   font-size: 1.2em;
 }

src/App.vue

@@ -101,6 +101,16 @@
         </div>
       </div>
       <div class="main">
+        <div
+          v-if="showStorageError"
+          class="alert error storage-error-notice"
+        >
+          {{ $t("errors.storage_unavailable") }}
+          <i
+            class="icon-cancel"
+            @click="hideStorageError"
+          />
+        </div>
         <div
           v-if="!currentUser"
           class="login-hint panel panel-default"

src/i18n/en.json

@@ -163,6 +163,9 @@
     "load_all_hint": "Loaded first {saneAmount} emoji, loading all emoji may cause performance issues.",
     "load_all": "Loading all {emojiAmount} emoji"
   },
+  "errors": {
+    "storage_unavailable": "Pleroma could not access browser storage. You may encounter issues and your login or your local settings won't be saved. Try enabling cookies."
+  },
   "interactions": {
     "favs_repeats": "Repeats and Favorites",
     "follows": "New follows",

src/main.js

@@ -62,7 +62,16 @@ const persistedStateOptions = {
 };
 
 (async () => {
-  const persistedState = await createPersistedState(persistedStateOptions)
+  console.log('before perse state')
+  let persistedState
+  let storageError = 'none'
+  try {
+    persistedState = await createPersistedState(persistedStateOptions)
+  } catch (e) {
+    console.error(e)
+    storageError = 'show'
+    persistedState = _ => _
+  }
   const store = new Vuex.Store({
     modules: {
       i18n: {
@@ -89,7 +98,7 @@ const persistedStateOptions = {
     strict: false // Socket modifies itself, let's ignore this for now.
     // strict: process.env.NODE_ENV !== 'production'
   })
-
+  store.dispatch('setStorageError', storageError)
   afterStoreSetup({ store, i18n })
 })()
 

src/modules/instance.js

@@ -8,7 +8,7 @@ const defaultState = {
   // Stuff from apiConfig
   name: 'Pleroma FE',
   registrationOpen: true,
-  server: 'http://localhost:4040/',
+  server: 'http://lain.com:4040',
   textlimit: 5000,
   themeData: undefined,
   vapidPublicKey: undefined,

src/modules/interface.js

@@ -8,6 +8,7 @@ const defaultState = {
     noticeClearTimeout: null,
     notificationPermission: null
   },
+  storageError: 'none',
   browserSupport: {
     cssFilter: window.CSS && window.CSS.supports && (
       window.CSS.supports('filter', 'drop-shadow(0 0)') ||
@@ -58,6 +59,9 @@ const interfaceMod = {
       if (!state.settingsModalLoaded) {
         state.settingsModalLoaded = true
       }
+    },
+    setStorageError (state, value) {
+      state.storageError = value
     }
   },
   actions: {
@@ -81,6 +85,9 @@ const interfaceMod = {
     },
     togglePeekSettingsModal ({ commit }) {
       commit('togglePeekSettingsModal')
+    },
+    setStorageError ({ commit }, value) {
+      commit('setStorageError', value)
     }
   }
 }