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

今天有很多可用的Web API。其一是 GlobalEventHandlers , 一个 OnErrorEventHandler 在错误发生时会被调用。

GlobalEventHandlers 的 onerror 属性是一个处理错误事件的 EventHandler 。这对于捕获在测试期间从未发生的异常非常有用。不同的错误事件有：

当JavaScript运行时错误发生时， window.onerror() 会被调用。
当资源加载失败时，元素上的 onerror() 处理程序会被调用。可以通过设置 useCapture 为True的 window.addEventListener 配置来处理这些错误事件。

所有的JavaScript错误都可以通过这个浏览器事件 onerror 来捕获。这是记录客户端错误并将其报告给服务器的最简单的方式之一。可以通过以下方式将一个函数赋值给 window.onerror ：

语法:

window.onerror = function (msg, source, lineNo, columnNo, error) {
   // function to execute error handling
}

以下参数传递给分配给 window.onerror 的函数：

msg： 错误相关的消息。
source： 与错误相关的脚本或文档的URL。
lineNo： 行号。
columnNo： 列号。
error： 与该错误相关的Error对象。

如果返回值为true，则只处理错误。

示例：

捕捉错误： 通过使用以下代码，我们可以捕捉所有的错误。

<!DOCTYPE html> 
<html> 
    <head> 
        <title> 
            Catch all JavaScript errors  
            and send them to server 
        </title> 
    </head> 
    <body> 
        <center> 
        <h1 style="color: green;"> 
            GeeksforGeeks 
        </h1> 
        <b> 
            Catch all JavaScript errors  
            and send them to server 
        </b> 
        <a href="javascript:myalert()">click here</a> 
  
        <script> 
            window.onerror =  
              function (msg, source, lineNo, columnNo, error) { 
                alert("Error: " + msg +  
                      "\nScript: " + source +  
                      "\nLine: " + lineNo +  
                      "\nColumn: " + columnNo +  
                      "\nStackTrace: " + error); 
                return true; 
            }; 
  
            var myalert = function () { 
                alert(gfg); 
            }; 
        </script> 
        </center> 
    </body> 
</html>

输出：

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

在服务器上发送错误： 在连接到 window.onerror 以尽可能捕捉错误信息之后，只剩下最后一步，即将错误信息传输到你的服务器。在下面的示例中，我们使用 jQuery的AJAX函数 将数据传输到服务器：

function captureError(err) { 
  var errorData = { 
    name: err.name,  
    message: err.line,  
    url: document.location.href, 
    stack: err.stack  
  }; 
  $.post('/logger/js/', { 
    data: errorData 
  }); 
}