feat: refresh page on cloudflare timeout

Author: pnd280

src/components/QueryBox/index.tsx

@@ -19,7 +19,10 @@ import {
 import { LanguageModel } from '@/types/ModelSelector';
 import pplxApi from '@/utils/pplx-api';
 import { ui } from '@/utils/ui';
-import { useQuery } from '@tanstack/react-query';
+import {
+  UndefinedInitialDataOptions,
+  useQuery,
+} from '@tanstack/react-query';
 
 import useQueryBoxObserver from '../hooks/useQueryBoxObserver';
 import { Separator } from '../ui/separator';
@@ -39,15 +42,48 @@ export default function QueryBox() {
     userSettings: false,
   });
 
+  const autoRefreshSessionTimeout = usePopupSettingsStore(
+    (state) => state.qolTweaks.autoRefreshSessionTimeout
+  );
+
+  const queryOptions: Pick<
+    UndefinedInitialDataOptions,
+    'refetchIntervalInBackground' | 'retry'
+  > = autoRefreshSessionTimeout
+    ? {
+        refetchIntervalInBackground: true,
+        retry: false,
+      }
+    : {};
+
   const {
     data: userSettings,
     isLoading: isLoadingUserSettings,
     refetch: refetchUserSettings,
+    error: userSettingsError,
   } = useQuery({
     queryKey: ['userSettings'],
     queryFn: pplxApi.fetchUserSettings,
+    refetchInterval: 10000,
+    ...queryOptions,
   });
 
+  useEffect(() => {
+    if (!autoRefreshSessionTimeout) return;
+
+    if (userSettingsError?.message === 'Cloudflare timeout') {
+      toast({
+        title: '⚠️ Cloudflare timeout!',
+        description: 'Refreshing the page...',
+        timeout: 3000,
+      });
+
+      setTimeout(() => {
+        window.location.reload();
+      }, 3000);
+    }
+  }, [userSettingsError, autoRefreshSessionTimeout, toast]);
+
   useQuery({
     queryKey: ['userProfileSettings'],
     queryFn: pplxApi.fetchUserProfileSettings,

src/content-script/session-store/popup-settings.ts

@@ -15,6 +15,7 @@ type PopupSettingsState = {
     quickQueryCommander: boolean;
     threadMessageStickyToolbar: boolean;
     codeBlockEnhancedToolbar: boolean;
+    autoRefreshSessionTimeout: boolean;
   };
   visualTweaks: {
     collapseEmptyThreadVisualColumns: boolean;
@@ -35,6 +36,7 @@ const usePopupSettingsStore = create<PopupSettingsState>()(
       quickQueryCommander: false,
       threadMessageStickyToolbar: false,
       codeBlockEnhancedToolbar: false,
+      autoRefreshSessionTimeout: false,
     },
     visualTweaks: {
       collapseEmptyThreadVisualColumns: false,
@@ -62,6 +64,7 @@ const popupSettingsStore = usePopupSettingsStore;
           quickQueryCommander: false,
           threadMessageStickyToolbar: false,
           codeBlockEnhancedToolbar: false,
+          autoRefreshSessionTimeout: false,
         },
         visualTweaks: {
           collapseEmptyThreadVisualColumns: false,

src/popup/settings.ts

@@ -46,6 +46,11 @@ const qolTweaks: PopupSetting<
     label: 'Inline query params invocation',
     storeKey: 'quickQueryCommander',
   },
+  {
+    id: 'code-block-enhanced-toolbar',
+    label: 'Code block enhanced toolbar',
+    storeKey: 'codeBlockEnhancedToolbar',
+  },
   {
     id: 'thread-message-sticky-toolbar',
     label: 'Thread message sticky toolbar',
@@ -54,9 +59,11 @@ const qolTweaks: PopupSetting<
     versionRelease: '0.0.0.12',
   },
   {
-    id: 'code-block-enhanced-toolbar',
-    label: 'Code block enhanced toolbar',
-    storeKey: 'codeBlockEnhancedToolbar',
+    id: 'auto-refresh-session-timeout',
+    label: 'Auto-refresh Cloudflare session timeout',
+    storeKey: 'autoRefreshSessionTimeout',
+    experimental: true,
+    versionRelease: '0.0.0.12',
   },
 ];
 

src/types/ChromeStore.ts

@@ -22,6 +22,7 @@ export type ChromeStore = {
       quickQueryCommander: boolean;
       threadMessageStickyToolbar: boolean;
       codeBlockEnhancedToolbar: boolean;
+      autoRefreshSessionTimeout: boolean;
     };
     visualTweaks: {
       collapseEmptyThreadVisualColumns: boolean;

src/utils/pplx-api.ts

@@ -23,6 +23,13 @@ async function fetchUserSettings(): Promise<UserSettingsApiResponse> {
     'https://www.perplexity.ai/p/api/v1/user/settings'
   );
 
+  if (
+    resp.startsWith(
+      '<!DOCTYPE html><html lang="en-US"><head><title>Just a moment...'
+    )
+  )
+    throw new Error('Cloudflare timeout');
+
   return jsonUtils.safeParse(resp);
 }