数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化学
生物
数学
英语
经济学
心理学
社会学
服装设计
法学如何捕获所有 JavaScript 错误并将其发送到服务器？
JavaScript 是一种著名的编程语言，是万维网 (WWW) 的核心语言之一，与 HTML 和 CSS 并列。它允许程序员捕获事件并修改文档对象模型 (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 请求。
我们还将定义一个服务器，我们将向其发送数据。出于说明的目的，我们将使用一个带有单个 POST 路由的非常简单的 express 服务器。我使用了中间件：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 = "https://: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 = "https://: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 事件来捕获错误并将其发送到服务器。一旦我们在服务器端收到错误，我们就可以制定策略向用户提供适当的错误消息，以便他/她可以相应地采取行动。
315 次浏览
