JavaScript中异步错误捕获的六大陷阱避坑与解决方法详解

// ❌ 线上出现 Unhandled Rejection，但明明写了 try-catch
async function loadConfig() {
  try {
    const config = await fetchConfig();
    return config;
  } catch (e) {
    console.error('配置加载失败', e);
    return fallbackConfig;
  }
}

loadConfig();

// ✅ 在调用链末端加 catch 兜底
loadConfig().catch(err => {
  console.error('未捕获的配置加载异常', err);
});

// 浏览器
window.addEventListener('unhandledrejection', event => {
  console.error('未捕获的 Promise 拒绝:', event.reason);
  event.preventDefault(); // 阻止默认打印
});

// Node.js
process.on('unhandledRejection', (reason, promise) => {
  console.error('未捕获的 Promise 拒绝:', reason);
});

// ❌ 只会捕获到第一个错误，后面的请求全都"静默失败"
async function batchFetch(urls) {
  try {
    urls.forEach(async (url) => {
      const data = await fetch(url);
      processData(data);
    });
  } catch (e) {
    console.error('批量请求失败', e);
  }
}

// ✅ 方案一：for...of + await（串行）
async function batchFetchSequential(urls) {
  for (const url of urls) {
    try {
      const data = await fetch(url);
      processData(data);
    } catch (e) {
      console.error(`请求失败: ${url}`, e);
    }
  }
}

// ✅ 方案二：Promise.allSettled（并行，不中断）
async function batchFetchAllSettled(urls) {
  const results = await Promise.allSettled(
    urls.map(url => fetch(url).then(data => processData(data)))
  );

  const errors = results.filter(r => r.status === 'rejected');
  if (errors.length > 0) {
    console.error(`${errors.length} 个请求失败`, errors.map(e => e.reason));
  }
}

// ❌ window.onerror 在 async await 下失效
window.onerror = function(msg, url, line, col, error) {
  console.log('全局错误:', msg);
  return true;
};

async function main() {
  throw new Error('async error');
}
main();

// ✅ 全局错误监控的正确姿势
window.addEventListener('error', event => {
  // 捕获资源加载错误 + 同步 JS 错误
  console.error('全局错误:', event.error || event.message);
});

window.addEventListener('unhandledrejection', event => {
  // 捕获 async/await 和 Promise 的未处理拒绝
  console.error('未处理的 Promise 拒绝:', event.reason);
});

// ❌ 线上排查了很久才发现是 JSON 解析异常被吞了
async function fetchAndParse(url) {
  try {
    const res = await fetch(url);
    const text = await res.text(); // 假设接口返回了 502 HTML 页面
    return JSON.parse(text);       // ❌ 此时 JSON.parse 抛异常
  } catch (e) {
    // 注意：e 是字符串 '"Unexpected token < in JSON at position 0"'
    // 日志里只有 "JSON.parse 失败"，没有原始响应内容
    console.error('JSON.parse 失败:', e.message);
    return null;
  }
}

// ✅ 方案一：细分 try-catch 并记录上下文
async function fetchAndParse(url) {
  let res, text;

  try {
    res = await fetch(url);
    text = await res.text();
    return JSON.parse(text);
  } catch (e) {
    console.error('请求/解析失败:', {
      url,
      status: res?.status,
      text: text?.slice(0, 500),   // 保存原始响应的前 500 字符
      error: e instanceof Error ? e.message : String(e)
    });
    return null;
  }
}

// ✅ 方案二：用 async/await 包裹 JSON.parse 单独 try
async function safeJsonParse(str) {
  try {
    return { ok: true, data: JSON.parse(str) };
  } catch (e) {
    return { ok: false, error: e, raw: str };
  }
}

// ❌ 线上日志出现大量 "[object Object]" 堆栈缺失
async function risky() {
  // 模拟：某个 SDK 抛出的不是 Error
  throw { code: 403, message: 'Forbidden', details: { userId: 123 } };
}

try {
  await risky();
} catch (e) {
  // e 不是 Error 对象
  console.error('错误详情:', e);         // { code: 403, message: 'Forbidden', ... }
  console.error(e.stack);                // ❌ undefined
  console.error(e.message);              // ❌ undefined（注意不是 'Forbidden'）
  sendToErrorMonitor(e);                 // ❌ 监控平台收不到有效 stack
}

// ✅ 统一错误格式化
function normalizeError(err) {
  if (err instanceof Error) return err;

  // 对象类型：提取关键信息
  if (typeof err === 'object' && err !== null) {
    const msg = err.message || err.msg || err.code || '';
    const normalized = new Error(String(msg));
    normalized.original = err;
    return normalized;
  }

  // 字符串/数字/其他类型
  return new Error(String(err));
}

// 使用方式
try {
  await risky();
} catch (e) {
  const normalized = normalizeError(e);
  console.error('原始错误:', e);
  console.error('规范化错误:', normalized.message);
  console.error(normalized.stack);  // ✅ 一定有 stack
  sendToErrorMonitor(normalized);
}

// ❌ 异常被静默吞掉，catch 形同虚设
async function process() {
  try {
    await doRiskyWork();
  } catch (e) {
    console.error('捕获到异常:', e);
    throw e;  // 重新抛出，期望调用方处理
  } finally {
    return 'fallback'; // ❌ finally 中的 return 覆盖了 throw
  }
}

const result = await process();
console.log(result); // 'fallback' — 异常被悄无声息地吞掉了

// ✅ 方案一：finally 中不要 return
async function process() {
  try {
    return await doRiskyWork();
  } catch (e) {
    console.error('捕获到异常:', e);
    throw e;
  } finally {
    // ✅ 只做清理，不要 return
    await releaseResources();
    // 没有 return！
  }
}

// ✅ 方案二：如果确实需要 finally 返回值，明确语义
async function process() {
  let result;
  try {
    result = await doRiskyWork();
  } catch (e) {
    console.error('捕获到异常:', e);
    result = 'errorFallback';
  } finally {
    await releaseResources();
  }
  return result; // 在 finally 之外 return
}