专栏首页iOS开发干货分享如何搭建前端异常监控系统

如何搭建前端异常监控系统

原文地址:https://segmentfault.com/a/1190000023096077 原文作者:发声的沉默者

什么是异常

是指用户在使用应用时,无法得到预期的结果。不同的异常带来的后果程度不同,轻则引起用户使用不悦,重则导致产品无法使用,从而使用户丧失对产品的认可。

为什么要处理异常

  • 增强用户体验
  • 远程定位问题
  • 无法复现问题,特别是移动端,各种原因,可能是系统版本,机型等等

前端有哪些异常

如何捕获异常

try-catch

try-catch 只能捕获同步运行错误,对语法和异步错误却捕获不到。

1、同步运行错误

try {
    kill;
} catch(err) {
console.error('try: ', err);
}

结果:try: ReferenceError: kill is not defined

2、无法捕获语法错误

try {
let name = '1;
} catch(err) {
    console.error('try: ', err);
}

结果:Unterminated string constant

编译器能够阻止运行语法错误。

3、无法捕获异步错误

try {
    setTimeout(() => {
undefined.map(v => v);
    }, 1000);
} catch(err) {
console.error('try: ', err);
}

结果:Uncaught TypeError: Cannot read property 'map' of undefined

window.onerror

当JavaScript运行时错误(包括语法错误)发生时,window会触发一个ErrorEvent接口的error事件,并执行window.onerror()。若该函数返回true,则阻止执行默认事件处理函数。

1、同步运行错误

/**
* @param {String}  message   错误信息
* @param {String}  source    出错文件
* @param {Number}  lineno    行号
* @param {Number}  colno     列号
* @param {Object}  error     error对象
*/
window.onerror = (message, source, lineno, colno, error) => {
    console.error('捕获异常:', message, source, lineno, colno, error);
return true;
};

kill;

结果:捕获异常:Uncaught ReferenceError: kill is not defined

2、无法捕获语法错误

/**
* @param {String}  message   错误信息
* @param {String}  source    出错文件
* @param {Number}  lineno    行号
* @param {Number}  colno     列号
* @param {Object}  error     error对象
*/
window.onerror = (message, source, lineno, colno, error) => {
    console.error('捕获异常:', message, source, lineno, colno, error);
return true;
};

let name = '1;

结果:Unterminated string constant

编译器能够阻止运行语法错误。

3、异步错误

/**
* @param {String}  message   错误信息
* @param {String}  source    出错文件
* @param {Number}  lineno    行号
* @param {Number}  colno     列号
* @param {Object}  error     error对象
*/
window.onerror = (message, source, lineno, colno, error) => {
console.error('捕获异常:', message, source, lineno, colno, error);
return true;
};

setTimeout(() => {
undefined.map(v => v);
}, 1000);

结果:捕获异常:Uncaught TypeError: Cannot read property 'map' of undefined

window.addEventListener('error')

当一项资源(如<img>或<script>)加载失败,加载资源的元素会触发一个Event接口的error事件,并执行该元素上的onerror()处理函数。这些error事件不会向上冒泡到window,不过(至少在Firefox中)能被单一的window.addEventListener捕获。

<script>
window.addEventListener('error', (err) => {
console.error('捕获异常:', err);
}, true);
</script>
<img src="./test.jpg" />

结果:捕获异常:Event {isTrusted: true, type: "error", target: img, currentTarget: Window, eventPhase: 1, …}

window.addEventListener('unhandledrejection')

当Promise 被 reject 且没有 reject 处理器的时候,会触发 unhandledrejection 事件;这可能发生在 window 下,但也可能发生在 Worker 中。这对于调试回退错误处理非常有用。

window.addEventListener("unhandledrejection", (err) => {
    err.preventDefault();
console.error('捕获异常:', err);
});

Promise.reject('promise');

结果:捕获异常:PromiseRejectionEvent {isTrusted: true, promise: Promise, reason: "promise", type: "unhandledrejection", target: Window, …}

Vue

