Flutter Web アプリの監視統合

Flutter 統合は、Flutter Web アプリケーションのパフォーマンスを監視し、アプリケーションの問題を診断してコードを最適化するのに役立ちます。Flutter 統合では、ブラウザ モニタリング エージェントを利用し、最も重要な Flutter アプリの指標 (エラー、アプリケーションのクラッシュ、アプリの起動、アプリのインストール、HTTP エラー、ネットワーク障害など) を備えた事前構築済みのダッシュボードを提供します。

インストール

ステップ 1 (オプション): インフラストラクチャ エージェントをインストールする

インフラストラクチャ エージェントのインストールはオプションですが、これを行うと、アプリが実行されているホストに関する重要なメトリックが取得されます。

これを行うには、Flutter アプリを含むホストの インフラストラクチャ エージェントのインストール手順 に従います。

ステップ 2: ブラウザ エージェントをインストールする

Flutter の統合は、ブラウザ エージェントに依存しています。ブラウザ エージェントをインストールするには:

1. one.newrelic.comから、 [データの追加] ページに移動します。
2. [ブラウザとモバイル]をクリックし、 [ブラウザ監視]をクリックします。
3. [JavaScript コードのコピー/貼り付けを選択] オプションを選択します (このコードの詳細については、 ブラウザのインストール ドキュメントを参照してください)。
4. 残りの手順を完了し、 [有効にする] をクリックします。
5. Flutter ウェブ アプリケーションのwww/rootディレクトリに移動します。
6. index.htmlファイルを開きます。
7. head タグが終了する直前 (</head>) にブラウザー コード スニペットを貼り付けます。
8. アプリケーションを再起動します。

5 分待ってから、New Relic でのデータの検索に進みます。

データを検索する

Flutter ダッシュボードを取得するには:

1. one.newrelic.comから、 [データの追加] ページに移動します。
2. [ダッシュボード]をクリックします。
3. 検索バーにflutter webと入力します。
4. Flutter ダッシュボードが表示されます。それをクリックしてインストールします。

Flutter ダッシュボードはカスタム ダッシュボードと見なされ、 ダッシュボード UI に表示されます。 ダッシュボードの使用と編集に関するドキュメントについては、 ダッシュボード ドキュメント を参照してください。

この統合により、 ブラウザ監視イベントの形式でデータが報告されます。 インフラストラクチャ エージェントをインストールした場合は、 インフラストラクチャ データも受け取ります。

デスクトップ コンピューターのユーザーが使用するさまざまなブラウザーの平均ウィンドウ読み込み時間をチェックする NRQL クエリの例を次に示します。

SELECT average(windowLoad) FROM PageViewTiming 
WHERE (deviceType = 'Desktop') FACET `userAgentName` 
SINCE 604800 seconds AGO TIMESERIES

次は何ですか？

データのクエリとカスタム ダッシュボードの作成について詳しくは、次のドキュメントをご覧ください。

• クエリビルダーの概要
• カスタム ダッシュボードの概要
• ダッシュボードの管理