chore: Increase default js agent timeout INTER-927

src/app/bot-firewall/BotFirewall.tsx

@@ -17,6 +17,7 @@ import { Spinner } from '../../client/components/Spinner/Spinner';
 import { Alert } from '../../client/components/Alert/Alert';
 import { BotVisit } from './api/get-bot-visits/botVisitDatabase';
 import { BotTypeInfo, BotVisitAction, InstructionPrompt } from './components/botFirewallComponents';
+import { FPJS_CLIENT_TIMEOUT } from '../../const';
 
 const DEFAULT_DISPLAYED_VISITS = 10;
 const DISPLAYED_VISITS_INCREMENT = 10;
@@ -84,7 +85,7 @@ const useBlockUnblockIpAddress = (
         body: JSON.stringify({ ip, blocked, requestId } satisfies BlockIpPayload),
       });
       if (!response.ok) {
-        throw new Error('Failed to update firewall: ' + (await response.json()).message ?? response.statusText);
+        throw new Error('Failed to update firewall: ' + ((await response.json()).message ?? response.statusText));
       }
       return await response.json();
     },
@@ -120,6 +121,7 @@ export const BotFirewall: FunctionComponent = () => {
     isLoading: isLoadingVisitorData,
   } = useVisitorData({
     extendedResult: true,
+    timeout: FPJS_CLIENT_TIMEOUT,
   });
 
   // Get a list of bot visits

src/app/coupon-fraud/CouponFraud.tsx

@@ -16,6 +16,7 @@ import { useVisitorData } from '@fingerprintjs/fingerprintjs-pro-react';
 import { TEST_IDS } from '../../client/testIDs';
 import { useMutation } from 'react-query';
 import { CouponClaimPayload, CouponClaimResponse } from './api/claim/route';
+import { FPJS_CLIENT_TIMEOUT } from '../../const';
 
 const AIRMAX_PRICE = 356.02;
 const ALLSTAR_PRICE = 102.5;
