JavaScript中的錯誤監控與日誌記錄技術-js教程-PHP中文網

JavaScript中的錯誤監控與日誌記錄技術

JavaScript 錯誤監控和日誌記錄對於維護應用程式的穩定性和效能至關重要。在本文中，我們將探索可以幫助您有效監控和記錄 JavaScript 程式碼中的錯誤的先進技術。我們將介紹全域錯誤處理程序、try/catch 區塊、堆疊追蹤、日誌庫、自訂錯誤類別、錯誤報告和通知以及生產中的錯誤追蹤。

全域錯誤處理程序

全域錯誤處理程序可讓您擷取並處理 JavaScript 應用程式執行階段發生的錯誤。透過利用 window.onerror 和 window.onunhandledrejection，您可以記錄或報告錯誤和異常。

範例

window.onerror = function(message, url, line, column, error) {
   console.error("An error occurred:", message);
   console.error("URL:", url);
   console.error("Line:", line);
   console.error("Column:", column);
   console.error("Error object:", error);
};

window.onunhandledrejection = function(event) {
   console.error("Unhandled promise rejection:", event.reason);
};

登入後複製

說明

所提供的程式碼在 JavaScript 中設定全域錯誤處理程序。 window.onerror 捕獲未處理的錯誤並記錄錯誤訊息、腳本 URL、行號和列號以及錯誤物件。 window.onunhandledrejection 捕獲未處理的 Promise 拒絕並記錄拒絕原因。這些處理程序有助於識別和記錄網頁運行時發生的錯誤。

輸出

An error occurred: ReferenceError: someVariable is not defined
URL: https://example.com/js/app.js
Line: 42
Column: 15
Error object: ReferenceError: someVariable is not defined

登入後複製

嘗試/捕獲區塊

Using try/catch blocks allows you to handle specific exceptions and gracefully recover from errors that might occur within a block of code.

範例

try {
   // Code that might throw an error
   const result = someFunction();
   console.log("Result:", result);
} catch (error) {
   console.error("An error occurred:", error);
}

登入後複製

說明

提供的程式碼使用 try/catch 區塊來處理 JavaScript 中的潛在錯誤。 try 區塊包含可能引發錯誤的程式碼，如果發生錯誤，則執行 catch 區塊，它使用 console.error() 記錄錯誤訊息。

輸出

An error occurred: TypeError: someFunction is not a function

登入後複製

堆疊追蹤

堆疊追蹤提供了有關導致錯誤的函數呼叫順序的寶貴資訊。它們有助於了解錯誤的根源並有效地診斷問題。

範例

function foo() {
   bar();
}

function bar() {
   throw new Error("Something went wrong");
}

try {
   foo();
} catch (error) {
   console.error("Error stack trace:", error.stack);
}

登入後複製

說明

程式碼定義了兩個函數：foo() 和 bar()。當 foo() 被呼叫時，它會呼叫 bar()，它會使用 throw new Error() 故意拋出錯誤。

程式碼包含在 try/catch 區塊中。當 try 區塊內拋出錯誤時，catch 區塊會擷取該錯誤，並將錯誤物件儲存在 error 變數中。

catch 區塊使用 console.error() 和 error.stack 屬性記錄錯誤的堆疊追蹤。

輸出

Error stack trace: Error: Something went wrong
   at bar (script.js:5:9)
   at foo (script.js:2:3)
   at script.js:10:3

登入後複製

記錄庫

像 Sentry、Rollbar 和 LogRocket 這樣的日誌庫提供了進階錯誤監控功能。它們簡化了錯誤追蹤、聚合和報告，並且通常提供與框架和服務的整合。

範例

// Using Sentry logging library
Sentry.init({
   dsn: 'your-sentry-dsn',
   // Other configuration options
});

try {
   // Code that might throw an error
} catch (error) {
   Sentry.captureException(error);
}

登入後複製

說明

程式碼初始化 Sentry 日誌庫並設定錯誤擷取。在try區塊內，可以放置可能拋出錯誤的程式碼，如果發生錯誤，catch區塊使用Sentry.captureException()將錯誤傳送給Sentry進行記錄和分析。

自訂錯誤類別

Extending the built-in Error class allows you to create custom error classes with additional properties and methods. This makes error handling more informative and easier.

#例子

#Consider the .

class MyCustomError extends Error {
   constructor(message, customProperty) {
      super(message);
      this.customProperty = customProperty;
   }
}

try {
   throw new MyCustomError("Something went wrong.", "Custom data");
} catch (error) {
   console.error("Custom property:", error.customProperty);
}

登入後複製

說明

程式碼定義了一個擴充 Error 的自訂錯誤類別 MyCustomError。在 try 區塊內，它會拋出一個帶有特定錯誤訊息和自訂屬性的 MyCustomError 實例。在 catch 區塊中，它記錄捕獲的錯誤物件的自訂屬性。

輸出

Custom property: Custom data

登入後複製

錯誤回報和通知

Integrate your error monitoring system with notification services like email or chat platforms to receive real-time alerts when critical errors occur.

#範例

Consider the code shown below.

function sendErrorNotification(error) {
   // Code to send an error notification via email or chat
}

try {
   // Code that might throw an error
} catch (error) {
   sendErrorNotification(error);
}

登入後複製

說明