BLOG

2024 年 08 月 02 日

Zabbix 7.0 の新機能ブラウザ監視について

ブラウザ監視で JavaScript の動作なども含めた Web 監視ができるようになりました。本記事では、ブラウザ監視の概要と設定について紹介します。

ブラウザ監視とは

Zabbix / MIRACLE ZBX 7.0 から Google Chrome 等の Web ブラウザ経由で Web ページのパフォーマンスや動作を監視するブラウザ監視が追加されました。

以前からある Web シナリオ監視は、libcurl を使用して指定した URL にリクエストを送信してそのレスポンスを監視します。したがって、JavaScript などの動的な処理を含めたレスポンスの監視やクリックなどの操作を伴う監視ができませんでした。

ブラウザ監視では、Selenium server と WebDriver からブラウザを操作して監視を行います。そのため、JavaScript の動作なども含めブラウザで Web ページを開いた際のレスポンスや動作を監視することができます。また、スクリプトを記述することでクリックなどを伴う複雑な Web 監視も実現できます。

使用環境

本記事では以下の環境を使用します。Zabbix 7.0.0 やその他 OS でも基本的に同様の設定でブラウザ監視を行うことができます。
Google Chrome 以外のブラウザを使用する場合はブラウザとそれに対応した WebDriver をインストールしてください。

MIRACLE LINUX 9.2
MIRACLE ZBX 7.0.0-86
Selenium server 4.21.0
Google Chrome 126.0.6478.126
ChromeDriver 126.0.6478.126

事前準備

ブラウザ監視に必要な Selenium server を構築します。
Selenium server の動作に必要となる Java をインストールします。

# dnf install java-21-openjdk

以下のページから Google Chrome の RPM パッケージをダウンロードしてインストールします。

https://www.google.co.jp/chrome/

# dnf install ./google-chrome-stable_current_x86_64.rpm

インストールした Google Chrome のバージョンを確認します。

$ google-chrome-stable --version
Google Chrome 126.0.6478.126

以下のページから Google Chrome と同じバージョンの ChromeDriver をダウンロードします。

https://googlechromelabs.github.io/chrome-for-testing/#stable

$ wget https://storage.googleapis.com/chrome-for-testing-public/126.0.6478.126/linux64/chrome-linux64.zip

ダウンロードしたファイルを展開して chromedriver を任意のパスに配置します。
ここでは /usr/local/bin に配置します。

$ unzip ./chrome-linux64.zip
# mv chrome-linux64/chromedriver /usr/local/bin/

以下のページから Selenium server をダウンロードします。

https://www.selenium.dev/downloads/

Selenium server を起動します。

# java -Dwebdriver.chrome.driver=/usr/local/bin/chromedriver -jar selenium-server-4.21.0.jar standalone

zabbix_server.conf の StartBrowserPollers パラメータでブラウザ監視に使用する Poller プロセスの数を 1 以上に設定します。デフォルトでは 1 が設定されています。

StartBrowserPollers = 1

zabbix_server.conf の WebDriverURL パラメータを以下のように設定します。

WebDriverURL=http://localhost:4444

MIRACLE ZBX サーバを再起動します。

# systemctl restart zabbix-server

ブラウザ監視アイテムの設定

ブラウザ監視では、スクリプトを記述することで監視する際の処理や取得する値を自由に設定できます。
本項では、以下の項目について解説します。

● ブラウザ監視固有の設定項目
● デフォルトのスクリプト
● Zabbix の Web フロントエンドにログインするスクリプト

任意のホストでブラウザタイプのアイテムを作成します。基本的にその他タイプのアイテムと設定項目は同様ですが、ブラウザ監視固有の設定として、パラメータとスクリプトがあります。

パラメータ	スクリプトに渡す変数を設定します。グローバルマクロやユーザマクロも使用できます。
スクリプト	JavaScript でブラウザを操作して監視結果を返すコードを記述します。

ブラウザ監視アイテムの設定画面

