通過對前端靜態(tài)資源加載錯誤的敏感監(jiān)聽，我們能夠實時探測資源加載失敗的情形，從而確保頁面的各個元素能夠正確呈現(xiàn)，避免用戶在界面交互中受到不必要的困擾。而JavaScript執(zhí)行錯誤的監(jiān)控有助于捕獲那些未被try-catch等機制所捕獲的異常，及時定位并修復埋藏在代碼中的缺陷，從而有助于提升整體應用的穩(wěn)定性。此外，在AJAX請求方面，異常的監(jiān)控和處理還可以確保數(shù)據(jù)的準確傳遞，從而為用戶提供連貫無縫的交互體驗。

在本文中，我們將深入探討如何對這三個關鍵問題如靜態(tài)資源加載問題、JS執(zhí)行錯誤和AJAX請求錯誤進行有效監(jiān)聽，以確保前端應用的高質量交付。

1.監(jiān)控和處理前端靜態(tài)資源加載錯誤

使用 performance API 監(jiān)控資源加載時間

在現(xiàn)代 Web 應用中，前端性能是至關重要的一環(huán)。通過 performance API，我們可以深入了解各個靜態(tài)資源的加載時間，從而針對慢加載資源采取優(yōu)化措施。

window.addEventListener('load', function() {
  const resources = performance.getEntriesByType('resource');
  const slowResourceThreshold = 1000; // 閾值設定為1000ms
  const slowResources = resources.filter(resource => resource.duration > slowResourceThreshold);

  slowResources.forEach(resource => {
    console.log(`慢加載資源：${resource.name}，加載時間：${resource.duration}ms`);
    // 可以進行進一步的處理，例如加載備用資源或分析優(yōu)化策略
  });
});

上面的代碼在頁面加載后，通過遍歷來監(jiān)控資源的加載時間，并識別加載超過閾值的滿資源。

對代碼進行封裝：

// 獲取所有資源的列表
const resources = performance.getEntriesByType('resource'); 

// 遍歷列表判斷資源加載時間 
resources.forEach(item => {
  if (item.duration > 1000) { 
    // 超過1000ms判定為慢資源
    reportSlowResource(item); 
  }
});

// 上報慢資源信息
function reportSlowResource(resource) {
  const data = {
    name: resource.name,
    duration: resource.duration
  };
  
  // 上報到監(jiān)控系統(tǒng)
  report(data); 
}

這樣我們可以明確哪些資源的加載特別慢,進行針對性優(yōu)化。

監(jiān)聽資源加載錯誤事件

通過監(jiān)聽資源加載錯誤事件，我們可以實時捕獲資源加載失敗的情況，從而快速采取應對措施。

window.addEventListener('error', function(event) {
  if (event.target.tagName === 'SCRIPT' || event.target.tagName === 'LINK' || event.target.tagName === 'IMG') {
    console.log(`靜態(tài)資源加載錯誤：${event.target.src || event.target.href}`);
    // 可以執(zhí)行適當?shù)腻e誤處理，如加載備用資源或展示錯誤信息
  }
});

此代碼段添加了一個監(jiān)聽器，用于捕獲所有的靜態(tài)資源加載錯誤。通過判斷錯誤事件的目標元素的標簽名，確定錯誤類型是腳本、鏈接還是圖片。如果錯誤發(fā)生在這些特定類型的資源上（SCRIPT、LINK、IMG），則會輸出錯誤信息，并可以在適當?shù)那闆r下執(zhí)行錯誤處理，例如加載備用資源或展示錯誤信息。

總體來說，這段代碼的目標是捕獲并處理靜態(tài)資源加載錯誤，不僅能夠在控制臺輸出錯誤信息，還可以通過上報函數(shù)將錯誤信息傳遞到監(jiān)控系統(tǒng)，以便分析和處理。它能幫助開發(fā)團隊更好地應對前端資源加載問題，提升用戶體驗和應用穩(wěn)定性。

統(tǒng)計網(wǎng)絡請求失敗次數(shù)

對于網(wǎng)絡請求異常，我們可以通過統(tǒng)計請求失敗次數(shù)來監(jiān)控網(wǎng)絡環(huán)境的穩(wěn)定性。

let reqFailedCount = 0;

function ajaxRequest(url) {
  const xhr = new XMLHttpRequest();

  xhr.onerror = () => {
    reqFailedCount++;
    if (reqFailedCount > 10) {
      reportNetWorkError();
    }
  };

  xhr.open('GET', url);
  xhr.send();
}

function reportNetWorkError() {
  // 捕獲網(wǎng)絡請求失敗次數(shù)異常
  // 進行上報或報警
}

