配置 Sentry

在应用中 Sentry接入 Sentry 后，就可以自动检测并监控 JavaScript 中发生的错误。通过这样做，可以提高应用的稳定性，并为用户提供更好的体验。

WebView 中接入 Sentry

Sentry 官方指南请参考进行接入。

1. Sentry 初始设置

Sentry 官方指南请参考并在应用中初始化 Sentry。

由于在 Apps in Toss 环境中无法使用原生错误追踪功能， enableNative 选项 false必须设置为。

不支持原生错误追踪

在 Apps in Toss 环境中只能追踪 JavaScript 错误。

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

Sentry.init({
  // ...
  enableNative: false,
});

2. 安装 Sentry 插件

请在项目根目录中，根据所使用的包管理器执行相应命令来安装 Sentry 插件。

npm

npm install @granite-js/plugin-sentry

pnpm

pnpm install @granite-js/plugin-sentry

yarn

yarn add @granite-js/plugin-sentry

3. 配置插件

将已安装的 @granite-js/plugin-sentry添加到 granite.config.ts 文件的 plugins 项中。在 Apps in Toss 环境中， useClient 选项必须 false设置为。

为什么 useClient 要关闭该选项？

useClient添加到 false设置为后，应用构建时不会自动将 source map 上传到 Sentry。在 Apps in Toss 环境中，构建后需要 手动上传 source map，因此需要关闭该选项。

import { defineConfig } from '@granite-js/react-native/config';
import { sentry } from '@granite-js/plugin-sentry'; // [!code highlight]
import { appsInToss } from '@apps-in-toss/framework/plugins';

export default defineConfig({
  // ...,
  plugins: [
    sentry({ useClient: false }), // [!code highlight]
    appsInToss({
      // ...
    }),
  ],
});

4. 发布应用

应用的发布方法请参考 迷你应用发布 文档。

5. 向 Sentry 上传 source map

为了准确追踪已发布迷你应用的错误，请将构建后生成的 source map 上传到 Sentry。

执行下面的命令后，source map 就会被上传。

输入值说明

• <API_KEY>: 在 Apps in Toss 控制台中发放的 API 密钥。
• <APP_NAME>: 在 Sentry 中注册的服务名称。
• <DEPLOYMENT_ID>: 应用部署时使用的部署 ID。

npm

npx ait sentry upload-sourcemap \\
  --api-key <API_KEY> \\
  --app-name <APP_NAME> \\
  --deployment-id <DEPLOYMENT_ID>

pnpm

pnpm ait sentry upload-sourcemap \\
  --api-key <API_KEY> \\
  --app-name <APP_NAME> \\
  --deployment-id <DEPLOYMENT_ID>

yarn

yarn ait sentry upload-sourcemap \\
  --api-key <API_KEY> \\
  --app-name <APP_NAME> \\
  --deployment-id <DEPLOYMENT_ID>

执行命令后，会要求输入 Sentry 的组织（Org）、项目（Project）和认证令牌。输入所有信息后，该服务的 source map 就会上传到 Sentry。