精准捕获前端错误与异常：优化应用的可靠性与用户体验

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`);
    // 可以进行进一步的处理，例如加载备用资源或分析优化策略
  });
});

// 获取所有资源的列表
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
  };
  
  // 上报到监控系统
  report(data); 
}

window.addEventListener('error', function(event) {
  if (event.target.tagName === 'SCRIPT' || event.target.tagName === 'LINK' || event.target.tagName === 'IMG') {
    console.log(`静态资源加载错误：${event.target.src || event.target.href}`);
    // 可以执行适当的错误处理，如加载备用资源或展示错误信息
  }
});

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() {
  // 捕获网络请求失败次数异常
  // 进行上报或报警
}

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

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

  testImage.onerror = function() {
    console.log('资源加载异常，可能是错误处理逻辑存在问题');
    // 可以检查错误处理逻辑是否生效
  };
}

// 调用 testResourceLoading 进行主动测试

window.addEventListener('error', function(event) {
  console.log(`JavaScript 执行错误：${event.message}，位置：${event.filename}:${event.lineno}:${event.colno}`);
  // 可以执行错误处理，如上报错误或提供友好的错误提示
});

// 在应用初始化时配置错误监控 SDK
Sentry.init({
  dsn: 'YOUR_DSN_KEY',
  // 更多配置项...
});

// 在代码中使用错误监控 SDK 上报错误
try {
  // 有可能抛出异常的代码
} catch (error) {
  Sentry.captureException(error);
}

function loadData() {
  try {
    // 调用接口加载数据 
    $.get('/data', data => {
      // ...处理数据
    });
  } catch (error) {
    // 数据加载出错时的降级处理
    showFallbackData();
  }
} 

function showFallbackData() {
  // 显示缓存或mock的数据
}

function handleAjaxError(jqXHR, textStatus, errorThrown) {
  console.log(`AJAX 请求错误：${textStatus}`);
  // 可以根据不同的 textStatus 执行不同的处理逻辑
}

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

// 所有的 AJAX 请求都会调用 handleAjaxError 进行错误处理

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('服务器错误，可以重试');
  }
  // 更多状态码处理...
}

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' });

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('缓存数据请求失败，返回旧的缓存数据');
      });
  }
}

// 使用 fetchCachedData 获取缓存数据
fetchCachedData().then(function(data) {
  console.log('获取到缓存数据：', data);
});

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 发起请求
enqueueRequest('https://api.example.com/data', { method: 'GET' })
  .then(function(data) {
    console.log('请求成功：', data);
  })
  .catch(function(error) {
    console.log('请求失败：', error);
  });