Vue3项目搭建监控日志

 一、前言

        在前端项目中,经常会遇到各种各样的报错,在错误复现的时候,往往需要反复console.log才能找到问题的原因。那么,我们可以通过封装一个日志,用来记录用户的各种行为及各种接口请求,用来查找错误所在。

明确监控需求:

  1. 系统中用户在浏览哪个页面
  2. 页面上,用户点击了什么地方
  3. 请求了哪些接口,返回值是什么
  4. 报错信息

如何存储,何时上传:

  1. 在Vue3项目中,配合pinia,以数组的形式来记录,每产生一条数据,push到数组中就可以了
  2. 在页面刷新或者关闭页面的时候  上传至服务器

二、 在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了,跟后端约定好日志接口,就可以在特定条件下上传前端日志了。

  • 3
    点赞
  • 17
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
好的,我可以为您介绍Vue项目实战电商后台管理系统的实现与测试流程。 1. 实现 - 前端部分:在Vue CLI的基础上搭建项目框架,使用Element-UI组件库进行页面UI开发,使用Axios进行数据交互。同时,根据项目需求进行路由管理和权限控制的实现。 - 后端部分:使用Node.js搭配Express框架进行服务端开发,使用MongoDB作为数据库存储数据。后端的主要工作是与数据库交互,实现前端的业务逻辑。同时,根据项目需求进行身份验证和路由管理的实现。 2. 测试 - 单元测试:使用Jest进行单元测试,对前端和后端的每个模块进行单元测试,以确保各个模块的功能正常。 - 集成测试:使用Selenium进行集成测试,对整个项目进行集成测试,以确保各个模块之间的交互正常。 - 功能测试:使用Postman进行功能测试,对整个系统各个功能进行测试,以确保系统能够正常运行并满足需求。 3. 部署 - 前端部分:使用npm run build命令将前端代码打包成静态文件,然后部署到NGINX服务器上。 - 后端部分:将后端代码上传到云服务器,并安装Node.js和MongoDB环境,然后启动后端服务。 - 数据库部分:在云服务器上安装MongoDB,并导入数据库数据,以便后端服务能够正常访问数据库。 4. 维护 - 监控日志:使用PM2进行进程管理和日志监控,及时发现并解决问题。 - 定期更新:定期对系统进行更新,以保证系统的稳定性和安全性。 - 安全防护:加强系统的安全防护措施,例如设置防火墙、SSL证书等。 以上就是Vue项目实战电商后台管理系统的实现与测试流程,如有疑问,欢迎提出。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值