前端数据监控

核心提示监控步骤:定制规范,埋点 > 采集 > 计算 > 分析数据埋点的业务价值平台迭代数据抓手,降低咨询量解决高频问题,提升用户满意度解决业务痛点:我的会场效果如何?不好该如何调优?调优过程是否高效?经验是否可以复用?面向场景做监控:精细化运营—

监控步骤:自定义规范,嵌入>采集>计算>分析。

数据埋藏点的商业价值

迭代平台数据,减少咨询量。

解决高频问题,提高用户满意度。

解决业务痛点:我的场地有多有效?不好怎么调?调优过程是否高效?经验可以重用吗?

面向场景的监控:

精细化运营->场景测量

解决心灵划分难:圈子选择逻辑天马行空,场景重叠度高,同质化严重> > >商品-人群钻取,重叠报告,心灵报告

数据波动:操作介入的波动数据难以体现,分析成本高,挫伤分析积极性> > >场景组配置,趋势报告,场景报告。

流量的公平性:流量越多,场景的曝光机会就越多。所有参与行动的学生都想要流量。流量给谁?> >生成场景分配报告。

埋藏点规格

超级定位模型

,因此可以结合组件进行监控。当组件渲染异常时,可以监控问题出在哪里。比如业务组件中聚合组件的统计效率:曝光、点击转化率、加载性能、渲染性能、数据性能、应用次数、失败次数、代码质量。

多终端统一采集

归一化采集场

统一采购方案

企业自我报告

问题

如何确保数据收集不会影响业务系统的性能?

个人觉得可以用相关技术点来解决前端可能影响页面性能的问题,比如:Web Worker,requestIdleCallback等。,但是后端的服务稳定性能否保证,需要注意?

Page beforeunload数据丢失,页面崩溃,无法收集。

除了发送信标,你可以考虑服务人员的配合吗?在页面崩溃之前,计时器会对其进行标记,下次打开页面时,会比较相应的值来判断页面是否崩溃。

网络问题上报了吗?

但是不处理记录,也不报警。

数据清理

数据分析

数据分析的本质是将监测到的数据直观地展示出来,或者转化为可以理解的概念和指标数据。用了站长统计之后,比如Google Analytics and Statistics,CNZZ等。,他们的统计管理后台,展示给“站长”的指标数据是通过数据分析得到的。

实施思路/方案:

获取网站页面的PV、UV、点击量、曝光数等基础数据,通过公式规则计算出转化率、跳出率、平均使用时间等等。

数据应用

指标分析的结果可以用来分析存在的问题,改进网站,通过转化率提升义务。,还可以研究用户习惯和发现趋势,提供一些自定义设置帮助你做更好的分析。

监控数据将通过各种图表工具显示,以显示分析结果。

功能显示

指数波动图

热力学图

来源、持续时间和跳出率分析

有效、保留、地理分布、终端类型

心理报告图表统计

统计数据、日志报告、错误报告等。

实时信息广告牌

如何搭建APP前端监控系统

详见“如何搭建APP前端监控系统”PPT。

如何构建APP前端监控系统

RN SDK

JS结束

错误捕获

网络请求

页面跳转

本地端

使用IOS KSCrash

捕获的数据

微信小程序SDK

网络请求:代理wx的方法。全局对象wx的请求

页面跳转:覆盖页面对象,代理生命周期方法

日志处理

监控看板

实时P/UV观察

实时错误查看

问题查看、分配和统计

问题分类

问题/任务更新历史记录

警报任务查看和编辑

……

警报控制

更新警报任务

分发报警任务

常见报警任务,主要用于发现和生成新问题。

特定报警任务

更新任务执行结果

例如:一般任务

根据任务执行规则,将嗅探上报错误信息的报警任务分配给任务执行者,任务执行结果返回后,根据错误信息的特征进行价值分类并生成问题。

任务执行

执行警报任务

多节点分担任务压力

如何搭建多端错误监控平台5☆推荐

详见“如何设置多终端错误监控平台”PPT。* *这个分享是根据具体实现一步步讲解的,比较接地气,也比较清晰。我喜欢它* *。

你为什么研究你自己?

稳定性、一致性、可扩展性、安全性和成本要综合考虑。

实现

架构图

Web端错误监控的实现

I . SDK-错误收集/报告

AOP是面对面编程,重写原来的行为。

1.SDK设计

2.错误捕捉机制

Window.onerror:运行时错误监控

监听unhandedrejection事件:promise没有catch错误场景。

Try/catch处理跨域脚本错误:script error。

方案一:后端配置Access-Control-Allow-Origin,前端脚本标签配置crossoriign

劫持本机方法,使用try/catch绕过它,并引发错误。

技术栈错误捕获模式:native js是addEventListner,Vue errorHandler,React是componentDidCatch。

3.环境信息的收集

4.行为集合

行为分类

用户行为:点击、滚动、对焦/散焦、长按等。

浏览器行为:发起请求、跳转、前进后退、关闭、打开新窗口等。

控制台打印行为

5.数据报告

5.1.数据报告方法

问:为什么用1x1像素的gif图?

不存在跨域问题;

发送GET请求后,不需要获取数据,服务器也不需要发送数据;

不会携带当前域名cookie!

不会阻塞页面加载,影响用户体验,只需要一个新的图片对象;

与体积最小的BMP/PNG相比,可以节省41%/35%的网络资源。

6.摘要

监控/劫持原始方法以获得要报告的数据。当出现错误时,触发函数将被触发,并用gif报告。

第二,数据清洗

数据特征:

数据量大,体积大。

没有分类、汇总

不过滤非法数据。

1.存储介质的比较

2.洁化过程

详见会议PPT。

专家系统->数据采集->数据预处理->数据汇总

SDK实现的节点章节

捕获机制

该节点使用process对象来侦听uncaughtException和unhandledRejection事件,并捕获未处理的JS异常和Promise异常。

SDK实现的Weex章节

捕获机制

SDK实现的小程序文章

捕获机制

全局函数onError

环境信息的收集

原生客户端报表

请使用系统提供的方法,而不要使用sdk。

1.Android错误报告机制

使用系统提供的机制,线程。实现了UncauhtExceptionHandler接口,通过uncaughtException方法获取崩溃错误信息,应用程序初始化时替换默认的崩溃回调。

2.IOS错误报告机制

利用系统提供的错误捕获机制,我们注册了Objective-C异常和POSIX信号的处理钩子,并在崩溃发生时通过钩子函数记录了崩溃信息。下次启动应用程序时报告它。

 
友情链接
鄂ICP备19019357号-22