qidao123.com技术社区-IT企服评测·应用市场

标题: 接入 Sentry 实现前端的非常上报 [打印本页]

---

作者: 罪恶克星    时间: 2025-2-23 21:32
标题: 接入 Sentry 实现前端的非常上报
接入 Sentry 实现前端的非常上报是一个常见的做法，用于捕获和监控前端应用中的错误和非常，以便更好地明白和解决生产环境中的问题。以下是如安在常见的前端框架（如 React、Vue 和 Angular）中接入 Sentry 的步骤。
1. 注册并获取 Sentry DSN

• 访问 Sentry 官网 并注册一个账号。
  
• 创建一个新的项目，并获取项目的 DSN（Data Source Name）。DSN 是你用来设置 Sentry SDK 的唯一标识符。
  

2. 安装 Sentry SDK

React

• 使用 npm 或 yarn 安装 Sentry SDK：
  
  1. npm install @sentry/react @sentry/browser
  2. # 或者
  3. yarn add @sentry/react @sentry/browser

  复制代码
• 在你的应用入口文件（如 index.js 或 App.js）中初始化 Sentry：
  
  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import App from './App';
  4. import * as Sentry from '@sentry/react';
  6. // 使用你的 Sentry DSN 初始化 Sentry
  7. Sentry.init({
  8.   dsn: 'YOUR_DSN_HERE',
  9.   // 其他配置选项
  10. });
  12. ReactDOM.render(
  13.   <React.StrictMode>
  14.     <App />
  15.   </React.StrictMode>,
  16.   document.getElementById('root')
  17. );

  复制代码

Vue

• 使用 npm 或 yarn 安装 Sentry SDK：
  
  1. npm install @sentry/vue @sentry/browser
  2. # 或者
  3. yarn add @sentry/vue @sentry/browser

  复制代码
• 在你的应用入口文件（如 main.js）中初始化 Sentry：
  
  1. import Vue from 'vue';
  2. import App from './App.vue';
  3. import * as Sentry from '@sentry/vue';
  4. import * as SentryBrowser from '@sentry/browser';
  6. // 使用你的 Sentry DSN 初始化 Sentry
  7. Sentry.init({
  8.   dsn: 'YOUR_DSN_HERE',
  9.   // 其他配置选项
  10.   integrations: [
  11.     new SentryBrowser.Integrations.Vue({
  12.       Vue,
  13.       attachProps: true, // 附加 Vue 组件的 props 到错误报告中
  14.       logErrors: true,   // 在控制台记录错误
  15.     }),
  16.   ],
  17. });
  19. new Vue({
  20.   render: h => h(App),
  21. }).$mount('#app');

  复制代码

3. 设置 Sentry（可选）

根据需求，你可以进一步设置 Sentry，例如：

• 设置用户上下文：捕获用户信息（如用户名、ID 等）。
  
• 捕获额外的面包屑（Breadcrumbs）：记录用户在触发错误之前的行为。
  
• 自界说错误处理：添加额外的信息或条件判断。
  

1. Sentry.configureScope((scope) => {
2.   scope.setUser({
3.     id: 'user_id_123',
4.     username: 'user_name_123',
5.     email: 'user@example.com',
6.   });
8.   scope.addBreadcrumb({
9.     message: 'User did something',
10.     category: 'user',
11.     level: Sentry.Severity.Info,
12.   });
13. });

复制代码

4. 测试并验证

• 部署你的应用。
  
• 触发一些错误（如故意写一些会导致错误的代码）。
  
• 检查 Sentry 仪表板，确保错误被正确捕获和记录。
  

通过这些步骤，你就可以在前端应用中接入 Sentry 并实现非常上报。Sentry 提供了丰富的功能和设置选项，资助你更好地监控和管理前端应用的错误和非常。


免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

---

欢迎光临 qidao123.com技术社区-IT企服评测·应用市场 (https://dis.qidao123.com/)

Powered by Discuz! X3.4