前端早早聊大会，前端成长的新起点，与掘金联合举办。 加微信 codingdreamer 进大会专属内推群，赢在新的起跑线。
第十四届|前端成长晋升专场，8-29 即将直播，9 位讲师(蚂蚁金服/税友等)，点我上车👉 (报名地址)：
本文是前端早早聊的第五届答疑简要整理版（完整版请看录播视频和 PPT）：
一、如何实现用户行为的动态采集与分析 --- 清音
1. 直播中已回答问题
Q:请教清音：数据收集如何衡量是否会影响用户端性能？
A: 目前是依赖性能分析系统进行检测；并且我们页面进入时，多数情况只会有一个上报请求，可以认为对性能的影响很小；
Q:请教清音：类似app内嵌的h5页面，是否适用onbeforeunload？
A:也可以由jsbridge暴露离开事件供调取；
Q:请教清音：有没有不侵入代码的埋点方式？ 生成坑位ID的方式， 还是要提前知道需要埋点，并且在代码中写入
A: 全埋点，直接监听所有事件的触发不做过滤，直接上报；是的，需要根据需求在代码中植入；
2. 直播中未回答问题
2.1 数据采集相关
Q:请教清音：自定义数据采集是怎么做的呢?
A: js sdk会将上报方法挂载在window上，供业务调用；
Q:请教清音：如何判断用户是否处于弱网环境?
A: app端的sdk会进行网络判断，并将优先级低的数据存到本地数据库，pc暂时没有进行判断；
Q:请教清音：如果是原生开发的app 是不是就不能这样采集了?
A: 类似，上报内容会有一些针对app的字段，也会根据当前网络情况上报；
Q:请教清音：数据采集环节是纯用前端采集JS SDK吗？需要采集服务端的日志吗?
A: 除了JS SDK外还有针对APP的SDK，我们的采集主要针对用户行为，服务端日志的采集不在范围内会另外采集。
Q:请教清音：如何保证你收集的埋点数据的准确率， 你们是每点击一次，就上报一条数据吗?
A: 是的，埋点位置每次触发事件都会上报数据。我们前期接入第三方产品，进行了数据对比数据差异。
Q:请教清音：用户行为数据有哪些埋点方式和数据指标 可以重点说下界面交互方面的数据采集方式吗?
A: 比较常见的是代码侵入式埋点和全埋点；数据指标在ppt里有列了；界面交互上自动上报的主要有点击、滚屏、页面进入离开；
2.2 数据清洗相关
Q:请教清音：数据漏斗的有序性如何来处理的?
A: 有两种方式，一是以来源，二是以用户唯一识别id，逐步向下筛选；
Q:请教清音：前端异常、性能采集和用户行为采集要分开不同的JS SDK吗?
A: 前端异常和用户行为采集是分开2个JS SDK的，两者采集内容筛选方式差距较大；性能采集目前是用无头浏览器去跑的，没有用sdk植入；
Q:请教清音：数据一致性实行如何保证的。针对单一用户大量上报数据如何保证?
A: 会生成唯一uuid植入到浏览器cookie中，过期时间设置到永久；
Q:请教清音：停留时长是不是应该把切到后台（比如APP切换到其他应用、浏览器table切换到其他table页面操作别的网页）的时间去除?
A: 是的，可以监听这些事件进行上报；
Q:请教清音：我之前做曝光数据采集的时候遇到一些问题，比如焦点图的曝光、支持横向滑动的slide模块（右边只漏出一半的情况）这些情况是怎么避免重复曝光的呢?
A: 我们会在第一次全部露出的时候进行上报；也可以增加延时上报；
Q:请教清音：是如何避免日志请求刚好跟页面里面的请求相冲突呢？毕竟浏览器的并发是有限制的，多了其实底层是串行执行，是有把请求放到sevice worker里面去默默发请求上送吗?
A: sendBeacon方法是在浏览器任务中执行的，会较好的避免阻塞；其他类型请求可以考虑使用Service Worker；
Q:请教清音：坑位还是需要开发人员手动加上去, 如果产品没有需求,那些需要加埋点,哪些不需要,有规定吗? 手动加是会出现遗漏的情况,还有后续修改维护成本,是否考虑过全量采集的策略? 比如拦截所有的按钮点击?
A: 一方面要求研发也需要深入业务，提前或驱动产品发现需求；第二方面全埋点的采集数据量大，服务器成本会相应增加；同时对分析能力要求较高，在调研第三方用户行为采集分析的成熟产品之后发现全埋点的数据准确性也相对偏低；但不排除后期会考虑全埋点的方案；
2.3 数据上报相关
Q:请教清音：上报的策略是什么， 策略是怎么保证数据量小的时候的上报数据的准确率?
A: app会依据网络情况进行上报，pc基本是触发立即上报；也可以将失败上报暂存本地；
Q:请教清音：数据是实时上报吗？如何设计数据的聚合上报，即多条数据整合为一个请求上报？在聚合时，如何设计数据的存储机制，数据上报异常时如何处理？有没有设计开关，即可以控制数据收集后存储在本地暂时不进行上报?
A: PC端除非在SDK未完成加载时会暂时不触发上报，其他情况下都会实时上报；APP会根据当前网络情况将数据临时存储到本地数据库中，在网络情况较好的情况下上报；也会对上报数据进行优先级分类，视优先级觉得是否上报，何时上报；
2.4 监控具体实践相关
Q:请教清音：自定义事件在sdk是怎么实现的呢?
A: 将自定义上报事件挂载在window上
Q:请教清音：搭建平台那里嵌入埋点能否详细讲一下?
A: 在搭建平台生成的项目id，每个组件生成一个区块id挂载到dom节点上;
Q:请教清音：跨页面的路径数据是如何做的呢？需要做sessionid么?
A: 1用refer串联路径；2在后续页面url上带上前页面触发位置的唯一id；
Q:请教清音：请教在Vue框架中，怎么埋点？页面ID，坑位ID等写在哪里?
A: 页面id是由sdk直接生成挂在body上，坑位id是挂在
Q:请教清音：离开页面使用beforeunload事件监听吗？好像触发不稳定?
A:目前是的
Q:请教清音：搭建平台的页面，进入离开以及自定义是如何和上下游打通的呢?
A: 搭建平台产出的页面和普通页面并没有太大区别
Q:请教清音：用户需要在待采集的每个位置都加上utm吗？会不会侵入性太强了?
A: a标签可以不用，在外层设置区块id即可，内部的所有a标签都按照index下标上报；其余都需要，准确性会较高；
Q:请教清音：如果通过JS跳转，区块ID、坑位ID如何生成以及如何串联两个页面?
A: js跳转的时候直接在url参数中加入来源id亦可；也可以使用请求头中的refer；
Q:请教清音：sendbeacon只能用几种特定的数据格式（比如formdata传输数据，是如何处理的呢?
A: 上报只是用固定格式即可；
Q:请教清音：能不能仔细讲下如何实现页面中的监控的实现，比如委托给document事件要做哪些判断处理?
A: 判断事件触发的位置是否带有区块id、坑位id，然后决定是否上报；
Q:请教清音：串联 ID 的生成规则是什么？什么方式？a 标签 href 后缀的 utm 参数 ID 链超长是否会带来其他影响?
A: 前页面的项目id.页面id.区块id.坑位id.随机id;整个id的长度是固定的；如原有url带参长度较长可能会出现截断的情况，但不会影响原有参数；
Q:请教清音：听下来感觉比较适用于相对静态的页面，如何对复杂页面和动态页面进行埋点？埋点业务部分的json是怎么生成的可以介绍下吗?
A: 因为事件已经进行了委托，所以即使是动态生成的模块进行上报也可以成功；json是通过sdk生成的，按照当前上报的事件类型逐字段组装；大部分参数都由sdk自行获取；
2.5 其他
Q:请教清音：做成chrome插件有什么优势吗?
A: 可以直观的在浏览器页面上展示点击量和热力图等；
Q:请教清音：采集SDK制作有开源的可以学习吗？求推荐
A: 我们后续可能会考虑开源哈哈哈
Q:请教清音：日志数据存储在什么地方？数据库配置怎么样？什么情况下存储在阿里云oss?
A: 阿里云Log Service，超过1年半的数据会存储至oss
Q:请教清音：0代码 低成本那块能够再讲讲么，没怎么听懂，代码里面的埋点也是注入的么，还是说通过可视化的方式?
A: pv、uv类的基础数据不需要埋点，sdk自动采集；点击、曝光等事件需要代码注入，但通过可视化搭建平台搭建的页面，组件中本身已经加入了埋点，模块的id由搭建平台生成并植入；
二、如何结合组件设计前端埋点策略 --- 凯伟
1. 直播中已回答问题
Q:请教凯伟: 代码质量和配置复杂度怎么去量化度量？
A: 代码质量：集团使用 eslint 和 sonar 研发了一个代码质检平台，前端工程在提交和构建的时候通过质量插件把影响运行的规则行数抛出（比如给常量二次赋值），其它问题可选择性修复。代码发布到日常环境后，系统会自动给当前分支创建一个检查任务，然后把各种触发规则的部门全部进行归类统计，根据 Blocker/Critical/Major 级别的数量给出分数和优良中差的评价，以及分析修复需要花费的时间。团队代码质量报告一比较，push 去优化代码。
配置复杂度：首先汇总下组件配置类型：输入类型基本复杂度 3 ，有默认值的 - 1 ，必须的 + 1（字符串、数字、url、json、富文本等）；选择类型（单选、复选、下拉等），基本复杂度 2 ；嵌套类型配置，比如配置一个列表有图片、文案、链接，基本复杂度 = 子元素的复杂度相加 * 最小行数。
Q:请教凯伟: 组件渲染失败与成功是如何监控上报的呢？每个组件都有唯一标识么？
A: 页面中的每个组件是一个独立的模块，渲染器脚本一个组件一个组件进行渲染插入到页面上。每个组件都有一个独立的spmc位，这个结构是在页面搭建的时候就已经确定好的。渲染失败会上报该组件的包名、版本、spma、spmb、spmc等，这样就能精准定位到是哪个页面，哪个位置上上的哪个组件渲染失败了。
2. 直播中未回答问题
2.1 数据清洗相关
Q:请教凯伟：配置校验规则，是要预先知道服务接口的数据结构吗?
A: 这是当然的，接口平台提供日常、预发和线上的数据预览，很容易就能看到数据格式，并且可以mock用作组件调试。
Q:请教凯伟：校验配置除了数据校验还有哪些呢?
A: 只有数据校验。这种校验分服务端和前端检测。搭建页面发布前会根据配置的数据来源取出每个组件的真实数据进行校验，出现问题直接抛出，避免线上异常。发布到页面，服务端隔一段时间会运行一次后台校验，出现问题立马警告。线上前端少部分页面接入了实时检测，数据请求回来传递给组件前会有一次校验，这种适用于千人千面的用户情况。
Q:请教凯伟：组件的性能怎么去量化，通过什么样的方式和维度?
A: 分别是组件模块被执行花费的时间，数据拉取的时间，首次高度变化到预期高度的时间。组件是一堆bundle一起加载的，不好计算单个组件的代码网络请求的时间。
Q:请教凯伟：组件点击率可能受不同位置，不同商品影响，平台的数据真的有参考性嘛?
A: 不同的位置、不同的商品，这种情况下是要结合页面的A/B Testing结果一起看数据，搭建系统可以支持运营手动A/B测试，前端算法平台也支持算法推荐能力自动生成A/B页面。 组件的点击率一般是用来对比同类型的组件。同类型的组件在不同的会场上位置基本固定，比如banner组件在顶层，推品组件在底层。会场结构也是相似的，同类分会场上相同组件点击效果各不相同，也能给出一定调优策略。
2.1 监控具体实践相关
Q:请教凯伟：组件渲染成功与否如何做埋点与监控呢?
A: 页面上的组件是按照一行一行来渲染的（一行一个组件），当组件首次出现在可视范围内，开始启动渲染。加载是否有异常，取数数据过程中是否有异常，数据是否符合预设的规则，数据注入组件首次执行是否异常，是否达到预设高度。
Q:请教凯伟：白屏率怎么监测和实现的？可以详细讲一下吗?
A: 同上
Q:请教凯伟：这种组件搭建，开发是怎么开发这种组件的，有没有场景是组件嵌入组件这种的?
A: 搭建组件本身就是个普通的模块化组件，代码编写好后通过脚手架工具打包成一个cmd的模块，模块返回一个function，参数就是初始化的数据。我们编写的是react组件，每加载一个组件在页面的楼层中插入一个空div，然后调用react渲染插入到空div中。 组件嵌套组件：这个情况也是经常遇到，倒不是在搭建上处理的，而是在代码层中A组件import B组件，然后发布搭建A组件。版本更新的时候就比较麻烦了。更改了B组件，A组件没有任何变化，要先发布B组件，然后空发一次A组件。
Q:请教凯伟：活动页面都是运营通过组装业务插件形成的，那每个业务组件都有各自独立的业务请求吗，这个业务数据是如何和服务端配合的呢?
A: 组件本身不关心数据来源，数据都是通过props注入到组件身上的。创建一个组件都需要定义一个和它相关的schema，这个schema是一份动态表单，搭建的时候由运营配置。静态数据的部分运营填什么就是什么。动态数据部分前后端只约定了一个接口（配置的时候是UI化的），接口用一个ID标识，对于服务端来说后面的逻辑很多，对前端来说入参是固定的，只需要填入类目ID（女装、食品、酒水）就能千人千面返回数据。当然，所有数据都是有配置平台的，这样就保证了标题、图片等字段是一致的。
2.3 其他
Q:请教凯伟：组件监控是跟业务结合起来的吗?
A: 组件监控本身和业务不关联，就像监控页面的白屏、性能等属于一种通用解决方案。但是业务可以通过监控的数据进行分析和二次加工。
Q:请教凯伟：能详细讲一下这个数据彩蛋怎么实现吗?
A: 同样的一个线上的页面，访问这个url，回源到源站后，返回页面的html前（app上是返回jsbundle），渲染服务判断该用户在白名单中（阿里内部员工），在返回内容中增加一个数据彩蛋开启的非常简短的命令脚本。用户在页面空白区域连点7下，唤起数据查看面板（首次唤起再加载详细的数据dashboard脚本）。这样就能直接在线上页面上看组件数据，而普通用户看这个页面就只是一个普通的会场。
Q:请教凯伟：你们这些平台的设计是否是研发自己设计的，有产品参与吗?
A: 技术类型的平台基本上都是阿里的开发同学发起的项目，大部分都是没有产品设设计师参与的，比如前端工程平台、搭建平台、异常监控平台这些。有些比较前端的项目的数据库和服务端的代码都是前端使用nodejs编写的。和招商、选品、配置，这种和运营关系密切的项目才会有产品介入，这种情况的项目就很少是由开发主动发起的了。
三、如何面向场景做监控数据分析 --- 霸天
1. 直播中已回答问题
Q:请教霸天：阿里为什么要有这么多数据监控采集平台，不能统一么?
A: 阿里的数据采集是通用的哈，我们都是通过spm和黄金零件的方式来采集数据的。但是每个BU的业务不同，对数据的诉求和加工不同，所以每个BU通常也都会有自己的数据产品。就比如我们分享的几个都是非常业务定制的数据分析，这种在BU层面也是不通用的，如果要在集团层面实现这一类的数据平台通用，难度是非常大的。
Q:请教霸天：讲的偏产品设计，设计上是研发主导的吗？ 你们的交互式怎么样的， 是通过设置模型吗?
A: 这个产品是前端主导设计开发的，主要也是结合自身的痛点（为什么每天都在开发业务场景和组件）思考，希望把时间放在最有意义的事情上，所以通过衡量场景的效能来push我们的业务同学。我们的场景的数据报表除了“场景心智报告”，其他的都不需要业务同学录入场景模型，只要通过业务数据清洗就可以哈
2. 直播中未回答问题
2.1 数据清洗相关
Q:请教霸天：如何验证采集到数据的准确性?
A: 数据采集，通常比较常见的是漏采集的情况会比较多。但是对数据的准确性的定义，我觉得应该是在采集数据前做好系统的思考，该采集什么样的数据，数据采集的格式是什么样的，通常定义清楚这一些，采集到的数据都会是准确的。但是采集到的数据如果漏掉了，在数据清洗层面可能会给结果带来不准确性的影响。
Q:请教霸天： 数据清洗是实时分析还是离线分析，可以介绍一下具体实现吗?
A: 我们上面介绍的报告是离线分析的哦，这些报告通常是针对场景做数据的复盘，所以对数据的实时性要求没有很高。数据清洗的具体实现细节和业务的诉求也有比较大的关系。举个例子，我们的场景的人群重叠度是指“访问来A人群”和“访问了B人群”的重叠部分，访问场景的用户，通常是用UV这个采集指标表示的，所以我们只要清洗两个场景的UV重叠部分就可以。
Q:请教霸天：业务自行上报这个实现，比如你说到的click事件，是业务开发时手动埋点上报，还是监听全部事件然后过滤，手动埋点的开发能效怎么提升?
A: 我们这边对click事件有区分的，有url跳转的我们是通过spm来标记的，如果没有url跳转的，就需要业务开发来埋点来，不会全埋所有事件的
2.2 产品疑问相关
Q:请教霸天：这个项目里 前端的价值体现在哪里，除了数据可视化，你们能将操作开放给运营的同学吗?
A: 这个项目的价值，在于我们通过数据的分析来push业务，能够有效的衡量场景效能，把我们宝贵的事件留给我们重要的场景中，从而更好的发挥我们的价值。场景里除了场景的目标录入，其他都不需要运营的操作，会定期的自动清洗数据的
2.3 其他
Q:请教霸天：kafaka 数据消费， flink接入都是前端上么?
A: 不是的，我们的数据流部署都是统一的，前端不直接处理
Q:请教霸天：搭建营销页自定义埋点采集 如何跟上下游app、h5打通呢?
A: 就是我们分享过程的spm哈，可以通过spm串联上下游的页面
四、如何针对 APP 自建前端监控体系 --- Jimmy
1. 直播中已回答问题
1.1 数据清洗相关
Q:请教Jimmy：如何监控用户的网速如何呢?
A: 我们一般会将用户当前的链接类型上报上来，单独对用户的网速检测是没有的，只会在加载资源的时候利用 performance API (在浏览器有的情况下)上报静态资源的加载时间。然后对较大的 js 代码进行优化。
Q:请教Jimmy：崩溃或者闪退如何采集和分析?
A: Android 可以直接继承
UncaughtExceptionHandler然后进行自定义处理，iOS 作两手准备：一是社区开源的 KSCrash，二是使用UncaughtExceptionHandler和 处理 signal
Q:请教Jimmy：KsCrash有些 错误是抓不到的，请教怎么处理?
A: 使用
UncaughtExceptionHandler和对 signal 进行监听处理，尽量保证错误捕获完整
Q:请教Jimmy：对于大量因为用户设备和网络导致的异常是当做干扰数据剔除？还是如何处理？有时这种数据量很大，甚至会把真正运行时异常资源异常等给淹没?
A: 我们会对特定的错误进行归类，所以大量相同类型的错误会被抽象成一个类型的错误(即 issue 的概念)，因此不用再海量的日志中去查看错误，只需要在 issue 列表中查看 issue ,当一个 issue 高发时会有警告，用户可以通过 issue 下面的关联错误去查看具体的错误发生时间和用户设备信息
1.2 其他
Q:请教Jimmy：可以大概讲讲操作回溯的实现思路吗?
A: 我们会在用户打开应用时在本地生成一个 sessionId ，在用户使用过程中这个 sessionId 不会变化，所有的操作都由 sessionId 串联起来
Q:请教Jimmy：数据库中存issue，能具体说下issue是做哪些事吗?
A: issue 即是对一系列具有相同特征的错误进行归类后的结果，它包含处理状态、等级(P级)以及负责人并且有可能关联代码错误和发布单号，一个 issue 处理会有完整的历史记录和处理方法记录便于后续查看
Q:请教Jimmy：在前期用MongoDB做收集时遇到了哪些瓶颈，后续数据是怎么做的迁移过度的?
A: 前期我们所有的 RN 埋点都是使用 MongoDB 搜集的，我们使用了大概两年左右，数据达到亿级，由于查询存在联表(或者是 联 collection)的情况，导致后续数据查询越来越慢。数据迁移我们只迁移了重要的还没有处理的埋点数据，对已经落入数据仓库的报表数据则没有进行迁移
2. 直播中未回答问题
2.1 日志数据缓存相关
Q:请教Jimmy：你们用mongoDB，数据瓶颈大概在哪个数量级?
A: 前期我们所有的 RN 埋点都是使用 MongoDB 搜集的，我们使用了大概两年左右，数据达到亿级，由于查询存在联表(或者是 联 collection)的情况，导致后续数据查询越来越慢。
Q:请教Jimmy：在日志数据持久化方面，mysql 和 elasticsearch 分别扮演什么角色呢?
A: ES 是用于存储原始日志数据的，可以在上面进行简单的检索和图标生产，但是ES 存在着大量的重复数据，而 MySQL 则是对 ES 搜集的数据进行抽象，例如同一种类型的错误在 ES 上保存了多条(不同用户，不同设备)，我们会对这些错误进行抽象，将其特征保存到 MySQL 中，我们称其为 issue, issue 具有管理属性(issue 状态，处理记录，负责人等)和文档属性(处理结果，处理方式等)
2.2 数据清洗相关
Q:请教Jimmy：如何监控单页面路由切换后的性能与资源?
A: SPA 页面路由切换监听
onpopstate， 在支持 perfomance API 的情况下可以使用 performance 进行监控，没有的话只能监听 windows 各种 load 事件、尽量做到监控了
Q:请教Jimmy：小菜在混合RN的项目里面，怎么做埋点和上报的呢?
A: 分为 JS 和 Native 两层，上报统一在 native 层存储上报。 js 层具体实现 PPT 有简单讲解，native 层则比较复杂，这里就简单提一下错误上报好了: Android 可以直接继承 UncaughtExceptionHandler 然后进行自定义处理，iOS 作两手准备：一是社区开源的 KSCrash，二是使用 UncaughtExceptionHandler 和 处理 signal
2.3 操作回溯相关
Q:请教Jimmy：可以大概讲讲操作回溯的实现思路吗?
A: 我们会在用户打开应用时在本地生成一个 sessionId ，在用户使用过程中这个 sessionId 不会变化，所有的操作都由 sessionId 串联起来
Q:请教Jimmy：崩溃是需要实时的 请教如果针对实时建立索引，上报数据的回溯机制是如何考虑的?
A: 关于 ES 索引，我们是使用按天建立索引的，提供一个统一的索引模板(template mapping) 即可 关于回溯，我们会在用户打开应用时在本地生成一个 sessionId ，在用户使用过程中这个 sessionId 不会变化，所有的操作都由 sessionId 串联起来
五、如何对 PC/H5/小程序实现错误监控 --- Allan
Q:请教Allan：单页面路由切换后的性能与资源数据如何统计?
A: 天网只负责错误数据统计，并且会统计一些简单的PV/UV，性能等在我们的另一套系统（天眼）统计。
Q:请教Allan：比如 H5 会嵌入在不同的 webview 中，实际上发现有很多非我们代码的错误产生，请教你们有遇到这样的问题吗？除了过滤还有什么方法让开发者关注那些真正值得关注的错误吗?
A: 遇到过。
六、如何基于错误日志进行分析和告警 --- 周能翔
1. 直播中已回答问题
Q:请教能翔：对于历史数据的统计 会采用数据沉淀吗？
A: 原始数据存ES，保存1个半月，清洗后数据存数据库，保存2年。
Q:请教能翔：那如果瞬间有大面积错误发生，准实时监控是不能立马发现的，告警了，损失就已经很大了？
A: 目前我们针对端侧的告警最快可以做到分钟级告警，告警本身也是依赖错误数量统计的，我们要做的是尽量在大量错误发生时，清洗任务也能快速完成并发出告警，保持分钟级的告警能力。继续将前端错误1分钟级别的准实时告警优化成完全的实时告警意义不大，可行性也很差。
Q:请教能翔：web端错误有建立行为链路吗？记录了哪些关键节点？对于浏览器第三方插件导致的问题如何分析呢？
A: web 端我们目前记录的是页面跳转，页面请求，用户行为，和控制台报错。目前没有专门针对第三方插件进行相关处理，靠关节行为节点和错误堆栈来定位问题的。如果您认为用户使用第三方插件可能影响到你的错误分析，也可以收集用户使用的插件信息作为环境因素。
2. 直播中未回答问题
Q:请教能翔：pc 端会 收集用户行为吗？
A: pc 端会收集页面跳转，页面请求，用户行为，和控制台报错。
Q:请教能翔：有没有什么行为记录的轮子推荐，以及各自的对比？
A: 我们目前前端使用的行为记录方式在顺发的 PPT 中都有展示。客户端使用的记录方式：页面跳转/前后台切换是在页面生命周期回调中统一记录的；网络请求是在网络库请求回调处统一记录的；网络环境变化是监听了系统网络切换广播；用户点击行为我们目前未全部上报，全收集的话可以考虑 hook 点击事件或者插桩。
Q:请教能翔：无论是那种上报时间，那你这种就不全是实时监控了，是准实时监控。这样会不会不合适？
A: 看上去我们定义了一些概念，导致这个告警看起来像是小时级别的，但其实我们拉取错误的轮询任务的时间间隔是没有变的，只要这个是分钟级的，那后续我们仍然是每分钟确定一次是否触发了告警。两种上报时间以及后续的处理是为了这个分钟级告警能更加准确，避免将太久之前的错误拿来触发告警。我们的告警策略在这样处理后仍然是分钟级的。
七、如何基于数据和堆栈映射快速定位问题 --- 亚瑟
1. 直播中已回答问题
Q:请教亚瑟：服务器这一块还是前端来独立完成的吗？
A: 先来说一下我们这个产品的情况吧。首先是日志收集，这部分是依赖于蚂蚁内部的其它中台，我们团队内部不需要进行开发，只要在脚本里按指定格式上报就能拿到数据。然后是数据清洗，这部分的开发是由两个专业的数据开发同学完成的。之后是服务端逻辑，这部分是由前端同学完成的，使用的是 Egg 的技术栈。最后前端展示当然是由前端来完成。
如果大家需要搭建自己的监控平台，在日志收集部分最好是交给有分布式架构经验的人来进行设计，这样可以避开很多的坑，此外也可以借鉴一下前面几位讲师在日志收集部分的经验。数据开发也同样建议有数据背景的人，包括技术的选型和算法的优化，一般的前端开发人员因为缺少这方面的经验，因此不建议由前端来开发数据任务。服务端逻辑通常不会成为瓶颈，因此前端同学可以来承担这部分的开发工作。
Q:请教亚瑟：错误堆栈是如何映射到 sourceMap 文件的，具体是怎么实现的？
A: sourcemap 的映射都是使用 source-map 这个 npm 包实现的，可以参考 README 中 SourceMapConsumer 这部分的功能。
Q:请教亚瑟：服务器读写采集的信息需要做哪些安全措施？比如数据采集的时候篡改数据之后上传对服务器的安全威胁？
A: 我不太确定这里的安全是指哪方面的安全。目前我们系统的日志是依赖蚂蚁内部的日志网关收集的，日志网关本身会有防 DDS 等基础的安全措施，但因为是其它团队维护的，我并不清楚内部的细节，所以很抱歉这个问题我答不上来。😂
2. 直播中未回答问题
2.1 数据清洗相关
Q:请教亚瑟：监控获得的信息那么多，服务器会定期清除吗？
A: 是的，明细数据和分钟级别的数据基本都是保存一个星期，日级数据最长也不会超过一个月，毕竟监控主要还是关注当下，因此数据不会保留太长时间。一般需要长期保留的都是一些报表相关的需求，对于报表可以按周期计算出所需的统计数据，统计后的数据通常不会太多，长期保留也不会占用太多资源。
Q:请教亚瑟：如何区分堆栈报错是后端接口还是前端逻辑错误导致，有没有好的定位方案？
A: 我们目前能采集到的堆栈都是前端代码的错误，而对于后端接口报错，我们有接口异常的监控，当接口请求报错时上报请求的 URL、参数、错误码等信息，具体方式是劫持 XHR 和 fetch，这部分可以参考 Allan 的分享。当然还有一种情况是前端对请求结果处理不当导致的异常，通常是前后端返回值的格式没有约定好， 导致了异常的发生。对于这种情况，通常可以通过堆栈看出出错的字段以及调用栈。如果还是不能定位到根本原因，则需要找到复现的方式，然后进行详细地调试。
Q:请教亚瑟：实现堆栈去重上报需要利用 CDN 先走一遍请求，如果用户此时离开网页，日志是不是就丢了？
A: 是的，其实不光是堆栈上报，其它前端的请求也会遇到同样的问题，因此前端采集的 SDK 最好是有本地缓存机制，在遇到请求没有上报成功的情况下保留上报的内容，待 SDK 下次可以运行时再进行上报。对于支付宝内的上报，已经拥有了这个机制，但普通网页的 SDK 我们还没有做这个功能，这是我们今年计划的功能之一。
2.2 其他
Q:请教亚瑟：秒级映射如何做到的？
A: 映射本身并不困难，重要的还是在映射时能拿到 sourcemap 和堆栈，也就是分享中主要讲的内容。映射的过程，使用的是 source-map 的 SourceMapConsumer，当你有了 sourcemap 和堆栈后这一步是很快的。我们的产品还多做了一步代码的展示，这一步是依赖的源码仓库管理平台（类似 gitlab）的接口来获取源码，并用 highlight.js 做展示。
Q:请教亚瑟：生成sourcemap的时候，ppt中说锁定依赖后再进行sourcemap构建，那么是同时开启两个服务进行同样的打包吗？如果sourcemap在发布后在构建，会不会存在保存没有sourcemap的情况？
A: 对，是通过两个不同的服务进行构建的，也确实会存在普通的构建成功但 sourcemap 却构建失败的情况。遇到这种情况首先是要能发现构建失败，我们的构建镜像在失败后是会有失败记录的，有了失败记录便可以对其进行监控和报警。当发现有构建失败，就需要具体进行分析，通常失败都是 OOM 导致的，遇到这种情况可以调大构建容器的内存重新构建，如果总是失败可能就需要通知脚手架的维护者对生成 sourcemap 的逻辑进行优化了。
八、如何设计前端实时分析及报警系统 --- 烛象
1. 直播中已回答问题
Q:请教烛象：宿主干扰报错特别多，请教是怎么过滤的？
A: 有2种主要手段。1是根据错误message的关键字过滤，比如 toutiaoJSBridge；2是根据错误栈，比如错误的file是html，则直接过滤。
Q:请教烛象：钉钉客户端是js 技术栈吗？能简单介绍下钉钉客户端的技术栈吗？记得最初用的nw.js
A: 现在是CEF架构，不是纯js，严格来说是某种容器技术。 细节不太方便透露哈
2. 直播中未回答问题
2.1 数据清洗相关
Q:请教烛象：如何进行日志清洗，怎么进行过滤的？
A: 有2种主要手段。1是根据错误message的关键字过滤，比如 toutiaoJSBridge；2是根据错误栈，比如错误的file是html，则直接过滤。这些过滤手段不是在采集层过滤的，而是在 日志报警系统过滤的。
Q:请教烛象：宿主干扰信息和 JS 实际错误是如何区分过滤的？
A: 宿主干扰信息一般错误的file是在html里面的，实际的js错误的file则是在js文件。
Q:请教烛象：具体如何排除所有的干扰的jserror，是通过对1.0系统的结果进行分析获得的吗？
A: 是的。 是基于经验值进行的过滤分析，后面总结的规律就是错误file在html还是js，是个大的确定干扰jserror的依据。
Q:请教烛象：如何进行业务数据聚合，能举例说明么？聚集完的业务数据又如何进行日志错误过滤？
A: 业务数据聚合很简单，就是日志打到一个地方，不做分布式和文件夹的区分。我们的系统会部署在服务器，按照一定的规则爬取源日志，进行二次消费。
Q:请教烛象：有监控媒体视频图像错误吗？如何取到媒体异常更多信息，比如 请求超时还是资源不存在、onerror取到的信息应该不足够？
A: 没有对多媒体信息进行错误捕获，这块属于错误重溯。有一些市面上的工具确实能做到这一点，更多的适用于赋能客服，提升解决问题效率。 对于普通的产品形态，相对而言不会做的那么重。
2.2 日志数据缓存相关
Q:请教烛象：一份日志实现双写和写入 es 和 mysql 的区别是？
A: 双写不是指存储，而是指消费。日志被2个系统所消费，之余后续的存储，选型是没有过多要求的。
2.3 监控嵌入业务相关
Q:请教烛象：H5SDK的的实现方式的流程是怎么样的？
A: 确定采集的能力，设计api，确定日志信使选型，采集时机点包括主动上报、被动上报，基本这几个能力cover可以很快写出一个sdk
2.4 异常反馈相关
Q:请教烛象：钉钉除了 线上系统监控错误，会直接接触用户异常反馈吗？这部分如何处理的？
A: 我们有客户端层的离线日志、客服跟踪系统，这块主要还是以用户维度case by case的去做的。
本文使用 mdnice 排版