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

IT技术 javascript error-handling client-side
2021-02-10 04:20:26

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

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

我主要使用 MooTools 和head.js(用于 JS 端)和 Django 用于服务器端。

3个回答

我会检查window.onerror

例子:

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

请记住,返回 true 将阻止触发默认处理程序,返回 false 将让默认处理程序运行。

请注意,Mozilla 建议:“请注意,某些/许多错误事件不会触发 window.onerror,您必须专门监听它们。”
2021-03-21 04:20:26
Mozilla 公开 GlobalEventHandlers.onerror: developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/...
2021-03-22 04:20:26
如果处理 window.onerror 的代码本身抛出错误会发生什么。有没有无限循环的可能?
2021-03-25 04:20:26
在Chrome和Firefox @MartinBrown一个简短的测试似乎表明,错误处理过程中的错误不会递归处理,防止无限循环,假设所有的错误相同的事件循环任务期间(即没有抛出PromisesetTimeoutsetInterval,或者其它宏观/ microtask电话):var errNum = 0; window.addEventListener('error', () => { console.log(错误 #${++errNum}); throw new Error(); }); setTimeout(() => {throw new Error()}, 100);
2021-04-04 04:20:26
您最好在运行其他任何东西之前分配 window.onerror 。所以无论你想把它放在哪里,只要确保它在你的任何其他 js 代码/文件之前运行。
2021-04-13 04:20:26

如果您的网站使用的是 Google Analytics,您可以按照我的操作:

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

对上面代码的一些评论:

  • 对于现代浏览器,会记录完整的堆栈跟踪。
  • 对于不捕获堆栈跟踪的旧浏览器,会记录错误消息。(根据我的经验,大多数是较早的 iOS 版本)。
  • 还会记录用户的浏览器版本,因此您可以查看哪些操作系统/浏览器版本引发了哪些错误。这简化了错误优先级排序和测试。
  • 如果您将 Google Analytics 与“analytics.js”一起使用,则此代码有效,如下所示如果您使用的是“gtag.js”,就像这样,您需要调整函数的最后一行。有关详细信息,请参见此处

代码到位后,您可以通过以下方式查看用户的 Javascript 错误:

  1. 在 Google Analytics 中,点击该Behavior部分,然后点击Top Events报告。
  2. 您将获得一个事件类别列表。window.onerror在列表中单击
  3. 您将看到 Javascript 堆栈跟踪和错误消息的列表。通过单击Secondary dimension按钮并Event Label在出现的文本框中输入为您的用户的操作系统/浏览器版本的报告添加一列
  4. 该报告将类似于下面的屏幕截图。
  5. 要将操作系统/浏览器字符串转换为更易读的描述,我将它们复制粘贴到https://developers.whatismybrowser.com/useragents/parse/

在此处输入图片说明

不要尝试使用第三方服务,而是尝试自己的服务。

错误处理程序可以捕捉以下场景,

  1. 无法捕获未捕获的 TypeError
  2. 无法捕获未捕获的 ReferenceError 例如:var.click()
  3. 可以捕获TypeError
  4. 可以捕获语法错误
  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
      }
   })
})