在高性能前端应用中，错误捕获与处理是提升稳定性和用户体验的关键环节。本文围绕 JavaScript错误捕获技巧、详解与 实战应用 展开，聚焦从运行时错误到异步错误的捕获策略、日志记录与上报，以及对性能的影响。
通过系统化的错误捕获方案，前端开发者可以在不影响页面渲染的前提下，快速定位并修复问题。全面覆盖同步与异步错误，并结合实际场景提供可落地的实现方式。
一、错误捕获的基础原理
1.1 同步错误与异步错误的区分
在前端应用中，同步错误通常发生在代码执行阶段，例如变量未定义、类型错误等。与此相对，异步错误往往在回调、定时器、Promise链或事件处理程序中产生，往往不易被第一时间发现。
理解这两类错误的差异，有助于选择合适的捕获策略。统一的错误捕获方案需要覆盖两者，并确保日志能够可靠上报。
1.2 错误对象的结构
JavaScript的Error对象包含名称、信息、堆栈等字段，便于定位问题。错误信息越清晰，定位越快。
典型字段包括 name、message、stack，在生产环境建议对栈信息进行脱敏处理，以避免泄露内部实现细节。
try {const arr = JSON.parse('{"a":1}');
} catch (e) {console.error('JSON解析错误', e.name, e.message);console.error(e.stack);
}二、全局错误捕获机制
2.1 全局错误事件：window.onerror与unhandledrejection
全局错误处理是覆盖整个应用的最后一道防线。通过window.onerror可以捕获同步错误，通过unhandledrejection捕获未处理的 Promise 拒绝。结合这两者，可以实现对绝大多数错误的可观测性。
在实际场景中，全局处理不仅要记录错误，还要确保不会影响用户体验，例如避免在错误发生时阻塞 UI 渲染。
// 全局同步错误捕获
window.onerror = function (message, source, lineno, colno, error) {// 将错误信息发送到日志服务器console.error('[GlobalError]', message, source, lineno, colno, error && error.stack);return false; // 允许默认处理
};// 全局未处理的 Promise 拒绝捕获
window.addEventListener('unhandledrejection', function (e) {// e.reason 为拒绝原因console.error('[UnhandledRejection]', e.reason && e.reason.stack ? e.reason.stack : e.reason);
});2.2 Promise链中的错误处理模式
在 Promise 链中，错误需要通过 catch() 捕获，避免冒泡到全局未处理。合理的错误处理策略应确保日志记录与用户反馈分离，日志收集与上报不阻塞核心业务。
推荐在链尾使用一个全局的统一处理入口，以便对重复出现的错误进行聚合分析。下列示例演示了一个基本的日志上报模式。
fetch('/api/data').then(res => res.json()).then(data => {// 处理数据}).catch(err => {// 本地处理并上报错误console.error('请求或解析失败', err);});三、实战技巧与案例
3.1 网络请求中的错误处理（fetch/axios）
网络请求是前端最常发生错误的场景之一。对 fetch，要处理网络错误、非 2xx 响应以及解析错误；对 axios，需要利用响应拦截器统一处理错误。合并使用全局错误捕获，可以确保生产环境的异常能够被稳定记录。
在实际应用中，通常会在响应阶段对状态码进行统一判断，并将错误信息规范化投递给日志系统。
// fetch 的错误处理示例
fetch('/api/user').then(res => {if (!res.ok) throw new Error(`请求失败，状态码 ${res.status}`);return res.json();}).then(user => {// 使用 user 数据}).catch(err => {// 本地处理并记录console.error('网络请求错误', err);});// axios 的错误处理示例（拦截器）
axios.interceptors.response.use(response => response,error => {// 统一错误处理console.error('请求错误', error.response ? error.response.data : error.message);return Promise.reject(error);}
);3.2 错误日志的本地聚合与上报
为了降低对用户体验的影响，可以在本地进行聚合，定时或按满载阈值将日志上报到远程服务器。本地聚合有助于降低带宽消耗并提高上报的稳定性。
同时，需要注意隐私保护与脱敏处理，避免敏感信息泄露，确保日志字段的最小化和可审计性。
// 简单的本地聚合与定时上报
const errorQueue = [];
function reportError(err) {errorQueue.push({ time: Date.now(), message: err.message, stack: err.stack });if (errorQueue.length >= 5) {sendErrors();}
}
function sendErrors() {// 假设 sendLog 是一个封装好的上报函数sendLog('/log/errors', errorQueue.splice(0, errorQueue.length));
}
setInterval(sendErrors, 60000);
window.onerror = function (message, source, lineno, colno, error) {reportError(error || new Error(message));
};四、性能与安全考量
4.1 避免捕获过度影响性能
错误捕获机制应尽量轻量，避免在高频事件（如滚动、输入等）中产生大量同步操作。节流与去重策略可以降低日志重复度，减少对渲染和帧率的影响。
在实现中，优先使用异步日志上报、批量发送，并对错误信息进行裁剪与压缩，保障页面渲染的平滑性。
// 使用节流对日志上报进行控制
let lastSent = 0;
function throttleSendErrors() {const now = Date.now();if (now - lastSent > 30000 && errorQueue.length) {lastSent = now;sendErrors();}
}4.2 错误信息的隐私保护
在日志中避免直接记录敏感用户信息，去标识化是基本原则。对于堆栈信息，尽量去除内部实现细节，以降低信息泄露风险。
同时，可以按照法规和公司策略，对日志字段进行分级存储与访问控制，确保只有授权的工具和人员可以查看全量数据。
// 简单的脱敏处理示例
function sanitizeError(err) {const safeStack = (err.stack || '').replace(/([A-Za-z0-9._-]+@?)[^/\n]+/g, '$1***').split('\\n').slice(0, 5).join('\\n');return {name: err.name,message: err.message,stack: safeStack};
}