Zabbix 模板 “Website by Browser“ 深度解析：基于 Selenium WebDriver 的真实浏览器网站性能监控-平芜编程栈

指标监控
可观测性
告警
运维

【免费下载链接】zabbix

Real-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 website's 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-L1391）：

navigate/getResult/getScreenshot/setScreenSize
collectPerfEntries/getRawPerfEntries/getRawPerfEntriesByType
chromeOptions/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 或 HTTPS	`https`	必填；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/15），0s表示从整点开始。

监控项详解：主项、依赖项与预处理链路

模板共包含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 value（any 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。
采集流程：设置屏幕尺寸 → 组装 URL（scheme://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.check（Get metrics check）：JSONPath$.error，Custom on fail 置值，并带Discard unchanged with heartbeat: 3h——用于判断主项是否返回错误。

导航性能（Navigation，前缀website.navigation.*）

键值	含义	JSONPath 字段
`website.navigation.load_time`	加载完成时间（loadEventEnd）	`summary.navigation.load_finished`
`website.navigation.response_time`	响应耗时（responseEnd - responseStart）	`summary.navigation.response_time`
`website.navigation.request_time`	请求耗时（responseStart - requestStart）	`summary.navigation.request_time`
`website.navigation.resource_fetch_time`	资源获取耗时（responseEnd - fetchStart，不含重定向）	`summary.navigation.resource_fetch_time`
`website.navigation.service_worker_processing_time`	Service Worker 处理耗时（fetchStart - workerStart）	`summary.navigation.service_worker_processing_time`
`website.navigation.dom_content_loaded_time`	DOM 内容加载耗时（domContentLoadedEventEnd - Start）	`summary.navigation.dom_content_loading_time`
`website.navigation.dns_lookup_time`	DNS 解析耗时（domainLookupEnd - Start）	`summary.navigation.dns_lookup_time`
`website.navigation.tcp_handshake_time`	TCP 握手耗时（connectEnd - connectStart）	`summary.navigation.tcp_handshake_time`
`website.navigation.tls_negotiation_time`	TLS 协商耗时（requestStart - secureConnectionStart）	`summary.navigation.tls_negotiation_time`
`website.navigation.encoded_size`	编码后体积（encodedBodySize）	`summary.navigation.encoded_size`
`website.navigation.total_size`	解码后总大小（decodedBodySize）	`summary.navigation.total_size`
`website.navigation.transferred_size`	传输大小（transferSize）	`summary.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_size，JSONPath 统一为summary.resource.*下同名或对应字段（如resource_fetch_time、dom_content_loading_time）。

截图

website.screenshot：Dependent 类型、BINARY 值类型，JSONPath$.screenshot，Custom 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 data	`length(last(/Website by Browser/website.metrics.check))>0`	High	主项返回了`error`字段，即未能获取目标网站的性能 JSON；标签`scope: availability`
Website by Browser: Website navigation load event time is too slow	`last(/Website by Browser/website.navigation.load_time)>{$WEBSITE.NAVIGATION.LOAD.MAX.WARN}`	Warning	导航加载事件超时；依赖于"Failed to get metrics data"
Website by Browser: Website resource load event time is too slow	`last(/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），包含：

Screenshots（itemhistory 组件）：展示website.screenshot的历史截图缩略图；
Load time（SVG 图）：叠加导航与资源两类 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 类型，历史数据会占用一定存储，可按需调整其保留策略。