一、前言
在前端项目中,经常会遇到各种各样的报错,在错误复现的时候,往往需要反复console.log才能找到问题的原因。那么,我们可以通过封装一个日志,用来记录用户的各种行为及各种接口请求,用来查找错误所在。
明确监控需求:
- 系统中用户在浏览哪个页面
- 页面上,用户点击了什么地方
- 请求了哪些接口,返回值是什么
- 报错信息
如何存储,何时上传:
- 在Vue3项目中,配合pinia,以数组的形式来记录,每产生一条数据,push到数组中就可以了
- 在页面刷新或者关闭页面的时候 上传至服务器
二、 在Vue3+TypeScript项目中,封装日志
关于项目构建,不熟悉的可以参考Vue3+TypeScript+Vite+Pinia
在src/store目录下,新建logger.ts文件
moment为项目中安装的moment.js工具
import { defineStore } from "pinia";
import moment from "moment";
export const useLoggerStore = defineStore('logger', {
state: () => {
return {
loggerArray: [] as any[]
}
},
getters: {},
actions: {
setLoggerArray (data: any) {
this.loggerArray.push({
...data,
nowPage: window.location.href,
steps: this.loggerArray.length + 1,
time: moment().format('YYYY-MM-DD kk:mm:ss a')
}
)
}
}
})
在App.vue中编辑代码
<template>
<router-view></router-view>
</template>
<script lang="ts" setup>
import { useLoggerStore } from './store/logger';
const loggerStore = useLoggerStore()
// 监听页面隐藏/打开
window.addEventListener('visibilitychange', () => {
if (document.hidden) {
loggerStore.setLoggerArray({
title: '离开/隐藏页面'
})
} else {
loggerStore.setLoggerArray({
title: '进入页面'
})
}
})
// 监听用户鼠标点击行为
window.addEventListener('mouseup', (event: any) => {
loggerStore.setLoggerArray({
title: '用户点击',
Element: event.srcElement.outerHTML
})
})
// 监听报错信息
window.addEventListener('error', (err: any) => {
loggerStore.setLoggerArray({
title: '报错',
errorMsg: err.message
})
})
// 在页面刷新、关闭前发送记录的数据,fetch能保证浏览器结束进程前发送请求
window.addEventListener('beforeunload', () => {
const arr = JSON.stringify(loggerStore.loggerArray)
console.log(arr)
})
</script>
<style scoped lang='less'></style>
在src/router/index.ts中编辑代码,此处只写关于log的代码
import { useLoggerStore } from '@/store/logger';
// 路由跳转前的监听操作
router.beforeEach((to, from, next) => {
const loggerStore = useLoggerStore()
loggerStore.setLoggerArray({
title: '切换页面',
fromPage: from.path,
toPage: to.path
})
const userStore = useUserStore()
Nprogress.start()
if (userStore.token) {
if (to.path === '/login') {
next('/')
return
}
next()
} else if (whiteList.includes(to.path)) {
next()
} else {
next('/login')
}
})
最后,在src/http/request.ts 也就是自己封装的request请求中,编辑代码
import axios from 'axios'
import Nprogress from 'nprogress'
import 'nprogress/nprogress.css'
import { ElMessage } from 'element-plus'
import { useLoggerStore } from '@/store/logger'
const request = axios.create({
baseURL: import.meta.env.VITE_BASE_URL,
timeout: 5000
})
const NERWORK_ERROR = '服务器错误,请稍后重试!'
request.interceptors.request.use(config => {
Nprogress.start()
const token = sessionStorage.getItem("token")
config.headers.token = token
const loggerStore = useLoggerStore()
loggerStore.setLoggerArray({
title: '请求接口',
data: JSON.stringify(config)
})
return config
}, error => {
Nprogress.done()
return Promise.reject(error)
})
request.interceptors.response.use(res => {
const loggerStore = useLoggerStore()
const url = res.request.custom.options.url
const index = import.meta.env.VITE_BASE_URL.length
const newUrl = url.substring(index, url.length)
loggerStore.setLoggerArray({
title: `'接口响应'-${newUrl}`,
data: JSON.stringify(res)
})
Nprogress.done()
if (res.status === 200) {
return res.data
} else {
ElMessage.error(NERWORK_ERROR)
return Promise.reject(NERWORK_ERROR)
}
})
class Http {
get = function (url: string, params: any) {
return request({
url: url,
method: 'get',
headers: { 'Content-Type': 'multipart/form-data' },
params
})
}
post = function (url: string, data: any) {
return request({
url: url,
method: 'post',
data
})
}
}
const http = new Http()
export { http }
这时,前端的监控日志就Ok了,跟后端约定好日志接口,就可以在特定条件下上传前端日志了。