TL;DR

Google Chrome の拡張機能「Selenium IDE」と「Synthetics Formatter for Selenium IDE」を使うとスクリプト自動生成が可能なため、自分でスクリプトを書かずに New Relic Synthetics の Scripted Browser を使うことができます。

はじめに

New Relic Synthetic Monitoring はお使いでしょうか？

New Relic というと APM (アプリケーションパフォーマンスモニタリング)の印象が強い方もいらっしゃるかもしれませんが、「Full Stack Observability」ということで、様々な監視観測が可能です。

「Synthetic Monitoring」はその多様な機能の1つで、いわゆる外形監視を行うためのツールとなっていますが、その中にも複数の監視方法が用意されています。

「Ping monitor」ではサクッと死活監視ができますし、「Broken links monitor」でリンク切れチェック、「Certificate check monitor」で SSL 証明書の期限チェックなんかもできたりします。

秀逸なのが「Simple browser monitors」で、WEB ページの URL を入れてあげるだけで、簡単にエンドユーザ側でのパフォーマンスを知ることができます。

Scripted Browser は強力

公式のドキュメントにも記載があるとおり、「Simple browser monitors」はあらかじめ構成済みの「Scripted browser monitors」です。

「Scripted browser monitors」では、名前の通りスクリプトを書くことで、非常に高い自由度でエンドユーザの操作を再現した観測ができます。Assert もできるので、E2E テスト的な使い方なんかもできそうです。

例えば閲覧にログインが必要なウェブページを監視したいとき、ログインページへの遷移～ユーザ情報入力～ログインボタン押下……といった複雑な操作を再現可能です。

ただ、スクリプトを書くのはちょっとハードルが高いと感じられる方もいらっしゃるかもしれません。

スクリプトは手書き不要

うれしいお知らせです。スクリプトを1から手書きする必要はありません。
Google Chrome の拡張機能を使えば、Google Chrome 上での操作を記録・スクリプト自動生成ができます。

使用する拡張機能は以下の2つです。

Selenium IDE
ブラウザ上での操作を記録するために使用
Synthetics Formatter for Selenium IDE
記録した操作を New Relic 用にエクスポートするため使用

実は、この方法は公式チャンネルの動画には記載があるのですが、ドキュメントに文章としては記載されていない気がします。

以下では、基本的には上記動画の手順に沿いながら、閲覧にログインが必要なページの監視を例に、手順を説明します。

監視対象例

今回の例では、以下のような操作を再現します。

ログイン URL に遷移
ID 欄に ID を入力
パスワード欄にパスワードを入力
ログインボタンをクリック

手順

ログイン情報を Secure Credentials へ保存

ログインパスワードなどセキュアな情報については、New Relic Synthetics の Secure Credentials 機能に保存しておきます。このようにすることで、スクリプト内へセキュアな情報をハードコーディングすることを避けられます。

New Relic へログインし、メニューから Synthetic Monitoring > Secure credentials を開きます。
画面右上の「Create secure credential」を押下します。
Create secure credential ポップアップが開きます。各欄を入力していきましょう。
- KEY に任意の名前を設定します。大文字アルファベット、数字、アンダースコアのみ使用可能です。例では EXAMPLE_LOGIN_PASSWORD としました。
  この名前は、後ほどスクリプト内で使用することになります。
- VALUE には実際の値(パスワードなど)を指定します。
- DESCRIPTION (説明)欄は任意です。
入力したら、右下「Save」を押下して、保存します。

拡張機能のインストール

まだ以下の拡張機能を Google Chrome へインストールしていない場合は、インストールします。

Selenium IDE
Synthetics Formatter for Selenium IDE

それぞれのリンクを Google Chrome で開き、「Chrome に追加」ボタンを押下します。
(画像は Selenium IDE の例ですが、Synthetics Formatter for Selenium IDE でもインストール手順は同じです。)
確認画面が表示されるので、内容を確認し、「拡張機能を追加」ボタンを押下します。

Selenium IDE での操作の記録

New Relic Synthetics 用にスクリプトをエクスポート

