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

前端也可以通过设置“监控”观察用户，在遇到一些无法复现、奇奇怪怪的问题，或者单个用户所在的环境与大部分用户的环境不一样时产生的问题，例如该用户对浏览器设置了不允许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 = falsenew 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文本会发送请求

在Vue中搭建前端监控日志相关推荐

搭建前端监控系统（二）JS错误监控篇
背景:市面上的监控系统有很多,大多收费,对于小型前端项目来说,必然是痛点.另一点主要原因是,功能通用,却未必能够满足我们自己的需求, 所以我们自给自足. 这是搭建前端监控系统的第二章,主要是介绍如何统 ...
搭建前端监控系统（四）接口请求异常监控篇
背景:市面上的监控系统有很多,大多收费,对于小型前端项目来说,必然是痛点.另一点主要原因是,功能虽然通用,却未必能够满足我们自己的需求, 所以我们自给自足也许是个不错的办法. 这是搭建前端监控系统的第 ...
一步一步搭建前端监控系统：如何将网页截图上报？
摘要: 通过录屏或者截图,快速复现BUG场景. 作者:一步一个脚印一个坑原文:搭建前端监控系统(备选)Js截图上报篇 Fundebug经授权转载,版权归原作者所有. PS:本文关于Fundebug录 ...
jeecgboot 前端环境搭建_如何从零开始搭建前端监控平台？
前端监控与优化,一直是前端领域的重要研究方向.尤其在当下页面功能繁杂.页面延迟容忍度降低的时代,一套符合自身业务需要的监控平台,往往能让页面性能优化事半功倍. 现在市面上的大多数监控平台都是对性能.网 ...
vite+vue3+ts+ant design vue+tailwindcss搭建前端web应用（2）
回顾上篇文章地址:vite+vue3+ts+ant design vue+tailwindcss搭建前端web应用(1)_konsei的博客-CSDN博客上篇文章搭建了vue3项目,引入了ant ...
带api的php探针,从零开始搭建前端监控系统（一）——web探针sdk
前言本系列文章旨在讲解如何从零开始搭建前端监控系统. 项目已经开源项目地址: 您的支持是我们不断前进的动力. 喜欢请start!!! 喜欢请start!!! 喜欢请start!!! 本文是该系列第 ...
Vue整合SpringBoot项目实战之Vue+Element-Ui搭建前端项目
Vue整合SpringBoot项目实战之Vue+Element-Ui搭建前端项目源码(欢迎star): 前端项目代码后端项目代码系列文章: Vue整合SpringBoot项目实战之后端业务处理 ...
vue框架搭建前端登录界面
使用vue框架搭建前端登录界面,用v-bind引入类,v-model实现数据绑定,v-on实现事件处理机制的处理. <!DOCTYPE html> <html lang=" ...
TSINGSEE青犀视频使用Vue.js搭建前端启动后共享屏幕无法获取音视频流问题解决
TSINGSEE青犀视频云边端架构产品的前端搭建大多是通过Vue来完成的,Vue的核心库只关注视图层,非常容易与其它库或已有项目整合,并且有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页 ...

在Vue中搭建前端监控日志

进入正题

Vue2：

在Vue中搭建前端监控日志相关推荐

最新文章

热门文章