From 45614286bb4decc6aae5913a27de7dd0d9cfae9e Mon Sep 17 00:00:00 2001 From: aphilibeaux Date: Thu, 18 Sep 2025 00:28:42 +0200 Subject: [PATCH] fix(rudderstack): proper timeout option --- .changeset/sour-comics-flash.md | 5 ++++ .../src/analytics/useAnalytics.tsx | 30 +++++++++++++++---- pnpm-lock.yaml | 14 ++++----- pnpm-workspace.yaml | 2 +- 4 files changed, 37 insertions(+), 14 deletions(-) create mode 100644 .changeset/sour-comics-flash.md diff --git a/.changeset/sour-comics-flash.md b/.changeset/sour-comics-flash.md new file mode 100644 index 000000000..321060602 --- /dev/null +++ b/.changeset/sour-comics-flash.md @@ -0,0 +1,5 @@ +--- +"@scaleway/use-analytics": patch +--- + +Add a proper timeout option to avoid re-render diff --git a/packages/use-analytics/src/analytics/useAnalytics.tsx b/packages/use-analytics/src/analytics/useAnalytics.tsx index 910109521..b094f216b 100644 --- a/packages/use-analytics/src/analytics/useAnalytics.tsx +++ b/packages/use-analytics/src/analytics/useAnalytics.tsx @@ -5,7 +5,11 @@ import type { ReactNode } from 'react' import { useDeepCompareEffectNoCheck } from 'use-deep-compare-effect' import { destSDKBaseURL, pluginsSDKBaseURL } from '../constants' import type { CategoryKind } from '../types' -import { defaultConsentOptions, defaultLoadOptions, defaultTimeout } from './constants' +import { + defaultConsentOptions, + defaultLoadOptions, + defaultTimeout, +} from './constants' import { normalizeIdsMigration } from './normalizeIdsMigration' type Analytics = RudderAnalytics @@ -92,9 +96,18 @@ export function AnalyticsProvider({ // This effect will unlock the case where we have a failure with the load of the analytics.load as rudderstack doesn't provider any solution for this case. useEffect(() => { let timer: ReturnType | undefined - if (!isAnalyticsReady && (Number.isFinite(timeout) || shouldRenderOnlyWhenReady)) { - timer = setTimeout(() => setIsAnalyticsReady(true), timeout ?? defaultTimeout) - onError?.(new Error('Analytics Setup Timeout')) + if ( + !isAnalyticsReady && + (Number.isFinite(timeout) || shouldRenderOnlyWhenReady) + ) { + timer = setTimeout(() => { + setIsAnalyticsReady(true) + onError?.(new Error('Timeout')) + }, timeout ?? defaultTimeout) + } + + if (isAnalyticsReady) { + clearTimeout(timer) } return () => { @@ -102,7 +115,6 @@ export function AnalyticsProvider({ } }, [ isAnalyticsReady, - internalAnalytics, setIsAnalyticsReady, shouldRenderOnlyWhenReady, timeout, @@ -144,7 +156,13 @@ export function AnalyticsProvider({ }) analytics.ready(() => { - setAnalytics(analytics) + /** + * this will wait for client destination to be ready, but analytics is ready. + * we can listen for RSA_Ready event to know when the analytics is ready if we don't want to wait for the client destination to be ready. + * document.addEventListener('RSA_Ready', function(e) { + * console.log('RSA_Ready', e.detail.analyticsInstance); + * }); + */ setIsAnalyticsReady(true) }) } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index d6b8ab040..e2e264613 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -61,8 +61,8 @@ catalogs: specifier: 1.6.1 version: 1.6.1 '@rudderstack/analytics-js': - specifier: 3.22.0 - version: 3.22.0 + specifier: 3.24.0 + version: 3.24.0 '@scaleway/use-segment': specifier: 1.1.11 version: 1.1.11 @@ -265,7 +265,7 @@ importers: version: 3.3.1 '@rudderstack/analytics-js': specifier: 'catalog:' - version: 3.22.0 + version: 3.24.0 '@scaleway/eslint-config-react': specifier: workspace:* version: link:packages/eslint-config-react @@ -437,7 +437,7 @@ importers: dependencies: '@rudderstack/analytics-js': specifier: 'catalog:' - version: 3.22.0 + version: 3.24.0 '@segment/analytics-next': specifier: 'catalog:' version: 1.81.1 @@ -1948,8 +1948,8 @@ packages: '@rtsao/scc@1.1.0': resolution: {integrity: sha512-zt6OdqaDoOnJ1ZYsCYGt9YmWzDXl4vQdKTyJev62gFhRGKdx7mcT54V9KIjg+d2wi9EXsPvAPKe7i7WjfVWB8g==} - '@rudderstack/analytics-js@3.22.0': - resolution: {integrity: sha512-pMK8MqhVmZzxZC+9nnVu3pLoUv7bxzr5XAoE46/284koHFgLF5jD7RNrubd3abLP4Wxcv9RYJ9x06GP8f2NVYg==} + '@rudderstack/analytics-js@3.24.0': + resolution: {integrity: sha512-+iVftBbwJ78r6Q5/Ygz8XySUKy4nKFLfdhtugQJuyV6J7vf+2k8OFriW9ryRfjlqWNQJaDOtXVpet96WrFtbVg==} '@scaleway/use-segment@1.1.11': resolution: {integrity: sha512-Xs7oOwGf1zt4GbRqzvyEYKf7IYZmjWdFtuC94QdlO11XxpRruQ21JvC/Tw0BjoDfmzs0XJ8gXBwejHUBKMYZng==} @@ -6433,7 +6433,7 @@ snapshots: '@rtsao/scc@1.1.0': {} - '@rudderstack/analytics-js@3.22.0': {} + '@rudderstack/analytics-js@3.24.0': {} '@scaleway/use-segment@1.1.11(react@19.1.1)': dependencies: diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml index fc71a4793..924378cf7 100644 --- a/pnpm-workspace.yaml +++ b/pnpm-workspace.yaml @@ -20,7 +20,7 @@ catalog: '@formatjs/fast-memoize': 2.2.7 '@formatjs/icu-messageformat-parser': 2.11.2 '@growthbook/growthbook-react': 1.6.1 - '@rudderstack/analytics-js': 3.22.0 + '@rudderstack/analytics-js': 3.24.0 '@scaleway/use-segment': 1.1.11 '@segment/analytics-next': 1.81.1 '@stylistic/eslint-plugin': 4.4.1