New RelicをProgateでさわってみる
はじめに
監視ツールとしてNew Relicを使用してみたいなと思い、簡単に使い方がわかる方法はないかなと調べたところ、Progateでコースが存在すると知り、早速やってみました。
使用するもの
前提条件
- GitHub Codespacesを使用する方は、GitHubのアカウントが必要です。
さっそく始める
- Progate Pathに会員登録
- コースのを選択する
- コース > オブザーバビリティ
- 「GitHub Codespacesで開発環境を起動する」で環境構築を行う
🔹 GitHub Codespacesにログイン
「新しいCodespaces」を作成を選択 → ブラウザ上でVScodeが使えるようになります。
ブラウザ上のVS Codeでコマンドを実行し、以下の初期設定を行う
- Progate CLI のログイン
- DB接続準備 → サーバ起動 → サンプルサイト確認
- New Relic のセットアップ
🔹 アカウントの作成
以下の画面まで行けばOK
🔹 New Relic APM を導入する
Node.js環境で実行されるExpressのサーバーに対してNew Relic APM を導入する
All Entities > APM(Appliction Monitoring) > Node.js > On a host
Create a new key > continue > Name your applicationにアプリ名を入力 > Continue
Test Connection画面になる
次はアプリケーション側にNew Relicの設定を行う
# newrelicのライブラリをインストール
$ npm install newrelic -w api
$ npm install -D @types/newrelic -w api
# api/src/server.tsにimport文の追加
import "newrelic";
# .envファイルにライセンスキーの追加
# サーバーを再起動
$ npm run start:api
New Relicの画面でTest Connectionを選択
Status が Successfulだったら成功
🔹 New Relic Browser を導入する
All Entities > Add Data > Browser monitoring
Place a JavaScript snippet in frontend codeを選択 > アプリ名を入力 > Save and Continue
そのままSave and Continue
※ 次の画面のスニペットを控えておく → index.htmlのheadタグ内に追加
# サーバー再起動
$ npm run start:front
- シミュレーターのスクリプトを実行する
$ npm run simulator
// error出たら何回か実行と書いてあったので何回か実行してみたら3回目くらいでできた
New Relicの画面に戻る
🔹 New Relic APMでの確認
All Entities > Services - APM > アプリ名
🔹 Browserでの確認
All Entities > Browser Applocations > アプリ名
ここまでで、ProgateとNew Relicの連携はOK！
実際の課題を少しだけ！
課題1. Browserにてエラーが出ている箇所の確認
All Entities > Browser > Error rate
実際にエラーが出ている部分の確認
この辺かも・・・
原因を探したら、Codespacesの方でコードを修正します
(Codespacesを使用しているときのURLはhttps://xxxx-xxxx-xxxx-3000.app.github.dev/
になります）
エラーが解消された画面🎉
課題2. Browserにてパフォーマンスの改善
All Entities > Browser > AJAX
Response Timeで並び替え（GET /api/postsに時間がかかっている・・・？）
APM & Services > Transactions
sort by を Slowest average response time に変更
リンクをクリック > Trace Details
(課題とは違う結果ですが、そのまま進めてみます)
▼ トランザクション内でどのような処理をしていてどれくらいの時間がかかっているのかがわかる
▼ Transaction trace を展開して詳細を確認
結果から、コードを修正していく → 修正したら再度npm run simulator
課題の結果とは違いますが、全体的にトランザクションの処理が短くなりました！🎉
こちらで課題は終了となります！
メモ
$ progate submitで最後にテストするのですが、fomatチェックでエラーが出たため、npx prettier . --writeで整えたらうまくいきました。
感想
環境構築やコードの修正もCodeSpacesで簡単にでき、大変快適でした。New Relicの機能、実際の使い方も知ることができ、さくっとNew Relicを触ってみたい方におすすめです！
参考
🔹 Synthetic編
🔹 Infrastructure編
Discussion