Sentry结合rrweb实现用户操作录屏和错误场景录屏播放重现

[xianzou]

rrweb和sentry合作，内置了这个功能；

#sentryConfig.js文件

import * as Sentry from '@sentry/react';
import { Integrations } from '@sentry/tracing';
import SentryRRWeb from '@sentry/rrweb';
const rrweb = require('rrweb');

Sentry.init({
    dsn,
    integrations: [
        new Integrations.BrowserTracing(),
        new SentryRRWeb({
            collectFonts: true,
            maskAllInputs: false, // 将所有输入内容记录为 *,sentry默认为true
            // maskInputOptions: {}, // 选择将特定类型的输入框内容记录为 *，sentry默认输入框为*号
            sampling: {
                scroll: 150, // 每 150ms 最多触发一次
                input: 'last' // 连续输入时，只录制最终值
            },
            packFn: rrweb.pack
        }),
    ],
    // eslint-disable-next-line
    release: _SENTRY_RELEASES_, //版本号，参见webpack.config.js中的define定义
    enabled: process.env.NODE_ENV !== 'development',
    // Set tracesSampleRate to 1.0 to capture 100%
    // of transactions for performance monitoring.
    // We recommend adjusting this value in production
    tracesSampleRate: 0.8
});

#使用 路由主页面引入route.js
import '../utils/sentryConfig';
#主动上报
Sentry.captureException(new Error(`${tagName}`));