ARTICLE DETAIL

资讯详情

深耕郑州网站建设与运营推广的一线实战洞察。

Zabbix 模板 “Website by Browser“ 深度解析:基于 Selenium WebDriver 的真实浏览器网站性能监控

Zabbix 模板 “Website by Browser“ 深度解析:基于 Selenium WebDriver 的真实浏览器网站性能监控 指标监控可观测性告警运维【免费下载链接】zabbixReal-time monitoring of IT components and services, such as networks, servers, VMs, applications and the cloud.项目地址https://gitcode.com/gh_mirrors/zabbix2/zabbix点击查看免费下载导读Website by Browser 是 Zabbix 8.0 起随仓库提供的开箱即用监控模板它让 Zabbix Server 通过 Selenium WebDriver 驱动真实浏览器访问目标网站采集 Navigation Timing / Resource Timing 等性能指标与整页截图用于网站的可用性与用户体验监控。读完本文你将掌握该模板的部署前置条件、9 个用户宏的完整含义、28 个监控项的采集与预处理链路、3 个触发器的告警逻辑并能结合仓库源码理解其底层实现原理。模板概述为什么需要用浏览器监控网站传统的 HTTP 监控如web.page.*或 HTTP Agent只能观测到 TCP/TLS/HTTP 层面的响应情况无法感知 JavaScript 渲染、DOMContentLoaded 时机、Service Worker 处理等真实用户体验指标。而 Website by Browser 模板模板文件位于 templates/app/website_browser/template_app_website_browser.yaml通过Browser 类型的监控项驱动真实浏览器执行导航从而拿到浏览器内部 Performance API 提供的完整性能数据。模板自带说明README.md明确其定位The template to monitor a websites availability and performance on the website by Browser即Zabbix server uses a web browser to perform navigation and collect performance metrics——Zabbix Server 使用 WebDriver 接口驱动浏览器完成页面导航与指标采集。该模板由官方模板工具 Templator 生成模板组为Templates/Applications。工作原理Browser 监控项 内嵌 JS 引擎该模板的核心是一个类型为BROWSER的主监控项website.get.data。从源码看Browser 类型监控项的脚本运行在 Zabbix 内嵌的 Duktape JS 引擎中并通过 C 层封装的 WebDriver 客户端与外部 Selenium 服务器通信。其可用的浏览器对象方法定义在 src/libs/zbxembed/browser.c约 L1229-L1246 与 L1388-L1391navigate/getResult/getScreenshot/setScreenSizecollectPerfEntries/getRawPerfEntries/getRawPerfEntriesByTypechromeOptions/firefoxOptions/safariOptions/edgeOptions分别用于指定各浏览器的启动选项模板主项脚本正是依次调用这些方法完成设置屏幕尺寸 → 导航 → 收集性能条目 → 截图 → 序列化结果的完整链路。环境要求与已验证版本项目要求Zabbix 版本8.0 及以上测试环境ChromeDriver 124.0.6367.207 selenium-server-4.0.0-alpha-6浏览器默认 Chrome脚本也支持 Firefox / Safari / Edge需要注意模板只在上述 WebDriver 组合上完成过官方验证实际使用时应尽量对齐版本较新或较旧的 driver 组合可能存在行为差异。Setup 部署步骤根据模板 README部署分三步安装 WebDriver安装与所选浏览器匹配的 WebDriver 驱动程序如 ChromeDriver具体安装方式参考 Selenium 官方 WebDriver 文档。运行 selenium-server启动 Selenium Standalone Server让它负责浏览器实例的调度。配置 WebDriverURL在 Zabbix Server或 Proxy配置文件中把 WebDriver 接口的 HTTP[S] URL 填入WebDriverURL选项例如http://localhost:4444。对应的配置项在仓库的 conf/zabbix_server.conf约 L1213-L1218与 conf/zabbix_proxy.conf约 L1139-L1144中均有注释说明WebDriver interface HTTP[S] URL. For example http://localhost:4444 used with Selenium WebDriver standalone server.。若 Zabbix Server 与 Selenium 不在同一主机将该 URL 指向 selenium-server 所在主机的地址即可。配置提醒Browser 类型监控项只能在 Zabbix Server / Proxy 进程内执行使用前请按官方《Templates out of the box》章节要求先在服务器上完成 WebDriver 环境搭建与连通性测试。宏配置详解模板共定义 9 个用户宏均通过{$WEBSITE.*}前缀命名。以下表格综合了 README 与 YAML 中宏的config定义类型、必填、取值校验正则宏描述默认值配置约束来自 YAML{$WEBSITE.BROWSER}用于数据采集的浏览器chrome必填TEXT{$WEBSITE.DOMAIN}目标域名www.example.com必填TEXT{$WEBSITE.PATH}目标资源路径空必填TEXT{$WEBSITE.SCHEME}请求协议HTTP 或 HTTPShttps必填LIST仅http/https两个选项{$WEBSITE.SCREEN.WIDTH}截图屏幕宽度像素1920必填正则^-?([0-9]|(([0-9])\.([0-9])))${$WEBSITE.SCREEN.HEIGHT}截图屏幕高度像素1080必填正则同上{$WEBSITE.RESOURCE.LOAD.MAX.WARN}资源加载事件的最大响应时间秒用于触发器表达式5正则同上归类于 Thresholds 分组{$WEBSITE.NAVIGATION.LOAD.MAX.WARN}页面导航加载事件的最大响应时间秒用于触发器表达式5正则同上归类于 Thresholds 分组{$WEBSITE.GET.DATA.INTERVAL}主监控项website.get.data的更新间隔0s;m/15归类于 Other 分组其中{$WEBSITE.GET.DATA.INTERVAL}的默认值0s;m/15是 Zabbix 的灵活调度语法从整点开始每 15 分钟执行一次m/150s表示从整点开始。监控项详解主项、依赖项与预处理链路模板共包含1 个 Browser 主监控项 27 个 Dependent 依赖项。所有依赖项均以website.get.data为 master item通过 JSONPath 预处理从主项返回的 JSON 中提取对应字段从而实现一次浏览器导航、多指标并行产出的高效设计。主监控项website.get.data属性值名称Website {$WEBSITE.DOMAIN} Get data类型Browser键值website.get.data更新间隔{$WEBSITE.GET.DATA.INTERVAL}值类型TEXT预处理Check for not supported valueany error → 丢弃值主项通过 6 个参数接收宏值browser、domain、height、path、scheme、width。其内嵌 JS 脚本位于 YAML 的params字段核心逻辑如下const Website { params: {}, setParams(params) { [scheme, domain,width, height].forEach(function (field) { if (typeof params ! object || !params[field]) { throw new Error(Required param is not set: field .); } }); this.params params; }, getOptions(browser) { switch ((browser || ).trim().toLowerCase()) { case firefox: return Browser.firefoxOptions(); case safari: return Browser.safariOptions(); case edge: return Browser.edgeOptions(); default: return Browser.chromeOptions(); } }, getPerformance() { const browser new Browser(Website.getOptions(Website.params.browser)); const url Website.params.scheme :// Website.params.domain / Website.params.path let screenshot ; browser.setScreenSize(Number(Website.params.width), Number(Website.params.height)) browser.navigate(url); browser.collectPerfEntries(); screenshot browser.getScreenshot(); const result browser.getResult(); result.screenshot screenshot; return JSON.stringify(result); } }; try { Website.setParams(JSON.parse(value)); return Website.getPerformance(); } catch (error) { error (String(error).endsWith(.)) ? : .; Zabbix.log(3, [ Website get metrics] ERROR: error); return JSON.stringify({ error: error }); }脚本逻辑要点参数校验setParams强制要求scheme、domain、width、height四项必须提供否则直接抛错path允许为空对应首页。浏览器选择getOptions按{$WEBSITE.BROWSER}值映射到对应的Browser.*Options()未匹配时默认回退到 Chrome。采集流程设置屏幕尺寸 → 组装 URLscheme://domain/path→navigate导航 →collectPerfEntries收集性能条目 →getScreenshot截图 →getResult汇总结果并序列化为 JSON。容错设计任何异常都会被捕获并以{error: ...}的形式返回同时写入 Zabbix 日志后续由依赖项website.metrics.check识别并触发告警。返回的 JSON 结构包含performance_data.summary.navigation.*与performance_data.summary.resource.*两组数据以及screenshot字段供各依赖项通过 JSONPath 提取。依赖项分组与 JSONPath 字段所有依赖项均为 Dependent 类型预处理统一采用JSONPath错误处理为 Discard value并对时间类指标附加Custom multiplier: 0.001将浏览器返回的毫秒值转换为秒字节类指标单位标记为B、时间类指标单位标记为s。完整列表如下状态与可用性website.metrics.checkGet metrics checkJSONPath$.errorCustom on fail 置值并带Discard unchanged with heartbeat: 3h——用于判断主项是否返回错误。导航性能Navigation前缀website.navigation.*键值含义JSONPath 字段website.navigation.load_time加载完成时间loadEventEndsummary.navigation.load_finishedwebsite.navigation.response_time响应耗时responseEnd - responseStartsummary.navigation.response_timewebsite.navigation.request_time请求耗时responseStart - requestStartsummary.navigation.request_timewebsite.navigation.resource_fetch_time资源获取耗时responseEnd - fetchStart不含重定向summary.navigation.resource_fetch_timewebsite.navigation.service_worker_processing_timeService Worker 处理耗时fetchStart - workerStartsummary.navigation.service_worker_processing_timewebsite.navigation.dom_content_loaded_timeDOM 内容加载耗时domContentLoadedEventEnd - Startsummary.navigation.dom_content_loading_timewebsite.navigation.dns_lookup_timeDNS 解析耗时domainLookupEnd - Startsummary.navigation.dns_lookup_timewebsite.navigation.tcp_handshake_timeTCP 握手耗时connectEnd - connectStartsummary.navigation.tcp_handshake_timewebsite.navigation.tls_negotiation_timeTLS 协商耗时requestStart - secureConnectionStartsummary.navigation.tls_negotiation_timewebsite.navigation.encoded_size编码后体积encodedBodySizesummary.navigation.encoded_sizewebsite.navigation.total_size解码后总大小decodedBodySizesummary.navigation.total_sizewebsite.navigation.transferred_size传输大小transferSizesummary.navigation.transferred_size资源性能Resource前缀website.resource.*与导航组一一对应键值分别为website.resource.load_time、response_time、request_time、fetch_time、service_worker_processing_time、dom_content_loaded_time、dns_lookup_time、tcp_handshake_time、tls_negotiation_time、encoded_size、total_size、transferred_sizeJSONPath 统一为summary.resource.*下同名或对应字段如resource_fetch_time、dom_content_loading_time。截图website.screenshotDependent 类型、BINARY 值类型JSONPath$.screenshotCustom on fail 丢弃值——将主项返回的截图二进制保存为可展示的监控项用于直观判断页面渲染结果。所有指标均带有component标签主项为raw、metrics.check为status、性能项为application性能项另有performance标签区分navigation与resource模板自身标签为class: software、subclass: monitoring、target: browser。触发器可用性与性能告警模板共定义 3 个触发器触发器名称表达式严重级别说明Website by Browser: Failed to get metrics datalength(last(/Website by Browser/website.metrics.check))0High主项返回了error字段即未能获取目标网站的性能 JSON标签scope: availabilityWebsite by Browser: Website navigation load event time is too slowlast(/Website by Browser/website.navigation.load_time){$WEBSITE.NAVIGATION.LOAD.MAX.WARN}Warning导航加载事件超时依赖于Failed to get metrics dataWebsite by Browser: Website resource load event time is too slowlast(/Website by Browser/website.resource.load_time){$WEBSITE.RESOURCE.LOAD.MAX.WARN}Warning资源加载事件超时依赖于Failed to get metrics data两个性能触发器都设置了Depends on依赖关系依赖可用性触发器避免在网站本身无法访问时产生冗余的性能告警阈值分别由{$WEBSITE.NAVIGATION.LOAD.MAX.WARN}与{$WEBSITE.RESOURCE.LOAD.MAX.WARN}控制默认 5 秒。触发器事件名与操作数据opdata在 YAML 中均有完整定义可直接查看 template_app_website_browser.yaml 中的triggers段获取细节。内置仪表盘与图形模板自带一个名为Website overview的仪表盘dashboards段UUID5afcfa0ecebd40d9a8fe16491ea7615e包含Screenshotsitemhistory 组件展示website.screenshot的历史截图缩略图Load timeSVG 图叠加导航与资源两类 load event time 曲线并标注问题严重级别Navigation timing / Navigation size导航各阶段耗时与体积曲线Resource timing资源各阶段耗时曲线。此外模板还定义了两个内置图形Performance Navigation Timing与Performance Resource Timing将 DNS、TCP、TLS、DOMContentLoaded、请求、响应、Service Worker 等 8 个阶段以不同颜色叠加呈现graphs段见 YAML L1035-L1119可直接挂载到自定义仪表盘。源码级原理Browser 对象与性能数据采集在 src/libs/zbxembed/browser.c 中可以看到该模板所用的浏览器 API 与 Zabbix 底层实现的对应关系es_browser_collect_perf_entries约 L963对应 JS 的collectPerfEntries其内部调用webdriver_collect_perf_data()通过 WebDriver 向浏览器注入 Performance 采集逻辑es_browser_get_raw_perf_entries/es_browser_get_raw_perf_entries_by_type约 L1004/L1042对应getRawPerfEntries系列方法返回按条目类型过滤的原始性能数据数组es_browser_get_screenshot、es_browser_set_screen_size、es_browser_navigate、es_browser_get_result则对应模板脚本中的截图、屏幕尺寸、导航与结果汇总调用。从源码结构可以推断模板脚本中的new Browser(...)即对应 C 层维护的 WebDriver 会话句柄browser.collectPerfEntries()触发的性能数据随后被browser.getResult()汇总为performance_data.summary结构——这正是所有依赖项 JSONPath 提取的数据来源。整体链路为Zabbix Server →HTTP[S] WebDriver 接口→ selenium-server → 浏览器驱动 → 真实浏览器渲染与 Performance API 采样 → JSON 结果 → JSONPath 预处理拆分 → 各指标入库。使用建议首次接入时建议先在zabbix_server.conf中正确配置WebDriverURL并手动用zabbix_server -R config_cache_reload或重启进程使配置生效后再挂载模板将宏{$WEBSITE.DOMAIN}与{$WEBSITE.PATH}替换为实际目标注意path为空时 URL 会以/结尾访问根路径若目标站点的登录态、验证码或反爬机制导致采集失败主项会返回{error: ...}并触发 High 级告警可结合 Zabbix 日志中的[ Website get metrics] ERROR:记录定位原因截图项website.screenshot为 BINARY 类型历史数据会占用一定存储可按需调整其保留策略。赞分享指标监控可观测性告警运维【免费下载链接】zabbixReal-time monitoring of IT components and services, such as networks, servers, VMs, applications and the cloud.项目地址https://gitcode.com/gh_mirrors/zabbix2/zabbix点击查看免费下载相关推荐Apache by Zabbix agent 模板深度解析基于 mod_status 与 Zabbix agent 的 Apache 全维度监控实战Apache by Zabbix agent 模板深度解析基于 mod_status 与 Zabbix agent 的 Apache 全维度监控实战 Apac指标监控可观测性告警运维Zabbix 进程监控模板 OS processes by Zabbix agent 深度解析基于 proc.get 的无脚本进程监控实践Zabbix 进程监控模板 OS processes by Zabbix agent 深度解析基于 proc.get 的无脚本进程监控实践 本篇文章以 Z指标监控可观测性告警运维Zabbix 官方模板深度解析基于 HTTP Agent 监控 Elasticsearch 集群Elasticsearch Cluster by HTTPZabbix 官方模板深度解析基于 HTTP Agent 监控 Elasticsearch 集群Elasticsearch Cluster by HTTP指标监控可观测性告警运维上一篇OpenReplay 的 CDN Snippet 封装从源码构建到页面嵌入的完整指南下一篇Akka DNS Extension 完全指南从 inet-address 到 async-dns 与 SRV 记录解析创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表