เริ่มต้นใช้งาน Crashlytics สำหรับ Flutter

เลือกแพลตฟอร์ม: iOS+ Android Android NDK Flutter Unity


บทความนี้จะอธิบายวิธีเริ่มต้นใช้งาน Firebase Crashlytics ใน แอป Flutter

หลังจากตั้งค่าปลั๊กอิน Crashlytics Flutter ในแอปแล้ว คุณจะดู รายงานข้อขัดข้องที่ครอบคลุมได้ในคอนโซล Firebase

การตั้งค่า Crashlytics ต้องใช้ทั้งเครื่องมือบรรทัดคำสั่งและ IDE หากต้องการตั้งค่าให้เสร็จสมบูรณ์ คุณจะต้องบังคับให้เกิดข้อยกเว้นการทดสอบเพื่อส่งรายงานข้อขัดข้องแรกไปยัง Firebase

ก่อนเริ่มต้น

  1. กำหนดค่าและเริ่มต้น Firebase ในโปรเจ็กต์ Flutter หากยังไม่ได้ดำเนินการ

  2. แนะนำ: หากต้องการรับ บันทึก Breadcrumb โดยอัตโนมัติเพื่อทำความเข้าใจการกระทำของผู้ใช้ที่นำไปสู่เหตุการณ์ข้อขัดข้อง ข้อผิดพลาดที่ไม่ร้ายแรง หรือ ANR คุณต้องเปิดใช้ Google Analytics ในโปรเจ็กต์ Firebase

    • หากจะสร้างโปรเจ็กต์ Firebase ใหม่ ให้เปิดใช้ Google Analytics ในระหว่างขั้นตอนการสร้างโปรเจ็กต์

    • หากใช้โปรเจ็กต์ Firebase เดิมที่ไม่ได้เปิดใช้ Google Analytics คุณสามารถเปิดใช้ได้ในหน้า การตั้งค่า > การผสานรวม ของ Firebase คอนโซล

    โปรดทราบว่าบันทึก Breadcrumb พร้อมใช้งานสำหรับแพลตฟอร์ม Android และ Apple ทั้งหมด ที่ Crashlytics รองรับ (ยกเว้น watchOS)

ขั้นตอนที่ 1: เพิ่ม Crashlytics ลงในโปรเจ็กต์ Flutter

  1. จากรูทของโปรเจ็กต์ Flutter ให้เรียกใช้คำสั่งต่อไปนี้เพื่อติดตั้ง ปลั๊กอิน Flutter สำหรับ Crashlytics

    หากต้องการใช้ประโยชน์จาก บันทึก Breadcrumb ให้เพิ่มปลั๊กอิน Flutter สำหรับ Google Analytics ลงในแอปด้วย และตรวจสอบว่าได้ เปิดใช้ Google Analytics ในโปรเจ็กต์ Firebase แล้ว

    flutter pub add firebase_crashlytics && flutter pub add firebase_analytics

  2. จากไดเรกทอรีรากของโปรเจ็กต์ Flutter ให้เรียกใช้คำสั่งต่อไปนี้

    flutterfire configure

    การเรียกใช้คำสั่งนี้จะช่วยให้มั่นใจว่าการกำหนดค่า Firebase ของแอป Flutter เป็นเวอร์ชันล่าสุด และสำหรับ Android จะเพิ่มปลั๊กอิน Gradle ที่จำเป็นลงในแอปCrashlytics

  3. เมื่อเสร็จแล้ว ให้สร้างโปรเจ็กต์ Flutter อีกครั้งโดยทำดังนี้

    flutter run

  4. (ไม่บังคับ) หากโปรเจ็กต์ Flutter ใช้แฟล็ก --split-debug-info (และอาจใช้แฟล็ก --obfuscate ด้วย) คุณจะต้องทำตามขั้นตอนเพิ่มเติมเพื่อแสดงสแต็กเทรซที่อ่านได้สำหรับแอป

    • แพลตฟอร์ม Apple: ตรวจสอบว่าโปรเจ็กต์ใช้การกำหนดค่า เวอร์ชันที่แนะนำ (Flutter 3.12.0 ขึ้นไปและ Crashlytics ปลั๊กอิน Flutter 3.3.4 ขึ้นไป) เพื่อให้โปรเจ็กต์สร้างและอัปโหลดสัญลักษณ์ Flutter (ไฟล์ dSYM) ไปยัง Crashlytics ได้โดยอัตโนมัติ

    • Android: ใช้ Firebase CLI (เวอร์ชัน 11.9.0 ขึ้นไป) เพื่ออัปโหลด สัญลักษณ์การแก้ไขข้อบกพร่องของ Flutter คุณต้องอัปโหลดสัญลักษณ์การแก้ไขข้อบกพร่อง ก่อน รายงานข้อขัดข้องจากการสร้างโค้ดที่ปรับให้ยากต่อการอ่าน (Obfuscate)

      จากไดเรกทอรีรูทของโปรเจ็กต์ Flutter ให้เรียกใช้คำสั่งต่อไปนี้

      firebase crashlytics:symbols:upload --app=FIREBASE_APP_ID PATH/TO/symbols

      • FIREBASE_APP_ID: รหัสแอป Firebase Android (ไม่ใช่ ชื่อแพ็กเกจ)
        ตัวอย่างรหัสแอป Firebase Android: 1:567383003300:android:17104a2ced0c9b9b

      • PATH/TO/symbols: ไดเรกทอรีเดียวกับที่คุณ ส่งไปยังแฟล็ก --split-debug-info เมื่อสร้างแอปพลิเคชัน

