ヘルプ APM モバイルAPM Flutter APM

FlutterアプリケーションのモバイルAPM

Site24x7 Flutterプラグインにより、FlutterモバイルアプリケーションのHTTPリクエスト、クラッシュ、画面ロード時間、カスタムデータを監視できます。
これによりコンポーネント、個々のユーザー、セッションごとのトランザクションやグルーピングを追加することでアプリケーションパフォーマンスを強化できます。

設定

Flutterアプリケーションにsite24x7_flutter_pluginをインストールします。
インストール方法は次のとおりです。

次のコマンドを実行して、プラグインをインストールします。
copied
```
flutter pub add site24x7_flutter_plugin
```
appフォルダー内にあるpubspec.yamlファイルを開き、dependenciesセクションに「site24x7_flutter_plugin:」を追記します。
copied
```
dependencies:
 site24x7_flutter_plugin: ^1.0.0
```

iOSのインストール手順

project_directory/ios/内のPodファイルにpodを追加します。
copied
```
target 'Your_Project_Name' do
      pod 'Site24x7APM'
end
```
同じディレクトリで次のコマンドを実行します。
copied
```
pod install
```

Androidのインストール手順

アプリケーションプロジェクトレベルのandroidフォルダーにあるbuild.gradleファイルにZoho Maven URLを追加します。

allprojects {
    repositories {
        ...
        maven { url 'https://maven.zohodl.com' }
        ...
    }
}

Flutterアプリケーションの使用量

次のようにsite24x7_flutter.dartファイルからApmMobileapmFlutterPluginをインポートします。

import 'package:site24x7_flutter_plugin/site24x7_flutter_plugin.dart';

その他パラメーター取得のためのAPI

カスタムAPIを使用して、ユーザーアクション、スクリーンキャプチャ、エラー例外の追跡、その他関連タスクの操作を監視できます。
Site24x7の様々なタイプのカスタムAPIと、その使用法に関するする構文の概要を記載します。

エージェントの開始
画面追跡の設定
ネットワーク監視
エラー監視
トランザクションとコンポーネントの管理
ユーザー追跡
ブレッドクラムの追加
手動フラッシュ
強制アプリケーションクラッシュ

エージェントの開始

次のAPIを使用して、Site24x7 Flutterエージェントを起動します。
これによりFlutterアプリケーションのエラーや例外を取得できるようになります。

import 'package:site24x7_flutter_plugin/site24x7_flutter_plugin.dart';

Future main() async {
  WidgetsFlutterBinding.ensureInitialized();

  //assign the Site24x7 error callbacks
  //for non-async exceptions
  FlutterError.onError = ApmMobileapmFlutterPlugin.instance.captureFlutterError; //site24x7 custom callback

  //for async exceptions
  PlatformDispatcher.instance.onError = (error, stack) {
    ApmMobileapmFlutterPlugin.instance.captureException(error, stack, false, type: "uncaughtexception"); //site24x7 custom api
    return true;
  };

  //starting the agent
  await ApmMobileapmFlutterPlugin.instance.startMonitoring("appKey", uploadInterval); //site24x7 custom api

  ...
  runApp(MyHomePage(title: 'Flutter Demo Home Page'));
  ...

}

mainメソッドで割り当てエラーが呼び出される前に、WidgetsFlutterBinding.ensureInitialized();を呼び出してください。

画面追跡の設定

次のメカニズムを使用して、画面のロードにどれだけ時間がかかっているかを特定できます。
このデータはSite24x7サーバーにプッシュされ、セッションの追跡とクラッシュのアラートに使用されます。

ステートレスウィジェットの場合：

import 'package:site24x7_flutter_plugin/site24x7_flutter_plugin.dart';

class FirstScreen extends StatelessWidget {

  FirstScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text('Sample Widget'),
        ),
        body: Center(
            child: ElevatedButton(
              child: const Text('Go To Stateless Widget'),
              onPressed: () {
                var initialTimeStamp = DateTime.now();
                Navigator.push(
                    context, 
                    MaterialPageRoute(
                        builder: (context) => SampleStatelessWidget()
                        ),
                    ).then((value) {
                    var loadTime = DateTime.now().difference(initialTimeStamp).inMilliseconds;
                    ApmMobileapmFlutterPlugin.instance.addScreen("SampleStatelessWidget", loadTime.toDouble(), initialTimeStamp.millisecondsSinceEpoch); //site24x7 custom api
                });
              },
            ),
          ),
      );
    }
}

ステートフルウィジェットの場合：

import 'package:site24x7_flutter_plugin/site24x7_flutter_plugin.dart';

class SampleWidget extends StatefulWidget {
  const SampleWidget({super.key});
  @override
  State createState() => _SampleWidgetState();
}

class _SampleWidgetState extends State {
  late var _initialTimeStamp, _finalTimeStamp;

  @override
  void initState() {
    super.initState();
    _initialTimeStamp = DateTime.now();
  }

  void site24x7AfterBuildCallback(BuildContext context) {
    var finalTimeStamp = DateTime.now();
  }

  @override
  Widget build(BuildContext context) {

    WidgetsBinding.instance!.addPostFrameCallback((_) => site24x7AfterBuildCallback(context));
    return Scaffold(
        appBar: AppBar(
          title: const Text('Sample Widget'),
        ),
        body: Center(
          child: const Text('Hello Sample Widget');
        ),
      );
  }

  @override
  void didUpdateWidget(Fetch oldWidget) {
    super.didUpdateWidget(oldWidget);
    //send the widget loading time, i.e., difference between initial and final timestamp should be sent to the server using addScreen API
    var loadTime = _finalTimeStamp.difference(_initialTimeStamp).inMilliseconds;
    ApmMobileapmFlutterPlugin.instance.addScreen("Fetch", loadTime.toDouble(), _initialTimeStamp.millisecondsSinceEpoch); //site24x7 custom api
    //assign final timestamp to initial timestamp
    _initialTimeStamp = DateTime.now();
  }

