反应原生拥抱 - 导航
[大
本单元要求 反应原生拥抱 SDK 财务报告和审定财务报表 页:1 反应原生拥抱追踪提供者。 。 。 .
此套件使用 Enbrace 的 React 原生 SDK 和 OpenTeleometer Tracer 提供器来收集基于 Navigation 的周边遥测数据 输出路由器, (中文(简体) ), @ react-navigation/ 本地语 财务报告和审定财务报表 反应-内在导航。 。 。 .
安装组件
无 :
npm install @embrace-io/react-native-navigation
线条 :
yarn add @embrace-io/react-native-navigation
在代码中设置
使用 expo-router数字 :
import React from 'react';
import {useEmbraceNativeTracerProvider} from "@embrace-io/react-native-tracer-provider";
import {EmbraceNavigationTracker} from "@embrace-io/react-native-navigation";
import {Stack, useNavigationContainerRef} from 'expo-router';
import {useEmbrace} from "@embrace-io/react-native";
const App = () => {
const {isStarted} = useEmbrace({
ios: {
appId: "__APP_ID__"
}
});
// The provider is something you need to configure and pass down as prop into the `<EmbraceNavigationTracker />` component
// If your choice is not to pass any custom tracer provider, the component will use the global one.
// In both cases you have to make sure a tracer provider is registered BEFORE you attempt to record the first span (otherwise some initial telemetry can be missed).
const {tracerProvider, isLoading: isLoadingTracerProvider} =
useEmbraceNativeTracerProvider({}, isStarted);
// If you do not use `expo-router` the same hook is also available in `@react-navigation/native` since `expo-router` is built on top of it.
// Make sure this ref is passed also to the navigation container at the root of your app (if not, the ref would be empty and you will get a console.warn message instead).
const expoNavigationRef = useNavigationContainerRef();
if (isLoadingTracerProvider || tracerProvider === null) {
return (
<View>
<View>
<Text>Loading Tracer Provider...</Text>
</View>
</View>
);
}
return (
<EmbraceNavigationTracker
ref={expoNavigationRef}
tracerProvider={tracerProvider}
// These static attributes will be passed into each created span
screenAttributes={{
"static.attribute": 123456,
"custom.key": "abcd...",
}}>
<Stack>
<Stack.Screen name="(tabs)" options={{headerShown: false}} />
<Stack.Screen name="+not-found" />
... rest of stack
</Stack>
</EmbraceNavigationTracker>
);
};
export default App;
如果你是纯粹使用 @ react-navigation/ 本地语数字 :
import React from 'react';
import {useEmbraceNativeTracerProvider} from "@embrace-io/react-native-tracer-provider";
import {EmbraceNavigationTracker} from "@embrace-io/react-native-navigation";
import {
NavigationContainer,
useNavigationContainerRef,
} from "@react-navigation/native";
import {createBottomTabNavigator} from "@react-navigation/bottom-tabs";
import {useEmbrace} from "@embrace-io/react-native";
import CartPage from "screens/CartPage";
import CheckoutPage from "screens/CheckoutPage";
const Tab = createBottomTabNavigator();
const App = () => {
const {isStarted} = useEmbrace({
ios: {
appId: "__APP_ID__"
}
});
// The provider is something you need to configure and pass down as prop into the `EmbraceNavigationTracker` component
// If your choice is not to pass any custom tracer provider, the <EmbraceNavigationTracker /> component will use the global one.
// In both cases you have to make sure a tracer provider is registered BEFORE you attempt to record the first span.
const {tracerProvider, isLoading: isLoadingTracerProvider} =
useEmbraceNativeTracerProvider({}, isStarted);
// Tip! as of now if you inspect the source code of `useNavigationContainerRef` from `@react-navigation/native` you will see that it returns `navigation.current` instead of the entire shape of a reference
const navigationRefVal = useNavigationContainerRef();
// We need here the entire shape, so we re-create it and pass it down into the `ref` prop for the `EmbraceNavigationTracker` component.
const navigationRef = useRef(navigationRefVal);
if (isLoadingTracerProvider || tracerProvider === null) {
return (
<View>
<View>
<Text>Loading Tracer Provider...</Text>
</View>
</View>
);
}
return (
// `NavigationContainer` is waiting for what `useNavigationContainerRef` is returning (both exported from `@react-navigation/native`)
<NavigationContainer ref={navigationRefVal}>
<EmbraceNavigationTracker
ref={navigationRef}
tracerProvider={tracerProvider}
screenAttributes={{
"static.attribute": 123456,
"custom.key": "abcd...",
}}>
<Tab.Navigator
screenOptions={{
tabBarLabelPosition: "beside-icon",
tabBarIconStyle: {display: "none"},
}}>
<Tab.Screen
name="cart"
options={{
tabBarAccessibilityLabel: "Cart",
}}
component={CartPage}
/>
<Tab.Screen
name="checkout"
options={{
tabBarAccessibilityLabel: "Checkout",
}}
component={CheckoutPage}
/>
... rest of tabs
</Tab.Navigator>
</EmbraceNavigationTracker>
</NavigationContainer>
);
};
export default App;
注:如果使用 @ react-navigation/ 本地语 您需要将您的整个应用程序与 NavigationTracker 内容载于其正式文件.
使用时 反应-内在导航 您也可以跟踪导航变化.
一定要把入口的视图包起来 <EmbraceNativeNavigationTracker /> 组件并尽快初始化嵌入,以避免丢失遥测数据.
// index.ts
import React, {useRef} from "react";
import {EmbraceNativeTracerProvider} from "@embrace-io/react-native-tracer-provider";
import {TracerProvider} from "@opentelemetry/api";
import {EmbraceNativeNavigationTracker} from "@embrace-io/react-native-navigation";
import {initialize} from "@embrace-io/react-native";
import {Navigation} from "react-native-navigation";
import {HomeScreen} from "screens/HomeScreen";
const initApp = async () => {
// this example is showing how we can initialize Embrace not using hooks
await initialize({
sdkConfig: {
ios: {appId: "__APP_ID__"},
},
});
let embraceTracerProvider: TracerProvider;
try {
embraceTracerProvider = new EmbraceNativeTracerProvider();
} catch (e) {
console.log(
"Error creating `EmbraceNativeTracerProvider`. Will use global tracer provider instead",
e,
);
}
Navigation.registerComponent(
"HomeScreen",
() =>
(props) => {
// make sure to wrap the events registry instance in a React ref
const navRef = useRef(Navigation.events());
return (
<EmbraceNativeNavigationTracker
ref={navRef}
tracerProvider={embraceTracerProvider}
screenAttributes={{
"test.attr": 98765,
dev: true,
}}>
<HomeScreen {...props} />
</EmbraceNativeNavigationTracker>
);
},
() => HomeScreen,
);
// ... rest of registration and configuration
};
// root of the app
initApp();
禁用本地屏幕的自动跟踪
拥抱还自动收集本地屏幕, 如果您不想在会话中看到本地组件, 您可以禁用它 :
Java 脚本
const App = () => {
const {isPending, isStarted} = useEmbrace({
ios: {
appId: "__APP_ID__",
disableAutomaticViewCapture: true, // disabling the feature just for iOS
},
});
if (isPending) {
return (
<View>
<Text>Loading Embrace</Text>
</View>
);
} else {
if (!isStarted) {
console.log('An error occurred during Embrace initialization');
}
}
// regular content of the application
return (
...
);
}
export default App
机器人
转到你的 embrace-config.json 内部 android/app/src/main 编辑 sdk_config 键.
通过这些更改, 您的文件至少应该看起来如下 :
{
"app_id": "APP_ID",
"api_token": "API_TOKEN",
"sdk_config": {
"app_framework": "react_native",
"view_config": {
"enable_automatic_activity_capture": false // disabling automatic capture
}
}
}
iOS: (英语)
如果您使用自动安装脚本或遵循手动步骤设置了iOS SDK,那么您可以
修改设置在 EmbraceInitializer.swift 删除视图抓取服务,参见 配置 iOS SDK
详情:
import Foundation
import EmbraceIO
import EmbraceCrash
@objcMembers class EmbraceInitializer: NSObject {
static func start() -> Void {
do {
try Embrace
.setup(
options: Embrace.Options(
appId: "__APP_ID__",
platform: .reactNative,
captureServices: CaptureServiceBuilder()
.addDefaults()
.remove(ofType: ViewCaptureService.self)
.build(),
crashReporter: EmbraceCrashReporter()
)
)
.start()
} catch let e {
print("Error starting Embrace \(e.localizedDescription)")
}
}
}