天眼是中国联通IT生产运营支撑平台，对生产运营领域提供端到端、云化架构全层级的运维工具支撑。天眼融合人工智能与大数据技术，实现传统运维向自动化生产、智慧化运营的转变，保障4亿级用户规模系统稳定运行，支撑一体化生产运营体系落地。天眼支持“平台+应用”模式，聚焦集约、赋能省分，助力中国联通IT运营全面数字化转型。天眼浏览器监控是为解决对一线业务受理情况掌握不足，故障感知和响应滞后的问题，采用JS埋点的方式，采集用户访问过程的性能指标，通过对Ajax请求诊断和页面加载过程的深度挖掘，实现对用户体验的实时跟踪，实现用户操作轨迹精准追踪，页面耗时、JS报错、Ajax时长、弹窗信息一点看全，浏览器、操作系统、地域、内外网多维分析。浏览器监控架构以Java、Flink（高性能流式处理）等为主要计算手段，使用Kafka（消息中间件缓冲）、Logstash（抽取插件）等组件做数据中转，ES（告警数据支撑）、ClickHouse（清单级数据高压缩比存储）、Mysql（关系型，数据统计）等多种存储手段，形成数据的完整处理。支撑上层功能的实现。天眼浏览器监控重点监控页面的加载过程和运行时状态，将页面加载性能、运行时异常以及Ajax调用状态和耗时等数据采集上报。之后借助天眼浏览器监控提供的海量数据实时分析和处理服务，对当前线上所有真实用户的访问情况进行监控。最后通过直观的报表展示，帮助运维人员及时发现并诊断问题。浏览器监控主要采集对象是浏览器基本信息、基本日志、错误日志、弹窗日志和Ajax日志进行分析：（1）基本信息：浏览器、操作系统、员工ID、页面标题、userAgent、页面URL、前端时间等。监听onerror方法，捕捉JS异常信息数据，组装基本信息进行上报数据。针对弹框中包含的className或者id进行捕捉弹框信息，组装基本信息进行上报数据。监听页面load、click、keydown、unload、dblclick、focus等方法，捕捉页面点击、加载、离开等事件。组装基本信息上报数据。监听Ajax请求，组装接口、基本信息进行上报数据。所有网络请求都被视为资源，当它们通过网络检索时，分为不同的生命周期。一个完整的页面请求主要时间段如下（1）DNS时间：为DNS域名查询开始的时间到DNS域名查询完成的时间o domainLookupStart 记录DNS请求开始时间o domainLookupEnd 记录DNS请求结束时间DNS时间=domainLookupEnd - domainLookupStart（2）TCP时间：为HTTP（TCP）开始建立连接的时间到HTTP（TCP）完成建立连接的时间o connectStart 记录开始连接到服务器的时间o 如果用了TLS或者SSL，secureConnectionStart记录开始连接时间TCP时间=connectEnd - connectStarto requestStart记录请求发生到服务器的时间o responseStart记录最开始的响应时间HTTP传输时间=responseEnd - requestStart（4）DOM建立时间：为HTTP响应全部接收完成的时间到DOM解析完成后，网页内资源加载开始的时间o domInteractive 代表浏览器解析html文档的状态为interactive时的
间节点DOM建立时间=domInteractive -responseEnd（5）页面渲染时间：为DOM解析完成后，网页内资源加载完成的时间（如 JS脚本加载执行完毕），文档的DOMContentLoaded事件的结束时间到事件的回调函数执行完毕的时间o loadEventStart代表onload事件触发的时间点o loadEventEnd代表onload事件结束的时间节点o domContentLoadedEventEnd代表DOMContentLoaded事件完成的时间节点页面渲染时间=loadEventStart - domContentLoadedEventEnd除了上述5个时间段以外，还有业界关注的两个重要指标（6） 白屏时间：从请求开始到浏览器开始解析第一批HTML文档字节的时间差。（7） 首屏时间：首屏时间是指用户打开网站开始，到浏览器首屏内容渲染完成的时间浏览器监控：针对Web端真实用户体验监控与分析，通过浏览器端的真实用户行为与体验数据监控，提供基于用户感知的业务办理效率分析，基于操作人员感知的操作轨迹跟踪、Ajax请求诊断和页面加载深度分析，实现前端感知可视化用户访问量（uv）、页面访问量（pv）、点击量、IP数。页面性能、弹窗、Ajax、系统访问等总体展现。页面性能分析，从网络连接建立到请求响应、加载耗时，全流程解析，瀑布图展示。便于定位哪个环节耗时长，协助从组件架构、前端代码进行优化。分省、分页面、对不同浏览器、操作系统、内外网、工号，多维度展现，故障判定。核心报错信息，一点呈现，系统异常波动通过趋势明显展现。覆盖cBSS2.0菜单400+，cBSS1.0菜单300+；其他新客服、沃行销等其他院内系统接入中。
前端浏览器监控基于浏览器页面性能指标分析，可有效分析页面瓶颈点，促进系统前端效能提升。后续结合业务数据，数字化手段呈现营业办理时效，分省、分地市、营业厅不同视角展示业务受理情况。反应业务受理量、各类业务办理快慢指标，还原营业员业务办理轨迹、环节耗时。建设总部到省分一线，一点触达的数字化感知监控体系。
作者：庄孺义、邱璐
编辑：沃享荟-刘宇超
