feat(error): add global Promise and Vue error handlers

- Add unhandledrejection listener for uncaught Promise errors
- Add app.config.errorHandler for Vue component errors
- Both handlers log to console and show user-friendly messages
- Filter out network errors already handled by axios interceptor
This commit is contained in:
2026-01-05 23:19:37 +08:00
parent a4f7050226
commit 7854d4542f
+33 -1
View File
@@ -2,7 +2,7 @@ import { createApp } from 'vue';
import { createPinia } from 'pinia';
// Ant Design Vue
import Antd from 'ant-design-vue';
import Antd, { message } from 'ant-design-vue';
import 'ant-design-vue/dist/reset.css';
import App from './App.vue';
@@ -18,4 +18,36 @@ app.use(router);
// Ant Design Vue
app.use(Antd);
// 全局未捕获的 Promise 错误处理
window.addEventListener('unhandledrejection', event => {
console.error('未捕获的 Promise 错误:', event.reason);
// 显示用户友好的错误提示
const errorMessage = event.reason?.message || event.reason || '操作失败';
// 只对非网络错误显示提示(网络错误已在 axios 拦截器中处理)
if (!errorMessage.includes('网络错误') && !errorMessage.includes('请求超时')) {
message.error({
content: `操作失败: ${errorMessage}`,
duration: 3,
});
}
// 阻止默认的控制台错误输出(已经用 console.error 输出了)
event.preventDefault();
});
// 全局错误处理(捕获 Vue 组件内的错误)
app.config.errorHandler = (err, instance, info) => {
console.error('Vue 错误:', err);
console.error('错误信息:', info);
console.error('组件实例:', instance);
// 显示用户友好的错误提示
message.error({
content: '应用发生错误,请刷新页面重试',
duration: 3,
});
};
app.mount('#app');