vue main.js 捕获错误日志并上传后端接口示例

import './assets/main.css';
import './assets/tailwind.css';
import './components/myts';
import { createApp } from 'vue';
import { createPinia } from 'pinia';

import App from './App.vue';
import router from './router';

import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css';

import '@/utils/myPromise.js';

const pinia = createPinia();
//以下方式主要是为了使pinia的组合式方式写法的重置调用可以实现
pinia.use(({ store }) => {
    const initialState = JSON.parse(JSON.stringify(store.$state));
    store.$reset = () => {
        store.$patch(initialState);
    };
});

const app = createApp(App);

app.use(pinia);
app.use(ElementPlus);
app.use(router);

app.mount('#app');

// 添加全局错误处理
app.config.errorHandler = (error, vm, info) => {
    console.error('Vue Error:', error);
    uploadError(error, info);
};

// 添加全局未捕获的Promise错误处理
window.addEventListener('unhandledrejection', (event) => {
    console.error('Unhandled Promise Rejection:', event.reason);
    uploadError(event.reason, 'Unhandled Promise Rejection');
});

// 添加全局JS错误处理
window.onerror = function (message, source, lineno, colno, error) {
    console.error('Global Error:', error);
    uploadError(error || { message, name: 'WindowError' }, `${source}:${lineno}:${colno}`);
    return false;
};

// 添加错误上传函数
const uploadError = (error, info) => {
    const errorInfo = {
        error: {
            message: error.message,
            stack: error.stack,
            name: error.name
        },
        info,
        url: window.location.href,
        timestamp: new Date().toISOString(),
        userAgent: navigator.userAgent
    };

    // 发送错误信息到后端
    fetch('/api/log/error', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify(errorInfo)
    }).catch((err) => console.error('Error uploading error log:', err));
};