脚本错误量极致优化-监控上报与Script error

wayneli 发布于2019-08-23 10:42 / 1033人阅读

摘要：如上报监控项目是否正常运转测速上报反应项目质量脚本错误监控作为监控中重要一环，当页面发生报错的时候，通过上报错误信息，能及时发现存在问题，修复优化减少损失。监控上报脚本错误主要有两类语法错误运行时错误。

更多细节点击

在前端开发工作中，除了项目开发保质保量上线以外，项目的数据监控也应该配套起来，确保线上的正常运转。如上报 pv监控项目是否正常运转；测速上报反应项目质量；脚本错误监控作为监控中重要一环，当页面发生报错的时候，通过上报错误信息，能及时发现存在问题，修复优化、减少损失。

监控上报

脚本错误主要有两类：语法错误、运行时错误。监控的方式主要有两种：try-catch、window.onerror。

监控方式 示例 · try-catch

try {
    test  // <- throw error
} catch(e){
    console.log("运行时错误信息 ↙");
    console.log(e);
}

通过给代码块进行 try-catch 包装，当代码块出错时 catch 将能捕获到错误信息，页面也将继续执行。

当发生语法错误或异步错误时，则无法正常捕捉。

示例 · try-catch (语法报错)

try {
    function empty()   // <-  throw error 语法错误
} catch(e){
    console.log("语法错误信息 ↙");
    console.log(e);
}

无法捕捉错误

语法错误无法在 try-catch 中进行捕抓、而异步报错则可以通过为异步函数块再包装一层 try-catch，增加标识信息来配合定位，可以用工具来进行处理，这里不展开。

示例 · window.onerror

/**
 * @param {String}  msg    错误信息
 * @param {String}  url    出错文件
 * @param {Number}  row    行号
 * @param {Number}  col    列号
 * @param {Object}  error  错误详细信息
 */
window.onerror = function (msg, url, row, col, error) {
    console.log("onerror 错误信息 ↙");
    console.log({
        msg,  url,  row, col, error
    })
};

test // <-  throw error

window.onerror 能捕捉到当前页面的语法错误或运行时报错，是十分强大的。那么try-catch 是否不再需要呢？其实并不是。在使用过程中的体会：onerror 主要用来捕获预料之外的错误，而 try-catch 则可以用在预知情况下监控特定错误，两种形式结合使用更加高效。

上报方式

监控错误拿到了报错信息，接下来则是将捕抓的错误信息发送到信息收集平台上，发送的形式主要有两种：

通过Ajax发送数据

动态创建 img 标签的形式

示例 · 动态创建 img 标签进行上报

function report(msg, level) {
    var reportUrl = "http://localhost:8055/report";
    new Image().src = reportUrl + "?msg=" + msg;
}

监控上报整体流程

监控报错，并将捕捉到的错误信息上报给数据收集平台，如下图

错误信息分析 · Script error

有了监控了后，就可以在收集平台上进行查看脚本错误量的日志统计。

发现占据榜首的错误信息 “Script error.” 具有非常高的比例，没有无具体的错误信息，无法定位问题，而这是怎么产生的呢？

产生 Script error 的原因

翻看在 webkit 的源码可以看到 “Script error.” 是浏览器在同源策略限制下所产生的。浏览器出于安全上的考虑，当页面引用的非同域的外部脚本中抛出了异常，此时本页面无权限获得这个异常详情，将输出 Script error 的错误信息。

优化 Script error

Script error 来自同源策略的影响，那么解决的方案之一是进行资源的同源化，另外也可以利用跨源资源共享机制( CORS )。

方案一：同源化

将js代码内联到html文件中

将js文件与html文件放到同一域名下

以上两种方式能够简单直接地解决问题，但也可能带来其他影响，如内联资源不好利用文件缓存，同域无法充分利用cdn优势等等。

方案二：跨源资源共享机制( CORS )

跨源资源共享 ( CORS )机制让Web应用服务器能支持跨站访问控制，从而能够安全地跨站数据传输。主要是通过给请求带上特定头信息，服务器实现了CORS接口，就可以跨源通信，从而能够看到具体报错信息。

1. 为页面上script标签添加crossorigin属性。

增加 crossorigin 属性后，浏览器将自动在请求头中添加一个 Origin 字段，发起一个跨来源资源共享请求。Origin 向服务端表明了请求来源，服务端将根据来源判断是否正常响应。

2. 响应头中增加 Access-Control-Allow-Origin 来支持跨域资源共享。

Access-Control-Allow-Origin: * 表示通过该跨域请求，且该资源可以被任意站点跨站访问。而当该资源仅允许来自 http://127.0.0.1:8066 的跨站请求，其它站点都不能跨站访问时，将可以返回：

