frontend/mobile

[flutter] Dynatrace pakage 세팅하기

김포레스트 2023. 10. 7. 11:54

Dynatrace Flutter Plugin

앱성능 관련 데이터를 측정 할수있도록 해주는 플러그인.

flutter에서 패키지 설치가 필요하다.

 

1. 설치

터미널에서 다음의 명령어를 입력하거나

flutter pub add dynatrace_flutter_plugin

 pubspec.yaml 파일에서 다음의 명령어를 추가 한 뒤, pub get 버튼을 누른다.

dependencies:
  dynatrace_flutter_plugin: ^3.275.1

 

2. dynatrace.config.yaml 파일 세팅하기

flutter의 루트 폴더 위치에 dynatrace.config.yaml 파일을 생성하고 필요에 따라 세팅한다. 

기본적인 세팅 방식은 아래의 url을 참고.

https://pub.dev/packages/dynatrace_flutter_plugin#useroptin

 

dynatrace_flutter_plugin | Flutter Package

The Dynatrace Flutter plugin helps auto-instrument your Flutter app with Dynatrace OneAgent for Android and iOS. It also provides an API to add manual instrumentation.

pub.dev

**예시(applicationId는 발급받아야함. beaconUrl 도 따로 정해야함)**

android:
  config:
    "dynatrace {
      configurations {
        defaultConfig {
          autoStart {
            applicationId '어쩌구저쩌구'
            beaconUrl '어쩌구저쩌구2'
          }
          userOptIn true
          agentBehavior.startupLoadBalancing true
        }
      } 
    }"
ios:
  config:
    "<key>DTXApplicationID</key>
    <string>어쩌구저쩌구</string>
    <key>DTXBeaconURL</key>
    <string>어쩌구저쩌구2</string>
    <key>DTXUserOptIn</key>
    <true/>
    <key>DTXStartupLoadBalancing</key>
    <true/>"

 

3. main.dart 파일 수정하기

  이제 플러그인을 실행 해야 하기 위해 main.dart 파일을 세팅해야 한다. 우리는 main.dart 최상단에 void main() 함수가 있다는 것을 알고 있고, 그 안에서 runApp 함수를 돌려 어플을 실행시킨다는 것 또한 알고 있다. 

 

dynatrace 는 runApp 부분을 수정해야 한다고 말한다.

첫번째 방법은 void main() => runApp(MyApp()); 을 void main() => Dynatrace().start(MyApp()); 로 바꿔주는 것이다.

먼저, 패키지를 import 시켜주자. 

import 'package:dynatrace_flutter_plugin/dynatrace_flutter_plugin.dart';

 

방법1.

// 기존 코드

void main() {

  runApp(
    const MaterialApp(
      home: WebViewApp(),
    ),
  );

}


// Dynatrace 적용 코드

void main() {

  Dynatrace().start(
    const MaterialApp(
      home: WebViewApp(),
    ),
  );

}

쉽다!!!

 

근데 이것 말고 다른 방법도 있다.

runApp은 놔두고 그 위에 Dynatrace().startWithoutWidget(); 를 추가하는 것이다.

 

똑같이 패키지를 import 시켜주고 시작한다.

import 'package:dynatrace_flutter_plugin/dynatrace_flutter_plugin.dart';
// 기존 코드

void main() {

  runApp(
    const MaterialApp(
      home: WebViewApp(),
    ),
  );

}

// Dynatrace 적용 코드

void main() {

  Dynatrace().startWithoutWidget();
  runApp(
    const MaterialApp(
      home: WebViewApp(),
    ),
  );

}

 

 

3. 실행하기

우리는 config 파일에서 OptedIn 과 agentBehavior를 true로 설정을 해준 바 있다. 그러니까 얘들이 제대로 설정되었는지 출력을 해보자. user의 DatacollectionLevel과 crash report 설정값을 가져오려면 getUserPrivacyOptions 메소드를 사용 해야 한다. 

 

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();
  DeviceInfoPlugin deviceInfo = DeviceInfoPlugin();
  await Dynatrace().startWithoutWidget();

  UserPrivacyOptions options = await Dynatrace().getUserPrivacyOptions();
  print('User Privacy Options Crash:');
  print(options.crashReportingOptedIn);
  print('User Privacy Options Level:');
  print(options.dataCollectionLevel);

  runApp(
    const MaterialApp(
      home: WebViewApp(),
    ),
  );

  final info = await deviceInfo.deviceInfo;
  print('deviceInfo >>>>>>>>>>>>>>>>>>>>>>');
  print(info.data);
}

이전에 deviceInfo를 비동기방식으로 사용하기 위해 void main함수를 Futere에 담아서 사용 했다.

getUserPrivacyOptions 메소드도 같은 비동기방식으로 사용 해야 하기 때문에,  Dynatrace().startWithoutWidget(); 부분 앞에 await를 설정 해줬다. 

 

**출력 내용**

 

 

 

4. 참고(웹 요청 시간 출력하기)

 

void main 함수 안에 들어가있음

  await HttpClient().getUrl(Uri.parse('http://www.naver.com')).then((request) {
    DateTime startTime = DateTime.now();
    request.close();
    DateTime endTime = DateTime.now();
    Duration elapsedTime = endTime.difference(startTime);
    print('웹 요청 실행 시간: ${elapsedTime.inMilliseconds}ms');
  }).then((response) => print("Request Done"));

 

**출력내용**

 

 

아래의 내용 참고 + 챗 지피티를 사용 해 측정함.

원래는 dashboard를 통해 성능을 확인해야하는데, 수동계측 코드를 짜봄.

나중에 dashboard를 활용하게 되면 또 포스팅 하겠음.

https://pub.dev/packages/dynatrace_flutter_plugin

 

dynatrace_flutter_plugin | Flutter Package

The Dynatrace Flutter plugin helps auto-instrument your Flutter app with Dynatrace OneAgent for Android and iOS. It also provides an API to add manual instrumentation.

pub.dev