如何捕获所有 JavaScript 错误并将其发送到服务器?
JavaScript 是一种著名的编程语言，与 HTML 和 CSS 一起是万维网 (WWW) 的核心语言之一。它允许程序员捕获事件并修改文档对象模型 (DOM)。在本文中，我们将学习如何捕获所有 JavaScript 错误并将其发送到服务器。
什么是 onerror?
onerror 是一个事件，每当加载外部文件或资源时发生错误或执行脚本时发生某些错误时都会触发该事件。
语法
onerror = (event, source, lineno, colno, error) => {};
参数:以下是语法中提到的参数的描述:
event:包含人类可读的错误消息的字符串。
source:提供脚本 URL 的字符串，这是导致问题的原因。
lineno:包含发生问题的脚本文件行号的整数。
colno:包含发生问题的脚本文件列号的整数。
error:抛出的错误对象。
示例
在下面的示例中，我将访问代码中未在任何地方定义的变量 a。这将导致 ReferenceError，我将使用 onerror 事件来捕获错误
<!DOCTYPE html>
<html>
<head>
<title>How to catch a ReferenceError with onerror?</title>
</head>
<body>
<h4>How to catch a ReferenceError with onerror?</h4>
<div id="result"> </div>
<script>
window.onerror = (event, url, line, column, error) => {
let msg = "";
msg += "Error: " + error;
document.getElementById("result").innerHTML = msg;
};
let sum = a + 2;
</script>
</body>
</html>
算法
我们将使用上面提到的 onerror 事件来帮助我们捕获错误。捕获错误后，我们将使用 AJAX(异步 JavaScript 和 XML)将数据发送到后端服务器。我们将使用 XMLHttpRequest 对象帮助我们将请求发送到服务器。我们可以向服务器发送任何类型的请求，但为了便于说明，我将发送 POST 请求。
我们还将定义一个将数据发送到的服务器。为了便于说明，我们将使用一个非常简单的 Express 服务器和一个 POST 路由。我使用了中间件:cors 和 bodyParser，以帮助我简化数据的接收。
让我们尝试借助示例来理解这一点:
示例
步骤 1:首先，我们将定义 HTML 文件。
<!DOCTYPE html>
<html>
<head>
<title>How to catch all JavaScript errors and send them to the server?</title>
</head>
<body>
<h4>How to catch all JavaScript errors and send them to the server?</h4>
<div>
<button id="main">SEND</button>
</div>
</body>
</html>
步骤 2:现在我们将为按钮添加一些样式。
<style>
#main{
border-radius: 10px;
}
</style>
步骤 3:现在我们要定义将错误发送到服务器的逻辑。
<script>
let data = [];
window.onerror = (event, url, line, column, error) => {
let err = {
line: line,
column: column,
msg: error.message,
}
data.push(err);
};
let button = document.getElementById("main");
button.onclick = () => {
let jsondata = JSON.stringify(data);
let xhr = new XMLHttpRequest();
let url = "http://localhost:5000/";
xhr.open('POST', url, true);
xhr.setRequestHeader("Content-Type", "application/json");
xhr.send(jsondata)
}
let sum = a + 2;
</script>
步骤 4:我们现在将定义接收数据的服务器。
import express from 'express';
import cors from 'cors';
import bodyParser from 'body-parser';
const app = express();
const port = 5000;
var jsonParser = bodyParser.json();
app.use(cors());
app.post("/", jsonParser, (req, res) => {
console.log(req.body);
});
app.listen(port, () => {
console.log(`Example app listening on port ${port}`);
});
完成所有步骤后，最终代码应如下所示:
前端
<!DOCTYPE html>
<html>
<head>
<title>How to catch all JavaScript errors and send them to the server?</title>
<style>
#main{
border-radius: 10px;
}
</style>
</head>
<body>
<h4>How to catch all JavaScript errors and send them to the server?</h4>
<div>
<button id="main">SEND</button>
</div>
<script>
let data = [];
window.onerror = (event, url, line, column, error) => {
let err = {
line: line,
column: column,
msg: error.message,
}
data.push(err);
};
let button = document.getElementById("main");
button.onclick = () => {
let jsondata = JSON.stringify(data);
let xhr = new XMLHttpRequest();
let url = "http://localhost:5000/";
xhr.open('POST', url, true);
xhr.setRequestHeader("Content-Type", "application/json");
xhr.send(jsondata)
}
let sum = a + 2;
</script>
</body>
</html>
后端
import express from 'express';
import cors from 'cors';
import bodyParser from 'body-parser';
const app = express();
const port = 5000;
var jsonParser = bodyParser.json();
app.use(cors());
app.post("/", jsonParser, (req, res) => {
console.log(req.body);
});
app.listen(port, () => {
console.log(`Example app listening on port ${port}`);
});
输出
Example app listening on port 5000
[ { line: 34, column: 19, msg: 'a is not defined' } ]
结论
在本文中，我们了解了如何借助 XMLHttpRequest 对象和 onerror 事件的组合来捕获错误并将其发送到服务器。一旦我们在服务器端收到错误，我们就可以制定策略向用户提供适当的错误消息，以便他/她可以采取相应的行动。
