[Flutter] 에러를 수집하고 알림 받기 with Sentry, Slack

Taehyun Nam·2022년 3월 2일

🔍 도입 배경

운영 환경에서 다양한 유저의 에러를 확인하기 어렵습니다.
에러를 확인하더라도 분석 및 재연이 어려습니다.
에러를 마주한 유저는 대부분 앱 신뢰도가 떨어져 이탈 가능성이 매우 높습니다.
스토어 평점이 낮아질 가능성이 높습니다.
인간은 완벽하지 않습니다.. 😨

🔨 환경 구성

Install

$ flutter pub add sentry_flutter

Sentry 가입

http://sentry.io 회원가입을 진행하고, DSN을 복사합니다.

DSN: sentry → Settings → Client Key (DNS)

Sentry 알림 설정

다양한 기능이 있지만, 우선은 새로운 이슈에 대해서만 알림을 받도록 하겠습니다.

💻 코드 작성

Flutter & Dart 에러

// main.dart

import 'package:sentry_flutter/sentry_flutter.dart';

// DSN 
final String sentryDsn = 'https://example@sentry.io/add-your-dsn-here';

Future<void> main() async {
  runZonedGuarded(() async {
    /// Debug Mode가 아닐때 Sentry init (댓글 의견 반영)
    if (!kDebugMode) {
      await SentryFlutter.init(
        (options) {
          options.dsn = sentryDsn;
          options.attachStacktrace = true;
        },
        appRunner: () => runApp(MyApp()),
      );
    } else {
      runApp(MyApp());
    }
  }, (exception, stackTrace) async {
    Sentry.captureException(exception, stackTrace: stackTrace);
  });
}

kDebugMode: flutter에서 기본 제공하며, Debug Mode일 때 True를 반환합니다.
Debug Mode일 때만 Sentry로 에러를 전송하도록 작성 되었습니다.
해당 코드를 통해 flutter, Dart에서 발생하는 에러를 모두 Sentry로 전송합니다.

에러 발생 시 추가 정보

  /// Sentry Bug Report 확인 용도
  final userInfo = {
    'name': 'taehyun',
    'age': '31',
    'deviceOS': 'AOS',
  };
  Sentry.configureScope((scope) => scope.setContexts('USER_INFO', userInfo));

Sentry에 전송될 때 참고 할 수 있는 정보를 추가 할 수 있습니다.
해당 코드는 필요에 따라서 자유롭게 아무 곳에 작성하면 되고, 에러가 발생하면 해당 정보가 포함되어 Sentry에 전송합니다.

API 에러

try {
  res = await http.get('...');
} catch (exception, stacktrace) {
  // API Error Sentry 보고 예시
  Sentry.captureException('exception: $exception, stacktrace: $stacktrace, statusCode: ${res?.statusCode ?? -1}, url: $url, method: 'get'));
}

모든 API에 해당 코드를 넣는건 비효율적이라서, http.get을 한번 감싸서(wrap) 사용하기를 권장합니다.
API에서 에러가 발생한 경우 exception, stacktrace, statusCode, API Url, API Method를 문자열로 합쳐서 Sentry에 전송하는 코드를 예시로 작성했는데, 각자 개선해서 사용하면 될 것 같습니다.

API 관련 에러를 쉽게 처리해주는게 Sentry SDK for Dart(sentry)에는 있는것 같은데..
적용을 해봤지만 원활하게 동작하지 않았고, flutter_sentry에 비해 모바일 상세(device) 정보가 출력되지 않습니다.
더 좋은 방법이 있으면, 댓글 남겨주시면 감사하겠습니다 🙏
https://pub.dev/packages/sentry