├── README.md └── sentry.js /README.md: -------------------------------------------------------------------------------- 1 | ### 部署版本Sentry 24.9.0 2 | 3 | ##### React 安装"@sentry/react": "8.31.0" 4 | -------------------------------------------------------------------------------- /sentry.js: -------------------------------------------------------------------------------- 1 | import * as Sentry from "@sentry/react"; 2 | 3 | // sentry 版本对应 24.9.0 4 | Sentry.init({ 5 | environment: process.env, // 环境 6 | dsn: "https://ba77f1d3a97b52c9842665351cb8c128@sentry.test.io/3", // 项目DSN 7 | integrations: [ 8 | Sentry.browserTracingIntegration(), // 开启浏览器性能监控 9 | Sentry.browserProfilingIntegration(), // 开启浏览器性能分析 10 | Sentry.replayIntegration({ // 开启会话重放 11 | stickySession: true, // 无论页面是否刷新，都会跟踪用户。请注意，关闭标签页会结束会话，因此使用多个标签页的单个用户将被记录为多个会话。 12 | mutationLimit: 1500, // 会话录屏停止录制之前要处理的突变的上限 13 | mutationBreadcrumbLimit: 1000, // 会话录屏发送 页面发生较大突变之前要处理的突变上限 14 | minReplayDuration: 5000, // 会话录屏时常（以毫秒为单位）。最大值为 15000。 15 | workerUrl: undefined, // 用于压缩重放数据的自托管工作器的 URL 16 | networkDetailAllowUrls: [], //捕获 XHR 的请求和响应详细信息并获取与给定 URL 匹配的请求。 17 | networkCaptureBodies: true, // 决定是否捕获 networkDetailAllowUrls 中定义的 URL 的请求和响应主体。 18 | networkDetailDenyUrls: [], // 不捕获这些 URL 的请求和响应详细信息。优先于 networkDetailAllowUrls。 19 | slowClickIgnoreSelectors: [], //忽略与给定 CSS 选择器匹配的元素上的快速或者慢速点击检测。 20 | maskAllText: false, // 隐私保护 文字 屏蔽 21 | blockAllMedia: false, // 隐私保护 视频 屏蔽 22 | }), 23 | ], 24 | maxBreadcrumbs: 50, // 面包屑最大数量 25 | useCompression: true, // 是否使用压缩 默认就是开启，设置参数不管用 26 | beforeBreadcrumb: (breadcrumb) => { 27 | // 如果是 console 日志 28 | if (breadcrumb.category === 'console') { 29 | // 如果数据太长，进行截断 30 | if (breadcrumb.message && breadcrumb.message.length > 500) { 31 | breadcrumb.message = breadcrumb.message.substring(0, 500) + '...'; 32 | } 33 | // 可以选择性地过滤掉一些不重要的日志级别 34 | if (breadcrumb.level === 'debug') { 35 | return null; // 返回 null 将会丢弃这条日志 36 | } 37 | } 38 | // 如果是 xhr/fetch 请求 39 | if (breadcrumb.category === 'xhr' || breadcrumb.category === 'fetch') { 40 | // 可以清理或压缩数据 41 | if (breadcrumb.data) { 42 | delete breadcrumb.data.headers; // 删除请求头信息 43 | if (breadcrumb.data.body && breadcrumb.data.body.length > 1000) { 44 | breadcrumb.data.body = '[BODY_TOO_LARGE]'; 45 | } 46 | } 47 | } 48 | 49 | return breadcrumb; 50 | }, 51 | tracesSampleRate: 1.0, // 采样率:监控追踪数据100%采集 52 | tracePropagationTargets: [/ida-it\.com/i, /tapbit\.(?:io|tw|com|net)/i], // 仅对指定域名的请求进行追踪(域名+path) 53 | profilesSampleRate: 1.0, // 采样率:性能数据100%采集 54 | replaysSessionSampleRate: 0.1, // 采样率:会话重放数据10%采集 55 | replaysOnErrorSampleRate: 1.0, // 采样率:错误重放数据100%采集 56 | }); 57 | 58 | window.Sentry = Sentry 59 | 60 | // 数据埋点 自定义参数 61 | // 1、 Sentry.init 配置 62 | Sentry.init({ 63 | // 添加默认标签 64 | defaultTags: { 65 | environment: 'production', 66 | platform: 'web' 67 | }, 68 | // 添加默认上下文 69 | initialScope: { 70 | tags: { version: '1.0.0' }, 71 | user: { role: 'user' }, 72 | extras: { region: 'CN' } 73 | }, 74 | }); 75 | 76 | /**********************/ 77 | 78 | // 2、 设置全局用户信息或者用户相关参数 79 | Sentry.setUser({ 80 | id: '1111', 81 | email:'userEmail', 82 | role: 'userRole' 83 | }); 84 | 85 | // 管理后台Issues 中通过 user.id:11111 来查询 86 | 87 | // 设置全局标签 88 | Sentry.setTag('app_version', '1.0.0'); 89 | Sentry.setTags({ 90 | platform: 'web', 91 | region: 'asia' 92 | }); 93 | 94 | // 设置全局额外信息 95 | Sentry.setExtra('deployEnvironment', 'staging'); 96 | Sentry.setExtras({ 97 | serverRegion: 'east-asia', 98 | buildTime: process.env.BUILD_TIME 99 | }); 100 | 101 | /*********************/ 102 | 103 | // 3、使用 beforeSend 钩子添加通用数据 104 | Sentry.init({ 105 | beforeSend(event, hint) { 106 | // 添加自定义上下文 107 | event.extra = { 108 | ...event.extra, 109 | deviceInfo: getDeviceInfo(), 110 | userAgent: navigator.userAgent, 111 | timestamp: new Date().toISOString() 112 | }; 113 | 114 | // 添加自定义标签 115 | event.tags = { 116 | ...event.tags, 117 | appVersion: process.env.VERSION, 118 | buildNumber: process.env.BUILD_NUMBER 119 | }; 120 | 121 | // 可以过滤或修改事件 122 | if (event.exception) { 123 | event.fingerprint = ['{{ default }}', event.exception.values[0].type]; 124 | } 125 | 126 | return event; 127 | } 128 | }); 129 | 130 | // 自定义事件上报 类似于 数据 埋点 131 | Sentry.captureEvent({ 132 | message: "用户切换主题", 133 | level: "info", 134 | tags: { 135 | button_id: "theme_button", 136 | user_type: "vip" 137 | }, 138 | extra: { 139 | theme: newTheme, 140 | currency: "CNY" 141 | } 142 | }); 143 | 144 | -上报延迟策略- 145 | 146 | 对于 Sentry 的数据上报，包括错误、性能监控和回放录屏，通常不是立即上报。这是因为立即上报每个小的数据点会导致大量的网络请求，这不仅影响应用的性能，还可能导致服务器的过载。因此，Sentry 设计了一种更加高效的数据上报机制： 147 | 1. 批量上报：Sentry 客户端会收集一定量的数据或在一定时间内积累数据后，再统一发送到服务器。这种方法可以减少网络请求的次数，从而减轻服务器的压力并提高客户端性能。 148 | 2. 异步上报：数据的发送通常是异步进行的，这意味着它不会阻塞主线程的其他操作。这对于保持应用的响应性和流畅性至关重要。 149 | 3. 智能调整：在网络状况不佳或设备性能低下时，Sentry 客户端可能会调整数据发送的策略，例如延迟发送或减少发送的数据量。 150 | Sentry 的回放录屏功能（Session Replay）默认采用批量和延迟上报的方式，以优化性能和减少对用户体验的影响。如果你希望调整这种上报行为，使其能够更快地上报数据，可以通过配置 Sentry 客户端的相关设置来尝试实现。 151 | 调整上报策略;虽然 Sentry 官方文档中没有直接提供将回放录屏数据设置为立即上报的选项，但你可以通过以下方式尝试优化数据上报的及时性： 152 | 1. 减少批量大小：通过调整批量上报的大小，可以使数据更频繁地发送。这可以通过调整 maxBreadcrumbs 或相关配置来尝试实现。 153 | 2. 调整会话结束策略：Sentry 会在会话结束时发送所有未发送的数据。你可以通过程序逻辑控制会话的结束时机，从而触发数据的发送。 154 | 3. 使用 Flush API：Sentry SDK 提供了 flush() 方法，该方法可以用来手动触发数据的发送。你可以在关键时刻调用此方法，以确保数据尽快被发送到服务器。 155 | 156 | --------------------------------------------------------------------------------