前端处理带t的时间_前端日志系统建立

背景意义

当前前端存在的问题：

1. 出现问题无法快速定位。

2. 统计不到用户使用过程中指标(例如：白屏时间，页面流程度等)导致优化方向比较迷茫。

3. 对于用户信息和使用情况了解甚少，大部分基于反馈了解到。

开发前端日志服务(以下简称logger)主要有几个目的：

1. 通过logger服务解决用户出问题后难以定位的问题。
2. 通过logger服务建立指标，方便后面版本迭代通过指标优化，做到有依据可查。
3. 通过logger服务解决用户隐藏问题。

logger建设分类

性能指标

• 页面流畅程度

var t = new Date();
  setInterval(function(){
    console.log(new Date() - t);
    t = new Date();
  }, 100);

目的：有利于了解、分析用户整体使用pc端直播流程度情况，为优化辅助性作用。

* 白屏时间、dom解析指标

window.performance

目的：有利于了解用户加载解析页面时速度，以及了解用户浏览的性能情况，可以通过该指标找到问题点，为定向优化整体项目提供依据。

* 资源下载大小、时间、成功失败指标,分类处理( js等)

const start = (new Date()).getTime();
xhr、fetch
const end = (new Date()).getTime();
const costTime = end - start;

目的：了解用户网络情况，分析出哪家CDN更好用，直接可以分析到单个用户下载的全部过程。

* 用户直播回放过程中卡顿次数指标

目的：可以在增加buffer和减少卡顿次数上做权衡，判断出当前给的buffer是不是太小或者太大。

* 用户buffer直播回放过程中buffer指标

const maxBuffer = getMaxBuffer();
const min = getMinBuffer();
const avg = getAvgBuffer();

目的：有利于了解大多数用户直播过程中平均buffer

错误日志

• 接口错误
• 全局错误捕捉

window.onerror = () => {}

• vue异常

vue.configerrorhandler = () => {}

• try catch

所有上报错误通过sourcemap定位到详细行列

日志上报策略

考虑到上报也是占用用户带宽等资源，我们对不同日志信息要做不同级别的策略上报以及上报时机。
上报方式主要包括：
实时性上:

• 实时上报：例如，接口错误、全局错误
• 间隔上报：例如，pdf、js等下载信息

上报数量上:

• 单条上报：例如，页面性能上报
• 合并上报：例如，资源下载信息上报

上报时机主要包括：

1. 进入页面上报：只上报关键信息。

2. 播放过程中间隔上报：非关键信息但是要求一定实时性。

3. 离开页面上报: 尽可能多的数据在此时刻上报，既保证了用户体验也保证了数据的可用性。

前端实现上报的方式：

1. xhr、fetch
2. image
3. sendBean
4. script

请求方式可适当选用head请求

分析数据

当我们把数据上报到阿里云之后，可以通过阿里云提供的操作界面进行数据统计和分析。甚至可以通过定向分析数据做成后台管理平台，把每个指标做成报表，根据报表可以定向了解用户的基本信息例如平均buffer、平均加载kpd时长等等。通过这样的报表分析就找到问题点，定向优化以及了解优化后的效果。

阶段

第一阶段：建立基础库，集成代码，上报日志
第二阶段：阿里云查看日志以及制定报表制作
第二阶段：定制开发分析数据做成管理后台

参考

https://fed.taobao.org/blog/taofed/do71ct/jstracker-how-to-collect-data/?spm=taofed.homepage.header.8.7eab5ac8II6dbV

https://fed.taobao.org/blog/taofed/do71ct/web-performance/?spm=taofed.bloginfo.blog.4.78735ac8F5KHLC

https://www.zhihu.com/search?q=%E5%89%8D%E7%AB%AF%E4%B8%8A%E6%8A%A5badjs&utm_content=search_history&type=content

https://myslide.cn/slides/1031