比sentry还要香的监控系统

卡曼在观测2023-09-05 17:36

产品能力对比

产品能力 观测云 RUM Sentry
数据采集 采集方式 SDK SDK
支持平台 Web/h5/Android/iOS/MacOS 客户端 web/h5/wechat
自定义日志上报 支持 支持
自定义 埋点 上报 支持 支持
采样上报 支持 支持
数据处理 数据转换 Agent、SDK 均支持 NA
数据过滤 Agent、SDK 均支持 NA
数据分析 会话分析 支持 不支持
会话重放 支持 支持，性能问题
用户行为 支持 不支持
性能分析 支持，多维度分析 支持，分析维度较固定
访问分析 支持，多维度分析 支持，分析维度较固定
异常分析 支持，多维度分析 支持，分析维度较固定
接口监控 支持，多维度分析 支持，分析维度较固定
浏览器日志 支持 不支持
资源分析 支持，多维度分析 支持，分析维度较固定
CDN 质量分析 支持，多维度分析 不支持
页面卡顿分析 支持，多维度分析 不支持
sourcemap 跟踪 支持 支持
自定义仪表板 支持 支持
前后端关联 支持 不支持
数据消费 DQL 模式消费，支持数据聚合导出 NA
通信监控 不支持 NA
场景图表 20+图表 图表较少
漏斗分析 支持 不支持
费用 计费模式 按 PV 量 自建服务器成本
具体定价 0.7元/10000PV NA

1. 背景-真实用户体验介绍

真实用户体验基本包含访问网站的性能、可用性和正确性。通俗的讲，就是一把通过用户访问测量【设计者】意图的尺子。

网站如何传递出设计者的意图，可能页面加载时间太长、或者页面在用户的浏览器中渲染时间太慢，或者第三方设备或网络原因出现问题，内容显示不正确或者没有显示。 如果正确实施了真实用户体验，可以第一时间发现，确认影响了谁，评判是个例还是大规模事件，是否需要检测和修复错误，是否需要投入改变设计、优化，提高业务转化率。

接入真实用户访问数据，你可以：

2. 观测云RUM介绍

2.1 观测云RUM概述

观测云真实用户体验（简称RUM），是观测云可观测性平台的一项功能，能够优化前端性能，在客户发现问题前揭露性能问题，深度洞察用户行为。

2.2 观测云RUM主要功能

更快地故障调试速度

  • 理解用户体验，包括应用性能数据，比如网站核心指标等
  • 实时识别报错的设备、系统或国家，快速标注错误的部位
  • 解决客户端错误，包括特定用户，包括一键定位代码错误

监控100%前端错误和性能问题

  • 分钟级别收集用户会话和告警
  • 追踪SPA应用和识别所有客户端、服务端问题
  • 通过错误聚合智能识别受影响的用户
  • 定位根因，代码行级纠错，通过会话立刻关联问题

轻松优化性能

  • 通过地理位置、浏览设备信息或者任何自定义维度，洞察关键信息
  • 分析网站加载速度，使用LCP、DOM解析速度等核心网站指标，以及自定义指标
  • 定位加载缓慢的根因，包括代码、网络或者基础设施
  • 可以使用各种指标、用户行为、业务指标紧密关联性能

深度洞察产品使用、用户行为

  • 通过会话重放，了解用户行为、产品设计和业务决策
  • 使用漏斗图等数据探索用户行为，了解错误和性能瓶颈，定位UX痛点
  • 统一界面，快速和相关研发、产品、运维，分享前端洞见和仪表板

极简端到端的可视化

  • 探测、诊断和解决用户体验，包括使用错误追踪、拨测、APM、日志和基础设施监控，均在一个平台
  • 降低MTTD，MTTR，在会话界面可以快速定位到错误行，包括链路、日志和基础设施指标
  • 轻松定位用户事件是前端、后端、还是第三方问题

提高端用户体验和满意度

  • 发现加载性能问题，用户交互的响应，提高用户体验
  • 发现极端问题，比如js报错、网络错误，通过sourcemap快速定位代码行
  • 告警和自定义指标告警来积极主动发现和提高用户满意度

3. 如何分钟级别接入

