在Vue中搭建前端监控日志

监控可以观察到人的动作、周围的环境,如果有情况也可以通过监控还原现场。

前端也可以通过设置“监控”观察用户,在遇到一些无法复现、奇奇怪怪的问题,或者单个用户所在的环境与大部分用户的环境不一样时产生的问题,例如 该用户对浏览器设置了不允许cookie 等;这些问题通过前端监控记录下来,让开发者模拟出问题环境、操作步骤,能更好的解决问题。

进入正题

首页,要考虑的是监控要记录什么?
1、用户的环境
2、用户点击哪个页面中的元素
3、请求了哪些接口,接口又返回了什么
4、页面报了什么错

监控要怎么实现
1、可以采用数组的形式记录,给每个元素一个唯一标识作为步骤记录器
2、其他思路能实现记录也可以

监控什么时候上传到服务器端
一般是页面刷新或者关闭前发送


Vue2:

需要使用到Vuex,因为要将记录的数据存放到Vuex中
store.js:

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    monitoring:[],
  },
  mutations: {
    setMonitoring(state,data){
      state.monitoring.push({
        ...data,
        nowPage:window.location.href,
        steps:state.monitoring.length+1,
        time:`${new Date().getFullYear()}-${new Date().getMonth()+1}-${new Date().getDate()}-${new Date().getHours()}:${new Date().getMinutes()}:${new Date().getSeconds()}`
      })
    }
  },
  actions: {
  },
  modules: {
  }
})

在src目录下新建monitoring文件夹(名字可以自定义),monitoring文件夹下创建一个index.js文件

在这里插入图片描述
monitoring中的index.js

import store from "@/store";//引入Vuex的store
//获取当前浏览器的Storage大小
function get_cache_size(t){
    t = t == undefined ? "l" : t;
    var obj = "";
    if(t==='l'){
        if(!window.localStorage) {
            return "当前不支持localStorage存储"
        }else{
            obj = window.localStorage;
        }
    }else{
        if(!window.sessionStorage) {
            return "当前不支持sessionStorage存储"
        }else{
            obj = window.sessionStorage;
        }
    }
    var size = 0;
    if(obj!==""){
        for(let item in obj) {
            if(obj.hasOwnProperty(item)) {
                size += obj.getItem(item).length;
            }
        }
    }
    return size
}
//存储当前Storage大小
store.commit("setMonitoring",{
    title:`当前Location大小:${get_cache_size('l')};当前Session大小:${get_cache_size('s')}`
})
store.commit("setMonitoring",{
    title:`浏览器cookie设置:${navigator.cookieEnabled==true?'开启':'禁用'};当前Cookie:${document.cookie || "暂无"}`
})
//监听页面隐藏或者打开
window.addEventListener("visibilitychange",()=>{
    if(document.hidden){
        store.commit("setMonitoring",{
            title:"离开/隐藏页面"
        })
    }else{
        store.commit("setMonitoring",{
            title:"进入页面"
        })
    }
})
//监听鼠标点击事件
window.addEventListener('mouseup',(event)=>{
    store.commit("setMonitoring",{
        title:"用户点击",
        Element:event.path[0].outerHTML
    })
})
//监听报错信息
window.addEventListener("error",(err)=>{
    store.commit("setMonitoring",{
        title:"报错",
        errorMsg:err.message
    })
})
//在页面刷新、关闭前发送记录的数据,fetch能保证浏览器结束进程前发送请求
window.addEventListener('beforeunload',()=>{
    let arr=JSON.stringify(store.state.monitoring);
    fetch('http://192.168.10.170:8081/sendData', {
      method: 'POST',
      headers:{
        'Accept': 'application/json',
        'Content-Type': 'application/x-www-form-urlencoded'
      },
      params:arr,
      keepalive: true
    });
  })

main.js:

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import "@/monitoring";//引入文件

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import store from "@/store";

Vue.use(VueRouter)

const routes = [
  {
    path:"/",
    redirect:"/test"
  }
]

const router = new VueRouter({
  routes
})

router.afterEach((to,from)=>{
  store.commit('setMonitoring',{
    title:"切换页面",
    formPage:from.path,
    toPage:to.path,
  })
})

export default router

在axios拦截器中记录

import axios from "axios"
import store from "@/store"

axios.interceptors.request.use((config)=>{
    store.commit("setMonitoring",{
        title:"发请求",
        data:JSON.stringify(config)
    })
    return config
})

