# H5性能与错误监控设计
# 背景
随着业务量的增加，用到H5页面的越来越多；H5页面的性能怎么样？用户访问的体验怎么样？H5的出错率以及兼容性怎么样？目前来说，处于一个模糊状态，只能是通过公司测试的设备在不同的网络条件下体验一次，心里才有一个初步的印象。
没有一个数据系统支撑，仅仅凭内部人员测试和体验，这是远远不够的，我们之前在一些页面上加了百度统计做了一个初步的统计，就显示每天有数十万的访问量，而这是在一些个别页面测试得到的数据，不够精确。经过我们团队讨论决定要把H5性能监控系统做起来。
# 目的
通过收集页面在用户设备的性能数据分析，可以方便知道页面在用户设备运行的性能情况，从而为开发人员提供选择合适的技术提供数据支撑。
通过错误监控与收集，降低用户遇到问题的概率，分析问题原因，减少问题重复出现概率，能够在用户碰到问题前发现并解决。
统计数据分析，根据数据分析做出相应的策略，从而选择合适的技术选型，从而提升页面性能和开发可维护性可扩展性
用户行为分析，给产品运营人员提供运营数据支持
# 采集数据
# 性能数据
- wbTotal（webview加载H5页面时间）
- wbInit（webview初始化时间）
- wbResponse（webView初始化加载url到第一次webView start回调时间）
- loadPageComplete（页面所有资源加载完成时间）
- renderPage（用户基本可以看到基础页面的时间）
- domReady（解析DOM树结构的时间），ttfb（用户拿到Html5页面第一个资源）
- pageRequest（请求h5页面文档所需的时间）
- ttfb（用户拿到Html5页面第一个资源）
- netType(网络类型)
# 内存信息（performance.memory）
jsHeapSizeLimit: 内存大小限制
totalJSHeapSize: 可使用的内存
usedJSHeapSize: JS对象(包括V8引擎内部对象)占用的内存，不能大于totalJSHeapSize，如果大于，有可能出现了内存泄漏
# 错误数据
# 语法错误
- msg: 错误描述,
- url: 错误页面地址,
- line: 错误函数
- 语法错误
# Http请求错误（下个版本做）
参考以下资料
# 数据处理上报
通过APP大数据埋点接口数埋点和上报
# 大数据平台界面展示、数据分析与报警
# 界面展示
分两个维度统计
# 1、分别统计IOS设备和安卓设备下
- 每个页面各个阶段的近两周（这个时间可以讨论）的平均时间。包括 wbTotal（webview加载H5页面时间），wbInit（webview初始化时间）loadPageComplete（页面所有资源加载完成时间），renderPage（用户基本可以看到基础页面的时间），domReady（解析DOM树结构的时间），ttfb（用户拿到Html5页面第一个资源），pageRequest（请求h5页面文档所需的时间）