Merge pull request #941 from DataDog/carlosnogueira/RUM-9145/refactor-rum-action-tracking

[RUM 9145] Refactor RUM Action Tracking

Author: cdn34dd

CONTRIBUTING.md

@@ -23,7 +23,9 @@ This repository contains 2 main projects:
     * `codepush`: an integration for the [react-native-code-push](https://github.com/microsoft/react-native-code-push) library.
     * `core`: the core React Native SDK allowing tracking of logs, spans and RUM events.
     * `react-native-apollo-client`: an integration for the [Apollo Client](https://www.apollographql.com/docs/react/integrations/react-native/) library.
+    * `react-native-babel-plugin`: a Babel plugin that enriches React Native components with contextual metadata.
     * `react-native-navigation`: an integration for the [react-native-navigation](https://github.com/wix/react-native-navigation) library.
+    * `react-native-session-replay`: client-side React Native module to enable session replay with Datadog.
     * `react-native-webview`: an integration for the [`react-native-webview`](https://github.com/react-native-webview/react-native-webview) library.
     * `react-navigation`: an integration for the [react-navigation](https://github.com/react-navigation/react-navigation) library.
 * Sample app project (in the `example` folder)

package.json

@@ -14,7 +14,9 @@
         "url": "https://github.com/DataDog/dd-sdk-reactnative/issues"
     },
     "license": "Apache-2.0",
-    "private": true,
+    "publishConfig": {
+        "access": "public"
+    },
     "workspaces": {
         "packages": [
             "packages/*",

packages/core/__mocks__/react-native.ts

@@ -33,6 +33,9 @@ actualRN.NativeModules.DdSdk = {
     setTrackingConsent: jest.fn().mockImplementation(
         () => new Promise<void>(resolve => resolve())
     ) as jest.MockedFunction<DdNativeSdkType['setTrackingConsent']>,
+    sendTelemetryLog: jest.fn().mockImplementation(
+        () => new Promise<void>(resolve => resolve())
+    ) as jest.MockedFunction<DdNativeSdkType['sendTelemetryLog']>,
     telemetryDebug: jest.fn().mockImplementation(
         () => new Promise<void>(resolve => resolve())
     ) as jest.MockedFunction<DdNativeSdkType['telemetryDebug']>,

packages/core/jest/mock.js

@@ -42,6 +42,9 @@ module.exports = {
         setTrackingConsent: jest
             .fn()
             .mockImplementation(() => new Promise(resolve => resolve())),
+        sendTelemetryLog: jest
+            .fn()
+            .mockImplementation(() => new Promise(resolve => resolve())),
         telemetryDebug: jest
             .fn()
             .mockImplementation(() => new Promise(resolve => resolve())),

packages/core/src/DdSdkReactNative.tsx

@@ -7,26 +7,27 @@
 import { version as reactNativeVersion } from 'react-native/package.json';
 import { InteractionManager } from 'react-native';
 
+import type {
+    AutoInstrumentationConfiguration,
+    AutoInstrumentationParameters,
+    DatadogProviderConfiguration,
+    InitializationModeForTelemetry,
+    PartialInitializationConfiguration
+} from './DdSdkReactNativeConfiguration';
 import {
     DdSdkReactNativeConfiguration,
-    buildConfigurationFromPartialConfiguration,
-    addDefaultValuesToAutoInstrumentationConfiguration,
     InitializationMode,
+    addDefaultValuesToAutoInstrumentationConfiguration,
+    buildConfigurationFromPartialConfiguration,
     formatFirstPartyHosts
 } from './DdSdkReactNativeConfiguration';
-import type {
-    AutoInstrumentationParameters,
-    DatadogProviderConfiguration,
-    PartialInitializationConfiguration,
-    AutoInstrumentationConfiguration,
-    InitializationModeForTelemetry
-} from './DdSdkReactNativeConfiguration';
 import { InternalLog } from './InternalLog';
 import { SdkVerbosity } from './SdkVerbosity';
 import type { TrackingConsent } from './TrackingConsent';
 import { DdLogs } from './logs/DdLogs';
 import { DdRum } from './rum/DdRum';
 import { DdRumErrorTracking } from './rum/instrumentation/DdRumErrorTracking';
+import { DdBabelInteractionTracking } from './rum/instrumentation/interactionTracking/DdBabelInteractionTracking';
 import { DdRumUserInteractionTracking } from './rum/instrumentation/interactionTracking/DdRumUserInteractionTracking';
 import { DdRumResourceTracking } from './rum/instrumentation/resourceTracking/DdRumResourceTracking';
 import { AttributesSingleton } from './sdk/AttributesSingleton/AttributesSingleton';
@@ -361,6 +362,13 @@ export class DdSdkReactNative {
     private static enableFeatures(
         configuration: AutoInstrumentationParameters
     ) {
+        if (globalThis.__DD_RN_BABEL_PLUGIN_ENABLED__) {
+            DdBabelInteractionTracking.config = {
+                trackInteractions: configuration.trackInteractions,
+                useAccessibilityLabel: configuration.useAccessibilityLabel
+            };
+        }
+
         if (DdSdkReactNative.wasAutoInstrumented) {
             InternalLog.log(
                 "Can't auto instrument Datadog, SDK was already instrumented",
@@ -369,7 +377,10 @@ export class DdSdkReactNative {
             return;
         }
 
-        if (configuration.trackInteractions) {
+        if (
+            configuration.trackInteractions &&
+            !globalThis.__DD_RN_BABEL_PLUGIN_ENABLED__
+        ) {
             DdRumUserInteractionTracking.startTracking({
                 actionNameAttribute: configuration.actionNameAttribute,
                 useAccessibilityLabel: configuration.useAccessibilityLabel

packages/core/src/index.tsx

@@ -4,13 +4,13 @@
  * Copyright 2016-Present Datadog, Inc.
  */
 import {
+    BatchProcessingLevel,
+    BatchSize,
     DatadogProviderConfiguration,
     DdSdkReactNativeConfiguration,
     InitializationMode,
-    VitalsUpdateFrequency,
     UploadFrequency,
-    BatchSize,
-    BatchProcessingLevel
+    VitalsUpdateFrequency
 } from './DdSdkReactNativeConfiguration';
 import type {
     AutoInstrumentationConfiguration,
@@ -23,26 +23,27 @@ import { SdkVerbosity } from './SdkVerbosity';
 import { TrackingConsent } from './TrackingConsent';
 import { DdLogs } from './logs/DdLogs';
 import { DdRum } from './rum/DdRum';
+import { DdBabelInteractionTracking } from './rum/instrumentation/interactionTracking/DdBabelInteractionTracking';
 import { DatadogTracingContext } from './rum/instrumentation/resourceTracking/distributedTracing/DatadogTracingContext';
 import { DatadogTracingIdentifier } from './rum/instrumentation/resourceTracking/distributedTracing/DatadogTracingIdentifier';
 import {
-    TracingIdType,
-    TracingIdFormat
+    TracingIdFormat,
+    TracingIdType
 } from './rum/instrumentation/resourceTracking/distributedTracing/TracingIdentifier';
 import {
-    DATADOG_GRAPH_QL_OPERATION_TYPE_HEADER,
     DATADOG_GRAPH_QL_OPERATION_NAME_HEADER,
+    DATADOG_GRAPH_QL_OPERATION_TYPE_HEADER,
     DATADOG_GRAPH_QL_VARIABLES_HEADER
 } from './rum/instrumentation/resourceTracking/graphql/graphqlHeaders';
-import { RumActionType, ErrorSource, PropagatorType } from './rum/types';
 import type { FirstPartyHost } from './rum/types';
+import { ErrorSource, PropagatorType, RumActionType } from './rum/types';
 import { DatadogProvider } from './sdk/DatadogProvider/DatadogProvider';
 import { DdSdk } from './sdk/DdSdk';
 import { FileBasedConfiguration } from './sdk/FileBasedConfiguration/FileBasedConfiguration';
 import { DdTrace } from './trace/DdTrace';
 import { DefaultTimeProvider } from './utils/time-provider/DefaultTimeProvider';
-import { TimeProvider } from './utils/time-provider/TimeProvider';
 import type { Timestamp } from './utils/time-provider/TimeProvider';
+import { TimeProvider } from './utils/time-provider/TimeProvider';
 
 export {
     DatadogProvider,
@@ -75,9 +76,9 @@ export {
     TracingIdType,
     TracingIdFormat,
     DatadogTracingIdentifier,
-    DatadogTracingContext
+    DatadogTracingContext,
+    DdBabelInteractionTracking
 };
-
 export type {
     Timestamp,
     FirstPartyHost,

packages/core/src/rum/constants.ts

@@ -0,0 +1,7 @@
+/*
+ * Unless explicitly stated otherwise all files in this repository are licensed under the Apache License Version 2.0.
+ * This product includes software developed at Datadog (https://www.datadoghq.com/).
+ * Copyright 2016-Present Datadog, Inc.
+ */
+
+export const BABEL_PLUGIN_TELEMETRY = 'Datadog Babel Integration Telemetry';

packages/core/src/rum/instrumentation/interactionTracking/DdBabelInteractionTracking.ts

@@ -0,0 +1,130 @@
+/*
+ * Unless explicitly stated otherwise all files in this repository are licensed under the Apache License Version 2.0.
+ * This product includes software developed at Datadog (https://www.datadoghq.com/).
+ * Copyright 2016-Present Datadog, Inc.
+ */
+
+import { InternalLog } from '../../../InternalLog';
+import { SdkVerbosity } from '../../../SdkVerbosity';
+import DdNativeRum from '../../../specs/NativeDdRum';
+import DdSdk from '../../../specs/NativeDdSdk';
+import { getBabelTelemetryConfig } from '../../../utils/telemetry';
+import { DefaultTimeProvider } from '../../../utils/time-provider/DefaultTimeProvider';
+import type { TimeProvider } from '../../../utils/time-provider/TimeProvider';
+import { BABEL_PLUGIN_TELEMETRY } from '../../constants';
+import type { RumActionType } from '../../types';
+import { ActionSource } from '../../types';
+
+const StateErrors = {
+    ALREADY_INITIALIZED:
+        'Interaction Tracking singleton already initialized, please use `getInstance`.'
+} as const;
+
+type BabelConfig = {
+    trackInteractions: boolean;
+    useAccessibilityLabel: boolean;
+};
+
+type TargetObject = {
+    compoenentName: string;
+    'dd-action-name': string;
+    accessibilityLabel: string;
+    [key: string]: string;
+};
+
+export class DdBabelInteractionTracking {
+    private static instance: DdBabelInteractionTracking | null = null;
+
+    static config: BabelConfig = {
+        trackInteractions: false,
+        useAccessibilityLabel: true
+    };
+
+    private timeProvider: TimeProvider = new DefaultTimeProvider();
+
+    private telemetrySent: boolean = false;
+
+    isInitialized: boolean = false;
+
+    private constructor() {
+        if (DdBabelInteractionTracking.instance) {
+            throw new Error(StateErrors.ALREADY_INITIALIZED);
+        }
+
+        DdBabelInteractionTracking.instance = this;
+    }
+
+    static getInstance() {
+        if (!DdBabelInteractionTracking.instance) {
+            DdBabelInteractionTracking.instance = new DdBabelInteractionTracking();
+        }
+
+        return DdBabelInteractionTracking.instance;
+    }
+
+    private getTargetName(targetObject: TargetObject) {
+        const {
+            componentName,
+            'dd-action-name': actionName,
+            accessibilityLabel,
+            ...attrs
+        } = targetObject;
+
+        const { useAccessibilityLabel } = DdBabelInteractionTracking.config;
+
+        if (actionName) {
+            return actionName;
+        }
+
+        const keys = Object.keys(attrs);
+        if (keys.length) {
+            return attrs[keys[0]];
+        }
+
+        if (useAccessibilityLabel && accessibilityLabel) {
+            return accessibilityLabel;
+        }
+
+        return componentName;
+    }
+
+    wrapRumAction(
+        func: (...args: any[]) => any,
+        action: RumActionType,
+        targetObject: TargetObject
+    ): (...args: any[]) => any {
+        return (...args: any[]) => {
+            const result = func(...args);
+
+            if (!this.telemetrySent) {
+                DdSdk?.sendTelemetryLog(
+                    BABEL_PLUGIN_TELEMETRY,
+                    getBabelTelemetryConfig(),
+                    { onlyOnce: true }
+                );
+
+                this.telemetrySent = true;
+            }
+
+            const targetName = this.getTargetName(targetObject);
+
+            const { trackInteractions } = DdBabelInteractionTracking.config;
+
+            if (trackInteractions) {
+                InternalLog.log(
+                    `Adding RUM Action “${targetName}” (${action}, auto)`,
+                    SdkVerbosity.DEBUG
+                );
+
+                DdNativeRum?.addAction(
+                    action,
+                    targetName,
+                    { '__dd.action_source': ActionSource.BABEL },
+                    this.timeProvider.now()
+                );
+            }
+
+            return result;
+        };
+    }
+}

packages/core/src/rum/instrumentation/interactionTracking/DdRumUserInteractionTracking.tsx

@@ -10,9 +10,11 @@ import { InternalLog } from '../../../InternalLog';
 import { SdkVerbosity } from '../../../SdkVerbosity';
 import { DdSdk } from '../../../sdk/DdSdk';
 import { getErrorMessage } from '../../../utils/errorUtils';
+import { getBabelTelemetryConfig } from '../../../utils/telemetry';
+import { BABEL_PLUGIN_TELEMETRY } from '../../constants';
 
-import { DdEventsInterceptor } from './DdEventsInterceptor';
 import type { DdEventsInterceptorOptions } from './DdEventsInterceptor';
+import { DdEventsInterceptor } from './DdEventsInterceptor';
 import type { EventsInterceptor } from './EventsInterceptor';
 import { NoOpEventsInterceptor } from './NoOpEventsInterceptor';
 import { areObjectShallowEqual } from './ShallowObjectEqualityChecker';
@@ -70,6 +72,12 @@ export class DdRumUserInteractionTracking {
             return;
         }
 
+        DdSdk?.sendTelemetryLog(
+            BABEL_PLUGIN_TELEMETRY,
+            getBabelTelemetryConfig(),
+            { onlyOnce: true }
+        );
+
         DdRumUserInteractionTracking.eventsInterceptor = new DdEventsInterceptor(
             options
         );

packages/core/src/rum/types.ts

@@ -255,6 +255,12 @@ export enum PropagatorType {
     B3MULTI = 'b3multi'
 }
 
+export enum ActionSource {
+    MANUAL = 'MANUAL',
+    LEGACY = 'LEGACY',
+    BABEL = 'BABEL'
+}
+
 export type FirstPartyHost = {
     match: string;
     propagatorTypes: PropagatorType[];