Address remaining cache-stuck users (#2974)

flow-typed/gui.js

@@ -13,3 +13,5 @@ declare type Duration = {
   value: number,
   unit: string,
 };
+
+declare type ReloadRequired = "newVersionFound" | "lazyImportFailed";

ui/component/app/index.js

@@ -19,7 +19,7 @@ import {
   selectHomepageAnnouncement,
 } from 'redux/selectors/settings';
 import { selectAnyNagsShown } from 'redux/selectors/notifications';
-import { selectModal, selectActiveChannelClaim, selectIsReloadRequired } from 'redux/selectors/app';
+import { selectModal, selectActiveChannelClaim } from 'redux/selectors/app';
 import { selectUploadCount } from 'redux/selectors/publish';
 import { doOpenAnnouncements, doSetLanguage, doSetDefaultChannel, doFetchLanguage } from 'redux/actions/settings';
 import { doSyncLoop } from 'redux/actions/sync';
@@ -34,7 +34,7 @@ const select = (state) => ({
   theme: selectThemePath(state),
   language: selectLanguage(state),
   languages: selectLoadedLanguages(state),
-  isReloadRequired: selectIsReloadRequired(state),
+  reloadRequired: state.app.reloadRequired,
   prefsReady: selectPrefsReady(state),
   syncError: selectGetSyncErrorMessage(state),
   syncIsLocked: selectSyncIsLocked(state),

ui/component/app/view.jsx

@@ -69,7 +69,7 @@ type Props = {
   signIn: () => void,
   setLanguage: (string) => void,
   fetchLanguage: (string) => void,
-  isReloadRequired: boolean,
+  reloadRequired: ?ReloadRequired,
   uploadCount: number,
   balance: ?number,
   syncIsLocked: boolean,
@@ -106,7 +106,7 @@ function App(props: Props) {
     locale,
     location,
     signIn,
-    isReloadRequired,
+    reloadRequired,
     uploadCount,
     history,
     syncError,
@@ -241,14 +241,13 @@ function App(props: Props) {
           />
         );
       }
-    } else if (isReloadRequired) {
-      return (
-        <Nag
-          message={__('A new version of Odysee is available.')}
-          actionText={__('Refresh')}
-          onClick={() => window.location.reload()}
-        />
-      );
+    } else if (reloadRequired) {
+      const msg =
+        reloadRequired === 'newVersionFound' ? 'A new version of Odysee is available.' : 'Oops! Something went wrong.';
+
+      assert(reloadRequired === 'newVersionFound' || reloadRequired === 'lazyImportFailed');
+
+      return <Nag message={__(msg)} actionText={__('Refresh')} onClick={() => window.location.reload()} />;
     }
   }
 

ui/redux/actions/app.js

@@ -287,7 +287,7 @@ export function doMinVersionCheck() {
         if (json?.status === 'success' && json?.data && MINIMUM_VERSION) {
           const liveMinimumVersion = Number(json.data);
           if (liveMinimumVersion > MINIMUM_VERSION) {
-            dispatch({ type: ACTIONS.RELOAD_REQUIRED, data: { reason: 'minVersion', error: liveMinimumVersion } });
+            dispatch({ type: ACTIONS.RELOAD_REQUIRED, data: { reason: 'newVersionFound', extra: liveMinimumVersion } });
           }
         }
       })

ui/redux/middleware/analytics.js

@@ -69,11 +69,19 @@ function handleAnalyticsForAction(action: { type: string, data: any }) {
 
     case ACTIONS.RELOAD_REQUIRED:
       {
-        const { reason, error } = action.data;
-        if (typeof error === 'string') {
-          analytics.log(`Reload required: ${reason} @ ${error}`, { level: 'error', fingerprint: [reason] });
-        } else {
-          analytics.log(error, { level: 'error' });
+        const { reason, extra } = action.data;
+        if (reason === 'newVersionAvailable') {
+          analytics.log('New version nag', {
+            level: 'info',
+            fingerprint: [reason],
+            tags: { reloadReason: reason, newVersion: extra },
+          });
+        } else if (reason === 'lazyImportFailed') {
+          analytics.log(extra, {
+            level: 'fatal',
+            fingerprint: [reason],
+            tags: { reloadReason: reason, reloadExtra: (extra.message || extra || '').replace('\n', '') },
+          });
         }
       }
       break;

ui/redux/reducers/app.js

@@ -15,6 +15,7 @@ export type SnackBar = {
   linkTarget: string,
   isError: boolean,
 };
+
 export type AppState = {
   isLoaded: boolean,
   modal: ?string,
@@ -34,7 +35,7 @@ export type AppState = {
   checkUpgradeTimer: ?number,
   isUpgradeAvailable: ?boolean,
   isUpgradeSkipped: ?boolean,
-  isReloadRequired: ?boolean,
+  reloadRequired: ?ReloadRequired,
   hasClickedComment: boolean,
   enhancedLayout: boolean,
   splashAnimationEnabled: boolean,
@@ -77,7 +78,7 @@ const defaultState: AppState = {
   checkUpgradeTimer: undefined,
   isUpgradeAvailable: undefined,
   isUpgradeSkipped: undefined,
-  isReloadRequired: undefined,
+  reloadRequired: undefined,
   enhancedLayout: false,
   splashAnimationEnabled: true,
   searchOptionsExpanded: false,
@@ -227,7 +228,7 @@ reducers[ACTIONS.UPGRADE_DOWNLOAD_PROGRESSED] = (state, action) =>
 
 reducers[ACTIONS.RELOAD_REQUIRED] = (state, action) =>
   Object.assign({}, state, {
-    isReloadRequired: true,
+    reloadRequired: action.data.reason,
   });
 
 reducers[ACTIONS.DOWNLOADING_COMPLETED] = (state) => {

ui/redux/selectors/app.js

@@ -25,7 +25,6 @@ export const selectUpdateUrl = createSelector(selectPlatform, (platform) => {
 export const selectHasClickedComment = (state) => selectState(state).hasClickedComment;
 export const selectRemoteVersion = (state) => selectState(state).remoteVersion;
 export const selectIsUpgradeAvailable = (state) => selectState(state).isUpgradeAvailable;
-export const selectIsReloadRequired = (state) => selectState(state).isReloadRequired;
 
 export const selectUpgradeFilename = createSelector(selectPlatform, selectRemoteVersion, (platform, version) => {
   switch (platform) {

ui/util/lazyImport.js

@@ -1,8 +1,8 @@
 import React from 'react';
 import * as ACTIONS from 'constants/action_types';
 
-const RETRY_DELAY_MS = 2000;
-const RETRY_ATTEMPTS = 2;
+const RETRY_DELAY_MS = 3000;
+const RETRY_ATTEMPTS = 5;
 
 function componentLoader(lazyComponent, attemptsLeft) {
   return new Promise((resolve, reject) => {
@@ -13,7 +13,7 @@ function componentLoader(lazyComponent, attemptsLeft) {
           if (attemptsLeft === 1) {
             window.store.dispatch({
               type: ACTIONS.RELOAD_REQUIRED,
-              data: { reason: 'lazyImport', error },
+              data: { reason: 'lazyImportFailed', extra: error },
             });
             console.error(error.message); // eslint-disable-line no-console
           } else {

web/webpack.config.js

@@ -197,7 +197,7 @@ const webConfig = {
     chunkFilename: ({ chunk }) => {
       return chunk.name && chunk.name.startsWith('locale-')
         ? 'locales/[name]-[contenthash].js'
-        : '[name]-[contenthash].js';
+        : '[name]-[contenthash]-xyz.js';
     },
     assetModuleFilename: 'img/[name][ext]',
   },

webpack.base.config.js

@@ -138,8 +138,8 @@ let baseConfig = {
       defaults: true, // load '.env.defaults' as the default values if empty.
     }),
     new MiniCssExtractPlugin({
-      filename: NODE_ENV === 'development' ? '[name].css' : '[name].[contenthash].css',
-      chunkFilename: NODE_ENV === 'development' ? '[name].css' : '[name].[contenthash].css',
+      filename: NODE_ENV === 'development' ? '[name].css' : '[name].[contenthash]-xyz.css',
+      chunkFilename: NODE_ENV === 'development' ? '[name].css' : '[name].[contenthash]-xyz.css',
     }),
     ...optInPlugins,
   ],