反应-国内监测 react-navigation 组件

数据犬 真正的用户监测( RUM) 您可以直观分析您的应用程序的个人用户的实时性能和用户行程。 此特定一揽子方案增加了对 react-navigation 图书馆.

设置

说明: 此软件包是用于 react-navigation 库中,请确保您首先安装和设置核心 mobile-react-native SDK(英语:SDK).

要安装国家预防机制,运行:

npm install @datadog/mobile-react-navigation

要安装 Yarn, 请运行 :

yarn add @datadog/mobile-react-navigation

轨道视图导航

要按照 RUM 视图跟踪导航的变化,请设定 onReady 调用您的 NavigationContainer 构成部分如下。 您可以使用可选 NavigationTrackingOptions 参数来替换跟踪器在视图、其名称和导航参数方面的默认行为.

import * as React from 'react';
import { DdRumReactNavigationTracking, ParamsTrackingPredicate, ViewNamePredicate, ViewTrackingPredicate } from '@datadog/mobile-react-navigation';
import { Route } from "@react-navigation/native";

// Sets a custom name for a tracked view
const viewNamePredicate: ViewNamePredicate = function customViewNamePredicate(route: Route<string, any | undefined>, trackedName: string) {
  return "My custom View Name"
}

// Decides if a view should be tracked or not
const viewTrackingPredicate: ViewTrackingPredicate = function customViewTrackingPredicate(route: Route<string, any | undefined>) { 
  if (route.name === "AlertModal") {
    return false;
  }

  return true;
}

// Allows to define what navigation parameters should be tracked for a specific view
const paramsTrackingPredicate: ParamsTrackingPredicate = function customParamsTrackingPredicate(route: Route<string, any | undefined>) { 
  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,
}

function App() {
  const navigationRef = React.useRef(null);
  return (
    <View>
      <NavigationContainer ref={navigationRef} onReady={() => {
        DdRumReactNavigationTracking.startTrackingViews(navigationRef.current, navigationTrackingOptions)
      }}>
        // …
      </NavigationContainer>
    </View>
  );
}

这些上游是可选的,当不设置默认行为时,将被用于其中每一个. 默认行为如下:

• 视图Name Predicate - 将给定的视图名称直接转发给 RUM .
• 查看跟踪 Predicate - 跟踪 RUM 上的所有视图.
• 参数跟踪 Predicate - 不向 RUM 转发任何参数 .

说明: 只有一个 NavigationContainer 可以追踪到当时。 如果您需要跟踪另一个容器, 请先停止跟踪前一容器, 使用 DdRumReactNavigationTracking.stopTrackingViews()。 。 。 .