資料結構
網路
關係資料庫管理系統 (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 次瀏覽
