- 필수 기능
- 시작하기
- Glossary
- 표준 속성
- Guides
- Agent
- 통합
- 개방형텔레메트리
- 개발자
- Administrator's Guide
- API
- Datadog Mobile App
- CoScreen
- Cloudcraft
- 앱 내
- 서비스 관리
- 인프라스트럭처
- 애플리케이션 성능
- APM
- Continuous Profiler
- 스팬 시각화
- 데이터 스트림 모니터링
- 데이터 작업 모니터링
- 디지털 경험
- 소프트웨어 제공
- 보안
- AI Observability
- 로그 관리
- 관리
This page describes how to instrument your applications for both Real User Monitoring (RUM) or Error Tracking with the React Native SDK. You can follow the steps below to instrument your applications for RUM (includes Error Tracking), or Error Tracking if you have purchased it as a standalone product.
The RUM React Native SDK supports Expo and Expo Go. To use it, install expo-datadog
and @datadog/mobile-react-native
.
expo-datadog
supports Expo starting from SDK 45 and the plugin’s versions follow Expo versions. For example, if you use Expo SDK 45, use expo-datadog
version 45.x.x
. Datadog recommends using Expo SDK 45 as a minimum version; previous versions may require manual steps.
If you experience any issues setting up the Datadog SDK with an Expo application, you can see our example application as a reference.
To install with NPM, run:
npm install expo-datadog @datadog/mobile-react-native
To install with Yarn, run:
yarn add expo-datadog @datadog/mobile-react-native
To see RUM or Error Tracking sessions populate in Datadog, you need to implement view tracking, which can be initialized manually or automatically.
You can manually start and stop a view using the following startView()
and stopView()
methods.
import {
DdRum
} from 'expo-datadog';
// Start a view with a unique view identifier, a custom view name, and an object to attach additional attributes to the view
DdRum.startView(
'<view-key>', // <view-key> has to be unique, for example it can be ViewName-unique-id
'View Name',
{ '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());
Automatic view tracking is supported for the following modules:
In this Datadog example project, View Tracking is achieved through @datadog/mobile-react-navigation
and is configured using the NavigationContainer
:
<NavigationContainer
ref={navigationRef}
onReady={() => {
DdRumReactNavigationTracking.startTrackingViews(
navigationRef.current,
);
}}>
Add the following code snippet to your initialization file:
import { DdSdkReactNative, DdSdkReactNativeConfiguration } from 'expo-datadog';
const config = new DdSdkReactNativeConfiguration(
'<CLIENT_TOKEN>',
'<ENVIRONMENT_NAME>',
'<RUM_APPLICATION_ID>',
true, // track user interactions such as tapping on a button. You can use the 'accessibilityLabel' element property to give the tap action a name, otherwise the element type is reported.
true, // track XHR resources.
true // track errors.
);
// Optional: Select your Datadog website ("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, for example: 80% of sessions are sent to Datadog. Default is 100%.
config.sessionSamplingRate = 80;
// Optional: Sample tracing integrations for network calls between your app and your backend, for example: 80% of calls to your instrumented backend are linked from the RUM view to the APM view. Default is 20%.
// You need to specify the hosts of your backends to enable tracing with these backends.
config.resourceTracingSamplingRate = 80;
config.firstPartyHosts = ['example.com']; // Matches 'example.com' and subdomains like 'api.example.com'.
// Optional: Let the Datadog SDK print internal logs above or equal to the provided level. Default is undefined, which means no logs.
config.verbosity = SdkVerbosity.WARN;
await DdSdkReactNative.initialize(config);
// Once the Datadog SDK is initialized, you need to setup view tracking in order to see data in the RUM dashboard.
To control the data your application sends to Datadog RUM, you can specify a sampling rate for RUM sessions while initializing the Expo SDK. To set this rate, use the config.sessionSamplingRate
parameter and specify a percentage between 0 and 100.
If you have not enabled Crash Reporting, you can skip this step.
Add expo-datadog
to your plugins in the app.json
file:
{
"expo": {
"plugins": ["expo-datadog"]
}
}
This plugin takes care of uploading the dSYMs, source maps and Proguard mapping files on every EAS build.
Add @datadog/datadog-ci
as a development dependency. This package contains scripts to upload the source maps. You can install it with NPM:
npm install @datadog/datadog-ci --save-dev
or with Yarn:
yarn add -D @datadog/datadog-ci
Run eas secret:create
to set DATADOG_API_KEY
to your Datadog API key, and DATADOG_SITE
to the host of your Datadog site (for example, datadoghq.com
).
For information about tracking Expo crashes, see Expo Crash Reporting and Error Tracking.
If you are using Expo Router, track your screens in your app/_layout.js
file:
import { useEffect } from 'react';
import { usePathname, useSearchParams, useSegments, Slot } from 'expo-router';
export default function Layout() {
const pathname = usePathname();
const segments = useSegments();
const viewKey = segments.join('/');
useEffect(() => {
DdRum.startView(viewKey, pathname);
}, [viewKey, pathname]);
// Export all the children routes in the most basic way.
return <Slot />;
}
If you are using Expo Go, switch to development builds (recommended), or keep using Expo Go without Datadog while having it run on your standalone application (not recommended).
Your application’s development builds are debug builds that contain the expo-dev-client
package.
expo run:android
and expo run:ios
.expo install expo-dev-client
and expo start --dev-client
. This installs and starts the expo-dev-client
package to execute the added native code in dev mode.When your application runs inside of Expo Go, you are unable to add any custom native code that is not part of the Expo Go application. Because the React Native SDK relies on some custom native code to run, you can develop your application inside Expo Go without Datadog, and use Datadog in your standalone builds.
Your application crashes in Expo Go when some native code (that is not included) is called. To use Datadog with your standalone application and continue using Expo Go in development, add the following TypeScript file to your project:
// mockDatadog.ts
// Datadog does not recommend this approach, consider moving to Expo development builds instead.
// This file is not officially maintained and might not be up-to-date with new releases.
import { DdLogs, DdTrace, DdRum, DdSdkReactNative } from 'expo-datadog';
if (__DEV__) {
const emptyAsyncFunction = () => new Promise<void>(resolve => resolve());
DdLogs.debug = emptyAsyncFunction;
DdLogs.info = emptyAsyncFunction;
DdLogs.warn = emptyAsyncFunction;
DdLogs.error = emptyAsyncFunction;
DdTrace.startSpan = () =>
new Promise<string>(resolve => resolve('fakeSpanId'));
DdTrace.finishSpan = emptyAsyncFunction;
DdRum.startView = emptyAsyncFunction;
DdRum.stopView = emptyAsyncFunction;
DdRum.startAction = emptyAsyncFunction;
DdRum.stopAction = emptyAsyncFunction;
DdRum.addAction = emptyAsyncFunction;
DdRum.startResource = emptyAsyncFunction;
DdRum.stopResource = emptyAsyncFunction;
DdRum.addError = emptyAsyncFunction;
DdRum.addTiming = emptyAsyncFunction;
DdSdkReactNative.initialize = emptyAsyncFunction;
DdSdkReactNative.setUser = emptyAsyncFunction;
DdSdkReactNative.setAttributes = emptyAsyncFunction;
DdSdkReactNative.setTrackingConsent = emptyAsyncFunction;
}
Then, import it before initializing the Datadog React Native SDK:
import './mockDatadog';
import { DdSdkReactNative } from 'expo-datadog';
const config = new DdSdkReactNativeConfiguration(/* your config */);
DdSdkReactNative.initialize(config);
RUM ensures availability of data when your user device is offline. In case of low-network areas, or when the device battery is too low, all the events are first stored on the local device in batches.
Each batch follows the intake specification. They are sent as soon as the network is available, and the battery is high enough to ensure the Datadog SDK does not impact the end user’s experience. If the network is not available while your application is in the foreground, or if an upload of data fails, the batch is kept until it can be sent successfully.
This means that even if users open your application while offline, no data is lost. To ensure the SDK does not use too much disk space, the data on the disk is automatically discarded if it gets too old.
When Resource tracking is enabled and SDK verbosity is set to DEBUG
, each Resource triggers a /logs
call to the Expo dev server to print the log, which itself creates a new RUM resource, creating an infinite loop.
The most common patterns of Expo dev server host URL are filtered by the SDK, therefore, you may not encounter this error in most situations.
If this error occurs, add the following Resource mapper to filter out the calls:
import { DdSdkReactNativeConfiguration } from 'expo-datadog';
import Constants from 'expo-constants';
const config = new DdSdkReactNativeConfiguration(/* your config */);
config.resourceEventMapper = event => {
if (
event.resourceContext?.responseURL ===
`http://${Constants.expoConfig.hostUri}/logs`
) {
return null;
}
return event;
};