axios.interceptors.response.use((config)=>{
    store.commit("setMonitoring",{
        title:"接收请求",
        data:JSON.stringify(config)
    })
    return config
})

最后看看效果:
点击TEST文本会发送请求
在这里插入图片描述
在这里插入图片描述

  • 4
    点赞
  • 28
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
### 回答1: ruoyi-vue-oracle是一种基于vue.js开发的前端框架,它使用了Oracle数据库作为后端的数据存储和处理工具。ruoyi-vue是一个开源的管理系统框架,它结合了vue.js和element-ui,提供了丰富的组件和插件,帮助开发者快速构建现代化的管理系统。而Oracle是一种强大的关系型数据库管理系统,它具有高性能、高可靠性和安全性的特点,被广泛应用于企业级应用程序。 通过ruoyi-vue-oracle,开发者可以轻松地搭建一个功能强大、稳定可靠的管理系统。vue.js作为前端框架,提供了灵活且高效的开发方式,可以实现各种交互效果和页面布局;element-ui则为开发者提供了丰富的组件和样式,极大地提高了开发效率。而Oracle数据库作为后端存储工具,可以处理大量数据并保证数据的一致性和安全性。 ruoyi-vue-oracle还可以实现用户权限管理、数据管理和系统监控等功能。用户权限管理可以根据角色和权限划分用户的访问权限,确保系统的安全性;数据管理可以对数据库进行增删改查操作,满足对数据的管理需求;系统监控可以实时监控系统的运行状态和性能,及时发现并解决问题。 总之,ruoyi-vue-oracle提供了一套完整的开发框架和解决方案,帮助开发者快速构建现代化的管理系统。无论是企业级应用还是个人项目,都可以通过ruoyi-vue-oracle实现快速、稳定的开发。 ### 回答2: ruoyi-vue-oracle是一个开源的后台管理系统,采用了前后端分离的架构,前端使用了Vue.js框架,后端使用了Spring Boot框架,数据库使用了Oracle。这个系统提供了丰富的功能,包括用户管理、角色管理、菜单管理、部门管理、字典管理、通知公告管理等。 在前端方面,ruoyi-vue使用了Vue.js来构建用户界面,提供了响应式的布局和丰富的组件,使得用户可以方便地进行操作和管理。同时,Vue.js也提供了一套模块化的开发方式,使得项目的代码结构清晰、可维护性高。 在后端方面,ruoyi-vue使用了Spring Boot作为基础框架,结合了Spring框架的优点,提供了一套强大的开发工具和生命周期管理,简化了开发流程并提高了生产力。同时,Spring Boot还集成了许多常用的功能和组件,如安全认证、缓存、数据库等,这些都可以帮助开发者快速搭建稳定可靠的系统。 数据库方面,ruoyi-vue选择了Oracle作为后端的数据库,Oracle是目前业界广泛使用的关系型数据库之一,具有强大的存储和查询能力,可以满足大部分企业级应用的需求。在ruoyi-vue,通过使用数据库的事务管理,保证了数据的一致性和完整性。 总体来说,ruoyi-vue-oracle是一个功能强大且易于使用的后台管理系统,它提供了丰富的功能和灵活的架构,能够帮助开发者快速构建高效稳定的系统。 ### 回答3: ruoyi-vue-oracle是一个基于Vue.js和Spring Boot的开源框架,用于快速构建前后端分离的管理系统。Oracle是一种关系型数据库管理系统,用于存储和管理大量结构化数据。 ruoyi-vue-oracle提供了一套完整的解决方案,包括前端页面、后端接口和数据库模型。前端页面采用Vue.js框架编写,具有良好的用户交互体验和响应速度。后端接口基于Spring Boot框架开发,提供了丰富的业务功能和数据处理能力。Oracle数据库作为数据存储介质,提供了高性能、高可用性和数据安全性,适用于处理大规模数据和复杂查询。 使用ruoyi-vue-oracle框架,开发人员可以快速搭建管理系统,并轻松实现用户管理、角色权限、数据字典、系统监控日志管理等常见功能。同时,该框架还提供了丰富的扩展和定制功能,便于根据项目需求进行二次开发。 总之,ruoyi-vue-oracle是一个功能强大的前后端分离框架,可以帮助开发人员快速构建高效、稳定的管理系统。Oracle数据库作为数据存储的选择,能够提供可靠的数据管理与查询服务。结合两者,可以满足企业对高性能、可扩展性和良好用户体验的需求。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值