# 埋点与监控
# 一、为什么需要埋点&监控
在开始正文之前，我们先想想为什么需要埋点&监控？
当我们在分析复盘一个产品是否成功的时候，不同的角色考虑的方向是不同的。
站在产品的视角，经常会问如下几个问题：
1.产品有没有用户使用
2.用户用得怎么样
3.系统会不会经常出现异常
4.如何更好地满足用户需求服务用户
当站在技术视角时，经常会问如下几个问题：
1.系统出现异常的频率如何
2.异常出现后如何快速进行定位追踪
3.如何分析解决问题
而当站在老板的视角时，问题可能又会变为：
1.我的存量用户多少，未来还有多少潜力
2.多少用户在系统内进行了消费
当在回答了上述问题之后，埋点&监控便跃然纸上。因为要回答以上问题，只有通过对系统进行数据分析的方式才能弄清楚。
其实无论是埋点亦或是监控，二者并不是独立存在，而是相互依存的关系。
# 二、埋点&监控能做什么
从单个页面的常规数据角度出发我们可以通过埋点获取：访问次数（UV/PV）、地域数据（IP）、在线时长、区域点击次数等数据。
当我们将这些单点数据按照特定的纬度进行数据聚合，就可以获得全流程视角下的数据如：用户留存率/流转率、用户转化率、用户访问深度等数据。
而在埋点数据进行上报的同时，我们也可以同步收集页面基础数据/接口相关数据如：页面加载/渲染时长、页面异常、请求接口等数据。
同时对于前端监控来说，大致可以分成三个方向：数据监控、性能监控、异常监控。
# 数据监控
数据监控即通过数据分析用户行为，常见的监控数据包括：PV/UV、页面停留时长、通过什么入口进入、在页面触发了什么行为等。统计这些数据就是为了清楚用户来源，拓宽产品的推广渠道；了解用户在页面停留的时间情况，针对停留较短的页面进行分析改进。也就是我们常说的：who(uuid)、when(time)、from where(referrer)、where(x,y)、what(自定义拓展数据)串成的用户行为路径。
# 性能监控
性能监控主要是针对前端进行监控，比如不同用户在不同地区使用不同机型下的首屏加载时间、页面的白屏时间、静态资源下载时间等数据。通过针对这些性能数据进行监控，可以大概反映前端性能的好坏，根据性能监测的结果可以进一步的去优化前端性能。
# 异常监控
前端代码在执行过程中也可能会发生异常，因此需要引入异常监控例如 sentry 等工具及时的上报异常情况，可以避免线上故障的发上。常见的异常包括：Javascript 的异常监控、css 的异常监控等。
# 三、目前埋点方案&后续演进方向
# 前端埋点
我们说完了前端监控的三个分类，现在就来聊聊怎么实现前端监控。实现前端监控，第一步肯定是将我们要监控的事项（数据）给收集起来，再提交给后台，最后进行数据分析。数据收集的丰富性和准确性会直接影响到我们做前端监控的质量，因为我们会以此为基础，为产品的未来发展指引方向。
收集监控数据我们是通过前端埋点来实现的，目前常见的前端埋点方法有三种：手动埋点、可视化埋点和无埋点。
# 手动埋点
手动埋点，也叫代码埋点，即纯手动写代码，调用埋点 SDK 的函数，在需要埋点的业务逻辑功能位置调用接口，上报埋点数据，像友盟 (opens new window)、百度统计 (opens new window)等第三方数据统计服务商大都采用这种方案。
手动埋点让使用者可以方便地设置自定义属性、自定义事件；所以当你需要深入下钻，并精细化自定义分析时，比较适合使用手动埋点。
手动埋点的缺陷就是，项目工程量大，需要埋点的位置太多，而且需要产品开发运营之间相互反复沟通，容易出现手动差错，如果错误，重新埋点的成本也很高。这会导致整个数据收集周期变的很长，收集成本变的很高，而且效率很低。因为手动埋点需要开发人员完成，所以每次有埋点更新，或者漏埋点，都需要重新走上线发布流程，更新成本也高，对线上系统稳定性也有一定危害。
# 可视化埋点
通过可视化交互的手段，代替上述的代码埋点。将业务代码和埋点代码分离，提供一个可视化交互的页面，输入为业务代码，通过这个可视化系统，可以在业务代码中自定义的增加埋点事件等等，最后输出的代码耦合了业务代码和埋点代码。缺点就是可以埋点的控件有限，不能手动定制。
可视化埋点听起来比较高大上，实际上跟代码埋点还是区别不大。也就是用一个系统来实现手动插入代码埋点的过程。比如国外比较早做可视化的是 Mixpanel (opens new window)，国内较早支持可视化埋点的有TalkingData (opens new window)、诸葛 IO (opens new window)，2017年腾讯的 MTA (opens new window) 也宣布支持可视化埋点；相比于手动埋点更新困难，埋点成本高的问题，可视化埋点优化了移动运营中数据采集的流程，能够支持产品运营随时调整埋点，无需再走发版流程，直接把配置结果推入到前端，数据采集流程更简化，也更方便产品的迭代。
可视化埋点中多数基于Xpath的方案，XPath 是一门在 XML 文档中查找信息的语言，XPath 可用来在 XML 文档中对元素和属性进行遍历。
# 无埋点
无埋点则是前端自动采集全部事件，上报埋点数据，由后端来过滤和计算出有用的数据。优点是前端只要一次加载埋点脚本，缺点是流量和采集的数据过于庞大，服务器性能压力山大。
采用无埋点技术的有主流的 GrowingIO (opens new window)、神策 (opens new window)。
# 现有方案
目前公司已经存在一套埋点 SDK 在运行，使用的是代码埋点方案，其埋点上报数据可大致分为三类：页面进入、事件触发、页面离开。
(1) 页面进入(pageIn)
进入页面时，同步推送页面基础信息如：当前页面的来源页面、操作系统、浏览器、页面 url，发生时间等
(2) 事件触发(Event)
触发事件时，同步推送事件类型(click、hover等)、鼠标位置、附加业务参数等
(3) 页面离开(pageOut)
离开页面时，同步推送发生时间、页面 url 等
其埋点大致逻辑如下图，通过生成独有的四段值+pvid即可定位某个项目的某个页面在某个区块点击了某个按钮，同时生成唯一的 pvid 记录页面的 pv 数据。具体说明可翻阅往期关于政采云埋点分析系统的文章。
# 后续演进
在现有 SDK 的基础上我们可以发现，目前的埋点 SDK 只上报了一些用户的基础信息数据，在性能数据和异常数据的上报上还存在可拓展的空间。
(1) 性能数据上报
在获取用户基础数据的同时，后续可以通过window.performanceAPI获取前端性能数据，在第一次进入页面时随 pageIn 一起将页面初始性能数据进行上报。
可进行上报的字段包含如下：
(2) 接口数据上报
除了上报性能数据外，我们也可将页面内所发的所有请求通过重写XMLHttpRequest进行劫持打标上报，即在当前页面下的所有请求 header 上默认加上当前页面 ID，将各个请求与当前页面的 pageId 进行绑定。
通过该类数据可以进行统计分析出某一页面的请求量、请求异常等情况判断出页面级别的请求健康度；后期甚至可与 Yapi 接口系统打通，若出现异常情况可直接将实际请求参数与文档上的请求参数进行对比，排除异常是由于请求参数错误造成的。
# 四、监控可视化
对于已经采集上来的数据经由数仓清洗之后的可视化玩法就千变万化了。可以针对不同元数据按不同指标纬度聚合，产生不同的数据分析侧重点。再通过各类可视化工具进行展示，例如：混仪系统、小采BI等。
# 1、Grafana
# 1、简介
Grafana 是一款专门面向监控运维场景的优秀的运维数据可视化软件。Grafana 项目由 Torkel Ödegaard 于 2014 年启动，在过去几年中已成为 GitHub 上最受欢迎的开源项目之一。它支持通过图形化界面自助式查询数据，支持定义可视化仪表盘，并支持对接指标数据、告警数据和日志数据。Grafana 具有可插拔的数据源模型，支持对接 Graphite、Prometheus、InfluxDB、ElasticSearch 等十余种监控工具和监控数据存储数据库。无论指标存储在何处，Grafana 提供查询、可视化、提醒和理解指标的功能。用户可创建、浏览仪表板并与团队共享仪表板，实现数据驱动的运维模式。Grafana 还为云监控供应商（如 Google Stack 驱动程序、亚马逊云、微软 Azure、MySQL 和 Postgres）提供了内置支持。
# 2、主要功能
Grafana 专注于运维监控场景下的数据可视化、分析和风险告警展现，主要特点是可以将来自众多位置的数据合并到单个仪表板。其提供的主要功能包括以下几项。
- 运维数据可视化。 Grafana 提供快速灵活的用户端图表，并提供多种选项供用户自定义配置展示风格，支持用于可视化指标和日志的多种不同方式的面板插件。Grafana 支持使用模板变量创建动态和可重用仪表板，这些变量在仪表板顶部显示为下拉列表。
- 探索指标浏览日志。 Grafana 使用了标签筛选器，支持运行期从指标快速切换到日志。利用 Grafana 提供的交互式界面，用户能够快速搜索所有日志或实时流式传输日志。Grafana 提供了 Loki 日志聚合系统，它是在 Grafana 平台做日志浏览的首选数据源，但很快 Grafana 会支持更多类型的日志数据。
- 对接第三方平台及仪表盘。 为及时将发现的风险通知责任人，Grafana 支持对接多种第三方平台及仪表盘以发送告警数据。一旦配置为对接第三方平台，Grafana 将持续监测并推送通知到第三方系统（如 Slack、PagerDuty、VictorOps、OpsGenie 等）。为方便配置，Grafana 支持将定义好对接规则的数据可视化仪表盘或全屏面板共享，仪表盘中自动包括当前的时间范围和变量，支持创建公共快照或内部快照。
- 支持多源混合数据源。 新版的 Grafana 支持在同一图表中混合不同的数据源数据，并支持基于每个查询指定数据源。我们甚至可以通过 Grafana 的扩展插件对接自定义类型的数据源数据，结合 Grafana 现有数据源数据融合展现，并直观显示在一个可视化图表中。通过 Grafana 提供的数据临时查询和动态向下钻取能力，我们可以随需浏览底层原始指标数据，拆分视图来并排比较不同的时间范围数据，以便发现数据中隐藏的潜在风险。
- 插件机制的第三方数据源定制对接。 Grafana 具有可扩展插件机制，支持对接第三方的监控数据源，其中包括自定义数据源或 ZABBIX、ElasticSearch、Prometheus 等常用监控系统数据源。对接之后，Grafana 支持在仪表盘中直接配置对应的查询语句来过滤、统计、聚合数据。这种插件机制为企业规划的建设应用智能运维系统提供了一种不需要同构底层存储即可统一展现多源、异构数据的运维可视化策略。
# 2、Elastic Kibana
# 1、简介
Kibana 是 Elastic 公司提供的一系列运维工具套件中的数据可视化模块，可以直接对接 ElasticSearch 来实现仪表盘和报表的可视化配置。通过 Kibana，用户可以对自己的 ElasticSearch 进行可视化，还可以在 Elastic Stack 中进行导航。
# 2、主要功能
Kibana 的核心功能是实现监控运维数据的可视化。Kibana 应用流量监控仪表盘其默认支持一批经典图表，如柱状图、线状图、饼状图、旭日图等。当然，我们还可以基于 Kibana 与底层 ElasticSearch 数据存储索引平台交互，搜索自己的所有文档。在日常运维过程中，我们可能希望跟踪自己网站的运行状态，或者希望查看分布式痕迹，通过 Kibana 内置应用，如 Logs、Infrastructure、APM、Uptime 及其他应用，无须离开 Kibana，便能轻松完成这一切。
- 结合位置数据分析应用监控数据。 借助 Elastic Maps，Kibana 支持分析采集到的位置相关数据。结合地图类图表，其可以对定制图层和矢量形状进行可视化，并进行交互式数据探索、过滤和定位。
- 实现时间序列监控数据的可视化。 借助 Kibana 的时间序列数据可视化探索与分析 UI 界面，可对 ElasticSearch 中的数据执行高级时间序列分析。可以利用功能强大、简单易学的表达式来描述查询、转换和可视化。有了 Kibana，命令行不再是管理安全设置、监测堆栈、采集和汇总数据或配置其他 Elastic Stack 功能的唯一途径。与此同时，得益于出色的 API，用户可以通过可视化 UI 轻松地管理 ElasticStack 并确保其安全性，这种方式更加直观，也能让更多的人上手使用。
- 实现机器学习算法输出结果的可视化。Kibana 支持借助非监督型机器学习功能来检测隐藏在 ElasticSearch 数据中的异常情况，并探索那些对它们有显著影响的属性。凭借搜索引擎的相关性功能，结合 Graph 关联分析，Kibana 可以分析发现 ElasticSearch 数据中常见的数据关系。
Grafana 和 Kibana的区别 (opens new window)
参考链接：