@@ -25,6 +26,7 @@ export function CouponFraudUseCase() {
   const { getData: getVisitorData } = useVisitorData(
     {
       ignoreCache: true,
+      timeout: FPJS_CLIENT_TIMEOUT,
     },
     { immediate: false },
   );

src/app/credential-stuffing/CredentialStuffing.tsx

@@ -16,10 +16,11 @@ import { useVisitorData } from '@fingerprintjs/fingerprintjs-pro-react';
 import { TEST_IDS } from '../../client/testIDs';
 import { useMutation } from 'react-query';
 import { LoginPayload, LoginResponse } from './api/authenticate/route';
+import { FPJS_CLIENT_TIMEOUT } from '../../const';
 
 export function CredentialStuffing() {
   const { getData: getVisitorData } = useVisitorData(
-    { ignoreCache: true },
+    { ignoreCache: true, timeout: FPJS_CLIENT_TIMEOUT },
     {
       immediate: false,
     },

src/app/loan-risk/LoanRisk.tsx

@@ -16,6 +16,7 @@ import { TEST_IDS } from '../../client/testIDs';
 import { useVisitorData } from '@fingerprintjs/fingerprintjs-pro-react';
 import { useMutation } from 'react-query';
 import { LoanRequestData, LoanRequestPayload, LoanRequestResponse } from './api/request-loan/route';
+import { FPJS_CLIENT_TIMEOUT } from '../../const';
 
 type SliderFieldProps = {
   label: string;
@@ -78,10 +79,8 @@ const loanDurationValidation = {
 
 export function LoanRisk() {
   const { getData: getVisitorData, isLoading: isVisitorDataLoading } = useVisitorData(
-    { ignoreCache: true },
-    {
-      immediate: false,
-    },
+    { ignoreCache: true, timeout: FPJS_CLIENT_TIMEOUT },
+    { immediate: false },
   );
 
   const {

src/app/payment-fraud/PaymentFraud.tsx

@@ -14,13 +14,12 @@ import { useVisitorData } from '@fingerprintjs/fingerprintjs-pro-react';
 import { TEST_IDS } from '../../client/testIDs';
 import { PaymentPayload, PaymentResponse } from './api/place-order/route';
 import { useMutation } from 'react-query';
+import { FPJS_CLIENT_TIMEOUT } from '../../const';
 
 export function PaymentFraud() {
   const { getData: getVisitorData } = useVisitorData(
-    { ignoreCache: true },
-    {
-      immediate: false,
-    },
+    { ignoreCache: true, timeout: FPJS_CLIENT_TIMEOUT },
+    { immediate: false },
   );
 
   // Default mocked card data

src/app/paywall/article/[id]/Article.tsx

@@ -14,6 +14,7 @@ import { ArticleGrid, Byline } from '../../components/ArticleGrid';
 import { BackArrow } from '../../../../client/components/BackArrow/BackArrow';
 import { ArticleRequestPayload, ArticleResponse } from '../../api/article/[id]/route';
 import { ARTICLES } from '../../api/articles';
+import { FPJS_CLIENT_TIMEOUT } from '../../../../const';
 
 function ArticleSkeleton({ animation = false }: { animation?: SkeletonTypeMap['props']['animation'] }) {
   const skeletons = Array.from({ length: 4 }).map((_, index) => <Skeleton key={index} animation={animation} />);
@@ -23,6 +24,7 @@ function ArticleSkeleton({ animation = false }: { animation?: SkeletonTypeMap['p
 export function Article({ articleId, embed }: { articleId: string; embed: boolean }) {
   const { getData: getVisitorData } = useVisitorData({
     ignoreCache: true,
+    timeout: FPJS_CLIENT_TIMEOUT,
   });
 
   const { data: articleData, error: articleError } = useQuery<ArticleRequestPayload, Error, ArticleResponse>(

src/app/personalization/Personalization.tsx

@@ -20,11 +20,12 @@ import { Spinner } from '../../client/components/Spinner/Spinner';
 import { useSearchHistory } from './hooks/use-search-history';
 import { useProducts } from './hooks/use-products';
 import { usePersonalizationNotification } from './hooks/use-personalization-notification';
+import { FPJS_CLIENT_TIMEOUT } from '../../const';
 
 export function Personalization() {
   const { enqueueSnackbar } = useSnackbar();
 
-  const { isLoading: isFpDataLoading, data } = useVisitorData({ extendedResult: true });
+  const { isLoading: isFpDataLoading, data } = useVisitorData({ extendedResult: true, timeout: FPJS_CLIENT_TIMEOUT });
 
   const [didAcknowledge, setDidAcknowledge] = useSessionStorage('didAcknowledgePersonalizationUseCaseWarning', false);
   const [search, setSearch] = useState('');

src/app/personalization/hooks/use-cart.ts

@@ -4,13 +4,14 @@ import { useVisitorData } from '@fingerprintjs/fingerprintjs-pro-react';
 import { GetCartItemsPayload, GetCartItemsResponse } from '../api/cart/get-items/route';
 import { AddCartItemPayload, AddCartItemResponse } from '../api/cart/add-item/route';
 import { RemoveCartItemPayload, RemoveCartItemResponse } from '../api/cart/remove-item/route';
+import { FPJS_CLIENT_TIMEOUT } from '../../../const';
 
 const GET_CART_QUERY = 'GET_CART_QUERY';
 const ADD_CART_ITEM_MUTATION = 'ADD_CART_ITEM_MUTATION';
 const REMOVE_CART_ITEM_MUTATION = 'REMOVE_CART_ITEM_MUTATION';
 
 export function useCart() {
-  const { data: visitorData } = useVisitorData();
+  const { data: visitorData } = useVisitorData({ timeout: FPJS_CLIENT_TIMEOUT });
 
   const cartQuery = useQuery<GetCartItemsResponse>({
     queryKey: [GET_CART_QUERY],

src/app/personalization/hooks/use-products.ts

@@ -2,11 +2,12 @@ import { useQuery, useQueryClient } from 'react-query';
 import { GetProductsResponse, GetProductsPayload } from '../../../app/personalization/api/get-products/route';
 import { useVisitorData } from '@fingerprintjs/fingerprintjs-pro-react';
 import { SEARCH_HISTORY_QUERY } from './use-search-history';
+import { FPJS_CLIENT_TIMEOUT } from '../../../const';
 
 export const GET_PRODUCTS_QUERY = 'GET_PRODUCTS_QUERY';
 
 export function useProducts(query: string) {
-  const { data: visitorData } = useVisitorData();
+  const { data: visitorData } = useVisitorData({ timeout: FPJS_CLIENT_TIMEOUT });
   const queryClient = useQueryClient();
   return useQuery<GetProductsResponse>({
     // Make a new request every time `query` changes

src/app/playground/hooks/usePlaygroundSignals.ts

@@ -2,14 +2,15 @@ import { useVisitorData } from '@fingerprintjs/fingerprintjs-pro-react';
 import { EventResponse } from '@fingerprintjs/fingerprintjs-pro-server-api';
 import { useState } from 'react';
 import { useQuery } from 'react-query';
+import { FPJS_CLIENT_TIMEOUT } from '../../../const';
 
 export function usePlaygroundSignals(config?: { onServerApiSuccess?: (data: EventResponse) => void }) {
   const {
     data: agentResponse,
     isLoading: isLoadingAgentResponse,
     getData: getAgentData,
     error: agentError,
-  } = useVisitorData({ extendedResult: true, ignoreCache: true }, { immediate: true });
+  } = useVisitorData({ extendedResult: true, ignoreCache: true, timeout: FPJS_CLIENT_TIMEOUT }, { immediate: true });
 
   const requestId = agentResponse?.requestId;
 

src/app/sms-pumping/SmsPumping.tsx

@@ -19,6 +19,7 @@ import { useMutation } from 'react-query';
 import { useSearchParams } from 'next/navigation';
 import { SendSMSPayload, SendSMSResponse } from './api/send-verification-sms/route';
 import { TEST_PHONE_NUMBER } from './api/smsPumpingConst';
+import { FPJS_CLIENT_TIMEOUT } from '../../const';
 
 type FormStep = 'Send SMS' | 'Submit code';
 type QueryAsProps = {
@@ -44,7 +45,7 @@ type SendMessageMutationArgs = {
 export type SendMessageMutation = ReturnType<typeof useSendMessage>;
 export const useSendMessage = ({ onSuccess, disableBotDetection = false }: SendMessageMutationArgs) => {
   const { getData } = useVisitorData(
-    { ignoreCache: true },
+    { ignoreCache: true, timeout: FPJS_CLIENT_TIMEOUT },
     {
       immediate: false,
     },

src/app/sms-pumping/components/SubmitCodeForm.tsx

@@ -10,14 +10,10 @@ import Button from '../../../client/components/Button/Button';
 import styles from './smsPumping.module.scss';
 import formStyles from '../../../client/styles/forms.module.scss';
 import { SendMessageMutation } from '../SmsPumping';
+import { FPJS_CLIENT_TIMEOUT } from '../../../const';
 
 export const useSubmitCode = (params?: { onSuccess?: () => void }) => {
-  const { getData } = useVisitorData(
-    { ignoreCache: true },
-    {
-      immediate: false,
-    },
-  );
+  const { getData } = useVisitorData({ ignoreCache: true, timeout: FPJS_CLIENT_TIMEOUT }, { immediate: false });
   return useMutation<SubmitCodeResponse, Error, { phoneNumber: string; code: string }>({
     mutationKey: ['submitCode'],
     mutationFn: async ({ code, phoneNumber }) => {

src/app/vpn-detection/VpnDetectionUseCase.tsx

@@ -19,13 +19,15 @@ import courseLogo from './fingerprintLogoLowOpacitySquareBordered.svg';
 import { env } from '../../env';
 import { TEST_IDS } from '../../client/testIDs';
 import { VPN_DETECTION_COPY } from './copy';
+import { FPJS_CLIENT_TIMEOUT } from '../../const';
 
 const COURSE_PRICE = 100;
 const TAXES = 15;
 
 const VpnDetectionUseCase: FunctionComponent = () => {
   const { getData: getVisitorData, data: visitorData } = useVisitorData({
     ignoreCache: true,
+    timeout: FPJS_CLIENT_TIMEOUT,
   });
   const { data: unsealedVisitorData } = useUnsealedResult(visitorData?.sealedResult);
   const visitorIpCountry = getIpLocation(unsealedVisitorData)?.country;

src/app/web-scraping/WebScraping.tsx

@@ -18,6 +18,7 @@ import { useSearchParams } from 'next/navigation';
 import { AIRPORTS } from './data/airports';
 import { Flight, FlightCard } from './components/FlightCard';
 import { Severity } from '../../server/checks';
+import { FPJS_CLIENT_TIMEOUT } from '../../const';
 
 type FlightQueryResult = {
   message: string;
@@ -44,6 +45,7 @@ const WebScraping: FunctionComponent = () => {
     {
       // Don't use a cached fingerprint, it must be fresh to avoid replay attacks
       ignoreCache: true,
+      timeout: FPJS_CLIENT_TIMEOUT,
     },
     // Don't fingerprint the visitor on mount, but when they click "Search flights", the fingerprint must be fresh
     { immediate: false },

src/client/hooks/useReset/useReset.tsx

@@ -8,14 +8,15 @@ import styles from './userReset.module.scss';
 import { PLAYGROUND_METADATA, USE_CASES } from '../../content';
 import { TEST_IDS } from '../../testIDs';
 import { usePathname } from 'next/navigation';
+import { FPJS_CLIENT_TIMEOUT } from '../../../const';
 
 type UseResetParams = {
   onError?: () => void;
   onSuccess?: () => void;
 };
 
 export const useReset = ({ onError, onSuccess }: UseResetParams) => {
-  const { getData } = useVisitorData({ ignoreCache: true }, { immediate: false });
+  const { getData } = useVisitorData({ ignoreCache: true, timeout: FPJS_CLIENT_TIMEOUT }, { immediate: false });
   const { enqueueSnackbar } = useSnackbar();
   const pathname = usePathname();
 

src/const.ts

@@ -0,0 +1 @@
+export const FPJS_CLIENT_TIMEOUT = 12000;