diff --git a/example/src/App.tsx b/example/src/App.tsx index c29982a97..831d68fd6 100644 --- a/example/src/App.tsx +++ b/example/src/App.tsx @@ -12,13 +12,41 @@ import { Route } from "@react-navigation/native"; import { NestedNavigator } from './screens/NestedNavigator/NestedNavigator'; import { getDatadogConfig, onDatadogInitialization } from './ddUtils'; import { TrackingConsent } from '@datadog/mobile-react-native'; +import { NavigationTrackingOptions, ParamsTrackingPredicate, ViewTrackingPredicate } from '@datadog/mobile-react-navigation/src/rum/instrumentation/DdRumReactNavigationTracking'; const Tab = createBottomTabNavigator(); -const viewPredicate: ViewNamePredicate = function customViewNamePredicate(route: Route, trackedName: string) { +// === Navigation Tracking custom predicates +const viewNamePredicate: ViewNamePredicate = function customViewNamePredicate(route: Route, trackedName: string) { return "Custom RN " + trackedName; } +const viewTrackingPredicate: ViewTrackingPredicate = function customViewTrackingPredicate(route: Route) { + if (route.name === "AlertModal") { + return false; + } + + return true; +} + +const paramsTrackingPredicate: ParamsTrackingPredicate = function customParamsTrackingPredicate(route: Route) { + const filteredParams: any = {}; + if (route.params?.creditCardNumber) { + filteredParams["creditCardNumber"] = "XXXX XXXX XXXX XXXX"; + } + + if (route.params?.username) { + filteredParams["username"] = route.params.username; + } + + return filteredParams; +} + +const navigationTrackingOptions: NavigationTrackingOptions = { + viewNamePredicate, + viewTrackingPredicate, + paramsTrackingPredicate, +} // === Datadog Provider Configuration schemes === // 1.- Direct configuration @@ -39,7 +67,9 @@ export default function App() { return ( { - DdRumReactNavigationTracking.startTrackingViews(navigationRef.current, viewPredicate) + DdRumReactNavigationTracking.startTrackingViews( + navigationRef.current, + navigationTrackingOptions) }}> { - return 'Custom RNN ' + trackedName; -}; +// === Navigation Tracking custom predicates +const viewNamePredicate: ViewNamePredicate = function customViewNamePredicate(_event: ComponentDidAppearEvent, trackedName: string) { + return "Custom RN " + trackedName; +} + +const viewTrackingPredicate: ViewTrackingPredicate = function customViewTrackingPredicate(event: ComponentDidAppearEvent) { + if (event.name === "AlertModal") { + return false; + } + + return true; +} + +const paramsTrackingPredicate: ParamsTrackingPredicate = function customParamsTrackingPredicate(event: ComponentDidAppearEvent) { + const filteredParams: any = {}; + if (event.passProps?.creditCardNumber) { + filteredParams["creditCardNumber"] = "XXXX XXXX XXXX XXXX"; + } + + if (event.passProps?.username) { + filteredParams["username"] = event.passProps.username; + } + + return filteredParams; +} + +const navigationTrackingOptions: NavigationTrackingOptions = { + viewNamePredicate, + viewTrackingPredicate, + paramsTrackingPredicate, +} function startReactNativeNavigation() { - DdRumReactNativeNavigationTracking.startTracking(viewPredicate); + DdRumReactNativeNavigationTracking.startTracking(navigationTrackingOptions); registerScreens(); Navigation.events().registerAppLaunchedListener(async () => { Navigation.setRoot({ @@ -80,7 +105,12 @@ const HomeScreen = props => { title="About" onPress={() => { Navigation.push(props.componentId, { - component: { name: 'About' } + component: { name: 'About', + passProps: { + username: "test", + creditCardNumber: "4242 4242 4242 4242" + } + } }); }} /> diff --git a/example/src/screens/NestedNavigator/ScreenWithLinks.tsx b/example/src/screens/NestedNavigator/ScreenWithLinks.tsx index 965236fd6..7419331cb 100644 --- a/example/src/screens/NestedNavigator/ScreenWithLinks.tsx +++ b/example/src/screens/NestedNavigator/ScreenWithLinks.tsx @@ -5,6 +5,6 @@ import {useNavigation} from '@react-navigation/native' export const ScreenWithLinks = (props: {links: { routeName: string}[]}) => { const {navigate} = useNavigation() return (<> - {props.links.map(link =>