业务线接入前端异常监控sentry

时间：2023-03-08 23:33:43
业务线接入前端异常监控sentry

1.前端异常处理的框架对比

是否开源
收费
语言
监控范围
sentry 是 自己搭建服务器（免费）价格 英文 Angular、AngularJs、Backbone、Ember、JavaScript、React、Vue......
fundebug 否 收费（708一年，本地版：12万一年） 中文 Angular、AngularJs、Backbone、Ember、JavaScript、React、Vue、微信小程序等等......

2,前端异常监控方案梳理

what？（前端监控是什么）

对线上代码的异常排查，一般分为下面三个点：

  1. js的异常采集的方式
  2. js异常的上报方式
  3. 统计异常监控上报的常见问题

why？（为什么要有前端异常监控）

  1. 随着移动互联网的快速发展，互联网获取流量的渠道越来越多样化。前端的应用场景不在局限于网页，通常是网页、公众号、安卓端、ios都有涉及。这样的话很多边界问题完全依赖于后端的监控和测试阶段的测试是完全不够的。
  2. 用系统化的报错采集替代人工上报。以便于获得更快速的异常收集。

How？（怎么做）

  1. js的异常处理方式

    收集异
    // try-catch 异常处理
    // try-catch 在我们的代码中经常见到，通过给代码块进行 try-catch 进行包装后，当代码块发生出错时 catch 将能捕捉到错误的信息，页面也将可以继续执行。
    // 但是 try-catch 处理异常的能力有限，只能捕获捉到运行时非异步错误，对于语法错误和异步错误就显得无能为力，捕捉不到。
    try {
      error    // 未定义变量
    } catch(e) {
      console.log('我知道错误了');
      console.log(e);
    }
    ----------------------------------------------------------------------------------------------------------------------------
    // window.onerror 异常处理
    // 无论是异步还是非异步错误，onerror 都能捕获到运行时错误。
    // 另外 onerror 是无法捕获到网络异常的错误
    window.onerror = function (msg, url, row, col, error) {
      console.log('我知道错误了');
      console.log({
        msg,  url,  row, col, error
      })
      return true;
    };
    new Error('111')
  2. js异常的上报方式
    • 根据定义好的数据格式，利用ajax发送数据

    • 根据定义好的数据格式，利用img标签发送数据

      // 数据格式示例
      { // 错误日志信息
          msg: '',
          url: '', // 错误来源页面url
          line: '', // 错误行数
          col: '', // 错误列数
          stack: '',
          from: '', // 错误来源
          "navigator.userAgent": '', //浏览器信息
          ret: {}, // 解析source map后原始准确定位数据
          evtMoniter: [] //用户行为保存数组,保存最近10次行为操作
      }
  3. 统计异常监控上报的常见问题
    上报后的数据后台对对应的数据进行存储分类，根据不同项目不同种类的错误进行统计。 超过一定数量可以设置报警等级制。

现有的前端异常处理的服务商

  1. sentry

  2. funDebug

前端异常处理的框架对比

搭建sentry服务

entry有两种安装方式，一种是利用docker安装，另外一种是配置pathon环境。官网推荐用docker，下面主要介绍docker渠道的安装。

依赖环境

构建容器

  1. 克隆仓库 getsentry/onpremise.

  2. 创建对应目录

    mkdir -p data/{sentry,postgres}

  3. 获取项目的Key, 拷贝最后一行的key

    docker-compose run --rm web config generate-secret-key

  4. 打开docker-compose.yml, 将key考到 SENTRY_SECRET_KEY 后面

    vim docker-compose.yml

  5. 创建项目的superuser，根据提示一次填写

    docker-compose run --rm web upgrade

  6. 开启 sentry 服务，就可以进入自己的sentry啦， http:://ip:9000 即可进入你的 sentry

    docker-compose up -d

  7. nginx配置

    server {
         listen  80;
         server_name yusidi.sentry.com;
            location / {
            proxy_pass http://127.0.0.1:9000;
        }
    }

  8. 利用sentry来改善你的工作流程

    文档：https://blog.sentry.io/2018/03/06/the-sentry-workflow

创建新的项目：

业务线接入前端异常监控sentry

选择对应的框架：

业务线接入前端异常监控sentry

记住项目对应的dsn点击确定

业务线接入前端异常监控sentry

将dns中的域名替换成我们jiazheng.daojia.com

sourcemap上传：

// webpack接入
var SentryCliPlugin = require('@sentry/webpack-plugin')
plugins:[
new SentryCliPlugin({
      include: 'dist/js',
      ignoreFile: '.sentrycliignore',
      ignore: ['node_modules', 'webpack.config.js'],
      configFile: 'sentry.properties'
    }),
]
根目录创建文件夹.sentryclirc
[auth]
token=f99aebfed9734d8fa5cc834f80c53a6a6e8a268471e749acbea5c25941115f35
[defaults]
org=jiazheng
project=daily-clean
url=https://jz-homer.daojia-inc.com/

homer API

  • error

     homer.error(new Error(111))

  • info

      homer.info('用户aaa')