观测云真实用户体验接入只需要不足10分钟，可能包括

  • 注册账号

  • 开通RUM

  • 创建应用

  • 配置SDK

3.1 注册账号（1-5min）

  1. 点击注册链接。
  2. 填写必填信息，包括：用户名 、登录密码 、邮箱 、邮箱验证码
  1. 填写企业信息，至少需填写信息企业名称
  1. 选择开通方式，包括空间名称，关联亚马逊云市场可以直接获得500代金券

成功开通后登录空间即可

3.2 开通RUM （1-2min）

常见开通RUM的方式是通过在服务器上安装datakit，这种方式较复杂多需要配置服务器等设置，详见安装datakit方式。

对于没有服务器或者想要寻求更简便快捷接入的同学，现在提供了一种叫做Headless的功能。以下便是具体的开通方式。

小建议：现在关联亚马逊账号，有500的代金券，能够满足用户尝鲜。。。。

第一步，进入菜单

在观测云最左侧的菜单中，选中用户访问监测--》RUM headless--》开通按钮

第二步，填写并开通

填写一个http地址--》（用来接受上报的数据）--》选择规格------》立即开通

温馨提示，

3.3 创建应用（1min）

在观测云最左侧的菜单中，选中用户访问监测--》应用列表--》新建应用--》输入应用名称+应用ID+选择应用类型--》成功创建。

3.3 配置SDK（1-5min）

如果前面都okay，这一步只需按照下图粘贴复制即可

4. 用户反馈和帮助

weixin:76883857

5. 高级功能（自定义tag、错误、事件）

存在一些特定场景，需要通过设置不同类型的标识去定位分析一些数据，所以针对这些情况，RUM SDK 提供了一些特定的API 方便用户在自己的应用系统中，加入自己特定的逻辑：

  1. 自定义标识用户（ID、name、email）
  2. 自定义添加额外的数据 TAG
  3. 自定义添加 Action
  4. 自定义添加 Error

5.1 自定义用户

5.1.1 自定义标识用户

SDK 默认情况下，自动会给用户生成一个唯一标识ID。这个ID不带任何标识属性，只能区别出不同用户属性。 为此我们提供了额外的API去给当前用户添加不同的标识属性。

属性 类型 描述
user.id string 用户ID

以下属性是可选的，但建议至少提供其中一个。

添加用户标识

javascript 复制代码 
window.DATAFLUX_RUM && window.DATAFLUX_RUM.setUser({
    id: '1234',
})

5.1.2 自定义添加额外的数据 TAG

初始化 RUM 后，使用addRumGlobalContext（key:string，value:any） API 向从应用程序收集的所有 RUM 事件添加额外的TAG。

添加TAG

javascript 复制代码 
// Code example
window.DATAFLUX_RUM && window.DATAFLUX_RUM.addRumGlobalContext('isvip', 'xxxx');
window.DATAFLUX_RUM && window.DATAFLUX_RUM.addRumGlobalContext('activity', {
    hasPaid: true,
    amount: 23.42
});

替换TAG

css 复制代码 
// Code example
window.DATAFLUX_RUM &&
    DATAFLUX_RUM.setRumGlobalContext({
        codeVersion: 34,
    });

5.1.3 自定义添加 Action

初始化 RUM 后，使用addAction（'<NAME>'，'<JSON_OBJECT>'） API,可以自定义添加采集之外的action 指标数据。

php 复制代码 
// Code example
window.DATAFLUX_RUM && window.DATAFLUX_RUM.addAction('cart', {
    amount: 42,
    nb_items: 2,
    items: ['socks', 't-shirt'],
});

5.1.4 自定义添加 Error

初始化 RUM 后，使用addError（'<NAME>'，'<JSON_OBJECT>'） API，可以自定义添加采集之外的 error 指标数据。

添加Error

vbnet 复制代码 
// Send a custom error with context
const error = new Error('Something wrong occurred.');

window.DATAFLUX_RUM && DATAFLUX_RUM.addError(error, {
    pageStatus: 'beta',
});

接入后效果说明和展示图

如果上传了数据，就能够在分析看板和查看器中，看到用户的数据，其中分析看板内容如下：

6.1 分析看板

