- 필수 기능
- 시작하기
- Glossary
- 표준 속성
- Guides
- Agent
- 통합
- 개방형텔레메트리
- 개발자
- API
- Datadog Mobile App
- CoScreen
- Cloudcraft
- 앱 내
- 서비스 관리
- 인프라스트럭처
- 애플리케이션 성능
- APM
- Continuous Profiler
- 스팬 시각화
- 데이터 스트림 모니터링
- 데이터 작업 모니터링
- 디지털 경험
- 소프트웨어 제공
- 보안
- AI Observability
- 로그 관리
- 관리
This page lists integrated libraries you can use for React Native applications.
Note: This package is an integration for react-navigation
library, please make sure you first install and setup the core mobile-react-native
SDK.
To install with NPM, run:
npm install @datadog/mobile-react-navigation
To install with Yarn, run:
yarn add @datadog/mobile-react-navigation
To track changes in navigation as RUM Views, set the onReady
callback of your NavigationContainer
component as follow. You can use the optional ViewNamePredicate
parameter to replace the automatically detected View name with something more relevant to your use case.
Returning null
in the ViewNamePredicate
prevents the new RUM View from being created. The previous RUM View remains active.
import * as React from 'react';
import { DdRumReactNavigationTracking, ViewNamePredicate } from '@datadog/mobile-react-navigation';
import { Route } from "@react-navigation/native";
const viewNamePredicate: ViewNamePredicate = function customViewNamePredicate(route: Route<string, any | undefined>, trackedName: string) {
return "My custom View Name"
}
function App() {
const navigationRef = React.useRef(null);
return (
<View>
<NavigationContainer ref={navigationRef} onReady={() => {
DdRumReactNavigationTracking.startTrackingViews(navigationRef.current, viewNamePredicate)
}}>
// …
</NavigationContainer>
</View>
);
}
Note: Only one NavigationContainer
can be tracked at the time. If you need to track another container, stop tracking the previous one first, using DdRumReactNavigationTracking.stopTrackingViews()
.
Note: This package is an integration for react-native-navigation
library. Please make sure you first install and setup the core mobile-react-native
SDK.
To install with NPM, run:
npm install @datadog/mobile-react-native-navigation
To install with Yarn, run:
yarn add @datadog/mobile-react-native-navigation
To start tracking your navigation events, add the following lines before setting up your navigation. You can use the optional ViewNamePredicate
callback to replace the automatically detected View name with something more relevant to your use case, based on the ComponentDidAppearEvent
.
Returning null in the ViewNamePredicate
prevents the new RUM View from being created. The previous RUM View remains active.
import { DdRumReactNativeNavigationTracking, ViewNamePredicate } from '@datadog/mobile-react-native-navigation';
import { ComponentDidAppearEvent } from 'react-native-navigation';
const viewNamePredicate: ViewNamePredicate = function customViewNamePredicate(event: ComponentDidAppearEvent, trackedName: string) {
return "My custom View Name"
}
DdRumReactNativeNavigationTracking.startTracking(viewNamePredicate);
Note: This package is an integration for the @apollo/client
library. Please make sure you first install and set up the core mobile-react-native
SDK.
To install with NPM, run:
npm install @datadog/mobile-react-native-apollo-client
To install with Yarn, run:
yarn add @datadog/mobile-react-native-apollo-client
If you initialize your ApolloClient
with the uri
parameter, initialize it with a HttpLink
:
import { ApolloClient, HttpLink } from '@apollo/client';
// before
const apolloClient = new ApolloClient({
uri: 'https://my.api.com/graphql'
});
// after
const apolloClient = new ApolloClient({
link: new HttpLink({ uri: 'https://my.api.com/graphql' })
});
Import DatadogLink
from @datadog/mobile-react-native-apollo-client
and use it in your ApolloClient
initialization:
import { ApolloClient, from, HttpLink } from '@apollo/client';
import { DatadogLink } from '@datadog/mobile-react-native-apollo-client';
const apolloClient = new ApolloClient({
link: from([
new DatadogLink(),
new HttpLink({ uri: 'https://my.api.com/graphql' }) // always in last position
])
});
For more information on Apollo Client Links, see the official documentation.
Use a resourceEventMapper
in your Datadog configuration to remove sensitive data from GraphQL variables:
const datadogConfiguration = new DatadogProviderConfiguration(
'<CLIENT_TOKEN>',
'<ENVIRONMENT_NAME>',
'<RUM_APPLICATION_ID>',
true,
true,
true
);
datadogConfiguration.resourceEventMapper = event => {
// Variables are stored in event.context['_dd.graphql.variables'] as a JSON string when present
if (event.context['_dd.graphql.variables']) {
const variables = JSON.parse(event.context['_dd.graphql.variables']);
if (variables.password) {
variables.password = '***';
}
event.context['_dd.graphql.variables'] = JSON.stringify(variables);
}
return event;
};
추가 유용한 문서, 링크 및 기사: