はじめに
Webサービスの品質を担保する上で、「サーバーが動いているか」という死活監視だけでなく、「ユーザーが正常にサービスを利用できているか」を監視することが重要です。
New RelicのSynthetic モニターを使えば、定期的にWebサイトやAPIにアクセスし、パフォーマンスや稼働状況を監視することができます。
しかし、「複雑なログイン処理やカート決済などの画面遷移を監視したいけれど、スクリプトを書くのが大変そう…」とハードルを感じている方もいるのではないでしょうか？
今回は、そんな悩みを解決するNew Relic Synthetics Recorderについて、その機能と実際の利用手順をご紹介します！
1. New Relic Syntheticモニター ではどのような監視ができるのか？
Syntheticモニターでは、用途に合わせて複数の監視タイプが用意されています。
-
Ping:
指定したURLに対して定期的にHTTPリクエストを送り、応答があるか（ダウンしていないか）をシンプルにチェックします。 -
Simple Browser:
実際のブラウザを使用してページを読み込み、リソース（画像、CSS、JavaScriptなど）のロード時間やパフォーマンスを計測します。 -
Step Monitor:
ユーザーの操作をステップによるノーコードで再現して、ブラウザ操作を監視できます。 -
Certificate Check:
SSL証明書の有効期限監視。 -
Broken Links Monitor:
ページ内のリンク切れを監視。 -
Scripted API:
REST APIやGraphQLなどのエンドポイントに対してリクエストを送り、レスポンスコードやペイロードの正当性を検証します。 -
Scripted Browser:
Selenium WebDriver (Node.js) をベースに、ユーザーの実際の操作（クリック、テキスト入力、画面遷移、要素の検証など）をスクリプトでシミュレートします。今回フォーカスするのはこの機能です。
2. New Relic Synthetics Recorder で何ができるのか？
Scripted Browserは非常に強力ですが、Seleniumのスクリプトをゼロから記述するにはある程度のコーディング知識と手間が必要です。
そこで活躍するのがNew Relic Synthetics Recorderです！
New Relic Synthetics Recorderは、ブラウザ上での操作（クリック、スクロール、文字入力など）を裏側でキャプチャし、自動的にScripted Browser用のスクリプト（コード）もしくはStep Monitorのシナリオを生成してくれるツールです。
【Recorderを使うメリット】
- ノンコーディングで構築可能: JavaScriptの深い知識がなくても、ブラウザを操作するだけで複雑な監視シナリオを作成できます。
- 工数の大幅削減: 手作業で要素のXPathやCSSセレクタを探してコードを書く手間が省け、数分でスクリプトやシナリオのステップが完成します。
3. RecorderでScripted Browserを作成する流れ
それでは、実際にSynthetics Recorderを使って、特定のWebサイトにアクセスし、検索やクリック操作を行う監視設定を作成する流れを見ていきましょう。
今回、デモのECアプリをAWS上にデプロイして、そのサイトに対してシナリオ監視を設定してみます。
ステップ1: Synthetics Recorderの起動
Google Chrome拡張機能として提供されている「New Relic Synthetics Recorder」をインストール（Chromeウェブストアから追加可能です）して、起動します。
ステップ2: New Relic User API Keyを設定
プラグインを起動し、「Settings」を開き、User API Keyを設定します。
User API Keyはhttps://one.newrelic.com/api-keys で作成できます。
プラグインからUser API Keyを使ってSyntheticの監視設定をデプロイできるようになっています。
ステップ3: ブラウザ操作を記録
Target URLに監視対象のURLを入力、Monitor Typeは「Scripted Browser」を選択し、「Start Recodring」をクリックして、ブラウザ操作の記録を開始します。
監視したい操作を記録したらStopで記録を停止します。
ステップ4: New Relic アカウントに記録したシナリオをデプロイ
「Export」タブで記録したシナリオのMonitor Nameやデプロイ先のNew Relic アカウント、Syntheticの実行環境の設定を行います。
入力を終えたら、「Save to New Relic」をクリックします。
ステップ5: 監視モニターが作成されていることを確認
「View in New Relic」をクリックして、作成した監視モニターを開きます。
記録したシナリオを実行するスクリプトが自動生成されていることが確認できます。
作成はこれだけで完了です！
Tips
パスワードなど認証が必要なシナリオを記録した場合、スクリプトでは{{SECURE_CREDENTIAL}} と定義されています。この箇所はセキュアクレデンシャルで認証情報を設定して、スクリプト内で変数$secure.SECURE_CREDENTIALで呼び出す用にスクリプトを更新する必要があります。
{
name: "Enter Secure Text",
nrStep: NR_RECORDER_METADATA.steps[3],
stepFn: async (obj) => {
await $webDriver.switchTo().defaultContent();
const element = await $webDriver.findElement(By.xpath("//*[@name='password']"));
await element.clear();
//以下はコメントアウトする
//await element.sendKeys("{{SECURE_CREDENTIAL}}");
//セキュアクレデンシャルを変数で渡す
await element.sendKeys($secure.EC_LOGIN_PASSWORD);
}
},
まとめ
New Relic Synthetics Recorderを利用すれば、複雑なシナリオ監視を、誰でも簡単に、素早く構築することができます。
「ログイン処理が壊れていないか」「決済フローが正常に完了するか」といったクリティカルなビジネス導線を監視し、ユーザーが不便を感じる前にいち早く問題を検知・解決できる体制を整えましょう！
ぜひ、あなたの関わっているサービスの重要な動線でも Synthetics Recorder を試してみてください。
New Relicでは、新しい機能やその活用方法について、QiitaやXで発信しています！
無料でアカウント作成も可能なのでぜひお試しください！
New Relic株式会社のX(旧Twitter) や Qiita Organizationでは、
新機能を含む活用方法を公開していますので、ぜひフォローをお願いします。
無料のアカウントで試してみよう！
New Relic フリープランで始めるオブザーバビリティ！