README.md · 王帆/前端性能监控平台

# DestinTeam简易前端监控系统 （前端练习生计划结业作品）

> “DestinTeam”，destin在法语中是缘分的意思，我觉得我们因共同的前端开发兴趣相聚于此真是非常有缘分，我喜欢的前端开发框架vue也是法语命名，因此取名DestinTeam

###### 感谢大家的努力和评委的肯定！我们获奖啦~

![](./readme-imgs/获奖.png)

## 参与人员

![](./readme-imgs/结项答辩.png)

![](./readme-imgs/分工1.png)

## 项目简介

我们希望开发一套有基础前端监控功能，可提供给其他开发者进行二次开发的前端监控系统。此系统分为两个部分，一个是探针部分，也就是用户在自己前端网页项目中通过script标签或者是使用webpack方式引入的js文件，探针的作用是收集web应用的信息并上报给后端进行分析。这里我们收集的信息又分为3大类，一类是项目性能分析，包括获取DNS解析时间、TCP建立时间、dom渲染完成时间、白屏时间、页面onload时间、HTTP响应时间、页面重定向时间等。另一类是应用的异常与事件收集，这里就包括了 js错误统计，api接口错误统计，静态资源加载失败统计，最后一类是用户信息统计，这里就包括了浏览量(PV)访客数(UV)访客来源等信息。 第二个部分是将探针收集到的信息进行数据可视化展示的管理网站，由于没有后端，所以我们打算将所有数据直接在前端定义，图表所展示的信息将尽可能丰富，便于其他开发者根据需求使用。

此仓库为数据管理查看系统源码，使用vue+element进行开发，图标数据可视化部分使用的是[avtv](https://antv.vision/zh/)的G2和L7

![](./readme-imgs/项目结构.png)

## 本项目的开发离不开

- [vue-element-admin](https://github.com/PanJiaChen/vue-element-admin)

- [avtv](https://antv.vision/zh/)

## Browsers support

Modern browsers and Internet Explorer 10+.

| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="IE / Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>IE / Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Safari |
| --------- | --------- | --------- | --------- |
| IE10, IE11, Edge| last 2 versions| last 2 versions| last 2 versions

王帆/前端性能监控平台

简介

发行版

贡献者

近期动态

王帆/前端性能监控平台 .gitee-modal { width: 500px !important; }

简介

发行版

贡献者

近期动态

搜索帮助

王帆/前端性能监控平台