使用 Sentry

注册 Sentry 账户并创建项目

¥Sign up for a Sentry account and create a project

在继续安装 Sentry 之前，你需要确保已创建 Sentry 账户和项目：

¥Before proceeding with installing Sentry, you'll need to make sure you have created a Sentry account and project:

一旦你拥有了这些：组织 slug、项目名称、DSN 和身份验证令牌，你就可以继续了。

¥Once you have each of these: organization slug, project name, DSN, and auth token, you're all set to proceed.

安装@sentry/react-native

¥Install @sentry/react-native

在项目目录中运行以下命令来安装来自 Sentry 团队的官方 React Native 库：

¥Run the following command in your project directory to install the official React Native library from the Sentry team:

应用配置

¥App configuration

配置 @sentry/react-native 可以通过配置插件完成。将插件添加到项目的 应用配置 文件中：

¥Configuring @sentry/react-native can be done through the config plugin. Add the plugin to your project's app config file:

{
"expo": {
  "plugins": [
    [
      "@sentry/react-native/expo",
      {
        "organization": "sentry org slug, or use the `SENTRY_ORG` environment variable",
        "project": "sentry project name, or use the `SENTRY_PROJECT` environment variable",
        // If you are using a self-hosted instance, update the value of the url property
        // to point towards your self-hosted instance. For example, https://self-hosted.example.com/.
        "url": "https://sentry.io/"
      }
    ]
  ]
}
}

接下来，在你想要创建版本并将源映射上传到 Sentry 的环境中，你需要将 SENTRY_AUTH_TOKEN 环境变量设置为 Sentry 身份验证令牌。如果你使用 EAS Build，则可以通过 创建名为 SENTRY_AUTH_TOKEN 的密钥 设置环境变量。

¥Next, in an environment where you want to create releases and upload sourcemaps to Sentry, you will need to set the SENTRY_AUTH_TOKEN environment variable to your Sentry auth token. If you are using EAS Build, you can set the environment variable by creating a secret named SENTRY_AUTH_TOKEN.

Sentry 身份验证令牌应安全存储。不要将其提交到公共存储库，并像对待任何其他敏感 API 密钥一样对待它。

更新 Metro 配置

¥Update Metro configuration

Sentry 连接到 Metro 以将 "调试 ID" 注入到源映射中。此调试 ID 用于将源映射与版本关联起来。要启用此功能，你需要将以下内容添加到 Metro.config.js（如果你还没有该文件，请在项目的根目录中创建它）：

¥Sentry hooks into Metro to inject a "debug ID" into your source maps. This debug ID is used to associate source maps with releases. To enable this, you need to add the following to your metro.config.js (if you don't have the file yet, create it in the root of your project):

// This replaces `const { getDefaultConfig } = require('expo/metro-config');`
const { getSentryExpoConfig } = require('@sentry/react-native/metro');

// This replaces `const config = getDefaultConfig(__dirname);`
const config = getSentryExpoConfig(__dirname);

module.exports = config;

初始化哨兵

¥Initialize Sentry

import { Slot, useNavigationContainerRef } from 'expo-router';
import { useEffect } from 'react';
import * as Sentry from '@sentry/react-native';
import { isRunningInExpoGo } from 'expo';

// Construct a new integration instance. This is needed to communicate between the integration and React
const navigationIntegration = Sentry.reactNavigationIntegration({
enableTimeToInitialDisplay: !isRunningInExpoGo(),
});

Sentry.init({
dsn: 'YOUR DSN HERE',
debug: true, // If `true`, Sentry will try to print out useful debugging information if something goes wrong with sending the event. Set it to `false` in production
tracesSampleRate: 1.0, // Set tracesSampleRate to 1.0 to capture 100% of transactions for tracing. Adjusting this value in production.
integrations: [
  // Pass integration
  navigationIntegration,
],
enableNativeFramesTracking: !isRunningInExpoGo(), // Tracks slow and frozen frames in the application
});

function RootLayout() {
// Capture the NavigationContainer ref and register it with the integration.
const ref = useNavigationContainerRef();

useEffect(() => {
  if (ref?.current) {
    navigationIntegration.registerNavigationContainer(ref);
  }
}, [ref]);

return <Slot />;
}

// Wrap the Root Layout route component with `Sentry.wrap` to capture gesture info and profiling data.
export default Sentry.wrap(RootLayout);

import * as Sentry from '@sentry/react-native';

Sentry.init({
dsn: 'YOUR DSN HERE',
debug: true, // If `true`, Sentry will try to print out useful debugging information if something goes wrong with sending the event. Set it to `false` in production
});

import * as Sentry from '@sentry/react-native';

// Your App component here

export default Sentry.wrap(App);

验证配置

¥Verify the configuration

创建应用的新版本并验证它是否正确上传源映射。你可能想在应用中添加一个按钮来测试它是否正常工作以及源映射是否按预期连接，例如：

¥Create a new release build of your app and verify that it uploads source maps correctly. You may want to add a button in your app to test that it is working and sourcemaps are wired up as expected, for example:

import { Button } from 'react-native';

// Inside some component
<Button title="Press me" onPress={() => { throw new Error('Hello, again, Sentry!'); }}/>