Flutter アプリを監視する

New Relic Flutter エージェントを使用して、Flutter アプリケーションを監視します。Dart エラーをキャプチャし、特定のネットワークリクエストを追跡し、分散トレースを使用して処理された例外にドリルダウンし、カスタム追跡イベントとメトリックを作成して、エンドユーザーのエクスペリエンスを完全にキャプチャします。

Summary view of a flutter app in New Relic

one.newrelic.com > Mobile > (アプリを選択) > Summary: Flutter データを表示し、HTTP リクエストとエラーを追跡し、時間の経過に伴うアプリのパフォーマンスを監視します。

始める準備はできましたか？以下の手順に従ってください！

Flutter エージェントをインストールする

Step 1 of 5

要件を確認する

Flutter エージェントをインストールする前に、Flutter アプリが次のバージョン要件を満たしていることを確認してください。

フラッター 2.5.0 以降
Dart バージョン 2.16.2 以降、3.0.0 まで (3.0.0 を含まない)
Android ネイティブアプリの場合:
Android API 24 以上
Android ネイティブの要件を参照してください
iOS ネイティブアプリの場合:
iOS ネイティブの要件を参照してください

Step 2 of 5

プロジェクトに Flutter エージェントを追加する

まず、Flutter エージェントを dart プロジェクトに追加する必要があります。 pubspec.yamlで、次を dependenciesに追加します。

dependencies:
    newrelic_mobile: 0.0.1

Step 3 of 5

アプリケーショントークンをコピーします

アプリケーショントークンは、New Relic が Flutter アプリのデータを認証するために使用されます。

New Relic UI でアプリケーショントークンを表示およびコピーするには:

one.newrelic.comにアクセスし、 [データを追加]をクリックし、 [モバイル]をクリックします。
Flutter アプリを選択します。
Settings > Application に移動し、表示された Application tokenをコピーします。
このアプリケーショントークンは、次の手順で追加します。

Step 4 of 5

Flutter プロジェクトを構成する

Flutter プロジェクトで main.dart を開き、次のコードを追加します。