Vue.config.errorHandler = (err, vm, info) => {
console.error('捕获异常:', err, vm, info);
}

React

React 16,提供了一个内置函数componentDidCatch,使用它可以非常简单的获取到React下的错误信息。

componentDidCatch(error, info) {
console.error('捕获异常:', error, info);
}

但是,推荐ErrorBoundary

用户界面中的JavaScript错误不应破坏整个应用程序。为了为React用户解决此问题,React 16引入了“错误边界”的新概念。

新建ErrorBoundary.jsx组件:

import React from 'react';
import { Result, Button } from 'antd';

class ErrorBoundary extends React.Component {
constructor(props) {
super(props);
this.state = { hasError: false, info: '' };
    }

    static getDerivedStateFromError(error) {
return { hasError: true };
    }

    componentDidCatch(error, info) {
this.setState({
            info: error + ''
        });
    }

    render() {
if (this.state.hasError) {
// 你可以渲染任何自定义的降级 UI
return (
                <Result
                    status="500"
                    title="500"
                    subTitle={this.state.info}
                    extra={<Button type="primary">Report feedback</Button>}
                />
            );
        }

return this.props.children; 
    }
}

export default ErrorBoundary;

使用:

<ErrorBoundary>
<App />
</ErrorBoundary>

注意

错误边界不会捕获以下方面的错误:

  • 事件处理程序
  • 异步代码(例如setTimeout或requestAnimationFrame回调)
  • 服务器端渲染
  • 在错误边界本身(而不是其子级)中引发的错误

iframe

由于浏览器设置的“同源策略”,无法非常优雅的处理iframe异常,除了基本属性(例如其宽度和高度)之外,无法从iFrame获得很多信息。

<script>
document.getElementById("myiframe").onload = () => {
const self = document.getElementById('myiframe');

try {
            (self.contentWindow || self.contentDocument).location.href;
        } catch(err) {
console.log('捕获异常:' + err);
        }
    };
</script>

<iframe id="myiframe" src="https://nibuzhidao.com" frameBorder="0" />

Sentry

业界非常优秀的一款监控异常的产品,作者也是用的这款,文档齐全。

需要上报哪些信息

  • 错误id
  • 用户id
  • 用户名
  • 用户IP
  • 设备
  • 错误信息
  • 游览器
  • 系统版本
  • 应用版本
  • 机型
  • 时间戳
  • 异常级别(error、warning、info)

异常上报

  • 1、Ajax发送数据
  • 2、动态创建img标签

如果异常数据量大,导致服务器负载高,调整发送频率(可以考虑把异常信息存储在客户端,设定时间阀值,进行上报)或设置采集率(采集率应该通过实际情况来设定,随机数,或者某些用户特征都是不错的选择)。

