Hybrid App [iOS with RN] : React Native screens RUM data is not sent to DataDog . Issue in iOS . Works for Android . Could not see RUM sent message in logs.

[kesavarao-EB]

Describe the bug

We have native apps (iOS and android) and DataDog RUM already been instrumented and working fine. We recently developed some screens using react native (FYI, React native code resides in a separate repo).

[ios app with RN] -Native APP is the main and some of pages are based out react-native.

GOAL - Instrument DataDog RUM for react native screens or project.

We followed this DOC and also example repo (ios-with-rn)

ISSUE - [in iOS] RUM data of react native screens are NOT sent to Datadog for iOS. Could not find under Digital Experience -> RUM -> Performance summary .

NOTE - Same code working in "ANDROID", we can see the custom view name being displayed in Datadog RUM under Android application.

below is my DataDogRUM initialisation code in both iOS and react-native repo

Ios :

In AppDelegate.swift,
`.run { _ in

                let configuration = Datadog.Configuration(
                    clientToken: "<Correct Value passed>",
                    env: "alpha",
                    site: .us1
            
                )
                
                print("=======Datadog initializing============")
                Datadog.initialize(with: configuration, trackingConsent: .granted)
                  
                let rumConfiguration = RUM.Configuration(
                    applicationID: "<passed iOS app id>",
                    sessionSampleRate: 100, uiKitViewsPredicate:RNHybridPredicate(),
                    uiKitActionsPredicate: DefaultUIKitRUMActionsPredicate(),
                    urlSessionTracking: RUM.Configuration.URLSessionTracking()
                )
              
                RUM.enable(with: rumConfiguration)
                Datadog.verbosityLevel = .debug 
                
                print("=======Datadog initialized============")`
                
                
       ` class RNHybridPredicate: UIKitRUMViewsPredicate {
                  var defaultPredicate = DefaultUIKitRUMViewsPredicate()

                    func rumView(for viewController: UIViewController) -> RUMView? {
                          // Dropping RN Views here as they are caught from 
                              let canonicalClassName = NSStringFromClass(type(of: viewController))
                               if (canonicalClassName.starts(with: "RN")) {
                             return nil
                          }
    
                 return defaultPredicate.rumView(for: viewController)
               }
               }`

In react-native app repo :

