1.为什么要做前端监控，发现问题更快。产品决策的依据。提高前端开发的技术深度和广度。为业务拓展提供更多可能。2.前端数据分类前端数据其实有很多，从大众普遍关心的PV、UV、广告点击，到客户端的网络环境、登录状态，再到浏览器和操作系统信息，最后到页面性能和JS异常，这些数据可以在前端收集。2.1访问相关数据PV/UV：最基本的PV（页面访问量）、UV（独立访问用户数据）。页面来源：页面的referer可以定位到页面的入口。操作系统：了解用户的OS情况更有意义，有助于分析用户群体特征，尤其是移动端、iOS和Android的分布情况。浏览器：可以统计各种浏览器的占比，为研究是否继续兼容IE6和新技术（HTML5、CSS3等）的应用提供参考价值。解析：为页面设计，尤其是响应式设计提供参考。登录率：登录用户具有较高的分析价值，引导用户登录非常重要。地域分布：接入用户的地域分布，可用于不同区域的运营和活动。网络类型：wifi/3G/2G，决定产品是否需要适应不同的网络环境。接入时间：掌握用户接入时间分布，引导移峰填谷，节省带宽。停留时长：判断页面内容是否吸引人，对于需要长时间阅读的页面更有意义。到达深度：类似于百度百科的停留时长，用户浏览时页面到达的深度直接反映词条的质量。2.2性能相关数据白屏时间：从用户打开页面到页面出现某些东西，这个过程所花费的时间就是白屏时间。首屏时间：渲染用户浏览器首屏上的所有内容所花费的时间。用户可选择操作时间：用户可以进行点击、输入等正常操作。页面总下载时间：页面上的所有资源加载和渲染所花费的时间，即页面onload的时间。自定义时间点：对于开发者来说，完全可以自定义一些时间点，比如：某个组件init完成的时间，某个重要模块加载的时间等等。2.3点击相关数据页面的总点击次数。人均点击次数：对于导航网页来说，这个指标很重要。传出url：同理，对于导航网页，可以直接了解到网页导流的目的地。点击时间：用户所有点击行为的时间分布，反映用户点击操作的习惯。首次点击时间：同上，但只统计用户的第一次点击。如果时间过长，是否说明页面卡住了，用户长时间无法点击？点击热图：根据用户点击的位置，我们可以绘制出整个页面的点击热图，可以直观的了解页面的热点区域。2.4异常相关数据这里的异常指的是JS异常。用户浏览器报JSbug，会大大减少用户体验异常提示信息：这是识别异常最重要的依据，如：e.srcEmptyornotanobjectJSfilename。异常所在的行。发生异常的浏览器。堆栈信息：函数调用的堆栈信息，需要的时候需要，但是注意堆栈信息可能比较大，需要截取。2.5其他数据除了上面提到的四种基本数据统计需求外，我们当然可以根据实际情况定义一些其他的统计需求，比如用户浏览器对canvas的支持程度，还有一个特殊的例子——用户轮换。翻页的次数，这些数据统计需求是前端可以满足的，每一次统计的结果都体现了前端数据的价值。3.性能指标FP（FirstPaint）：第一次绘制时间，包括任何用户自定义的背景绘制，是像素第一次被绘制到屏幕上的时刻。FCP（FirstContentPaint）：第一次内容绘制。浏览器将第一个DOM渲染到屏幕上的时间，可能是文本、图像、SVG等。这实际上是白屏时间。FMP（FirstMeaningfulPaint）：第一幅有意义的画。用于页面有意义的内容渲染的时间LCP（LargestContentfulPaint）。最大内容渲染。表示视口中最大页面元素的加载时间。DCL(DomContentLoaded)：DOM加载完成。DOMContentLoaded事件在HTML文档完全加载和解析时触发。无需等待样式表、图像和子框架完成加载。L(onload)：所有依赖资源加载完成时触发。TTI（TimetoInteractive）：交互时间。用于标记应用程序以视觉方式呈现并可靠地响应用户输入的时间点。FID（FirstInputDelay）：第一次输入延迟。从用户第一次与页面交互（点击链接、点击按钮等）到页面响应交互的时间。4.前端监控目标（监控分类）4.1稳定性（stability）JS错误，JS执行错误或Promise异常。资源异常、脚本、链接等资源加载异常。接口错误，ajax或fetch请求接口异常。白屏，空白页。4.2用户体验（experience）loadingtime，每个阶段的加载时间。TTFB（TimeToFirstByte。第一个字节时间）。指的是浏览器发起第一次请求返回第一个字节数据所花费的时间。这个时间包括网络请求时间和后端处理时间。FP（FirstPaint首先绘制）。第一次绘制包括任何用户定义的背景绘制，即第一个像素被绘制到屏幕上时。FCP（FirstContentPaint第一内容绘图）。Firstcontentpaint是浏览器渲染第一个DOM到屏幕时，可以是任意文本、图片、SVG等。FMP（FirstMeaningfulPaint第一次有意义的绘画）。Firstmeaningfulpaint是衡量页面可用性的指标。FID（FirstInputDelay首次输入延迟）。从用户第一次与页面交互到页面响应交互的时间。停住了。任务超过50毫秒。4.3业务PV：pageview指浏览量或点击量。UV：指从不同IP地址访问一个站点的人数。页面停留时间：用户在每个页面停留的时间。五、前端监控流程数据埋点。数据上报。对收集到的数据进行分析计算、处理和汇总。可视化展示，多维度展示数据。监控告警，发现问题后根据一定条件触发告警。6常用埋点方案6.1埋码埋码是以埋码的形式埋点。比如你要监听用户的点击事件，你会选择在用户点击的时候插入一段代码，保存这个监听行为或者直接把监听行为以某种数据格式直接传给服务器。优点是可以随时准确发送或??保存所需的数据信息。缺点是工作量大。6.2可视化埋点以可视化交互方式替换代码埋点。将业务代码与埋点代码分离，提供可视化交互页面，作为业务代码录入。通过这个可视化系统，可以在业务代码中自定义添加埋点事件等，最终输出代码与业务代码和嵌入代码耦合。埋点可视化其实就是用系统代替人工插入埋点代码。6.3无痕埋点前端的任何事件都绑定一个标识符，所有事件都会被记录下来。通过定时上传记录文件，配合文件分析，分析出我们想要的数据，并生成可视化报告，进行专业分析。无痕埋葬的好处是收集了全量的数据，不会出现漏报和误埋的情况。缺点是增加了数据传输和服务器的压力，无法灵活定制数据结构。7.编写监控采集脚本7.1监控错误错误分类JS错误Promise异常。资源异常监控错误。7.2数据结构设计jsErrorletinfo={title:"前端监控系统",//页面标题url:"http://localhost:8080",//页面urltimestamp:"1212121212121212",//访问时间戳userAgent:"chrome",//用户浏览器类型kind:"stability",//主要类型:"error",//小类errorType:"jsError",//错误类型message:"uncaughtTypeError:blablabla",//错误detailsfilename:"http://localhost:8080/",//访问的文件名position:"0:0",//排名和列信息stack:"btnClick(http://localhost:8080)",//堆栈信息选择器:"HTMLBODY#container.contentINPUT",//selector};接口异常数据结构设置letinfo={title:"前端监控系统",//页面标题url:"http://localhost:8080",//页面urltimestamp:"1212121212121212",//访问时间戳userAgent:"chrome",//用户浏览器类型kind:"stability",//主要类型:"xhr",//小类eventType:"load",//事件类型pathname:"/success",status:"200-0k",duration:"5",//持续时间response:"hahah",//响应内容params:"parameters",//parameter};whitescreenscreen返回当前窗口的screen对象，返回当前渲染窗口中与screen相关的innerWidth属性的只读window属性。innerWidth返回窗口的内部宽度（以像素为单位）。innerHeight窗口（布局视口）的内部高度。layout_viewportelementsFromPoint方法可以获取当前视口指定坐标处从内到外排列的所有元素。letinfo={title:"前端监控系统",url:"http://localhost:8080/",timestamp:"1239404040404044",userAgent:"chorme",kind:"stability",type:"blank",emptyPoints:"0",//空白点屏幕:"2049*1152",//分辨率viewPoint:"2048*994",//viewportselector:"HTMLBODY#container",//selector};总体来说大致可以分为信息收集、存储、分析、监控四个阶段。收集阶段：收集异常日志，先在本地做一些处理，并采取一定的方案上报给服务器。存储阶段：后端接收前端上报的异常日志，经过一定的处理，按照一定的存储方案进行存储。分析阶段：分为机器自动分析和人工分析。机器自动分析，通过预设条件和算法，统计和筛选存储的日志信息，发现问题，并触发告警。人工分析，通过提供可视化的数据面板，让系统用户可以看到具体的日志数据，并根据信息找到异常问题的根源。告警阶段：分为告警和预警。报警器按照一定的等级，通过设定的通道，按照一定的触发规则自动报警。预警就是提前预知，在异常发生之前发出警告。性能监控：使用ResourceTimingAPI和PerformanceTimingAPI，可以计算出很多重要的指标，比如页面性能统计的起始点时间，首屏时间等异常监控：前端捕获的异常分为全局捕获和本地捕获。局部捕获作为捕获一些特殊情况的补充，但比较分散，不利于管理。所以，我会选择全局抓取的方式，即通过全局接口，将抓取代码写在一处。具体来说，在实现项目中，我应该使用badjs-report，它重写了window.onerror来报告异常，而没有写任何代码来捕获错误。前端埋点：埋点方案有人工埋点，即在需要监控的地方插入监控逻辑，但可能工作量大；同样没有埋点，前端自动收集所有事件并上报埋点数据，但缺点是，服务器压力会很大。我可能倾向于采用声明式埋点，将埋点代码与具体的业务逻辑解耦，只关心需要埋点的控件，为这些控件声明需要埋点的数据，主要是为了降低埋点的成本。在dom元素上添加埋点信息，如：//key表示埋点的唯一标识；act代表埋点方法