本文分享自微信公众号 - web前端小剧场(webxiaojuchang),作者:发声的沉默者

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-07-08

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 如何搭建前端异常监控系统

    是指用户在使用应用时,无法得到预期的结果。不同的异常带来的后果程度不同,轻则引起用户使用不悦,重则导致产品无法使用,从而使用户丧失对产品的认可。

    发声的沉默者
  • 前端异常监控系统

    来源:子慕大诗人 http://www.cnblogs.com/1wen/p/7942608.html 导火索 有一天一个测试同事的一个移动端页面白屏了,看样子...

    企鹅号小编
  • 一步一步搭建前端监控系统:接口请求异常监控篇

    背景:市面上的监控系统有很多,大多收费,对于小型前端项目来说,必然是痛点。另一点主要原因是,功能虽然通用,却未必能够满足我们自己的需求, 所以我们自给自足也许是...

    Fundebug
  • 一步一步搭建前端监控系统:如何监控资源加载错误?

    怎样定位前端线上问题,一直以来,都是很头疼的问题,因为它发生于用户的一系列操作之后。错误的原因可能源于机型,网络环境,接口请求,复杂的操作行为等等,在我们想要去...

    Fundebug
  • 一步一步搭建前端监控系统:如何定位前端线上问题?

    一直以来,前端的线上问题很难定位,因为它发生于用户的一系列操作之后。错误的原因可能源于机型,网络环境,复杂的操作行为等等,在我们想要去解决的时候很难复现出来,自...

    Fundebug
  • Bugless 异常监控系统 (iOS端)

    移动App 发布后,如果想获取 App 的业务运行状态,通常是通过服务端接口反映到状态或者是用户反馈,缺少客户端的异常错误的线上监控、告警与异常数据聚合并沉淀的...

    37手游iOS技术运营团队
  • 从0到1,构建完整的前端异常监控系统

    https://juejin.cn/post/6965022635470110733

    coder_koala
  • 从0到1,构建完整的前端异常监控系统

    https://juejin.cn/post/6965022635470110733

    落落落洛克
  • 一步一步搭建前端监控系统:如何记录用户行为?

    背景:市面上的监控系统有很多,大多收费,对于小型前端项目来说,必然是痛点。另一点主要原因是,功能虽然通用,却未必能够满足我们自己的需求, 所以我们自给自足也许是...

    Fundebug
  • 一步一步搭建前端监控系统:JS错误监控篇

    背景:市面上的监控系统有很多,大多收费,对于小型前端项目来说,必然是痛点。另一点主要原因是,功能通用,却未必能够满足我们自己的需求, 所以我们自给自足。

    Fundebug
  • 一步一步搭建前端监控系统:如何将网页截图上报?

    PS:本文关于Fundebug录屏功能的内容有些不准确的地方,比如录屏并非通过截图实现的,录屏插件的BUG也已经修复了,录屏并非只支持Chrome,录屏数据并不...

    Fundebug
  • 从零开始搭建前端数据监控系统(二)-前端性能监控方案调研

    1. 业界案例 目前前端性能监控系统大致为分两类:以GA为代表的代码监控和以webpagetest为代表的工具监控。 代码监控依托于js代码并部署到需监控的页面...

    寒月十八
  • 数据传输 | 如何搭建 DTLE 的监控系统

    虽然在 DTLE 的文档里提供各种监控项的介绍,但是对于不熟悉 prometheus 和 grafana 配置的同学来说上手还是有些难度的。今天我就使用 DTL...

    爱可生开源社区
  • 从零开始搭建前端数据监控系统(一)-同类产品调研

    1 Google Analytics GA向window暴露一个名为ga()的全局函数,ga()函数以参数格式、数目来分发不同的行为。这种模式的好处是API单一...

    寒月十八
  • 基于移动端的视频监控系统如何实现?

    视频监控已经融入了民众生活的方方面面, 生活中有小区安全监控,通信行业有基站监控,银行系统有柜台监控,林业部门有火情监控,交通方面有违章和流量监控。从功能上讲,...

    EasyNVR
  • 基于移动端的视频监控系统如何实现?

    视频监控已经融入了民众生活的方方面面, 生活中有小区安全监控,通信行业有基站监控,银行系统有柜台监控,林业部门有火情监控,交通方面有违章和流量监控。从功能上讲,...

    TSINGSEE青犀视频
  • 智慧监狱对讲/家属会见系统如何搭建?

    随着科技的发展,司法监管行业的信息化、数字化建设也在不断完善。MEEYI美一智慧监仓系统解决方案采用“互联网+”的思维方式,以先进的信息技术手段,...

    MEEYI美一
  • 《嘎!RSS》如何零成本搭建一个免费私有化舆情监控系统?

    RSS是一种标准的网站内容投递协议,通过解析RSS我们可以获取网站的内容更新。 Github Actions是Github推出的一个免费服务, 可以帮我们跑任...

    zhaoolee
  • 使用 Dubbo 搭建一个简单的分布式系统

    随着阿里巴巴开源的高性能分布式 RPC 框架 Dubbo 正式进入 Apache 孵化器,Dubbo 又火了一把。本文作为 Dubbo 系列开端,先教大家使用 ...

    CSDN技术头条

扫码关注云+社区

领取腾讯云代金券