仓库源文，站点原文

title: 前端代码异常日志收集与监控 categories:

• JavaScript
• 前端杂烩
• 网络交互 tags:
• tech
• cnblogs mark: hot date: 2015-08-20 12:20:00 fromUrl: http://www.cnblogs.com/hustskyking/archive/2015/08/20/fe-monitor.html from: 博客园

// test.js
function calc(){
  // code...
  return val;
}
if(calc() !== "someVal"){
  Reporter.send({
    position: "test.js::<function>calc"
    msg: "calc error"
  });
}

</function>

try {
  init();
  // code...
} catch(e){
  Reporter.send(format(e));
}

window.onerror = function() {
  var errInfo = format(arguments);
  Reporter.send(errInfo);
  return true;
};

/**
 * @param {String}  errorMessage   错误信息
 * @param {String}  scriptURI      出错的文件
 * @param {Long}    lineNumber     出错代码的行号
 * @param {Long}    columnNumber   出错代码的列号
 * @param {Object}  errorObj       错误的详细信息，Anything
 */
window.onerror = function(errorMessage, scriptURI, lineNumber,columnNumber,errorObj) {
    // code..
}

<!-- http://barret/test.html -->
<script>
  window.onerror = function(){
    console.log(arguments);
  };
</script>
<script src="https://barret/test.js"></script>

// http://barret/test.js
function test(){
  ver a = 1;
  return a+1;
}
test();

<!-- http://barret/test.html -->
<script>
  window.onerror = function(){
    console.log(arguments);
  };
</script>
<script src="https://localhost/test.js"></script>

// http://trac.webkit.org/browser/branches/chromium/1453/Source/WebCore/dom/ScriptExecutionContext.cpp#L333
String message = errorMessage;
int line = lineNumber;
String sourceName = sourceURL;
// 已经拿到了所有的错误信息，但如果发现是非同源情况，`sanitizeScriptError` 中复写错误信息
sanitizeScriptError(message, line, sourceName, cachedScript);

<script src="bank.com/login.html"></script>

<script src="https://localhost/test.js" crossorigin=""></script>

header('Access-Control-Allow-Origin: *');

//# sourceMappingURL=index.js.map

(function(){var longCode.....})(); // file 1

// 1000 个空行

(function(){var longCode.....})(); // file 2

// 1000 个空行

(function(){var longCode.....})(); // file 3

// 1000 个空行

(function(){var longCode.....})(); // file 4

var _fileConfig = ['file 1', 'file 2', 'file 3', 'file 4']

window.onerror = function(msg, url, line, col, error){
  // line = 3001
  var lineNum = line;
  console.log("错误位置：" + _fileConfig[parseInt(lineNum / 1000) - 1]);
  // -> "错误位置：file 3"
};

var fn = window.onerror = function() {
  console.log(arguments);
};
window.addEventListener("error", fn);
window.addEventListener("error", fn);

function needReport (sampling){
  // sampling: 0 - 1
  return Math.random() 
}

// Module A Get Shops Data
$.ajax({
  url: URL,
  dataType: "jsonp",
  success: function(ret) {
    if(ret.status === "failed") {
      // 埋点 1
      return Reporter.send({
        category: "WARN",
        msg: "Module_A_GET_SHOPS_DATA_FAILED"
      });
    }
    if(!ret.data || !ret.data.length) {
      // 埋点 2
      return Reporter.send({
        category: "WARN",
        msg: "Module_A_GET_SHOPS_DATA_EMPTY"
      });
    }
  },
  error: function() {
    // 埋点 3
    Reporter.send({
      category: "ERROR",
      msg: "Module_A_GET_SHOPS_DATA_ERROR"
    });
  }
});

// JSON 格式不对
try{
  JSON.parse(JSONString);
}catch(e){}

// 存在不可 decode 的字符
try{
  decodeComponentURI(string);
}catch(e){}

// test.js
throw new Error("SHOW ME");
window.onerror = function(){
  console.log(arguments);
  // 阻止在控制台中打印错误信息
  return true;
};

<span>上面的代码直接报错了，没有继续往下执行。页面中可能有好几个 script 标签，但是 </span><code>window.onerror</code><span> 这个错误监听一定要放到最前头！</span>

<h3 id="_5"><a class="headeranchor-link" name="user-content-_5" href="#_5"></a>错误的警报与提示</h3>

</blockquote>

<h3 id="_6"><a class="headeranchor-link" name="user-content-_6" href="#_6"></a>网络错误日志工作草案</h3>

<p>W3C Web Performance工作组发布了网络错误日志工作草案。该文档定义了一个机制，允许Web站点声明一个网络错误汇报策略，浏览器等用户代理可以利用这一机制，汇报影响资源正确加载的网络错误。该文档还定义了一个错误报告的标准格式及其在浏览器和Web服务器之间的传输机制。</p>

<p>详细草案：<a href="http://www.w3.org/TR/2015/WD-network-error-logging-20150305/">http://www.w3.org/TR/2015/WD-network-error-logging-20150305/</a></p>

<h3 id="_7"><a class="headeranchor-link" name="user-content-_7" href="#_7"></a>小结</h3>

<p>功能、测试和监控是程序开发的三板斧，很多工程师可以将功能做的尽善尽美，也了解一些测试方面的知识，可是在监控这个方向上基本处于大脑空白。错误日志的收集、整理算是监控的一个小部分，但是它对我们了解网站稳定性至关重要。文中有忽略的地方希望读者可以补充，错误的地方还望斧正。</p>

<h3 id="_8"><a class="headeranchor-link" name="user-content-_8" href="#_8"></a>拓展阅读</h3>