错误监控

  • 前端错误的分类
  • 错误的捕获方式
  • 上报错误的基本原理
    常见问题:如何保障产品质量?/如何检测js错误?
前端错误的分类
  • 即时运行错误:代码错误
  • 资源加载错误,如js/css文件
错误的捕获方式
  • 即时运行错误的捕获方式
    1)try...catch
    2)window.onerror
  • 资源加载错误(这一类型错误不会冒泡,这也是为什么window.onerror只能捕获即时运行错误,而不能捕获资源加载错误的原因)
    1)object.onerror(如图片,script加载的错误)
    2)(亮点!)performance.getEntires()返回的是一个数组



    输出的都是加载成功的资源。



    再通过该方法获取所有图片集合,减去上面加载成功返回的图片,剩下的就是加载失败的图片了。
    3)Error事件捕获(亮点!)
    虽然资源加载错误的事件不会冒泡,但是可以捕获。

    设为true,捕获阶段监听,执行。script里是一个不存在的文件,


  • 衍申:跨域的js运行错误可以捕获吗?错误提示什么?应该怎么处理?


上报错误的基本原理

1.采用Ajax通信的方式上报(少用)
2.利用Image对象上报(常用,重点)



©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 错误类型 即时运行错误 (代码错误) 资源加载错误 常见的错误 1. 类型转换错误 建议使用全等===操作符 2....
    以乐之名阅读 344评论 0 2
  • 错误监控类有两种问法:一种是直接问你如何监控JS错误,一种是问你如何保证产品的质量 前端错误分类即时运行错误(代码...
    一杯浊酒阅读 159评论 0 0
  • 页面性能 提升页面性能的方法有哪些 资源压缩合并,减少HTTP请求 非核心代码异步加载 利用浏览器缓存 使用CDN...
    翔阿翔阿翔阅读 198评论 0 5
  • 吹打迴廊天際秋,一痕煙水入人眸。 臨風滿盞須多飲,待客虛堂爲少留。 天灰地冷孤山遠,葉靜簷靑竹傘收。 例訪池荷將淚...
    白子殊阅读 150评论 3 5
  • 结合前面所说的,我们使用create-react-app脚手架去创建项目后,一些已有的组件就可以帮助我们少写CSS...
    IUVO阅读 1,283评论 0 0