获取页面上的所有JavaScript错误/JavaScript错误处理

我想要能够将页面上的所有JavaScript错误发送给自己。我是一名扩展开发者，因此下面的内容强调在进行调用之前确保DOM已经准备好。

我尝试添加一些功能到throw，以便也可以发送或邮件异常，但我发现这是不可能的。

1：解决方法是使用window.onerror处理程序：

window.onerror = function(e, url, line){
  mailError('onerror: ' + e + ' URL:' + url + ' Line:' + line);
  console.error('\nLine ' + line + ':');
  setTimeout(function(){retry();}, 100); //对于扩展的内容脚本非常有用
  return true; 
}

也可能需要通过jQuery执行相同的操作：

$(window).error( 
  function(e, url, line){
    //处理错误
  }
);

这样做的缺点是你的代码停止执行。

为了避免错误停止执行，最好使用回调函数来确保代码按照一定的顺序执行，并在可能的情况下利用事件。您还可以使用一些技巧来保护DOM调用。

$(document).ready({
  //在这里包装代码通常不会出错
});

您还可以考虑在window.onload上运行代码

window.onload = function(){
  //在这个时间执行代码可能会导致页面抖动
  //但是您几乎不会有错误的DOM调用
};

另一种技巧是：

if (document.getElementById('iNeedThisElement')) {
  //做一些工作！
  document.getElementById('iNeedThisElement').style.display = 'block';
} else {
  var stillNeedToTakeCareOfX = true; //否则为false，因为它是未定义的
  mailError('iNeedThisElement不可用...');
}

使用这些技巧并调试您的应用程序，您应该会有很好的效果。由于无法检索和报告console.error，.warn和.log语句的内容，下面提供了一个小型的替代套件：

var Xe = { }; //极端错误套件
function extraInfo(e){
   //e是可选的
   if(!e)e = true;
   //添加额外的调试信息，如navigator或当前URL
   return ' currentURL: '+ document.URL + 
        '\n userAgent: ' + navigator.userAgent + 
        '\n platform: '  + navigator.platform + 
        '\n userid: '    + localStorage.userid + 
        '\n language: '  + navigator.langauge + 
        '\n cookies?: '  + navigator.cookiesEnabled;
}
Xe.error = function(e){
  console.error(e); //保持原始功能
  mailError('Xe err: ' + e + extraInfo() );
}
Xe.warn = function(e){
  console.warn(e);
  mailError('Xe warn: ' + e + extraInfo() );
}
Xe.log = function(e){
  console.log(e);
  mailError('Xe log: ' + e + extraInfo() );
}

作为最后一招，您可以不断尝试执行一块代码，直到它没有错误为止。这是下面的"2"。

2：将代码分组为大块，并在捕获错误后x秒后重新执行，或者继续执行下一块代码

//defExe = DEFinitely EXEcute this code
  //functionArg，引用一个包含大块代码的函数
  //seconds，以毫秒为单位的超时时间，重新尝试以无错误执行此函数
function defExe(functionArg, seconds) {
  //seconds是可选的
  if (!seconds)seconds = 300;
  try {
    functionArg();
  } catch(e) {
    //发送错误和额外信息
    mailError('caught ' + e + ' attempting to re-execute ' + functionArg.name + ' in ' + seconds + ' milliseconds');
    //重新尝试执行此代码
    setTimeout(function(){ 
       defExe(functionArg, seconds); 
    }, seconds);
  }
}

然后像这样使用它：

//数组用于分组函数块
var fn = [ ];
fn[1] = function (){
  //一大块JavaScript代码
}
defExe(fn[1]);
fn[2] = function(){
  //程序的另一块代码
}
defExe(fn[2]);

#2总结：将代码分组为函数并在try-catch块中运行，如果捕获到错误，则重复执行。