Package Exports

wind-logger
wind-logger/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (wind-logger) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

风行前端行为日志采集模块

安装项目依赖

npm install wind-logger

引入日志模块

// /src/js/appInit/index.ts

import { App } from 'vue'
import FxLogger from 'wind-logger'
const LOGGER_CONFIG = {
    // 日志索引
    app: 'logger-test',
    // 日志服务地址
    remote: 'http://action.fxscm.net/logger/loggers'
}
// 创建日志实例
const fxLogger = new FxLogger(LOGGER_CONFIG)
const install = (app: App): void => {
    // 捕获vue-error日志
    fxLogger.bindErrorLogger(app)
    // 挂载日志模块
    app.config.globalProperties.$fxLogger = fxLogger
}

export default {
    install
}

挂载日志模块

// /src/main.ts

import { createApp } from 'vue'
import App from './App.vue'
import appInit from './js/appInit'

createApp(App).use(appInit).mount('#app')

vue-instance声明日志模块, 在setup内可以通过vue-instance调用$fxLogger

import { getCurrentInstance, ComponentInternalInstance } from 'vue'
import FxLogger from '@/js/fxLogger'

export interface FxInstance {
    $fxLogger: FxLogger
}

export const getFxInstance = function ():FxInstance {
    const { appContext } = getCurrentInstance() as ComponentInternalInstance
    return appContext.config.globalProperties as FxInstance
}

使用方法

// 日志初始化
fxInstance.$fxLogger.init({
    username: '系统管理员',
    userId: '1'
})

日志初始化

// 切换用户
fxInstance.$fxLogger.setUserInfo({
    username: '用户01',
    userId: '2'
})

切换用户

// 发送成功日志
const logger = fxInstance.$fxLogger.actionInfo({
    message: '成功的日志消息'
})
setTimeout(() => {
    logger.success()
}, 1000)

发送成功日志

// 发送失败的日志
const logger = fxInstance.$fxLogger.actionInfo({
    message: '失败的日志消息'
})
setTimeout(() => {
    logger.error('服务器异常')
}, 1000)

发送失败的日志

// 对request请求进行捕获
const fxRequest = ({ url, data, query }: { url: string, data: {[key:string]:string}, query: {[key:string]:string} }) => {
    return new Promise((resolve, reject) => {
        // 创建request日志
        const logger = fxInstance.$fxLogger.requestInfoStart({ url, data, query })
        setTimeout(() => {
            if (data.billType === '1') {
                const succesResponse = {
                    result: true
                }
                // 成功日志的手收集
                logger.end({
                    res: succesResponse
                })
                resolve(succesResponse)
            } else {
                const errorResponse = {
                    result: false,
                    message: '单据类型错误'
                }
                // 失败日志的收集
                logger.end({
                    error: errorResponse
                })
                reject(errorResponse)
            }
        }, 1000)
    })
}

request请求日志