xys-monitor/src/plugin/vue.js

A project named xys-monitor

import { formatComponentName, hijack, handleManualMes } from '../js/util'

import Tracekit from '../js/tracekit'

let isVue3 = false

export default function (reportSys, Target) {
    Target = Target || window.Vue

    if (typeof Target !== 'function') {
        isVue3 = true
    }

    if (!Target || !Target.config) {
        const errorMsg = `请先设置上报项目${isVue3 ? 'app实例' : 'Vue对象'}`
        return void console.log(errorMsg)
    }

    hijack(Target.config, 'errorHandler', (error, vm, info) => {
        if (!error) {
            return
        }

        const metaData = {}

        const data = {}

        data.props = vm._data || {}
        if (isVue3) {
            data.props.isVue3 = true
        }

        if (Object.prototype.toString.call(vm) === '[object Object]') {
            metaData.componentName = formatComponentName(vm, isVue3)
        }

        if (typeof info !== 'undefined') {
            metaData.lifecycleHook = info
        }
        console.error(error)

        const stack = Tracekit.computeStackTrace(error)
        // console.log('-----stack:', stack)

        reportSys.report.reportError({
            pageUrl: stack.url,
            errorMsg: stack.message + '  ' + metaData.componentName + ' in ' + metaData.lifecycleHook,
            lineNo: stack.stack[0].line,
            columnNo: stack.stack[0].column,
            errorType: stack.name,
            errorStack: error.stack || error,
            data
        })
    })

    const customThrowMethod = function (mes) {
        reportSys.report.reportError(handleManualMes(mes))
    }

    if (isVue3) {
        Target.config.$throw = customThrowMethod
    } else {
        Target.prototype.$throw = customThrowMethod
    }
}