Access-Control-Allow-Origin:http://127.0.0.1:8066

指定域名的 Access-Control-Allow-Origin 的响应头中需带上Vary:Origin。

Vary 字段的作用在于为缓存服务器提供缓存规则及缓存筛选的依据。当增加 Vary:Origin 响应头后，缓存服务器将会按照 Origin 字段的内容，缓存不同版本，在请求响应时根据请求头中的 Origin 决定是否能够使用缓存响应。

举例 · 不加 Vary 将存在错误命中缓存的问题

上图中，第一个请求（Origin: 127.0.0.1:8066）响应被浏览器缓存了，当第二个请求（Origin: 127.0.0.1:8888）发起，被错误命中了前一个请求的缓存，收到了 Access-Control-Allow-Origin:http://127.0.0.1:8066 的响应时，将导致资源加载失败。所以当 Access-Control-Allow-Origin 不是返回为 * 时，需要加上 Vary 返回头来避免引缓存导致的权限问题。

跨域脚本报错产生 Script error. 通过以上方式进行处理后将能够捕获到具体的报错信息了。在 NodeJS 的实现中主要通过添加以下代码：

app.use(function *(next){
    // 拿到请求头中的 Origin
    var requestOrigin = this.get("Origin"); 
    if (!requestOrigin) { // 不存在则忽略
      return yield next;
    }

    // 设置 Access-Control-Allow-Origin: Origin
    this.set("Access-Control-Allow-Origin", requestOrigin);

    // 设置 Vary: Origin
    this.vary("Origin");
    return yield next;
});

参考来源https://github.com/joeyguo/bl...

GPU云服务器云服务器监控数据上报服务器上报404错误监控数据怎么上报脚本发生错误

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/96602.html

前端性能与异常上报

摘要：回过头来发现，我们的项目，虽然在服务端层面做好了日志和性能统计，但在前端对异常的监控和性能的统计。对于前端的性能与异常上报的可行性探索是有必要的。这是我们页面加载性能优化需求中主要上报的相关信息。概述对于后台开发来说，记录日志是一种非常常见的开发习惯，通常我们会使用try...catch代码块来主动捕获错误、对于每次接口调用，也会记录下每次接口调用的时间消耗，以便我们监控服务器接口...

gggggggbong 2019-08-23 10:30 评论0 收藏0
谈谈前端异常捕获与上报

摘要：另外这样的异常捕获不能捕获的异常错误信息，这点需要注意。最终大致的流程图如下结语前端异常捕获与上报是前端异常监控的前提，了解并做好了异常数据的收集和分析才能实现一个完善的错误响应和处理机制，最终达成数据可视化。关于微信公众号：前端呼啦圈（Love-FED）我的博客：劳卜的博客知乎专栏：前端呼啦圈前言 Hello，大家好，又与大家见面了，这次给大家分享下前端异常监控中需...

Kosmos 2019-08-22 15:44 评论0 收藏0
一步一步搭建前端监控系统：如何将网页截图上报？

摘要：目前已经在运行的线上前端监控系统代码和讲解都放在这篇文章里监控系统介绍及代码用户对前端程序员来说，就是一个黑匣子。摘要：通过录屏或者截图，快速复现BUG场景。作者：一步一个脚印一个坑原文：搭建前端监控系统（备选）Js截图上报篇 Fundebug经授权转载，版权归原作者所有。 PS：本文关于Fundebug录屏功能的内容有些不准确的地方，比如录屏并非通过截图实现的，录屏插件...

Martin91 2019-08-26 10:21 评论0 收藏0
JS错误监控总结

摘要：前言做好错误监控，将用户使用时的错误日志上报，可以帮助我们更快的解决一些问题。一个变通方案是单独处理，告知错误详情仅能通过浏览器控制台查看，无法通过访问。前言做好错误监控，将用户使用时的错误日志上报，可以帮助我们更快的解决一些问题。目前开源的比较好的前端监控有 https://docs.sentry.io/ 那前端监控是怎么实现的呢？要想了解这个，需要知道前端错误大概分为哪些以及如...

wqj97 2019-08-26 11:51 评论0 收藏0
前端异常监控-看这篇就够了

摘要：前端异常监控如果是移除的流程，那么编程就一定是将放进去的流程。过滤掉运行时错误上报加载错误事件捕获异常最新的规范中定义了事件用于全局捕获对象没有处理器时异常情况。前端异常监控如果debug是移除bug的流程，那么编程就一定是将bug放进去的流程。如果没有用户反馈问题，那就代表我们的产品棒棒哒，对不对？主要内容 Web规范中相关前端异常异常按照捕获方式分类异常的捕获方式日志...

Aklman 2019-08-23 12:59 评论0 收藏0