wind-logger v1.0.9

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

安装项目依赖

npm install wind-logger

引入日志模块

import { App } from 'vue'
import FxLogger from 'wind-logger'
const LOGGER_CONFIG = {
    // 日志索引
	app: 'logger-test',
    // 日志服务地址
	remote: 'http://action.fxscm.net/logger/v1/shopedi/loggers'
    // 生产线的默认字段
	defaultInfo: {
		appType: 'scm8'
	},
    // 生产线的自定义字段
	customInfo: {
		actionType: ''
	}
}
// 创建日志实例
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 = this.$fxLogger.actionInfo({
	message: '成功的日志消息1',
    // 公司定义的默认日志字段
    oneStageModule: '一级菜单1',
    twoStageModule: '二级菜单1',
     // 生产线定义的自定义日志字段
    actionType: 'demo按钮2'
})
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)
	})
}