• 前端监控
    • 知识点
      • 分类
        • 异常监控
          • 异常的分类
            • 系统异常
            • 网络异常
              • XMLHttpRequest异常
                • xhr.onerror
                • xhr.ontimeout
              • fetch异常
                • fetch使用Promise实现,见Promise异常
              • 静态资源加载异常
                • window.addEventListener(“error”, () => {}, true),捕获阶段
            • 程序异常
              • Error
                • EvalError
                • SyntaxError
                • TypeError
                • RangeError
                • 捕获常规Error:window.onerror = (message, source, lineno, colno, error) => {}
                  • 不足
                    • 描述: 不能获取非同源脚本的错误的详细信息
                    • 解决方法: 服务器响应头增加access-control-allow-origin: *, script脚本新增属性crossorigin
                  • onerror回调函数返回false,阻止默认行为: 不打印该错误;
                • ReferenceError
                • URIError
                • InternalError(非标准)
              • Promise Error
                • 异步异常捕获:window.addEventListener(“unhandledRejection”, event => {})
                  • 无法获取具体出错位置
                  • event.preventDefault() 阻止默认行为
              • DOMException
                • window.onerror
                • window.addEventListener(“error”, handler)
          • 需要采集的信息
            • 出错的URL: window.location
            • 设备信息:navigator.userAgent
            • 网络信息:navigator.connection(兼容性不太好)
            • 错误的位置
            • 错误发视时的调用栈
          • 平台
            • sentry
            • webfunny
            • fundebug
        • 性能监控
        • 数据埋点
        • 行为监控
      • 阶段
        • 指标采集
          • 前端
          • 后端
            • log4js
        • 指标存储
        • 统计分析
        • 可视化展示
    • 解决方案