Merge branch 'main' into release/1.0.0

Author: 0xnm

README.md

@@ -1,10 +1,5 @@
 # React-Native Monitoring
 
-
-<div class="alert alert-warning">
-This feature is in open beta. Contact <a href="https://docs.datadoghq.com/help/">Support</a> to ask questions or to provide feedback on this feature.
-</div>
-
 Datadog *Real User Monitoring (RUM)* enables you to visualize and analyze the real-time performance and user journeys of your application’s individual users.
 
 ## Setup
@@ -65,46 +60,24 @@ If user interactions tracking is enabled as in the code example above, the SDK t
 
 Alternatively, you can use the `accessibilityLabel` element property to give the tap action a name; otherwise, the element type is reported. You can check the sample app for usage examples.
 
-## Track view navigation
-
-**Note**: Automatic View tracking relies on the [React Navigation](https://reactnavigation.org/) package (minimum supported version is `react-navigation/[email protected]`). If you use another package to handle navigation in your application, use the manual instrumentation method described below.
+### Track view navigation
 
-### Setup
+Because React Native offers a wide range of libraries to create screen navigation, by default only manual view tracking is supported. You can manually start and stop a view using the following `startView()` and `stopView` methods.
 
-To install with NPM, run:
-
-```sh
-npm install @datadog/mobile-react-navigation
-```
+```js
+import { DdSdkReactNative, DdSdkReactNativeConfiguration, DdLogs, DdRum } from '@datadog/mobile-react-native';
 
-To install with Yarn, run:
 
-```sh
-yarn add @datadog/mobile-react-navigation
+// Start a view with a unique view identifier, a custom view url, and an object to attach additional attributes to the view
+DdRum.startView('<view-key>', '/view/url', { 'custom.foo': "something" }, Date.now());
+// Stops a previously started view with the same unique view identifier, and an object to attach additional attributes to the view
+DdRum.stopView('<view-key>', { 'custom.bar': 42 }, Date.now());
 ```
 
-### Usage
+Use one of Datadog's integrations to automatically track views if you're using the following libraries:
 
-To track changes in navigation as RUM Views, set the `onready` callback of your `NavigationContainer` component:
-
-```js
-import * as React from 'react';
-import { DdRumReactNavigationTracking } from '@datadog/mobile-react-navigation';
-
-function App() {
-  const navigationRef = React.useRef(null);
-  return (
-    <View>
-      <NavigationContainer ref={navigationRef} onReady={() => {
-        DdRumReactNavigationTracking.startTrackingViews(navigationRef.current)
-      }}>
-        // …
-      </NavigationContainer>
-    </View>
-  );
-}
-```
-**Note**: Only one `NavigationContainer` can be tracked at the time. If you need to track another container, stop tracking previous one first.
+- If you use the [`react-native-navigation`][5] library, then add the `@datadog/mobile-react-native-navigation` package and follow the [setup instructions][6].
+- If you use the [`react-navigation`][7] library, then add the `@datadog/mobile-react-navigation` package and follow the [setup instructions][8].
 
 ## Track custom attributes
 
@@ -195,9 +168,27 @@ Resource tracking is able to provide the following timings:
 * `First Byte` - The time between the scheduled request and the first byte of the response. This includes time for the request preparation on the native level, network latency, and the time it took the server to prepare the response.
 * `Download` - The time it took to receive a response.
 
+## Development mode
+
+While in development mode, your application can submit extra events related to the React Native tooling, like code transformation errors, requests to a local development server, etc.
+
+To prevent these events from showing in the dashboard, you can disable errors and resources tracking in dev mode, using the `__DEV__` flag:
+
+```
+const config = new DdSdkReactNativeConfiguration(
+	CLIENT_TOKEN,
+	ENVIRONMENT,
+	APPLICATION_ID,
+	true,
+	!__DEV__  /* trackResources will be false in DEV mode, true otherwise */,
+	!__DEV__  /* trackErrors will be false in DEV mode, true otherwise */,
+	trackingConsent
+)
+```
+
 ## License
 
-[Apache License, v2.0](LICENSE)
+[Apache License, v2.0][9]
 
 ## Further Reading
 
@@ -207,3 +198,8 @@ Resource tracking is able to provide the following timings:
 [2]: https://raw.githubusercontent.com/DataDog/dd-sdk-reactnative/main/docs/image_reactnative.png
 [3]: https://docs.datadoghq.com/account_management/api-app-keys/#api-keys
 [4]: https://docs.datadoghq.com/account_management/api-app-keys/#client-tokens
+[5]: https://github.com/wix/react-native-navigation
+[6]: https://www.npmjs.com/package/@datadog/mobile-react-native-navigation
+[7]: https://github.com/react-navigation/react-navigation
+[8]: https://www.npmjs.com/package/@datadog/mobile-react-navigation
+[9]: https://github.com/DataDog/dd-sdk-reactnative/blob/main/LICENSE

example/ios/Podfile.lock

@@ -1,11 +1,11 @@
 PODS:
   - boost-for-react-native (1.63.0)
-  - DatadogSDK (1.7.0-beta3):
+  - DatadogSDK (1.8.0-beta1):
     - Kronos (~> 4.2)
-  - DatadogSDKBridge (0.4.6):
-    - DatadogSDK (~> 1.7.0-beta3)
+  - DatadogSDKBridge (0.4.7):
+    - DatadogSDK (~> 1.8.0-beta1)
   - DatadogSDKReactNative (1.0.0-rc2):
-    - DatadogSDKBridge (~> 0.4.6)
+    - DatadogSDKBridge (~> 0.4.7)
     - React-Core
   - DoubleConversion (1.1.6)
   - FBLazyVector (0.63.4)
@@ -393,9 +393,9 @@ EXTERNAL SOURCES:
 
 SPEC CHECKSUMS:
   boost-for-react-native: 39c7adb57c4e60d6c5479dd8623128eb5b3f0f2c
-  DatadogSDK: 82aa63377d806379ad6b149e3a62b2e54e759ca3
-  DatadogSDKBridge: 15cf2a86b854c53026584a8c2ce5e350e237358f
-  DatadogSDKReactNative: eea7171abcf614e43005e61e65c84cb0c8df5f54
+  DatadogSDK: 35cbc8a159ae74ae9318ad157d1e5bc2a9ba23f9
+  DatadogSDKBridge: 17638afd49b8a5a2ee98533fd001f18c558469cb
+  DatadogSDKReactNative: 1f66a3a695e1c3e3268ffd51886f5d9264472511
   DoubleConversion: cde416483dac037923206447da6e1454df403714
   FBLazyVector: 3bb422f41b18121b71783a905c10e58606f7dc3e
   FBReactNativeSpec: f2c97f2529dd79c083355182cc158c9f98f4bd6e
@@ -433,4 +433,4 @@ SPEC CHECKSUMS:
 
 PODFILE CHECKSUM: 0622c0089241056d28245084d28a6d85c4b68d8e
 
-COCOAPODS: 1.10.2
+COCOAPODS: 1.11.2

example/src/App.tsx

@@ -5,14 +5,19 @@ import MainScreen from './screens/MainScreen';
 import AboutScreen from './screens/AboutScreen';
 import style from './screens/styles';
 import { navigationRef } from './NavigationRoot';
-import { DdRumReactNavigationTracking } from '@datadog/mobile-react-navigation';
+import { DdRumReactNavigationTracking, ViewNamePredicate } from '@datadog/mobile-react-navigation';
+import { Route } from "@react-navigation/native";
 
 const Tab = createBottomTabNavigator();
 
+const viewPredicate: ViewNamePredicate = function customViewNamePredicate(route: Route<string, any | undefined>, trackedName: string) {
+  return "Custom RN " + trackedName;
+}
+
 export default function App() {
   return (
     <NavigationContainer ref={navigationRef} onReady={() => {
-      DdRumReactNavigationTracking.startTrackingViews(navigationRef.current)
+      DdRumReactNavigationTracking.startTrackingViews(navigationRef.current, viewPredicate)
     }}>
       <Tab.Navigator tabBarOptions={{
         labelStyle: style.tabLabelStyle,

example/src/WixApp.tsx

@@ -1,15 +1,20 @@
 import React from 'react';
 import { View, Text, Button } from 'react-native';
-import { Navigation } from 'react-native-navigation';
+import { ComponentDidAppearEvent, Navigation } from 'react-native-navigation';
 import MainScreen from './screens/MainScreen';
 import AboutScreen from './screens/AboutScreen';
-import { DdRumReactNativeNavigationTracking }  from '@datadog/mobile-react-native-navigation';
+import { DdRumReactNativeNavigationTracking, ViewNamePredicate }  from '@datadog/mobile-react-native-navigation';
 
 
 import styles from './screens/styles';
 
+const viewPredicate: ViewNamePredicate = function customViewNamePredicate(_event: ComponentDidAppearEvent, trackedName: string) {
+  return "Custom RNN " + trackedName;
+}
+
+
 function startReactNativeNavigation() {
-    DdRumReactNativeNavigationTracking.startTracking();
+    DdRumReactNativeNavigationTracking.startTracking(viewPredicate);
     registerScreens();
     Navigation.events().registerAppLaunchedListener(async () => {
       Navigation.setRoot({

example/src/ddUtils.tsx

@@ -21,6 +21,7 @@ export function initializeDatadog(trackingConsent: TrackingConsent) {
     )
     config.nativeCrashReportEnabled = true
     config.sampleRate = 100
+    config.serviceName = "com.datadoghq.reactnative.sample"
 
     DdSdkReactNative.initialize(config).then(() => {
         DdLogs.info('The RN Sdk was properly initialized')

packages/core/DatadogSDKReactNative.podspec

@@ -17,7 +17,7 @@ Pod::Spec.new do |s|
   s.source_files = "ios/Sources/*.{h,m,mm,swift}"
 
   s.dependency "React-Core"
-  s.dependency "DatadogSDKBridge", "~> 0.4.6"
+  s.dependency "DatadogSDKBridge", "~> 0.4.7"
 
   s.test_spec 'Tests' do |test_spec|
     test_spec.source_files = 'ios/Tests/*.swift'

packages/core/README.md

@@ -42,12 +42,14 @@ const config = new DdSdkReactNativeConfiguration(
     true, // track XHR Resources
     true // track Errors
 )
-// Optional: Select your Datadog website (one of "US", "EU" or "GOV")
-config.site = "US"
+// Optional: Select your Datadog website (one of "US1", "US3", "US5", EU1", or "US1_FED"). Default is "US1".
+config.site = "US1"
 // Optional: enable or disable native crash reports
 config.nativeCrashReportEnabled = true
 // Optional: sample RUM sessions (here, 80% of session will be sent to Datadog. Default = 100%)
 config.sampleRate = 80
+// Optional: set the reported service name (by default, it'll use the package name / bundleIdentifier of your Android / iOS app respectively)
+config.serviceName = "com.example.reactnative"
 
 await DdSdkReactNative.initialize(config)
 
@@ -69,120 +71,3 @@ DdRum.startView('<view-key>', '/view/url', Date.now(), { 'custom.foo': "somethin
 DdRum.stopView('<view-key>', Date.now(), { 'custom.bar': 42 });
 ```
 
-## Track custom attributes
-
-You can attach user information to all RUM events to get more detailed information from your RUM sessions. 
-
-### User information
-
-For user-specific information, use the following code wherever you want in your app (after the SDK has been initialized). The `id`, `name`, and `email` attributes are built into Datadog, and you can add other attributes that makes sense for your app.
-
-```js
-import { DdSdkReactNative } from '@datadog/mobile-react-native';
-
-DdSdkReactNative.setUser({
-    id: "1337", 
-    name: "John Smith", 
-    email: "[email protected]", 
-    type: "premium"
-})
-```
-
-### Global attributes
-
-You can also keep global attributes to track information about a specific session, such as A/B testing configuration, ad campaign origin, or cart status.
-
-```js
-import { DdSdkReactNative } from '@datadog/mobile-react-native';
-
-DdSdkReactNative.setAttributes({
-    profile_mode: "wall",
-    chat_enabled: true,
-    campaign_origin: "example_ad_network"
-})
-```
-
-## Manual instrumentation
-
-If automatic instrumentation doesn't suit your needs, you can manually create any type of events:
-
-### RUM Events
-
-In addition to manually creating Views (as mentioned above), you can also create custom Actions, Resources and Errors
-
-```js
-import { DdRum } from '@datadog/mobile-react-native';
-
-// Track RUM Views manually
-DdRum.startView('<view-key>', 'View Url', {}, Date.now());
-//…
-DdRum.stopView('<view-key>', { 'custom': 42 }, Date.now());
-
-// Track RUM Actions manually
-DdRum.addAction('TAP', 'button name', {}, Date.now());
-// or in case of continuous action
-DdRum.startAction('TAP', 'button name', {}, Date.now());
-// to stop action above
-DdRum.stopAction({}, Date.now());
-
-// Add custom timings
-DdRum.addTiming('<timing-name>');
-
-// Track RUM Errors manually
-DdRum.addError('<message>', 'source', '<stacktrace>', {}, Date.now());
-
-// Track RUM Resource manually
-DdRum.startResource('<res-key>', 'GET', 'http://www.example.com/api/v1/test', {}, Date.now());
-//…
-DdRum.stopResource('<res-key>', 200, 'xhr', {}, Date.now());
-```
-
-### Logs
-
-You can send custom log messages from anywhere in your application using the following commands:
-
-```js
-import { DdLogs } from '@datadog/mobile-react-native';
-
-// Send logs (use the debug, info, warn or error methods) with object to attach additional attributes to the log
-DdLogs.debug("Lorem ipsum dolor sit amet…", { 'custom': 42 });
-DdLogs.info("Lorem ipsum dolor sit amet…", { 'custom': 42 });
-DdLogs.warn("Lorem ipsum dolor sit amet…", { 'custom': 42 });
-DdLogs.error("Lorem ipsum dolor sit amet…", { 'custom': 42 });
-```
-
-### Spans
-
-You can use spans to trace local computation performance, using the following commands: 
-
-```js
-import { DdTrace } from '@datadog/mobile-react-native';
-
-// Start a span with an object to attach additional attributes to the span
-const spanId = await DdTrace.startSpan("<operation-name>", { 'custom.x': 42 }, Date.now());
-
-// perform some computation...
-
-// Stop the previously started span
-DdTrace.finishSpan(spanId, { 'custom.y': 23 }, Date.now());
-```
-
-## Resource timings
-
-Resource tracking is able to provide the following timings:
-
-* `First Byte` - The time between the scheduled request and the first byte of the response. This includes time for the request preparation on the native level, network latency, and the time it took the server to prepare the response.
-* `Download` - The time it took to receive a response.
-
-## License
-
-[Apache License, v2.0](LICENSE)
-
-## Further Reading
-
-{{< partial name="whats-next/whats-next.html" >}}
-
-[1]: https://app.datadoghq.com/rum/application/create
-[2]: https://raw.githubusercontent.com/DataDog/dd-sdk-reactnative/main/docs/image_reactnative.png
-[3]: https://docs.datadoghq.com/account_management/api-app-keys/#api-keys
-[4]: https://docs.datadoghq.com/account_management/api-app-keys/#client-tokens

packages/core/android/build.gradle

@@ -129,7 +129,7 @@ dependencies {
   // noinspection GradleDynamicVersion
   api 'com.facebook.react:react-native:+'
 
-  implementation "com.datadoghq:dd-bridge-android:0.4.4"
+  implementation "com.datadoghq:dd-bridge-android:0.4.6"
 
   implementation "org.jetbrains.kotlin:kotlin-stdlib:$kotlin_version"
 }

packages/core/ios/Sources/QueueHolder.swift

@@ -6,4 +6,4 @@
 
 import Foundation
 
-internal let sharedQueue = dispatch_queue_serial_t(label: "dd-react-native-sdk")
+internal let sharedQueue = DispatchQueue(label: "dd-react-native-sdk")

packages/core/ios/Tests/ModulesTest.swift

@@ -5,13 +5,13 @@
  */
 
 import XCTest
-@testable import dd_sdk_reactnative
+@testable import DatadogSDKReactNative
 @testable import React.RCTModuleData
 
 // Since RN tooling does the modules linking automatically, it doesn't include testspecs
 // To do that modify node_modules/@react-native-community/cli-platform-ios/native_modules.rb#L90 to:
 //
-// if spec.name == "dd-sdk-reactnative"
+// if spec.name == "DatadogSDKReactNative"
 //   pod spec.name, :path => relative_path.to_path, :testspecs => ['Tests']
 // else
 //   pod spec.name, :path => relative_path.to_path