ขั้นตอนที่ 2: กำหนดค่าตัวจัดการข้อขัดข้อง

คุณสามารถดักจับข้อผิดพลาดทั้งหมดที่เกิดขึ้นภายในเฟรมเวิร์ก Flutter ได้โดยอัตโนมัติด้วยการลบล้าง FlutterError.onError ด้วย FirebaseCrashlytics.instance.recordFlutterFatalError ดังนี้

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

  await Firebase.initializeApp();

  // Pass all uncaught "fatal" errors from the framework to Crashlytics
  FlutterError.onError = FirebaseCrashlytics.instance.recordFlutterFatalError;

  runApp(MyApp());
}

หากต้องการดักจับข้อผิดพลาดแบบไม่พร้อมกันที่เฟรมเวิร์ก Flutter ไม่ได้จัดการ ให้ใช้ PlatformDispatcher.instance.onError ดังนี้

Future<void> main() async {
    WidgetsFlutterBinding.ensureInitialized();
    await Firebase.initializeApp();
    FlutterError.onError = (errorDetails) {
      FirebaseCrashlytics.instance.recordFlutterFatalError(errorDetails);
    };
    // Pass all uncaught asynchronous errors that aren't handled by the Flutter framework to Crashlytics
    PlatformDispatcher.instance.onError = (error, stack) {
      FirebaseCrashlytics.instance.recordError(error, stack, fatal: true);
      return true;
    };
    runApp(MyApp());

}

ดูตัวอย่างวิธีจัดการข้อผิดพลาดประเภทอื่นๆ ได้ที่หัวข้อ ปรับแต่งรายงานข้อขัดข้อง

ขั้นตอนที่ 3: บังคับให้เกิดข้อขัดข้องในการทดสอบเพื่อตั้งค่าให้เสร็จสมบูรณ์

หากต้องการตั้งค่า Crashlytics ให้เสร็จสมบูรณ์และดูข้อมูลเริ่มต้นใน Crashlytics แดชบอร์ดของคอนโซล Firebase คุณต้องบังคับให้เกิดข้อยกเว้นการทดสอบ

  1. เพิ่มโค้ดลงในแอปที่คุณใช้บังคับให้เกิดข้อยกเว้นการทดสอบได้

    หากคุณเพิ่มตัวจัดการข้อผิดพลาดที่เรียก FirebaseCrashlytics.instance.recordError(error, stack, fatal: true) ลงใน Zone ระดับบนสุด คุณสามารถใช้โค้ดต่อไปนี้เพื่อเพิ่มปุ่มลงในแอป ซึ่งเมื่อกดแล้ว จะส่งข้อยกเว้นการทดสอบ

    TextButton(
    onPressed: () => throw Exception(),
    child: const Text("Throw Test Exception"),
),

  2. สร้างและเรียกใช้แอป

  3. บังคับให้เกิดข้อยกเว้นการทดสอบเพื่อส่งรายงานแรกของแอปโดยทำดังนี้

    1. เปิดแอปจากอุปกรณ์ทดสอบหรือโปรแกรมจำลอง

    2. ในแอป ให้กดปุ่มข้อยกเว้นการทดสอบที่คุณเพิ่มโดยใช้โค้ดด้านบน

  4. ในคอนโซล Firebase ให้ไปที่แดชบอร์ด DevOps และการมีส่วนร่วม > Crashlytics เพื่อตรวจสอบรายงานข้อขัดข้องในการทดสอบ

    หากรีเฟรชคอนโซลแล้วแต่ยังไม่เห็นข้อขัดข้องในการทดสอบ หลังจากผ่านไป 5 นาที ให้เปิดใช้การบันทึกการแก้ไขข้อบกพร่อง เพื่อดูว่าแอปส่งรายงานข้อขัดข้องหรือไม่


เพียงเท่านี้ก็เรียบร้อยแล้ว Crashlytics จะตรวจสอบข้อขัดข้องในแอป รวมถึงข้อผิดพลาดที่ไม่ร้ายแรงและ ANR ใน Android ไปที่แดชบอร์ด Crashlytics เพื่อดูและตรวจสอบรายงานและสถิติทั้งหมด

ขั้นตอนถัดไป