Журнал мониторинга сборки проекта Vue3

 Введение

        Во front-end проектах часто встречаются различные ошибки, при повторении ошибки часто приходится повторно запускать console.log для поиска причины проблемы. Затем мы можем инкапсулировать журнал для записи различных действий пользователя и различных запросов интерфейса, чтобы найти ошибку.

Определите потребности в мониторинге:

1. Какую страницу просматривает пользователь в системе
2. Где пользователь щелкнул на странице
3. Какие интерфейсы запрашиваются и какое возвращаемое значение
4. сообщение об ошибке

Как хранить и когда загружать:

1. В проекте Vue3 с помощью pinia он записывается в виде массива, каждый раз, когда генерируется кусок данных, его можно запихнуть в массив.
2. Загружать на сервер при обновлении или закрытии страницы

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, только сюда напишите код о логе

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, который представляет собой инкапсулированный вами запрос запроса.

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 }

 В настоящее время внешний журнал мониторинга в порядке, а интерфейс журнала согласован с серверной частью, и внешний журнал может быть загружен при определенных условиях.