這部分代碼是在每次請求失敗時，通過遞增reqFailedCount變量來記錄失敗的次數(shù)，并在失敗次數(shù)超過閾值時調(diào)用reportNetWorkError函數(shù)進行錯誤上報或報警。這是一種基于每次請求的網(wǎng)絡請求失敗監(jiān)控機制。

主動檢測資源加載失敗

除了 passively 監(jiān)聽錯誤事件，我們還可以主動測試資源加載錯誤的處理邏輯是否正確。

function testResourceLoading() {
  const testImage = new Image();
  testImage.src = 'nonexistent-image.jpg';

  testImage.onload = function() {
    console.log('資源加載正常');
  };

  testImage.onerror = function() {
    console.log('資源加載異常，可能是錯誤處理邏輯存在問題');
    // 可以檢查錯誤處理邏輯是否生效
  };
}

// 調(diào)用 testResourceLoading 進行主動測試

2.監(jiān)控和處理 JavaScript 執(zhí)行錯誤

監(jiān)聽 window 的 error 事件

JavaScript 執(zhí)行錯誤是前端開發(fā)中常見的問題，使用 error 事件來監(jiān)聽未被 try-catch 捕獲的錯誤。

window.addEventListener('error', function(event) {
  console.log(`JavaScript 執(zhí)行錯誤：${event.message}，位置：${event.filename}:${event.lineno}:${event.colno}`);
  // 可以執(zhí)行錯誤處理，如上報錯誤或提供友好的錯誤提示
});

這段代碼使用了window.addEventListener來監(jiān)聽全局的錯誤事件。當頁面中發(fā)生JavaScript錯誤時，這個監(jiān)聽器會被觸發(fā)。

在事件處理函數(shù)中，通過event對象可以獲得關于錯誤的信息，如錯誤信息、出錯的文件名和出錯代碼的行號。然后，錯誤事件被傳遞給reportJSError函數(shù)，用于將錯誤信息上報給監(jiān)控系統(tǒng)或進行其他處理。

這種方式通過監(jiān)聽全局的錯誤事件，可以捕獲到未被try-catch等機制捕獲的JavaScript執(zhí)行錯誤。可以獲取到錯誤的具體信息，如錯誤信息、錯誤文件名和行號，有助于定位和解決問題。

但是，這種監(jiān)聽方式無法捕獲異步代碼（如Promise內(nèi)部的錯誤），因此在面對異步操作時，可能需要配合使用專業(yè)的錯誤監(jiān)控SDK。

總體來說，這段代碼提供了一種捕獲全局JavaScript錯誤的方法，有助于及時發(fā)現(xiàn)和處理未被捕獲的錯誤，提升應用的穩(wěn)定性和用戶體驗。

使用錯誤監(jiān)控 SDK

為了更精確和完善地監(jiān)控 JavaScript 執(zhí)行錯誤，可以引入專業(yè)的錯誤監(jiān)控 SDK，如 Sentry 或 Rollbar。

// 在應用初始化時配置錯誤監(jiān)控 SDK
Sentry.init({
  dsn: 'YOUR_DSN_KEY',
  // 更多配置項...
});

// 在代碼中使用錯誤監(jiān)控 SDK 上報錯誤
try {
  // 有可能拋出異常的代碼
} catch (error) {
  Sentry.captureException(error);
}

集成 Sentry 錯誤監(jiān)控 SDK 可以方便地捕獲各種類型的錯誤和異常，包括 JavaScript 錯誤、未捕獲異常等。

Sentry.captureException方法可以捕獲異常的詳細信息，包括錯誤堆棧、文件和行號等，幫助快速定位問題。

合理進行錯誤邊界處理

即使有監(jiān)控系統(tǒng)，錯誤邊界處理仍然不可或缺。使用 try-catch 來保護代碼段，避免錯誤影響到整個應用。

function loadData() {
  try {
    // 調(diào)用接口加載數(shù)據(jù) 
    $.get('/data', data => {
      // ...處理數(shù)據(jù)
    });
  } catch (error) {
    // 數(shù)據(jù)加載出錯時的降級處理
    showFallbackData();
  }
} 

function showFallbackData() {
  // 顯示緩存或mock的數(shù)據(jù)
}

loadData函數(shù)封裝了數(shù)據(jù)加載的過程，它通過嘗試調(diào)用接口來獲取數(shù)據(jù)。如果數(shù)據(jù)加載過程中出現(xiàn)異常，即使捕獲到錯誤，也會執(zhí)行showFallbackData函數(shù)來展示備用的數(shù)據(jù)。

這種設計適用于在復雜網(wǎng)絡環(huán)境中，當數(shù)據(jù)加載遇到問題時能夠提供恰當?shù)姆答仭＠纾梢栽跀?shù)據(jù)加載失敗時，展示預先準備的緩存數(shù)據(jù)或者模擬數(shù)據(jù)，從而確保用戶仍然能夠獲得有價值的信息。