index.tsx

       `
 `function initializeDatadogRum() {
console.log('=====initializeDatadogRum=====');
return DatadogProvider.initialize({
    clientToken: 'Dummy Value',
    env: 'Dummy Value',
    applicationId: 'Dummy Value',
    longTaskThresholdMs: 100,
    sessionSamplingRate: 100,
    serviceName: '==== custom service Name ====',
    verbosity: SdkVerbosity.DEBUG,
});

}`

`export function App(props: Props) {
const [data, setData] = useState<SectionData[]>([]);

useEffect(() => {
    initializeDatadogRum();`
    

`const config = {
    trackResources: true,
    trackErrors: true,
    trackInteractions: true,
};`

` return (
      <DatadogProvider configuration={config}>
        <View style={styles.background}>
            <NavigationContainer
                ref={navigationRef}
                onReady={() => {
                    DdRum.startView('Manual Key', '-=====Custom Action ========');`

`

Reproduction steps

Initialize RUM as above

Open project in Xcode

Run the app in simulator

Navigate to native screens and react native screens

Go to Datadog RUM dashboard and looks for view names of react native screens.

SDK logs

======Datadog initialized============
[DATADOG SDK] 🐶 → 18:54:06.753 NTP time synchronization completed.
🔥 Datadog SDK usage error: The 'main' instance of SDK is already initialized.

DATADOG: Starting RUM Resource #1719669770474/GET GET: https://codepush.appcenter.ms/v0.1/public/codepush/update_check?deployment_key=PL&app_version=9.82.0&package_hash=b6fa7ea2f54828629&label=v250&client_unique_id=2E3B58C5-BC0B-****-8CDD-00000000000000
DATADOG: Stopping RUM Resource #1719669770474/GET status:200

Not Getting

Batch *********** [4345 bytes] (RUM Request) sent successfully.

Which we are seeing for Android

Expected behavior

No response

Affected SDK versions

"@datadog/mobile-react-native": "^2.3.5", "@datadog/mobile-react-native-navigation": "^2.3.5", "@datadog/mobile-react-navigation": "^2.3.5", dd-sdk-ios : 2.5.0

Latest working SDK version

mobile-react-navigation": "^2.3.5", dd-sdk-ios : 2.5.0

Did you confirm if the latest SDK version fixes the bug?

Yes

Integration Methods

NPM

React Native Version

0.73.4

Package.json Contents

No response

iOS Setup

No response

Android Setup

No response

Device Information

No response

Other relevant information

No response

[kesavarao-EB]

But can see a warning on simulator.
screeenshot attached.

**Possible unhandled promise rejection, Type error cannot read property "initialize" of null while calling await DdSdk.initialize()**

Not sure because of that RUM Data is not sent

[marco-saia-datadog]

Hello @kesavarao-EB!

I see that you are initialising the SDK multiple times. That is not the intended usage.

The DatadogProvider already takes care of the initialization and you do not have to call the initialize method manually.

Alternatively you can remove the initialization and provider logic from the React Native side, and only keep the native initialization.

The side in which you choose to initialize the SDK is the one that you want auto-instrumentation to be activated on.

Please take a look at our documentation for Monitoring Hybrid React Native Applications.

In particular:

You can share the same instance of the core SDK between native and React Native without having to initialize the SDK on both sides separately. This allows you to initialize the native SDK on either the native side or on the React Native side (by calling DdSdkReactNative.initialize) and have it initialized for both sides, with events appearing in the same RUM session. React Native uses the default core instance. This means that you can use manual instrumentation on both sides, but auto-instrumentation is only activated for the side that the SDK was initialized.

[kesavarao-EB]

Hi @marco-saia-datadog

But in the official documentation %3B)you have used both DatadogProvider.initialize and ,

Even in the example repo , you have used both

In our system, DataDog RUM is already defined in iOS repo and it will working. We have react-native screens in seperate repo. But Native is using react native screens from react-native repo.

In this usecase, Please let us know if you want us to intiliaze with "fake_value" in the react-native repo ?

Currently we are blocked , can you help us in right steps to implement for our usecase ?

[kesavarao-EB]

@marco-saia-datadog After adding only DataDogProvider in the index.js

index.js

return (
      <DatadogProvider
          configuration={getDatadogConfig(TrackingConsent.GRANTED)}
      >
          <View style={styles.background}>
              <VirtualizedList
                  data={data}
                  renderItem={renderItem}
              />
          </View>
      </DatadogProvider>
  );

getDatadogConfig function:

  export function getDatadogConfig(trackingConsent: TrackingConsent) {
  const config = new DatadogProviderConfiguration(
      'CLIENT_TOKEN',
      'ENVIRONMENT',
      'APPLICATION_ID',
      true,
      true,
      true,
      trackingConsent
  );
  config.nativeCrashReportEnabled = true;
  config.sessionSamplingRate = 100;
  config.serviceName = 'manuakl Nightlife Service';
  config.verbosity = SdkVerbosity.DEBUG;

  return config;
}
 

Even added DdRum.startView("===Custom view renderItem ====")

Actual OUTPUT :

In simulator logs, i can see the

DEBUG  DATADOG: Starting RUM Resource #
DEBUG  DATADOG: Stopping RUM Resource
 DEBUG  DATADOG: Starting RUM View “-=====Custom view renderItem ========” #Manual Key
 DEBUG  DATADOG: Starting RUM View “-=====Custom view renderItem ========” #Manual Key

Issue - Dont see "SENT Successful message". In datadog RUM performance summary we are not any data flowing.

In Simulator i can see the warning message. Not sure if this is causing the issue of not sending the data

Can i get any support here ?

[marco-saia-datadog]

Hello @kesavarao-EB, did you see my comment on #683? It might be blocking this issue.

[marco-saia-datadog]

@kesavarao-EB

I have updated the example project with the latest version of the SDK.

Feel free to check it out on this PR, that will soon be merged: DataDog/dd-sdk-reactnative-examples#34.

Although there are some improvements to make on the project, I could at least verify that it works correctly with the current setup.

The main changes are related to the configuration files:

Podfile (using ruby v3.2.2):

- pod 'DatadogSDKObjc', '~> 1.15.0'
+ pod 'DatadogSDKObjc', '~> 2.13.0'

In build.gradle:

- implementation "com.datadoghq:dd-sdk-android"
+ implementation "com.datadoghq:dd-sdk-android-rum:2.11.0"
+ implementation "com.datadoghq:dd-sdk-android-logs:2.11.0"
+ implementation "com.datadoghq:dd-sdk-android-trace:2.11.0"
+ implementation "com.datadoghq:dd-sdk-android-webview:2.11.0"
+ implementation "com.datadoghq:dd-sdk-android-okhttp:2.11.0"

Can you please verify your setup and let me know how it differs from the example project?

Once I understand how your project structure looks like, I will be able to help you set it up correctly :)

[marco-saia-datadog]

@kesavarao-EB We will also notify you as soon as the documentation changes have been made!

[kesavarao-EB]

Still the same issue as #683