React/Sentry 集成指南

集成 Sentry 到你的 React 项目中可以帮助你更好地监控和分析应用错误。以下是一些基本步骤：

安装 Sentry

首先，确保你已经安装了 @sentry/react 和 @sentry/browser。你可以通过以下命令进行安装：

npm install @sentry/react @sentry/browser

配置 Sentry

在项目的入口文件（通常是 src/index.js 或 src/index.tsx）中配置 Sentry：

import * as Sentry from '@sentry/react';
import * as React from 'react';

Sentry.init({
  dsn: '你的 Sentry DSN',
});

使用 React 组件

在 React 组件中使用 useSentry 钩子来报告错误：

import React from 'react';
import { useSentry } from '@sentry/react';

function MyComponent() {
  useSentry();

  const handleClick = () => {
    throw new Error('Something went wrong!');
  };

  return (
    <button onClick={handleClick}>Click me</button>
  );
}

监控性能

Sentry 还可以监控你的 React 应用性能。你可以在项目中安装 @sentry/tracing 来启用性能跟踪：

npm install @sentry/tracing

然后，在入口文件中配置跟踪：

import * as Sentry from '@sentry/tracing';

Sentry.init({
  dsn: '你的 Sentry DSN',
  integrations: [new Sentry.Tracing.Integrations.BrowserTracing()],
  tracesSampleRate: 1.0,
});

更多信息

想了解更多关于 React/Sentry 集成的信息，可以查看官方文档.

React logo