3.監(jiān)控和處理 AJAX 請求錯誤

統(tǒng)一的請求錯誤處理函數(shù)

在處理 AJAX 請求時，提供一個統(tǒng)一的錯誤處理函數(shù)，確保錯誤可以被集中處理。

function handleAjaxError(jqXHR, textStatus, errorThrown) {
  console.log(`AJAX 請求錯誤：${textStatus}`);
  // 可以根據(jù)不同的 textStatus 執(zhí)行不同的處理邏輯
}

$.ajaxSetup({
  error: handleAjaxError,
});

// 所有的 AJAX 請求都會調(diào)用 handleAjaxError 進行錯誤處理

這種設計適用于項目中存在多個 AJAX 請求的情況，能夠幫助在出現(xiàn)錯誤時保持代碼的優(yōu)雅和一致性。通過全局設置錯誤處理函數(shù)，開發(fā)者能夠集中精力處理錯誤邏輯，從而提高效率并降低代碼重復性。

根據(jù)狀態(tài)碼分類處理

根據(jù) AJAX 請求的 HTTP 狀態(tài)碼，執(zhí)行不同的錯誤處理邏輯。

function handleAjaxError(jqXHR, textStatus, errorThrown) {
  if (jqXHR.status === 401) {
    console.log('未授權，跳轉到登錄頁');
  } else if (jqXHR.status === 404) {
    console.log('請求接口不存在');
  } else if (jqXHR.status === 500) {
    console.log('服務器錯誤，可以重試');
  }
  // 更多狀態(tài)碼處理...
}

失敗請求重試機制

在網(wǎng)絡不穩(wěn)定的情況下，可以實現(xiàn)一個簡單的失敗請求重試機制，提高請求成功率。

let retryCount = 0;
const maxRetryCount = 3;

function retryAjaxRequest(url, options) {
  $.ajax(url, options)
    .fail(function() {
      if (retryCount < maxRetryCount) {
        retryCount++;
        retryAjaxRequest(url, options); // 重試請求
      }
    });
}

retryAjaxRequest('https://api.example.com/data', { method: 'GET' });

代碼中的 retryAjaxRequest 函數(shù)封裝了一個 AJAX 請求，當請求失敗時，它會檢查 retryCount（重試計數(shù)）是否小于設定的 maxRetryCount（最大重試次數(shù)）。如果計數(shù)允許，它會遞增 retryCount，然后再次調(diào)用自身進行重試請求。

可以確保在請求失敗的情況下，自動進行最多 maxRetryCount 次的重試，從而提高了數(shù)據(jù)的可靠性。這對于確保數(shù)據(jù)傳輸?shù)某晒Ψ浅Ｓ杏茫绕涫窃诓环€(wěn)定的網(wǎng)絡環(huán)境中。

異常請求緩存處理

對于某些非核心業(yè)務的 AJAX 請求，可以考慮在請求失敗時返回緩存數(shù)據(jù)，提升用戶體驗。

let cacheData = null;

function fetchCachedData() {
  if (cacheData) {
    return Promise.resolve(cacheData);
  } else {
    return $.ajax('https://api.example.com/cached-data', { method: 'GET' })
      .done(function(data) {
        cacheData = data;
      })
      .fail(function() {
        console.log('緩存數(shù)據(jù)請求失敗，返回舊的緩存數(shù)據(jù)');
      });
  }
}

// 使用 fetchCachedData 獲取緩存數(shù)據(jù)
fetchCachedData().then(function(data) {
  console.log('獲取到緩存數(shù)據(jù)：', data);
});

上面代碼的作用：

• 智能緩存數(shù)據(jù)獲取：在函數(shù) fetchCachedData 中，代碼首先檢查是否已經(jīng)存在緩存的數(shù)據(jù)。如果存在，它會立即將緩存數(shù)據(jù)通過 Promise 返回。這種機制可以在請求新數(shù)據(jù)失敗的情況下，智能地提供已有的緩存數(shù)據(jù)，從而避免數(shù)據(jù)不可用導致的問題。
• 網(wǎng)絡請求失敗降級：當嘗試獲取新數(shù)據(jù)的請求失敗時，代碼并不終止。相反，它會記錄請求失敗的消息，并返回之前緩存的數(shù)據(jù)。這種健壯的降級機制確保用戶在網(wǎng)絡不穩(wěn)定或請求失敗的情況下仍然能夠獲得舊的可用數(shù)據(jù)，維護了應用的可用性。
• 用戶體驗優(yōu)化：通過提供緩存數(shù)據(jù)的機制，即使網(wǎng)絡請求失敗，用戶也不會受到直接影響。他們?nèi)匀荒軌颢@得過去的數(shù)據(jù)，并且無需知道請求失敗的細節(jié)。這種方式有助于提升用戶體驗，減少用戶因數(shù)據(jù)不可用而受到的困擾。
• 減輕服務器壓力：通過在請求失敗時返回緩存數(shù)據(jù)，可以減輕服務器的負擔。如果多個用戶在同一時間請求數(shù)據(jù)，并且請求都失敗，服務器不會面臨頻繁的請求壓力，因為部分用戶可以使用緩存數(shù)據(jù)。