A. 概览统计当前端口应用访问的 UV 数、PV 数、页面错误率、页面加载时间等指标，并辅助从会话分析、性能分析、错误分析三方面可视化的展示用户访问应用的数据统计，快速定位用户访问应用的问题，提高用户访问性能。

B. 性能分析统计 PV 数、页面加载时间、最受关注页面会话数、页面长任务分析、资源分析等指标，并从 Long Task 分析、XHR & Fetch 分析、资源分析三方面实时查看整体应用页面性能情况，进一步精准定位需要优化的页面。

C.资源分析通过统计资源分类、资源请求排行等指标，并从 XHR & Fetch 分析、资源耗时分析两方面，实时查看整体资源情况及需要优化的资源。

D.错误分析通过统计错误率、Crash 版本、网络错误状态分布、页面错误率等指标快速定位资源错误。

6.2 查看器

用户访问监测查看器可以帮助您查看与分析用户访问应用程序的详细信息。

在用户访问监测 ，点击应用列表 > 查看器，即可了解每个用户会话、页面性能、资源、长任务、操作中的错误、延迟对用户的影响，帮助您通过搜索、筛选和关联分析全面了解和改善应用的运行状态和使用情况。

观测云用户访问监测 > 查看器包括以下几种：

查看器类型 概述
Session（会话） 查看用户访问的一系列详情，包括用户访问时间、访问页面路径、访问操作数、访问路径和出现的错误信息等。
View（页面） 查看用户访问环境、回溯用户的操作路径、分解用户操作的响应时间以及了解用户操作导致后端应用一系列调用链的性能指标情况。
Resource（资源） 查看网页上加载的各种资源信息，包括状态码、请求方式、资源地址，加载耗时等。
Action（操作） 查看用户在使用应用期间的操作交互，包括操作类型，页面操作详情，操作耗时等。
Long Task（长任务） 查看用户在使用应用期间，阻塞主线程超过 50ms 的长任务，包括页面地址、任务耗时等。
Error（错误） 查看用户在使用应用期间，浏览器发出的前端错误，包括错误类型、错误内容等。

在查看器的数据分布图，您可以根据选择的时间范围统计，自动选取相应的时间间隔展示每个时间点上的用户访问数量分布趋势；若对数据进行了筛选过滤，将同步展示筛选后分布趋势，帮助您直观地查看不同时间点的用户访问数据。

效果如下：

观测云相关文档汇总

用户访问监测 - 观测云文档

相关推荐
LNTON羚通4 小时前
摄像机视频分析软件下载LiteAIServer视频智能分析平台玩手机打电话检测算法技术的实现
算法·目标检测·音视频·监控·视频监控
y先森5 小时前
CSS3中的伸缩盒模型（弹性盒子、弹性布局）之伸缩容器、伸缩项目、主轴方向、主轴换行方式、复合属性flex-flow
前端·css·css3
前端Hardy5 小时前
纯HTML&CSS实现3D旋转地球
前端·javascript·css·3d·html
susu10830189115 小时前
vue3中父div设置display flex，2个子div重叠
前端·javascript·vue.js
IT女孩儿6 小时前
CSS查缺补漏（补充上一条）
前端·css
吃杠碰小鸡7 小时前
commitlint校验git提交信息
前端
虾球xz7 小时前
游戏引擎学习第20天
前端·学习·游戏引擎
我爱李星璇7 小时前
HTML常用表格与标签
前端·html
疯狂的沙粒7 小时前
如何在Vue项目中应用TypeScript？应该注意那些点？
前端·vue.js·typescript
小镇程序员8 小时前
vue2 src_Todolist全局总线事件版本
前端·javascript·vue.js
热门推荐
01ICLR24大模型提示(1/11) | BadChain：大型语言模型的后门思维链提示02PyTorch机器学习实现液态神经网络03【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总04【音视频 | opus】opus编解码库(opus-1.4)详细介绍以及使用——附带解码示例代码05Coze扣子平台完整体验和实践（附国内和国际版对比）06(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明07IT专业入门，高考假期预习指南08玄机平台应急响应—webshell查杀09RAG 实践- Ollama+RagFlow 部署本地知识库10你还在傻傻的打开页面输用户名和密码？来我教你实现自动化