sentry配置和错误主动上报实例

sentryConfig.js

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

// 判断是不是公司环境
const checkCompanyEnvironment = () => {
    const { origin, pathname } = location;

    if (!origin){
        return false;
    }
    return origin.indexOf('192') !== -1 || origin.indexOf('test') !== -1 || pathname.indexOf('test') !== -1;
};

const companyEnvironment = checkCompanyEnvironment();

let dsn = 'http://6243863631bd4d95abd78ddb38c610b5@192.168.0.156:9000/6';

if (process.env.NODE_ENV !== 'development' && !companyEnvironment){
    dsn = 'http://6243863631bd4d95abd78ddb38c610b5@183.250.160.154:9000/6';
}
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
});

sentryCaptureException.js

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

// 主动异常上报
export const captureException = error => {
    Sentry.captureException(error);
};
// 捕获消息
export const captureMessage = msg => {
    Sentry.captureMessage(msg);
};

// 设置附加数据
export const withScopeCaptureException = (tagName, setExtraKey, body) => {
    Sentry.withScope(scope => {
        const otherData = {};

        otherData[`other_${setExtraKey}`] = {};
        for (const key in body) {
            // eslint-disable-next-line
            if (body.hasOwnProperty(key)) {
                // const element = object[key];
                if (typeof body[key] === 'object'){
                    Sentry.setExtra(`${setExtraKey}_${key}`, body[key]);
                } else {
                    otherData[`other_${setExtraKey}`][key] = body[key];
                }

            }
        }
        Sentry.setExtra(`${setExtraKey}_other`, otherData[`other_${setExtraKey}`]);
        scope.setLevel('error');
        Sentry.setTag('异常信息：', tagName);
        Sentry.captureException(new Error(`${tagName}`));
    });
};

使用

#路由入口main.js
```JS
import '../utils/sentryConfig';

在需要进行错误上报的地方引入
import { captureException, withScopeCaptureException } from '../../utils/sentryCaptureException';
const Components => {
  useEffect(() =>{
     captureException(); 
  },[])

   return (
      <div>....</div>
    )
}
Promise((rel,rej)=>{
 //关键信息可以上传
  withScopeCaptureException(data)
}).catch(e){
   captureException(e);
}

xianzou / blog

sentry配置和错误主动上报实例 #45