前端错误监控

前端打点.md

前端错误监控

注：目前是前端实验性质的工具。

开发环境和用户使用环境不一致，开发时无法对所有浏览器做测试。但是由用户来反馈错误过于被动。为了主动地收集错误并解决，在网页上加了一个JavaScript错误监控脚本。

用window.onerror捕获页面上的JavaScript运行错误，并使用beacon的方式保存到seedit.duapp.com上。

window.onerror

对于onerror事件，会自动捕获错误提交数据。

try..catch

这部分需要在代码中调用seedlogger

    try {
            // something...
        } catch (ex) {
            seedlogger.log({
                time: +new Date(),
                from: document.location.href,
                msg: ex.message,
                type: 'try-catch',
                userAgent: navigator.userAgent
            });
        }

数据请求：

/api/log.gif?time=1369916309211&from=http%3A%2F%2Fbbs.seedit.com%2Fforum.php%3Fmod%3Dforumdi.....balabala

数据形式

对于onerror事件每条错误保存的数据如：

    array (
      'time' => '1369962471977',
      'from' => 'http://riji.seedit.com/1117188.html',
      'msg' => '错误的参数个数或无效的参数属性值',
      'url' => 'http://source.seedit.com/common/js/jquery-1.8.3.min.js?geg',
      'line' => '2',
      'type' => 'onerror',
      'userAgent' => 'Mozilla/4.0 (compatible; MSIE 9.0; qdesk 2.4.1264.203; Windows NT 6.1; Trident/6.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; [...]',
      '_id' => new MongoId("51a7f7e6f8c6ebaa32000001"),
    )

对于手动监听的错误，保存的数据跟上面的不一致：

    {
      time: +new Date(),
      from: document.location.href,
      msg: ex.message,
      type: 'try-catch',
      userAgent: navigator.userAgent
    }