Java自学者论坛

 找回密码
 立即注册

手机号码,快捷登录

恭喜Java自学者论坛(https://www.javazxz.com)已经为数万Java学习者服务超过8年了!积累会员资料超过10000G+
成为本站VIP会员,下载本站10000G+会员资源,会员资料板块,购买链接:点击进入购买VIP会员

JAVA高级面试进阶训练营视频教程

Java架构师系统进阶VIP课程

分布式高可用全栈开发微服务教程Go语言视频零基础入门到精通Java架构师3期(课件+源码)
Java开发全终端实战租房项目视频教程SpringBoot2.X入门到高级使用教程大数据培训第六期全套视频教程深度学习(CNN RNN GAN)算法原理Java亿级流量电商系统视频教程
互联网架构师视频教程年薪50万Spark2.0从入门到精通年薪50万!人工智能学习路线教程年薪50万大数据入门到精通学习路线年薪50万机器学习入门到精通教程
仿小米商城类app和小程序视频教程深度学习数据分析基础到实战最新黑马javaEE2.1就业课程从 0到JVM实战高手教程MySQL入门到精通教程
查看: 435|回复: 0

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

[复制链接]
  • TA的每日心情
    奋斗
    7 天前
  • 签到天数: 745 天

    [LV.9]以坛为家II

    2041

    主题

    2099

    帖子

    70万

    积分

    管理员

    Rank: 9Rank: 9Rank: 9

    积分
    704660
    发表于 2021-9-4 16:05:07 | 显示全部楼层 |阅读模式

    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

     

    创建新的项目:

    选择对应的框架:

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

    将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' )

     

    哎...今天够累的,签到来了1...
    回复

    使用道具 举报

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    QQ|手机版|小黑屋|Java自学者论坛 ( 声明:本站文章及资料整理自互联网,用于Java自学者交流学习使用,对资料版权不负任何法律责任,若有侵权请及时联系客服屏蔽删除 )

    GMT+8, 2024-3-29 00:52 , Processed in 0.072926 second(s), 29 queries .

    Powered by Discuz! X3.4

    Copyright © 2001-2021, Tencent Cloud.

    快速回复 返回顶部 返回列表