ブラウザ監視アイテムの設定画面デフォルトのスクリプトを表示しているところ

デフォルトのスクリプト

デフォルトのスクリプトでは、指定した Web ページのパフォーマンス情報を取得できます。
なお、検証した環境ではデフォルトのスクリプトでは監視に失敗したため ll.1-3 を変更しています。l.6 の引数は監視対象に合わせて変更してください。

※ "l."は行数、"ll."は複数行の範囲を表す。

 1: options = new Browser.chromeOptions();
 2: options["capabilities"]["alwaysMatch"]["goog:chromeOptions"]["args"].push("--no-sandbox");
 3: browser = new Browser(options);
 4: 
 5: try {
 6: 	browser.navigate("http://example.com");
 7: 	browser.collectPerfEntries();
 8: }
 9: finally {
10: 	return JSON.stringify(browser.getResult());
11: }

ll.1-3 chromeOptions() を指定して Browser インスタンスを作成します。
検証した環境ではデフォルトの chromeOptions() だと監視に失敗したため "--no-sandbox" オプションを追加しています。
l.6 navigate() に監視対象の URL を指定して対象ページに移動します。
l.7 collectPerfEntries() でパフォーマンス情報を収集します。
l.10 getResult() で上記で取得したパフォーマンス情報を取得して Json 形式でアイテムの取得値として返します。

取得値の例

{"duration":0.06675195693969727,"performance_data":{"details":[{"navigation":{"entry_type":"navigation","dom_content_loaded_event_start":0.046599999904632566,"domain_lookup_start":0.0019000000953674316,"tls_negotiation_time":0.0025999999046325685,"request_start":0.0025999999046325685,"redirect_start":0.0005999999046325683,"load_event_start":0.04679999995231628,"name":"http://xxx.xxxx.xxx.xxx/zabbix/","connect_end":0.0019000000953674316,"dom_content_loaded_event_end":0.046599999904632566,"critical_ch_restart":0,"decoded_body_size":3974,"response_end":0.014299999952316284,"secure_connection_start":0,"initiator_type":"navigation","encoded_body_size":3974,"render_blocking_status":"non-blocking","not_restored_reasons":null,"worker_start":0,"unload_event_start":0,"response_status":200,"dom_interactive":0.0465,"start_time":0,"fetch_start":0.0019000000953674316,"activation_start":0,"redirect_end":0.0019000000953674316,"unload_event_end":0,"first_interim_response_start":0,"next_hop_protocol":"http/1.1","delivery_type":"","load_event_end":0.04679999995231628,"response_start":0.0135,"domain_lookup_end":0.0019000000953674316,"redirect_count":1,"transfer_size":4274,"dom_complete":0.04679999995231628,"connect_start":0.0019000000953674316,"duration":0.04679999995231628,"type":"navigate"},"resource":{"dom_content_loading_time":0,"load_event_handler_time":0,"unload_event_handler_time":0,"response_time":0.014700000047683716,"encoded_size":318794,"load_finished":0,"redirect_count":0,"redirect_time":0,"total_size":318794,"tcp_handshake_time":0,"count":3,"transferred_size":319694,"dns_lookup_time":0,"resource_fetch_time":0.017700000047683715,"request_time":0.000800000190734864,"min_protocol":"http/1.1"}}],"summary":{"navigation":{"dom_content_loading_time":0,"load_event_handler_time":0,"unload_event_handler_time":0,"response_time":0.000799999952316284,"encoded_size":3974,"load_finished":0.04679999995231628,"redirect_count":1,"redirect_time":0.0013000001907348632,"total_size":3974,"tcp_handshake_time":0,"tls_negotiation_time":0.0025999999046325685,"count":1,"transferred_size":4274,"dns_lookup_time":0,"resource_fetch_time":0.012399999856948852,"request_time":0.010900000095367431,"min_protocol":"http/1.1"},"resource":{"dom_content_loading_time":0,"load_event_handler_time":0,"unload_event_handler_time":0,"response_time":0.014700000047683716,"encoded_size":318794,"load_finished":0,"redirect_count":0,"redirect_time":0,"total_size":318794,"tcp_handshake_time":0,"count":3,"transferred_size":319694,"dns_lookup_time":0,"resource_fetch_time":0.017700000047683715,"request_time":0.000800000190734864,"min_protocol":"http/1.1"}},"marks":[]}}

