開發javascript 錯誤上報工具-前端問答-PHP中文網

前言

在前端開發中，錯誤上報是一個常見且重要的問題。當用戶遇到錯誤時，我們需要收集錯誤資訊並將其回報到伺服器或第三方平台。如果沒有錯誤上報，我們就無法定位問題，也無法及時修復。

本文將說明如何發展一個基於 JavaScript 的錯誤上報工具，以便於我們在開發過程中快速地發現和解決問題。

第一步：錯誤訊息的收集

前端錯誤通常有兩種：JavaScript 錯誤和資源錯誤。 JavaScript 錯誤通常是指語法錯誤或執行階段錯誤。資源錯誤包括載入失敗、網路請求失敗等。

JavaScript 錯誤的收集

要收集 JavaScript 錯誤，我們需要綁定 window 物件上的 error 事件，並且收集錯誤訊息。 error 事件通常有三個屬性：message、filename 和 lineno：

window.onerror = function(message, source, lineno, colno, error) {
  console.log('Error:', message, source, lineno, colno, error);
  // 上报错误信息
}

登入後複製

當一個頁面上的 JavaScript 拋出一個未被捕獲的例外時，該事件將會被觸發。在此事件處理程序中，我們可以將錯誤訊息的相關資訊列印到控制台，並將其回報到伺服器或第三方平台。

資源錯誤的收集

要收集資源錯誤，我們需要綁定 window 物件上的 error 事件，並且收集資源的資訊。通常，資源錯誤發生時，我們會收到一個載入失敗的事件。這種事件可以透過綁定 window 物件上的 error 事件來捕獲：

window.addEventListener('error', function(event) {
  var target = event.target || event.srcElement;
  console.log('Load error:', target.tagName, target.src, event.message);
  // 上报错误信息
}, true);

登入後複製

這個事件處理程序將在頁面中任何資源載入失敗時觸發。在此事件處理程序中，我們可以將錯誤訊息列印到控制台，並將其回報到伺服器或第三方平台。

第二步：錯誤訊息的回報

當我們收集到錯誤訊息時，下一步就是將其回報到伺服器或第三方平台。我們可以透過 Ajax 請求、Image 物件或使用第三方函式庫來達成這個目的。在本文中，我們將使用提交 Ajax 請求的方式來實作。

Ajax 請求上報

假設我們使用的是jQuery 庫，我們可以使用如下程式碼來發送一個上報請求到伺服器：

$.ajax({
  url: '/api/report-error',
  method: 'POST',
  data: {
    message: message,
    source: source,
    lineno: lineno,
    colno: colno,
    error: error && error.stack
  }
});

登入後複製

透過傳送POST 請求，我們可以將錯誤訊息以資料的形式傳送到伺服器。在後台，我們可以透過解析請求體來取得這些訊息，從而進行錯誤定位和修復。

Image 物件上報

如果我們不想使用Ajax 請求或jQuery 函式庫，我們可以使用Image 物件來傳送一個GET 請求到伺服器：

var img = new Image();
img.src = '/api/report-error?message=' + encodeURIComponent(message)
  + '&source=' + encodeURIComponent(source)
  + '&lineno=' + encodeURIComponent(lineno)
  + '&colno=' + encodeURIComponent(colno)
  + '&error=' + encodeURIComponent(error && error.stack);

登入後複製

這種方式的缺點是，我們需要將錯誤訊息拼接到查詢字串中，這可能會造成URL 過長的問題。