错误监控

版权声明:欢迎转载,转载请注明来源,谢谢! https://blog.csdn.net/a8725585/article/details/80615948

代码上线后,有可能会出现各种错误,因此部署错误监控,显得尤为重要

错误的分类

  • 即时运行错误(代码错误)
  • 资源加载错误

错误捕获

  1. 即时运行错误捕获

    // trycatch
    try{
    
    }catch(err=>{
    console.log(err)
    })
    // winodw.onerror
    window.onerror = function(msg, url, line)    
    {            
    console.log( "真不幸,又出错了\n" + "\n错误信息:"+msg+ 
    "\n所在文件:"+ url  + "\n错误行号:" + line);  
    }
  2. 资源加载错误捕获

    object.onerror(不向上冒泡)

    // object.onerror(不向上冒泡)
    <img src="image.gif" onerror="myFunction()">

    performance.getEntries()
    返回的将是一个数组,包含了页面中所有的已成功加载 HTTP 请求与预期加载资源比较

    document.getElementsByTagName('img')

    error事件捕获

    winodw.addEventListener('error',function(e){
    console.log('错误'+e)},true)

跨域的js运行错误

跨域的js运行错误可捕获,但拿不到具体信息

这里写图片描述
解决方法
1、script标签添加crossorigin 属性
2、服务端响应头添加 Access-Control-Allow-Origin


上报错误基本原理

  1. 采用ajax上报
  2. 使用image对象上报(大部分)
(new Image().src=‘http://baidu.com/errorsave?t=11111’)

错误日志收集工具sentry

Sentry 是一个开源的实时错误报告工具,支持 web 前后端、移动应用以及游戏,支持 Python、OC、Java、Go、Node、Django、RoR 等主流编程语言和框架 ,还提供了 GitHub、Slack、Trello 等常见开发工具的集成。

安装说明
1、进入sentry官方网站注册账号
2、新建项目 选择vue项目这时会生成一个dsn
3、本地项目安装raven-js
4、配置

Raven.config('dns').install()

如果忘记dns找不到的话,可以进sentry文档里找说明文档
上报错误
以下内容转载自sentry使用
被动上报

js运行期间,如果发生错误时,错误(比如点击回调函数执行报错,ajax同源请求
报错等)没有被try catch或者以其他方式捕捉,就会冒泡到window,触发
[onerror][2]事件

主动上报

采用raven.captureException(msg/e, options),第一参数可以是字符串,
也可以是Error对象(ps: raven内部会对所传参数进行判断,如果是msg,会转换
成Error对象),第二个参数options可设置参数同raven配置安装时可以用的参数
同,只不过这里用到的参数作用域只限于此条错误日志,raven.config中用的
options对所有错误日志都生效。

猜你喜欢

转载自blog.csdn.net/a8725585/article/details/80615948