借助观测云,快速完成Django网站的数据收集

最近在研究前端的页面数据收集,踩了一些坑,现在分享一下接入过程。

注册观测云账号

先注册一个账号, 注册地址

注册流程很简单,按照提示点点点就完事了

安装采集器Datakit

登录观测云页面,选择「集成」 - 「DataKit」,选择适合自己环境的安装指令,复制。 我这里是linux环境,其他小伙伴可以按照提示选择对应的安装脚本。

1 复制安装指令

2 在服务器上安装 DataKit

shell 复制代码
DK_DATAWAY="https://openway.guance.com?token=**************" bash -c "$(curl -L https://static.guance.com/datakit/install.sh)" 

安装完成,服务会自动启动,程序默认安装在/usr/local/datakit/

3 查询 DataKit 状态

执行命令 systemctl status datakit

4 查看数据

Datakit 安装好后,默认会采集一些数据,可在 「观测云」 - 「基础设施」 - 「主机」查看相关数据

RUM接入

开启前端RUM监控,在目录 /usr/local/datakit/conf.d/rum/ 复制 rum.conf.samplerum.conf,重启 datakit 服务 datakit service --restart

打开 datakit 服务监控页面,执行datakit monitor,在左侧窗口可以看到 rum, 表明 rum 采集器已成功开启。

配置 RUM 采集参数

在观测云控制台,进入用户访问监测 页面,点击左上角 新建应用,创建一个应用。

1 复制 JS 代码

2 嵌入 JS 放在django前端页面 templates/index.html 的 head 中粘贴 JS

html 复制代码
<script src="https://static.guance.com/browser-sdk/v3/dataflux-rum.js" type="text/javascript"></script>
<script>
  window.DATAFLUX_RUM &&
    window.DATAFLUX_RUM.init({
      applicationId: 'wu_test_font',
      datakitOrigin: 'http://ip:port', // datakit的ip和端口号,也可以是域名
      env: 'test',
      version: '1.0',
      service: 'django_test',
      sessionSampleRate: 100,
      sessionReplaySampleRate: 100,
      trackInteractions: true,
      traceType: 'ddtrace', // 非必填,默认为ddtrace,目前支持 ddtrace、zipkin、skywalking_v3、jaeger、zipkin_single_header、w3c_traceparent 6种类型
      allowedTracingOrigins: ['http://域名:port'],  // 非必填,允许注入trace采集器所需header头部的所有请求列表。请求的服务域名和端口号
    });
    window.DATAFLUX_RUM && window.DATAFLUX_RUM.startSessionReplayRecording()
</script>

3 发布django服务 打开浏览器访问目标页面,通过 F12 检查者模式,查看页面网络请求中是否有 rum 相关的请求,状态码是否是 200

若 F12 检查者模式发现数据无法上报,显示端口 refused,可 telnet IP:9529 验证端口是否通畅。 若不通,需要修改 /usr/local/datakit/conf.d/datakit.conf ,将首行的 http_listen 修改为 0.0.0.0; 如若还不通,请检查安全组是否已打开 9529 端口。

4 查看 RUM 数据

在「用户访问监测」可查看 RUM 相关数据

分析看板内容

查看器内容可以根据session、view、resource等内容展示,非常nice

还可以点击请求,查看里面的详细内容,性能中可以看到加载了哪些资源,Fetch/XHR可以看到请求了哪些后端接口

还有一点非常棒,可以直接看到js的error

相关推荐
zhangyao9403307 小时前
开发pc端时,表格的高度怎么设置才能铺满页面
前端·javascript·elementui
XinZong7 小时前
实测OpenClaw虾淘:全民工具AI时代,冷门非工具类的Skill还能出圈吗?
javascript
烛衔溟8 小时前
TypeScript 类的类型 —— 作为类型使用
javascript·ubuntu·typescript
之歆8 小时前
Day16_JavaScript 轮播图与事件工程实战(下篇)
服务器·开发语言·前端·javascript·网络·性能优化
kyriewen8 小时前
我关掉了Copilot:因为我写的代码出现在了别人的建议里
前端·javascript·ai编程
SmartRadio9 小时前
STM32WLE5 LoRa Smart TDMA 完整协议栈实现(工程级可直接编译)-【1】
javascript·stm32·单片机·嵌入式硬件·lora·自组网·smart tdma
竹林8189 小时前
用 wagmi v2 踩坑两天,我终于搞懂了多链钱包切换
前端·javascript
子云zy10 小时前
JS 对象与包装类:new 做了什么?字符串为什么有 length?
前端·javascript
茶底世界之下11 小时前
你的 Mac 里,藏着一支 AI 开发团队
前端·javascript
小白学大数据11 小时前
Playwright 爬虫:Python 爬取 JS 渲染的 JSP 网站
开发语言·javascript·爬虫·python·数据分析