Zabbix の Web フロントエンドにログインするスクリプト

ここでは、Zabbix の Web フロントエンドのユーザ名とパスワードをパラメータでスクリプトに渡します。
パスワードを別途ホストマクロに指定することで後から確認できないようにできます。

マクロ

名前	値
{$ZBX_HOST}	example.com
{$ZBX_USERNAME}	Admin
{$ZBX_PASSWORD}	zabbix( 隠しテキスト )

パラメータ

名前	値
host	{$ZBX_HOST}
username	{$ZBX_USERNAME}
password	{$ZBX_PASSWORD}

1: var obj = JSON.parse(value);
2: var username = obj.username;
3: var password = obj.password;
4: var host = obj.host;
5: 
6: options = new Browser.chromeOptions();
7: options["capabilities"]["alwaysMatch"]["goog:chromeOptions"]["args"].push("--no-sandbox");
8: browser = new Browser(options);
9: try {
10:     browser.navigate("http://"+host+"/zabbix/index.php");
11:     browser.collectPerfEntries("open page");
12:     var el = browser.findElement("xpath", "//input[@id='name']");
13:     if (el === null) {
14:         throw Error("cannot find name input field");
15:     }
16:     el.sendKeys(username);
17:     el = browser.findElement("xpath", "//input[@id='password']");
18:     if (el === null) {
19:         throw Error("cannot find password input field");
20:     }
21:     el.sendKeys(password);
22:     el = browser.findElement("xpath", "//button[@id='enter']");
23:     if (el === null) {
24:         throw Error("cannot find login button");
25:     }
26:     el.click();
27:     browser.collectPerfEntries("login");
28:     el = browser.findElement("link text", " サインアウト ");
29:     if (el === null) {
30:         throw Error("cannot find logout button");
31:     }
32:     el.click();
33:     browser.collectPerfEntries("logout");
34:     result = browser.getResult();
35: }
36: catch (err) {
37:     if (!(err instanceof BrowserError)) {
38:         browser.setError(err.message);
39:     }
40:     result = browser.getResult();
41:     result.error.screenshot = browser.getScreenshot();
42: }
43: finally {
44:     return JSON.stringify(result);
45: }

ll.1-4 でパラメータに指定した値を変数に代入します。
ll.6-8 はデフォルトのスクリプトと同様です。
l.11 "open page" という名前でページを開いた際のパフォーマンス情報を収集します。
l.12,17 でユーザ名、パスワードフォームの xpath の要素を変数 el に代入し、l.16, l.21 で el の要素に username 変数、password 変数の内容をそれぞれ入力します。
l.22 でログインボタンを el に代入して l.26 でクリックします。
l.23 "login" という名前でログイン時のパフォーマンス情報を収集します。
ll.28-33 同様にログアウトを行い、ログアウト時のパフォーマンス情報を収集します。
l.34 これまで収集したパフォーマンス情報を result に代入します。
上記の処理でエラーがあった場合は、ll.37-40 で result にエラーメッセージがセットされ、l.41 でエラーが発生したページのスクリーンショットが取得されます。
l.44 result をアイテムの取得値として返します。

取得値の例

上記で解説した以外にもブラウザ監視で使用できる独自の関数が実装されています。
詳細は以下のドキュメントを参照してください。

Browser item JavaScript object

まとめ

Zabbix / MIRACLE ZBX 7.0 で追加されたブラウザ監視について解説しました。
ブラウザ監視では、スクリプトを記述してブラウザから Web ページを開いた際の動作を再現できます。
Web シナリオ監視では動作しなかった JavaScript を含む動的な Web ページの監視も行うことができます。