画面左部で、テスト名(先ほど入力した場合はその名前、入力せず「LATER」とした場合は「Untitled」)にマウスオーバーすると三点のメニューボタンが表示されるので、押下します。
メニュー内の「Export」を押下します。
展開された画面で、「New Relic Synthetics」を選択後、「EXPORT」を押下します。
エクスポートしたファイルは、コンピュータにダウンロードされます。

スクリプトの微修正と New Relic への追加

ダウンロードしたスクリプトをお好みのエディタで開きます。
パスワードがハードコーディングされている箇所を修正します。
以下の2か所にあるため注意してください。該当箇所がわからないときは、パスワードで検索するとわかりやすいと思います。
- パスワードを入力するステップでのログ出力
  パスワードをログに出力する意味はない(危険)ので適当な文字に置き換えましょう。
- パスワードを入力するステップで、パスワードを入力している箇所
  以下のようにパスワードを sendKeys している箇所があります(xxxxxxxx の部分が実際のパスワードになっている)。
```
sendKeys("xxxxxxxx")
```
  パスワードの文字列部分を、事前に設定しておいた Secure Credential に置き換えましょう。
  $secure. につづけて、設定した Secure Credential 名を指定します。(EXAMPLE_LOGIN_PASSWORD の部分を、事前に設定した Secure Credential 名にしてください。)
```
sendKeys($secure.EXAMPLE_LOGIN_PASSWORD)
```
  実際の例:
スクリプトの準備ができたので、New Relic に追加していきます。New Relic にログインし、メニューから Synthetic Monitoring > Monitors を開きます。
画面右上の「Create monitor」を押下します。
「Scripted browser」を押下します。
Name 欄にモニタ名を入力し、Period 欄で実行間隔(監視を実行する頻度)を選択します。
選択後、「Select locations」ボタンを押下します。
New Relic Synthetics では、世界各地にあるロケーションから観測を行うことができます。
つまり実際のエンドユーザに近い場所から、観測が行えるということです。
この画面で観測を行いたいロケーションを1つ以上選択し、「Write script」を押下します。
例では、東京のみを選択しました。
デフォルトで表示されたスクリプトをすべて削除し、先ほどエディタで微調整したスクリプトを全文コピー&ペーストします。
画面下部「Validate」ボタンを押下して、スクリプトを試しに実行してみましょう。

実行には少し時間がかかりますが、成功すると「Success」と表示され、画面下部では詳細な結果も閲覧できます。
最後に、「Save monitor」を押下して保存したら完了です！

実行結果の確認方法

※本セクションでは、上記で作成したものとは別の Scripted Browser Monitor のスクリーンショットを使用している箇所があります。

New Relic へログインし、メニューから Synthetic Monitoring > Monitors > 先ほど作成したモニタを開きます。
サマリ画面が表示されます。
時系列表示のため、どの時間帯に、どのようなパフォーマンスが劣化したか・どのドメインで劣化したか・どのような HTTP エラーが発生していたかなどが一目でわかります。
画面左部の Results メニューから、過去の実行履歴を確認できます。
個々の実行履歴をクリックして開くと、それぞれのウォーターフォール表示やログなどといった詳細情報が確認可能です。
Resources メニューでは、リソース単位でのダウンロード時間やサイズ等を確認できます。
パフォーマンスの劣化などがあったときに、どのリソースが原因だったのかを簡単に特定できます。

おわりに

New Relic Synthetics の Scripted Browser は非常に強力なツールですが、スクリプトを書くというハードルが存在しています。しかし、スクリプトを自動生成することで、そのハードルをかなり下げることができるかと思います。

また多少はスクリプトを書くといった場合でも、1から書くのではなく自動生成されたものをベースに書くことで、少し楽をするといった使い方もできるかもしれません。

New Relic は使用中だが、まだ Scripted Browser を使ったことがないという方は、上述の通り簡単に使用することができるので、ぜひ試してみてください。

また New Relic 自体使ったことがないという方も、多少の制約はありますが全機能を無料で試すことができる(2023年12月時点)ので、一度体験してみてはいかがでしょうか。