  @override
  void dispose() {
    super.dispose();
    //send the widget loading time, i.e., difference between initial and final timestamp should be sent to the server using addScreen API
    var loadTime = _finalTimeStamp.difference(_initialTimeStamp).inMilliseconds;
    ApmMobileapmFlutterPlugin.instance.addScreen("Fetch", loadTime.toDouble(), _initialTimeStamp.millisecondsSinceEpoch); //site24x7 custom api
  }
}

ルーティング中のブレッドクラムを自動で取得する場合、次の方法でSite24x7NavigatorObserver()関数を使用します。

class MyHomePage extends StatefulWidget {
  @override
  State createState() => _MyHomePageState();
}

class _MyHomePageState extends State with WidgetsBindingObserver {

  @override
  Widget build(BuildContext context){
    return MaterialApp(
      routes: {
        '/first': (context) => FirstScreen(),
        '/second': (context) => SecondScreen(),
        '/fetch': (context) => FetchScreen()
      },
      navigatorObservers: [
        Site24x7NavigatorObserver() //site24x7 custom navigator observer
      ]
    );
  }

}

ネットワーク監視

ネットワーク監視機能では、HTTPとDioパッケージを使用して、API要求を取得します。

HTTPパッケージ：

import 'package:http/http.dart' as http;
import 'package:site24x7_flutter_plugin/site24x7_flutter.dart';

...

//site24x7 custom components
var client = Site24x7HttpClient();
                  (or)
var client = Site24x7HttpClient(client: http.Client());

var dataURL = Uri.parse('https://jsonplaceholder.typicode.com/posts?userId=1&_limit=5');
http.Response response = await client.get(dataURL);

...

Dioパッケージ：

import 'package:dio/dio.dart';
import 'package:site24x7_flutter_plugin/site24x7_flutter_plugin.dart';

...

var dio = Dio();

dio.enableSite24x7(); //site24x7 dio extension

var dataURL = 'https://jsonplaceholder.typicode.com/posts?userId=1_limit=5';
final response = await dio.get(dataURL);

...

API要求を行う前に、HTTPとDioパッケージをダウンロードしてください。API call. Additionally, remember to include .enableSite24x7() at the conclusion of any custom configuration on the Dio object.

エラー監視

次のAPIを使用して、キャッチブロックで発生する例外を手動で取得できます。

同期例外の取得：

Future main() async {
  WidgetsFlutterBinding.ensureInitialized();
  FlutterError.onError = ApmMobileapmFlutterPlugin.instance.captureFlutterError; //site24x7 custom callback
  runApp(MyHomePage());
}

非同期例外の取得：

Future main() async {
  WidgetsFlutterBinding.ensureInitialized();
  PlatformDispatcher.instance.onError = (error, stack){
    ApmMobileapmFlutterPlugin.instance.platformDispatcherErrorCallback(error, stack); //site24x7 custom api
  };
  runApp(MyHomePage());
}

runApp()を呼び出す前に、エラー監視のカスタムAPIを使用することを推奨します。

発生した例外の取得：

try {

  //code which might generate exceptions

} catch (exception, stack){
  ApmMobileapmFlutterPlugin.instance.captureException(exception, stack);
}

トランザクションとコンポーネントの管理

トランザクション内の一意のコンポーネントを起動と停止を行えます。
単一トランザクション内の複数コンポーネントを開始することもできます。

ApmMobileapmFlutterPlugin.instance.startTransaction("listing_blogs");

//Grouping various operations using components.
ApmMobileapmFlutterPlugin.instance.startComponent("listing_blogs", "http_request");
//your code/logic
ApmMobileapmFlutterPlugin.instance.stopComponent("listing_blogs", "http_request");

ApmMobileapmFlutterPlugin.instance.startComponent("listing_blogs", "view_data_onto_screen");
//your code/logic
ApmMobileapmFlutterPlugin.instance.stopComponent("listing_blogs", "view_data_onto_screen");

ApmMobileapmFlutterPlugin.instance.stopTransaction("listing_blogs");

ユーザー追跡

一意のユーザーIDを設定することで特定のユーザーを追跡できます。
一意のIDが指定されていない場合、Site24x7でランダムなGUIDが生成されてユーザーのIDとして割り当てられます。

ApmMobileapmFlutterPlugin.instance.setUserId("user@example.com");

ブレッドクラムの追加

次の関数を使用して、ブレッドクラムを手動で追加します。

ApmMobileapmFlutterPlugin.instance.addBreadcrumb(event, message);
ex: ApmMobileapmFlutterPlugin.instance.addBreadcrumb("Info", "download completed");

手動フラッシュ

次のAPIを使用して、次のアップロード時間を待つことなくSite24x7サーバーにデータを送信できます。

ApmMobileapmFlutterPlugin.instance.flush();

強制アプリケーションクラッシュ

アプリケーションを強制的にクラッシュさせて、エラーメッセージ"This is a site24x7 crash"を表示できます。

ApmMobileapmFlutterPlugin.instance.crashApplication();

リリースノート

Version 1.0.0

2024/02/05

機能強化:

リクエストメソッド、応答時間、スループット、ステータスコード、プラットフォーム、画面を使用したHTTP要求の追跡
応答時間、スループット、数に基づいた画面の追跡
移動の自動追跡
ビューの手動追跡
15分のセッションタイムアウトを用いたユーザーセッションの追跡
ユーザーIDの手動追加
エージェントによるコールバックを用いた同期、非同期クラッシュの追跡
ブレッドクラムの手動追加
HTTPとDioパッケージのサポート