トラブルシューティングはNew RelicのSession Replayだけで完結する

この記事はNew Relic Advent Calendar 2024の13日目の記事です。他の記事も見てね

はじめに

私はディップ株式会社で「ナースではたらこ」というサービスのフロントエンド開発を行なっています。

ディップでは、オブザーバビリティツールとしてNew Relicを導入しています。数あるNew Relicの機能の中で、ナースではたらこ開発チームでは特にSession replay機能を重宝しています。この機能があまりにも便利すぎるので紹介します。

Session replayとは

Session replayとは、ブラウザ上のユーザー操作を記録し、New Relic上でユーザーの操作のリプレイ映像を確認できる機能です。

要するに、ユーザーがサービスを使った様子のリプレイビデオを見ることが出来る機能です。

↓下記gifはナースではたらこの登録フォームにおける実際のSession replayの様子です。

機密性の高い情報は自動でマスキング処理してくれるところが地味に嬉しいです。

また、リプレイの右側にEvent Trailが表示されているので、長いリプレイ映像であってもエラーなどの事象が発生したタイミングの様子を素早く確認することが出来ます。

このSession replay機能を使うことで、ユーザーがどのように操作しているのか、操作により何のエラーが発生しているのかを正確に把握することが出来ます。New RelicはGUIが綺麗なので、このような高度な機能であっても直感的かつ簡単に操作・確認することが出来ます。

特にフロントエンド関連のエラーについては、Session replayだけで大方トラブルシューティングが完結出来ると感じています。実際にSession replayを使ってエラーの原因が特定出来た事例を紹介します。

実際にSession replayでエラーを解決した事例

ナースではたらこには、求職者の情報を入力する登録フォームがあります。
が、この登録フォームが予期せぬバグの温床となってしまっています。

最近発生した予期せぬエラーとして、「必須入力の項目が未入力のままAPIに送信されてしまう」という事象が発生していました。

バリデーション処理はしっかり実装してるし、単体テストやe2eテストの異常系でもこのようなエラーは検知されなかったので、当初はこの事象の原因を特定出来ませんでした。

2024年7月のSession replay機能リリース後に同様の事象が発生したので、該当のセッションのリプレイ映像をSession replayから確認してみると、tabボタンを連打することにより入力項目をスキップ出来てしまうバグが発生していることが分かりました。(該当のリプレイ映像はログ保管期間が過ぎてしまった為にここに貼ることが出来ません😭)

Session Replayを使って見事エラーの原因を突き止めたときの僕の様子

その後パッチをリリースし、無事にこの事象をクローズすることが出来ました。

エラーが発生したセッションのみをSession Replayに引っ掛ける方法

エラーが発生したセッションがSession replayに記録されないようでは論外なので、エラーが発生したセッションは必ず記録されるように設定を加える必要があります。

Session Replayは、デフォルトでは下記のような設定になっています。

Browser > Settings > Application settings > Session replay

• Sample rate of total sessions（全てのセッションに対してSession replayを記録する割合）
  -> 10%
• Sample rate of sessions with errors（全エラーセッションに対してSession replayを記録する割合）
  -> 100%

つまり、エラーセッションは全てSession replayに記録される設定になっているはずです。

が、このままでは記録されない場合があります。

というのも、New Relicへのログ転送を行なっていない限り、サーバ側で発生するエラーに関してはNew Relicに感知されないのです。(バックエンド・インフラの障害はダメージが大きいので、相対的にフロントエンドの監視は優先度が下がりがち)

そのため、New Relic側にエラー情報を伝える処理を加える必要があります。ここで使うのがnewrelic.noticeErrorです。この関数をコールすることで、New Relic側にそのセッションをエラーケースとして感知させることが出来ます。

エラーハンドリングを行う処理にて、下記のように関数をコールします。

try {
    response = await fetch(env.API_URL + '/create', options);
    const responseMessage = await response.json();
    if (response.status !== 201) throw new Error(JSON.stringify(responseMessage));
    logger.info('form', registrationData.id, {
      summary: 'APIへのリクエストが成功しました',
      body: responseMessage,
    });
  } catch (error: any) {
    logger.fatal('form', registrationData.id, {
      summary: 'エラーが発生しました',
      error: error,
    });
    newrelic.noticeError(error); // New Relicにエラーを通知
    return res.status(500).json({ data: 'エラーが発生しました' });
}

↓これにより、エラーが発生したセッションは全てSession replayに記録されるようになります。

終わりに

New RelicはSession replay以外にも豊富な機能があり、それらを使いこなせるかどうかはエンジニア次第だと感じています。

私はNew Relicの公式書籍(New Relic実践入門 第2版)や、New Relicが提供しているハンズオンを通じてNew Relicや監視についての学びを深めることが出来ました。

またNew Relicでは、ハンズオンをはじめとした、ツールに頼らない汎用的なスキルを身に付けることの出来るイベントが定期的に開催されているので、そちらも是非ご確認ください。

https://newrelic.com/jp/events