New Relic BrowserはWebアプリケーションにアクセスするブラウザ上のパフォーマンスやエラーをリアルタイムに観測し、ユーザー体験の低下につながる傾向をいち早く検知し原因の特定と解決を支援します。この記事ではローコード開発プラットフォームである OutSystems にNew Relic Browserを導入してみます。
New Relic Browserの概要について理解されたい方は以下のドキュメントをご確認ください。
はじめに
New Relic BrowserはHTML内に埋め込まれた監視用のJavaScriptコードがWebアプリケーションのパフォーマンスをNew Relicに送信します。
このJavaScriptコードはHTMLがサーバーサイドで生成される場合はNew Relic APMを導入することにより自動的に埋め込まれます。シングルページアプリケーション(SPA)やNew Relic APMによる自動インストゥルメンテーションに対応しないフレームワークは手動でJavaScriptコードをコピー&ペーストすることにより導入できます。
OutSystemsは後者の手動による埋め込みで導入できます。
New Relic Browserの導入
OutSystemsにNew Relic Browserを導入してみましょう。
New Relic UIでJavaScriptコードを生成する
- [+Integrations & Agents]を選択し、"
browser" を検索して表示されるBrowser Monitoringのアイコンをクリックします。
- Browser Agentのインストール方法として、今回は [Place a JavaScript snippet in frontend code] を選択します。
- New Relic Browserに表示されるアプリケーション名を入力します。
※コピー&ペーストによる導入の場合、既存のNew Relic APMのアプリケーションと同じ名前にすることはできません。
- セッションリプレイや分散トレーシングの有効にするかを選択します。
- 生成されたJavaScriptコードを記録します。
OutSystemsにJavaScriptコードを埋め込む
- OutSystems Service Studioでアプリケーションを開きます。
- Scriptフォルダに新しいスクリプトを作成します。
- New Relic BrowserのJavaScriptコードを貼り付けます。なお、JavaScriptコードの
<script type="text/javascript">と</script>タグは削除してください。
- アプリケーションプロパティの
Required Scriptstに 2. で追加したスクリプトを指定します。
- アプリケーションをパブリッシュします。
OutSystemsのBrowserデータを確認してみよう
OutSystemsのアプリケーションにアクセスしてブラウザ上のパフォーマンスやエラー、セッションリプレイなどがNew Relic Browserで可視化できることを確認してみましょう。
New Relic Browserにデータが表示されない場合、ブラウザのキャッシュをクリアしてアプリケーションにアクセスしてみてください。
- Summary
- Errors
- Page views
- Distributed tracing
- Session replay
New Relic Browserの簡単なセットアップで、OutSystemsのブラウザ上でのパフォーマンスやエラー、セッションリプレイなどが確認できるようになりました。
皆さんのアプリケーションの品質維持や改善にぜひご活用ください！
その他
New Relicでは、新しい機能やその活用方法について、QiitaやXで発信しています！
無料でアカウント作成も可能なのでぜひお試しください！
New Relic株式会社のX(旧Twitter) や Qiita OrganizationOrganizationでは、
新機能を含む活用方法を公開していますので、ぜひフォローをお願いします。
無料のアカウントで試してみよう！
New Relic フリープランで始めるオブザーバビリティ！
