Refactor telemetry configuration to use boolean flags for debug mode. Update related components to ensure consistent telemetry data handling across the application.

Author: Dopeamin

packages/react/src/contexts/TelemetryContext.ts

@@ -3,7 +3,7 @@ import { createContext } from 'react';
 export interface TelemetryConfig {
   projectId: string;
   disabled?: boolean;
-  mode?: 'debug' | 'production';
+  isDebugMode?: boolean;
   isDefaultTheme?: boolean;
   hasCustomerSupportEmail?: boolean;
   darkMode?: 'on' | 'off' | 'auto';

packages/react/src/hocs/CorbadoProvider.tsx

@@ -13,10 +13,12 @@ import { TelemetryProvider } from '../contexts/TelemetryProvider';
 import { ThemeProvider } from '../contexts/ThemeProvider';
 import { handleDynamicLocaleSetup } from '../i18n';
 
-export interface TelemetryConfig {
-  disabled?: boolean;
-  mode?: 'debug';
-}
+export type TelemetryConfig =
+  | false
+  | {
+      debug?: boolean;
+      disabled?: boolean;
+    };
 
 export interface CorbadoProviderProps extends PropsWithChildren<CorbadoConfig> {
   corbadoAppInstance?: CorbadoApp;
@@ -54,8 +56,9 @@ const CorbadoProvider: FC<CorbadoProviderProps> = ({
   return (
     <TelemetryProvider
       telemetryConfig={{
-        ...telemetry,
         projectId,
+        disabled: telemetry === false || telemetry?.disabled === true,
+        isDebugMode: telemetry && telemetry.debug,
         isPreviewMode,
         isDevMode,
         hasCustomerSupportEmail: Boolean(customerSupportEmail),

packages/react/src/hooks/useTelemetry.ts

@@ -21,7 +21,7 @@ export function useTelemetry() {
   }
 
   const { telemetryConfig, setTelemetryConfig } = context;
-  const { projectId, disabled, mode } = telemetryConfig;
+  const { projectId, disabled, isDebugMode } = telemetryConfig;
   const packageMetadataSent = useRef(false);
 
   const disableTelemetry = useCallback(() => {
@@ -45,10 +45,10 @@ export function useTelemetry() {
         sdkVersion: SDK_VERSION,
         sdkName: SDK_NAME,
         identifier: projectId,
-        debugMode: mode === 'debug',
+        debugMode: isDebugMode,
       });
     },
-    [projectId, mode, disabled],
+    [projectId, isDebugMode, disabled],
   );
 
   const logPackageMetadata = useCallback(() => {
@@ -87,11 +87,11 @@ export function useTelemetry() {
       sdkVersion: SDK_VERSION,
       sdkName: SDK_NAME,
       identifier: projectId,
-      debugMode: mode === 'debug',
+      debugMode: isDebugMode,
     });
 
     packageMetadataSent.current = true;
-  }, [projectId, mode, disabled, telemetryConfig]);
+  }, [projectId, isDebugMode, disabled, telemetryConfig]);
 
   return {
     disableTelemetry,

playground/react/src/hoc/withCorbadoProvider.tsx

@@ -19,6 +19,7 @@ function withCorbadoProvider<T extends JSX.IntrinsicAttributes>(WrappedComponent
           darkMode={darkMode ? 'on' : 'off'}
           isDevMode={true}
           frontendApiUrlSuffix={import.meta.env.REACT_APP_CORBADO_FRONTEND_API_URL_SUFFIX}
+          telemetry={{ debug: true }}
         >
           <WrappedComponent {...(props as T)} />
         </CorbadoProvider>

playground/web-js-script/index.html

@@ -28,6 +28,7 @@
             projectId: projectId,
             frontendApiUrlSuffix: 'frontendapi.cloud.corbado-staging.io',
             darkMode: 'auto',
+            telemetry: { debug: true }
           });
         }