捕获所有的JavaScript错误并将它们发送到服务器

Question

我想知道是否有经验在客户端全局处理JavaScript错误并将它们从浏览器发送到服务器。

我的意思很清楚，我想知道客户端发生的每个异常、错误、编译错误等，并将它们发送到服务器进行报告。

我主要使用MooTools和head.js（用于JS方面）以及Django用于服务器端。

- Olivier Girardot

Answer 1

我会查看 window.onerror

例子:

window.onerror = function(message, url, lineNumber) {  
  //save error and send to server for example.
  return true;
};  

记住，返回true将阻止默认处理程序的触发，而返回false将允许默认处理程序运行。

- Mike Lewis

---

最好在其他任何代码运行之前分配 window.onerror。所以无论您想把它放在哪里，只需确保它在您的其他 JavaScript 代码/文件之前运行即可。 - Mike Lewis

请注意，Mozilla建议：“请注意，并非所有/许多错误事件都会触发window.onerror，您必须专门监听它们。” - Adam Naylor

Mozilla公开了GlobalEventHandlers.onerror事件：https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onerror - roland

如果处理 window.onerror 的代码本身抛出错误，会发生什么？是否有可能出现无限循环？ - Martin Brown

@MartinBrown 在Chrome和Firefox上进行的简短测试似乎表明，在错误处理期间发生的错误不会被递归处理，从而防止无限循环，假设所有错误都在同一事件循环任务期间抛出（即没有Promise、setTimeout、setInterval或其他宏/微任务调用）： var errNum = 0; window.addEventListener('error', () => { console.log(Error #${++errNum}); throw new Error(); }); setTimeout(() => {throw new Error()}, 100); - Mike Hill

Answer 2

如果您的网站正在使用Google Analytics，您可以像我一样操作：

window.onerror = function(message, source, lineno, colno, error) {
  if (error) message = error.stack;
  ga('send', 'event', 'window.onerror', message, navigator.userAgent);
}

关于上面的代码，有几点需要注意：

• 对于现代浏览器，将记录完整的堆栈跟踪信息。
• 对于无法捕获堆栈跟踪信息的旧版本浏览器，将记录错误消息。（在我使用的大多数早期iOS版本中是这样的）。
• 用户的浏览器版本也将被记录，因此您可以看到哪种操作系统/浏览器版本引发了哪些错误。这简化了缺陷的优先级排序和测试。
• 此代码适用于使用“analytics.js”进行Google Analytics跟踪的情况，如此。如果您使用的是“gtag.js”，则需要调整函数的最后一行，如此。有关详细信息，请参见此处。

当代码放置好后，您可以按以下步骤查看用户的Javascript错误：

1. 在Google Analytics中，点击“行为”部分，然后是“顶部事件”报告。
2. 您将得到事件类别列表。在列表中单击“window.onerror”。
3. 您将看到一系列Javascript堆栈跟踪信息和错误消息。通过单击“次要维度”按钮并在弹出的文本框中输入“事件标签”，可以为用户的操作系统/浏览器版本添加报告列。
4. 报告将如下图所示。
5. 要将操作系统/浏览器字符串转换为更易于阅读的描述，可以将它们复制粘贴到https://developers.whatismybrowser.com/useragents/parse/中。

- Martin Omander

Answer 3

请不要尝试使用第三方服务，而应当自己进行尝试。

错误处理程序可以捕获以下场景：

1. 无法捕获未经处理的TypeError
2. 无法捕获未经处理的ReferenceError，例如：var.click（）
3. 可以捕获TypeError
4. 可以捕获Syntax error
5. 可以捕获ReferenceError

要捕获Javascript错误，请执行以下操作：

window.addEventListener('error', function (e) {
  //It Will handle JS errors 
})

捕获AngularJS错误：

app.config(function ($provide) {
$provide.decorator('$exceptionHandler', function ($delegate) {
   return function (exception, cause) {
       //It will handle AngualarJS errors
      }
   })
})

- sam ruben