Zenn
🦄

New Relic ブラウザモニタリングをSpring Boot + Thymeleafに導入

2023/01/18に公開
Docker
Java
JavaScript
Spring Boot
New Relic
tech

ご挨拶

Qiitaや教材制作/書籍のお手伝いなどの外部発信の経験はありますが、初めてZennで記事を投稿します。よろしくお願いします🙇

概要

担当中のWebアプリケーションは監視ツールにNew Relicを利用しています。バックエンド(サーバーサイド)のモニタリングではAPM/Log Managementを利用していますが、フロントエンドのモニタリングを導入していません。導入を提案/促進するために下調べした内容と、サンプルコードを含むデモ環境を作成したので記事にします。当然ながら担当中の技術スタックに近づけた環境となります。今をときめく「サーバーレスでNext.js/Go言語で」みたいな環境ではありません🙏

  • Amazon Linux 2
  • Java 11
  • Spring Boot 2.7
    • 非SPA Thymeleaf利用
    • jQuery

日頃はWebアプリの開発者として従事しておりインフラには業務で触れていません。また、New Relic社が提唱するオブザーバビリティの領域に至る運用/活用はできていないと自認しています。

前提/動作環境

New Relicの無料アカウントが作成されているものとします。また、GitHubに公開しているデモ環境は以下の環境で動作確認しています。

  • Windows 10 Pro 22H2
    • x64
    • Docker Desktop 4.15.0 (93002)
  • macOS Ventura
    • Apple Silicon
    • Docker Desktop 4.15.0 (93002)

ブラウザモニタリングとは

バックエンドの監視や性能計測には過剰なアクセス、CPU/メモリなどのリソース使用量、特定の状況下でのHTTPステータスコード:500エラーといった監視やアプリケーションロジックの実行時間、RDBの問い合わせや外部API連携の実行時間を含むAPIの応答速度などがあるはずです。
ブラウザのモニタリングは名前のとおりフロントエンド側のモニタリングとなり、Webページの描画時間やJavaScriptの実行時間、Webサイトがどのように使われているかを可視化します。また、JavaScriptのエラーを監視します。

ブラウザモニタリングエージェントのインストール方法

インストールに関する詳細はこちらに記載されています。要約すると大きく3つインストール方法があり、いずれにしてもWebページにJavaScriptを挿入します。

  • APM監視済みアプリで自動挿入
    条件が揃えば1番簡単な方法です。残念ながらThymeleafを使用していると条件に該当しないので採択不可となります。ドキュメントによるとJSPなら自動計測できるようです。
  • APM監視済みアプリで手動挿入
    今回本命で採用する方法です。前述のとおりバックエンドではAPMを閲覧可能であり、デプロイ先にAPMエージェント(Java)がインストールされています。New Relic APIライブラリを入手してThymeleafに所定の記述を行います。詳細は後述します。
  • コピー/ペースト
    上記リンクのドキュメント(動画)にあるようにNew Relic OneのWebコンソール(Browser)から所定のJavaScriptを取得して貼り付ける方法です。本来はシンプルなホスティングなど静的なHTMLのみで構成されているページで利用しますが、デモ環境では試しに導入しました。

APM監視済みアプリで手動挿入でインストール

以降はGitHubに公開しているデモ環境を見ながら進めていきます。
まずはブラウザモニタリングのエージェントをインストールする前にAPMエージェント(Java)をインストールします。ドキュメントを参考に進めます。

  1. APMエージェントを取得して展開します。
  2. JavaコマンドでSpring BootのJarファイルを実行するときのパラメータを環境変数に設定します。実行時に指定できれば良いので環境変数に設定することは必須ではありません。
  3. 設定ファイルを作成します。
    1. こちらでDocker/Spring Bootを選択します。
      deploy+framework
    2. ライセンスキーを控えます。
      API keys page
      赤枠をクリックしてAPIキーの一覧ページへ遷移します。
      API Key
      INGEST - LICENSEのライセンスキーを控えます。行右の...からCopy keyをクリックします。INGEST - BROWSERではありません。
    3. 3.1のページに戻りName your appとEnter your license keyを入力して、Downloadボタンを押します。newrelic.ymlが得られます。
      Download_Config
    4. 前述のAPM監視済みアプリで自動挿入は採択できないのでauto_instrumentは無効にします。
    5. newrelic.ymlを上書きします。
  4. コンテナを起動します。Spring Bootが起動します。
    $ pwd
/Users/xxx/Desktop/new-relic-spring-boot
$ cd docker
$ docker-compose build --no-cache
$ docker-compose up
    予めNew Relic APIの導入とブラウザエージェントをインストールしています。(head/body)
  5. hostsにサンプルドメインを設定します。
    127.0.0.1       devnokiyo.example.com
  6. https://devnokiyo.example.com/ にアクセスします。
    証明書の問題で保護されていない通信になっていますが説明に影響しません。
    home
    ソースコードを見るとブラウザエージェントのJSが含まれていることが分かります。
  7. New RelicのBrowserにDemoが現れます。
    broser
    demo

コピー/ペーストでインストール

今回は既に存在するBrowserからJSを取得します。

  1. Application Settingsの記載されているJSをコピーします。
    copy/paste JS
  2. 設置します。(head)
  3. https://devnokiyo.example.com/form にアクセスします。
    ソースコードを見るとブラウザエージェントのJSが含まれていることが分かります。APM監視済みアプリで手動挿入と比較するためにコピー/ペースト方式でインストールしています。

事例

New Relic社の事例紹介を頼りに少し覗かせて頂きました。推測が含まれます。

  • バイトル
    Javaで開発しているのか、APM監視済みアプリで自動挿入で対応できるのかなど、システムの事情はわかりませんが、APM監視済みアプリの系列でインストールされていると思います。
    case 1-1
    case 1-2
  • Base
    コピー/ペーストでインストールされていると思います。
    case 2-1

Discussion