請求隊列順序處理

為避免大量請求同時發(fā)起導致服務壓力激增，可以實現(xiàn)一個請求隊列，順序地發(fā)出請求。

const requestQueue = [];
let isProcessing = false;

function enqueueRequest(url, options) {
  return new Promise((resolve, reject) => {
    requestQueue.push({
      url,
      options,
      resolve,
      reject,
    });
    if (!isProcessing) {
      processQueue();
    }
  });
}

async function processQueue() {
  isProcessing = true;
  while (requestQueue.length > 0) {
    const { url, options, resolve, reject } = requestQueue.shift();
    try {
      const result = await $.ajax(url, options);
      resolve(result);
    } catch (error) {
      reject(error);
    }
  }
  isProcessing = false;
}

// 使用 enqueueRequest 發(fā)起請求
enqueueRequest('https://api.example.com/data', { method: 'GET' })
  .then(function(data) {
    console.log('請求成功：', data);
  })
  .catch(function(error) {
    console.log('請求失敗：', error);
  });

段代碼實現(xiàn)了一個精巧的請求隊列管理系統(tǒng)。它的主要目的是在高并發(fā)情況下，以有序的方式處理請求，保證每個請求都在適當?shù)臅r機被調(diào)用并獲得響應，從而避免請求的混亂和交叉。

1. 請求隊列控制：通過 enqueueRequest 函數(shù)，請求被有序地加入了一個請求隊列中。每個請求都包含了其相關參數(shù)和 Promise 的解決與拒絕函數(shù)。這種方法確保了請求的有序性，避免了并發(fā)請求引發(fā)的競爭條件和錯位問題。
2. 逐個處理請求：processQueue 函數(shù)負責逐個處理請求隊列中的請求。通過異步的方式，它依次處理每個請求，等待一個請求成功后再處理下一個請求。這種方式保證了請求的順序執(zhí)行，防止了多個請求同時觸發(fā)并導致數(shù)據(jù)交叉的情況。
3. 異步并發(fā)安全：代碼使用異步操作來處理請求隊列，確保了在高并發(fā)場景下的安全執(zhí)行。同時，它通過合理地利用異步的特性，避免了阻塞主線程，從而保持了應用的響應性。
4. 錯誤處理機制：對于每個請求，無論成功還是失敗，都會調(diào)用相應的解決或拒絕函數(shù)。這保證了無論請求的結果如何，都能夠得到適當?shù)奶幚恚苊饬宋刺幚淼腻e誤或懸掛的 Promise。

這種方法適用于需要確保請求順序的場景，如需要按順序加載資源或執(zhí)行一系列關聯(lián)操作的情況。

4.總結

針對靜態(tài)資源加載錯誤，通過監(jiān)控資源加載時間和監(jiān)聽資源加載錯誤事件，我們可以及時發(fā)現(xiàn)資源加載問題，并做出優(yōu)化處理，從而提升頁面性能和用戶體驗。同時，合理進行請求失敗次數(shù)的統(tǒng)計和主動測試，能夠有效捕獲網(wǎng)絡環(huán)境異常，進一步增強前端應用的穩(wěn)定性。

對于 JavaScript 執(zhí)行錯誤，通過監(jiān)聽 window 的 error 事件和引入錯誤監(jiān)控 SDK，我們能夠準確捕獲并上報各類執(zhí)行錯誤，從而迅速發(fā)現(xiàn)并解決潛在問題。合理的錯誤邊界處理，能夠隔離錯誤，避免錯誤波及到整個應用。

在處理 AJAX 請求錯誤方面，統(tǒng)一的請求錯誤處理函數(shù)、根據(jù)狀態(tài)碼分類處理、失敗請求重試機制以及請求隊列順序處理，都能夠提高請求成功率，并且在網(wǎng)絡不穩(wěn)定的情況下，保障數(shù)據(jù)的正常獲取。

綜上所述，通過科學合理地監(jiān)控和處理前端錯誤，我們可以提升應用的健壯性和用戶體驗，確保應用在各種異常情況下依然能夠穩(wěn)定運行。