import 'package:newrelic_mobile/newrelic_mobile.dart';

    var appToken = "";

    if (Platform.isAndroid) {
        appToken = "<android app token>"; // Replace with your application token copied from the New Relic UI. 
    } else if (Platform.isIOS) {
        appToken = "<ios app token>"; // Replace with your application token copied from the New Relic UI. 
    }

    Config config =
        Config(accessToken: appToken,

        //Android Specific
        // Optional: Enable or disable collection of event data.
        analyticsEventEnabled: true,

        // Optional: Enable or disable reporting successful HTTP requests to the MobileRequest event type.
        networkErrorRequestEnabled: true,

        // Optional: Enable or disable reporting network and HTTP request errors to the MobileRequestError event type.
        networkRequestEnabled: true,

        // Optional: Enable or disable crash reporting.
        crashReportingEnabled: true,

        // Optional: Enable or disable interaction tracing. Trace instrumentation still occurs, but no traces are harvested. This will disable default and custom interactions.
        interactionTracingEnabled: true,

        // Optional: Enable or disable capture of HTTP response bodies for HTTP error traces and MobileRequestError events.
        httpResponseBodyCaptureEnabled: true,

        // Optional: Enable or disable agent logging.
        loggingEnabled: true,

        // iOS specific
        // Optional: Enable or disable automatic instrumentation of WebViews
        webViewInstrumentation: true,

        //Optional: Enable or disable Print Statements as Analytics Events
        printStatementAsEventsEnabled : true,

        // Optional: Enable or disable automatic instrumentation of HTTP Request
        httpInstrumentationEnabled:true
        );

    NewrelicMobile.instance.start(config, () {
        runApp(MyApp());
    });

    class MyApp extends StatelessWidget {
    ....

アプリケーショントークン ( ステップ 3からコピーしたもの) を上記のコードの appToken = "" に貼り付けたことを確認してください。Android ネイティブアプリと iOS ネイティブアプリの両方を監視している場合は、両方に個別のトークンを追加する必要があります。

Step 5 of 5

(Android のみ) Android アプリを構成する

Android ネイティブアプリがある場合は、Android アプリに次の変更を加える必要があります。

アプリの android/build.gradle ファイルに次の変更を追加します。

buildscript {
        ...
        repositories {
            ...
            mavenCentral()
        }
        dependencies {
            ...
            classpath "com.newrelic.agent.android:agent-gradle-plugin:${latest_android_version}"
        }
    }

newrelic プラグインを android/app/build.gradle ファイルの先頭に適用します。
```
apply plugin: "com.android.application"
apply plugin: 'newrelic' // <-- add this
```
AndroidManifest.xml ファイルに INTERNET および ACCESS_NETWORK_STATE 権限を追加します。
```
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
```
そして、あなたは完了です！5 分以内に New Relic でデータが表示されるようになります。

New Relic で Flutter アプリのデータを表示する

Flutter エージェントがデータを New Relic に送信するようになったので、次は New Relic でアプリデータを表示します。

one.newrelic.com > Mobile > (Flutter アプリを選択) > Summary に移動して、経時的なデータの要約を表示します。

Flutter エージェントを使用すると、クラッシュの追跡、HTTP リクエスト、処理された例外など、すべてのモバイルモニタリング機能にアクセスできます。詳細については、次の機能ページをご覧ください。

UI で欠落しているデータのトラブルシューティング

UI で HTTP データを見つけるのに問題がありますか?

問題

Flutter エージェントをインストールして 5 分以上待つと、 HTTP errors と HTTP requests UI ページに No HTTP data appears: 。

解決

5 分以上待っても HTTP データが表示されない場合は、Flutter アプリ内で HttpOverrides.global をオーバーライドしていないことを確認してください。

Flutter ログデータのクエリ

New Relic は、Flutter ログをカスタムイベントとして保存します。次の NRQL クエリを使用して、これらのログをクエリし、それらのダッシュボードを構築できます。

SELECT * FROM Mobile Dart Console Events SINCE 30 MINUTES AGO

NRQLクエリの詳細については、 NRQLの概要を参照してください。

(オプション) Flutter エージェントのインストルメンテーションをカスタマイズする

これらのオプションの API 呼び出しを確認して、New Relic がデータを収集およびレポートする方法をさらにカスタマイズします。

エラー追跡とリソース追跡を設定します。

NewRelic Mobile Start は WidgetsFlutterBinding.ensureInitializedを呼び出すため、NewRelic Mobile Start を使用していない場合は、 NewrelicMobile.instance.startAgentを呼び出す前にこのメソッドを呼び出す必要があります。

if (Platform.isAndroid) {
    appToken = AppConfig.androidToken;
} else if (Platform.isIOS) {
    appToken = AppConfig.iOSToken;
}

Config config = Config(
    accessToken: appToken,
    analyticsEventEnabled: true,
    networkErrorRequestEnabled: true,
    networkRequestEnabled: true,
    crashReportingEnabled: true,
    interactionTracingEnabled: true,
    httpResponseBodyCaptureEnabled: true,
    loggingEnabled: true,
    webViewInstrumentation: true,
    printStatementAsEventsEnabled: true,
    httpInstrumentationEnabled:true);

// NewrelicMobile.instance.start(config, () {
//   runApp(MyApp());
// });

runZonedGuarded(() async {
    WidgetsFlutterBinding.ensureInitialized();
    FlutterError.onError = NewrelicMobile.onError;
    await NewrelicMobile.instance.startAgent(config);
    runApp(MyApp());
}, (Object error, StackTrace stackTrace) {
    NewrelicMobile.instance.recordError(error, stackTrace);
});

AppToken はプラットフォーム固有です。Android アプリと iOS アプリ用に個別のトークンを生成する必要があります。

ナビゲーションイベントを追跡するには、 NewRelicNavigationObserver を MaterialApp、 WidgetsApp、または CupertinoAppに追加する必要があります。

import 'package:newrelic_mobile/newrelic_navigation_observer.dart';

//....

MaterialApp(
  navigatorObservers: [
    NewRelicNavigationObserver(),
  ],
  // other parameters
)

routes: 設定に名前を追加して、各スクリーンビュー/アクティビティを追跡できるようにします。次に例を示します。

Widget build(BuildContext context) {
return MaterialApp(
  navigatorObservers: [NewRelicNavigationObserver()],
  routes: {
    'pageone': (context) => Page1Screen(),
    'pagetwo': (context) => Page2Screen(),
    'pagethree': (context) => Page3Screen(),
    'pagefour': (context) => Page4Screen()
  },
  theme: ThemeData(
    primarySwatch: Colors.blue,
    visualDensity: VisualDensity.adaptivePlatformDensity,
  ),
  initialRoute: 'pageone',
);
}

go_router ライブラリを使用する場合、 NewRelicNavigationObserver のインスタンスをアプリケーションの GoRouter.observersに追加することで、自動ルーティングインストルメンテーションを有効にできます。

//....

import 'package:go_router/go_router.dart';
import 'package:newrelic_mobile/newrelic_navigation_observer.dart';


final router = GoRouter(
    routes: ...,
        observers: [NewRelicNavigationObserver()],
);

次の方法でカスタム属性を使用して、致命的でない例外を手動で報告できます。

try {
    some_code_that_throws_error();
} catch (ex) {
NewrelicMobile.instance
        .recordError(error, StackTrace.current, attributes: attributes);
}

iOS または Android SDK API を使用して、カスタムイベントとメトリックを作成します。ここではいくつかの例を示します。

startInteraction(文字列 actionName) 未来

メソッドをインタラクションとして追跡します。

InteractionId 文字列です。

endInteraction(文字列の対話 ID): void;

インタラクションを終了します (必須)。これは、終了したいインタラクションの文字列 ID を使用します。 startInteraction()を使用すると、この文字列が返されます。

var id = await NewrelicMobile.instance.startInteraction("Getting Data from Service");
            try {
                var dio = Dio();
                var response = await dio.get(
                    'https://reqres.in/api/users?delay=15');
                    print(response);
                NewrelicMobile.instance.endInteraction(id);
                Timeline.finishSync();
            } catch (e) {
                print(e);
            }

[setAttribute] (/docs/mobile-monitoring/new-relic-mobile-ios/ios-sdk-api)(文字列名、動的値) : void;

複数のモバイルイベントタイプで共有されるセッションレベルの属性を作成します。この属性が呼び出されるたびに、以前の値とタイプが上書きされます。

NewrelicMobile.instance.setAttribute('RNCustomAttrNumber', 37);

setUserId(文字列 userId): void;

ユーザーセッションをAnalyticsのイベントや属性と関連付けるために、カスタムユーザー識別子の値を設定します。

NewrelicMobile.instance.setUserId("RN12934");

recordBreadcrumb(String name,'{Map<String, dynamic>?eventAttributes}'): void;

アプリのアクティビティや画面を追跡して、クラッシュのトラブルシューティングに役立てます。

NewrelicMobile.instance.recordBreadcrumb("Button Got Pressed on Screen 3"),

recordCustomEvent(String eventType,'{String eventName = "", Map<String, dynamic>?eventAttributes}'): void;

New Relic Insights で使用するカスタムイベントを作成して記録します。

NewrelicMobile.instance.recordCustomEvent("Major",eventName: "User Purchase",eventAttributes: {"item1":"Clothes","price":34.00}),
        child: const Text('Record Custom Event'),

noticeHttpTransaction(String url,String httpMethod,int statusCode,int startTime,int endTime,int bytesSent,int bytesReceived,Map'<String, dynamic>'? traceData,'{String responseBody = ""}''): void;

ネットワーク要求を手動で追跡します。このメソッドを使用して、応答本文も送信するオプションを含め、HTTP トランザクションを記録できます。

NewrelicMobile.instance.noticeNetworkFailure("https://cb6b02be-a319-4de5-a3b1-361de2564493.mock.pstmn.io/searchpage", "GET", 1000, 2000,'Test Network Failure', NetworkFailure.dnsLookupFailed);

noticeNetworkFailure(String url,String httpMethod,int startTime,int endTime,NetworkFailure errorCode): void;

ネットワーク障害を記録します。ネットワーク要求が失敗した場合は、このメソッドを使用して失敗に関する詳細を記録します。ほとんどの場合、この呼び出しは catch ブロックなどの例外ハンドラー内に配置します。サポートされている障害は次のとおりです。

Unknown
BadURL
TimedOut
CannotConnectToHost
DNSLookupFailed
BadServerResponse

SecureConnectionFailed

NewrelicMobile.instance.noticeNetworkFailure("https://cb6b02be-a319-4de5-a3b1-361de2564493.mock.pstmn.io/searchpage", "GET", 1000, 2000,'Test Network Failure', NetworkFailure.dnsLookupFailed);

RecordMetric(文字列名,文字列カテゴリ,int?値、文字列?countUnit、文字列?valueUnit): 無効;

カスタムメトリック (任意の数値データ) を記録します。countUnit はメトリックカウントの測定単位、valueUnit はメトリック値の測定単位です。countUnit または valueUnit を使用する場合は、value、countUnit、および valueUnit をすべて設定する必要があります

NewrelicMobile.instance.recordMetric("testMetric", "Test Champ",value: 12.0);
    NewrelicMobile.instance.recordMetric("testMetric1", "TestChamp12",value: 10,valueUnit: MetricUnit.BYTES,countUnit: MetricUnit.PERCENT);

シャットダウン(): 無効;

実行時に、現在のアプリケーションライフサイクル内でエージェントをシャットダウンします。

NewrelicMobile.instance.shutdown();

この機械翻訳は参考用に提供されます。

Flutter エージェントをインストールする

要件を確認する

プロジェクトに Flutter エージェントを追加する

アプリケーショントークンをコピーします

Flutter プロジェクトを構成する

(Android のみ) Android アプリを構成する

New Relic で Flutter アプリのデータを表示する

UI で欠落しているデータのトラブルシューティング

問題

解決

Flutter ログデータのクエリ

(オプション) Flutter エージェントのインストルメンテーションをカスタマイズする

エラーとリソースを追跡する

画面ナビゲーションイベントの追跡

GoRouter: 自動ルーティングインストルメンテーションを有効にする

エラーを手動で報告する

インタラクションとしてメソッドを追跡する

複数のモバイルイベントタイプで共有されるセッションレベルの属性を作成します

ユーザーセッションを分析イベントと属性に関連付ける

パン粉の記録

カスタムイベントの記録

最大イベントバッファ時間を構成する

イベントプールのサイズを構成する

ネットワークリクエストを手動で追跡する

ネットワーク障害の記録

レコードメトリック

エージェントのシャットダウン

この機械翻訳は参考用に提供されます。

Flutter アプリを監視する

Flutter エージェントをインストールする

要件を確認する

プロジェクトに Flutter エージェントを追加する

アプリケーション トークンをコピーします

Flutter プロジェクトを構成する

(Android のみ) Android アプリを構成する

New Relic で Flutter アプリのデータを表示する

UI で欠落しているデータのトラブルシューティング

問題

解決

Flutter ログデータのクエリ

(オプション) Flutter エージェントのインストルメンテーションをカスタマイズする

エラーとリソースを追跡する

画面ナビゲーション イベントの追跡

GoRouter: 自動ルーティング インストルメンテーションを有効にする

エラーを手動で報告する

インタラクションとしてメソッドを追跡する

複数のモバイル イベント タイプで共有されるセッション レベルの属性を作成します

ユーザー セッションを分析イベントと属性に関連付ける

パン粉の記録

カスタムイベントの記録

最大イベント バッファ時間を構成する

イベント プールのサイズを構成する

ネットワーク リクエストを手動で追跡する

ネットワーク障害の記録

レコードメトリック

エージェントのシャットダウン

アプリケーショントークンをコピーします

画面ナビゲーションイベントの追跡

GoRouter: 自動ルーティングインストルメンテーションを有効にする

複数のモバイルイベントタイプで共有されるセッションレベルの属性を作成します

ユーザーセッションを分析イベントと属性に関連付ける

最大イベントバッファ時間を構成する

イベントプールのサイズを構成する

ネットワークリクエストを手動で追跡する