vue实现错误上报系统
Vue 错误上报系统实现方案
错误捕获方式
全局错误捕获通过 Vue.config.errorHandler 实现，可捕获组件渲染、事件处理器等上下文中的未捕获错误。示例代码：
Vue.config.errorHandler = function (err, vm, info) {
console.error(`Error: ${err.toString()}\nInfo: ${info}`);
// 调用上报接口
reportErrorToServer({
error: err.stack,
component: vm?._name,
info,
route: vm?.$route?.path
});
};异步错误处理
使用 window.onerror 捕获全局 JavaScript 异常，包括异步错误：
window.onerror = function(message, source, lineno, colno, error) {
reportErrorToServer({
type: 'UNHANDLED_ERROR',
message,
source,
line: lineno,
column: colno,
stack: error?.stack
});
};Promise 异常处理
通过 unhandledrejection 事件捕获未处理的 Promise 异常：
window.addEventListener('unhandledrejection', event => {
reportErrorToServer({
type: 'PROMISE_REJECTION',
reason: event.reason?.stack || event.reason
});
});性能监控集成
错误上报可结合性能监控数据：
const getPerformanceData = () => {
const [navigation] = performance.getEntriesByType('navigation');
return {
loadTime: navigation.loadEventEnd - navigation.startTime,
dns: navigation.domainLookupEnd - navigation.domainLookupStart,
tcp: navigation.connectEnd - navigation.connectStart
};
};上报策略优化
采用节流和聚合上报策略防止高频错误导致网络拥堵：
let errorQueue = [];
const debouncedReport = _.debounce(() => {
sendBatchErrors(errorQueue);
errorQueue = [];
}, 5000);
function queueError(error) {
errorQueue.push(error);
debouncedReport();
}用户行为记录
记录用户操作路径辅助问题定位：
let userActions = [];
const recordAction = (action) => {
userActions.push({
action,
timestamp: Date.now(),
route: router.currentRoute.path
});
if (userActions.length > 20) userActions.shift();
};生产环境配置
通过环境变量区分上报环境：
const config = {
prod: {
api: 'https://report.example.com/api',
sampleRate: 1.0
},
dev: {
api: '/dev-api',
sampleRate: 0.1
}
};数据加密处理
敏感信息需进行脱敏处理：
function sanitizeData(data) {
const clone = {...data};
if (clone.user) {
clone.user = '[REDACTED]';
}
return clone;
}可视化展示方案
建议使用开源工具搭建看板：
- 使用 Kibana 展示错误趋势
- 通过 Grafana 监控性能指标
- 利用 Sentry 进行错误分类
本地调试支持
开发环境下输出详细日志：
if (process.env.NODE_ENV === 'development') {
Vue.config.performance = true;
Vue.config.devtools = true;
}
