App Center Crash (React Native)

  • Artikel

Penting

Visual Studio App Center dijadwalkan untuk dihentikan pada 31 Maret 2025. Meskipun Anda dapat terus menggunakan Visual Studio App Center hingga sepenuhnya dihentikan, ada beberapa alternatif yang direkomendasikan yang dapat Anda pertimbangkan untuk bermigrasi.

Pelajari selengkapnya tentang garis waktu dukungan dan alternatif.

App Center Crash akan secara otomatis menghasilkan log crash setiap kali aplikasi Anda crash. Log pertama kali ditulis ke penyimpanan perangkat dan ketika pengguna memulai aplikasi lagi, laporan crash akan dikirim ke App Center. Mengumpulkan crash berfungsi untuk aplikasi beta dan live, yaitu yang dikirimkan ke Google Play. Log crash berisi informasi berharga bagi Anda untuk membantu memperbaiki crash.

Ikuti bagian Memulai jika Anda belum menyiapkan SDK di aplikasi Anda.

Di mana pun Anda menggunakan App Center Crash, tambahkan impor berikut di bagian atas file.

// Import App Center Crashes at the top of the file.
import Crashes from 'appcenter-crashes';

Membuat crash pengujian

App Center Crashes memberi Anda API untuk menghasilkan crash pengujian agar mudah menguji SDK. API ini hanya dapat digunakan dalam aplikasi pengujian/beta dan tidak akan melakukan apa pun di aplikasi produksi.

Crashes.generateTestCrash();

Juga mudah untuk menghasilkan crash JavaScript. Tambahkan baris berikut ke kode Anda, yang melempar kesalahan JavaScript dan menyebabkan crash.

throw new Error('This is a test javascript crash!');

Tip

Aplikasi React Native Anda perlu dikompilasi dalam mode rilis agar crash ini dikirim ke App Center.

Catatan

Saat ini, App Center tidak mendukung peta sumber untuk menyatukan pelacakan tumpukan JavaScript untuk aplikasi Android React Native.

Catatan

Praktik terbaik adalah menghindari pernyataan JavaScript throw dengan nilai string (misalnya: throw 'message'), karena React Native tidak mempertahankan tumpukan JavaScript penuh dalam skenario ini. Sebaliknya, throw JavaScript Error (misalnya: throw Error('message')).

Dapatkan informasi selengkapnya tentang crash sebelumnya

App Center Crashes memiliki dua API yang memberi Anda informasi lebih lanjut jika aplikasi Anda mengalami crash.

Apakah aplikasi menerima peringatan memori rendah di sesi sebelumnya?

Kapan saja setelah memulai SDK, Anda dapat memeriksa apakah aplikasi menerima peringatan memori di sesi sebelumnya:

const hadLowMemoryWarning = await Crashes.hasReceivedMemoryWarningInLastSession();

Catatan

Dalam beberapa kasus, perangkat dengan memori rendah mungkin tidak mengirim peristiwa.

Apakah aplikasi mengalami crash di sesi sebelumnya?

Kapan saja setelah memulai SDK, Anda dapat memeriksa apakah aplikasi mengalami crash di peluncuran sebelumnya:

const didCrash = await Crashes.hasCrashedInLastSession();

Ini berguna jika Anda ingin menyesuaikan perilaku atau UI aplikasi Anda setelah crash terjadi. Beberapa pengembang memilih untuk menunjukkan UI tambahan untuk meminta maaf kepada pengguna mereka, atau ingin cara menghubungi setelah crash terjadi.

Detail tentang crash terakhir

Jika aplikasi Anda mengalami crash sebelumnya, Anda bisa mendapatkan detail tentang crash terakhir.

const crashReport = await Crashes.lastSessionCrashReport();

Menyesuaikan penggunaan Crash App Center Anda

App Center Crash menyediakan panggilan balik bagi pengembang untuk melakukan tindakan tambahan sebelum dan saat mengirim log crash ke App Center.

Pemrosesan crash di JavaScript

Agar metode Anda Crash.setListener berfungsi seperti yang diharapkan, Anda perlu memeriksa apakah aplikasi Anda dikonfigurasi dengan benar.

  1. Buka file proyek ios/YourAppName/AppDelegate.m dan verifikasi bahwa Anda memiliki [AppCenterReactNativeCrashes register]; alih-alih [AppCenterReactNativeCrashes registerWithAutomaticProcessing];.
  2. Buka file proyek android/app/src/main/res/values/strings.xml dan verifikasi bahwa appCenterCrashes_whenToSendCrashes diatur ke ASK_JAVASCRIPT.

Semua panggilan balik yang berbeda dari pendengar peristiwa dibahas satu per satu dalam dokumen ini, tetapi Anda perlu mengatur satu pendengar peristiwa yang menentukan semua panggilan balik sekaligus.

Haruskah crash diproses?

Terapkan panggilan balik ini jika Anda ingin memutuskan apakah crash tertentu perlu diproses atau tidak. Misalnya, mungkin ada crash tingkat sistem yang ingin Anda abaikan dan yang tidak ingin Anda kirim ke App Center.

Crashes.setListener({

    shouldProcess: function (report) {
        return true; // return true if the crash report should be processed, otherwise false.
    },

    // Other callbacks must also be defined at the same time if used.
    // Default values are used if a method with return parameter isn't defined.
});

Catatan

Untuk menggunakan fitur tersebut, Anda perlu mengonfigurasi aplikasi dengan benar untuk layanan Crash.

Fitur ini tergantung pada Pemrosesan crash di JavaScript.

Jika privasi pengguna penting bagi Anda, Anda harus mendapatkan konfirmasi pengguna sebelum mengirim laporan crash ke App Center. SDK memaparkan panggilan balik yang memberi tahu App Center Crash untuk menunggu konfirmasi pengguna sebelum mengirim laporan crash.

Jika Anda memilih untuk melakukannya, Anda bertanggung jawab untuk mendapatkan konfirmasi pengguna, misalnya melalui perintah dialog dengan salah satu opsi berikut: Selalu Kirim, Kirim, dan Jangan kirim. Berdasarkan input, Anda akan memberi tahu App Center Crash apa yang harus dilakukan dan crash kemudian akan ditangani dengan sesuai.

Catatan

SDK tidak menampilkan dialog untuk ini, aplikasi harus menyediakan UI sendiri untuk meminta persetujuan pengguna.

Panggilan balik berikut menunjukkan cara memberi tahu SDK untuk menunggu konfirmasi pengguna sebelum mengirim crash:

Crashes.setListener({

    shouldAwaitUserConfirmation: function (report) {

        // Build your own UI to ask for user consent here. SDK doesn't provide one by default.

        // Return true if you built a UI for user consent and are waiting for user input on that custom UI, otherwise false.
        return true;
    },

    // Other callbacks must also be defined at the same time if used.
    // Default values are used if a method with return parameter isn't defined.
});

Jika Anda mengembalikan true, aplikasi Anda harus mendapatkan (menggunakan kode Anda sendiri) izin pengguna dan memperbarui SDK dengan hasilnya menggunakan API berikut:

import Crashes, { UserConfirmation } from 'appcenter-crashes';

// Depending on the user's choice, call Crashes.notifyUserConfirmation() with the right value.
Crashes.notifyUserConfirmation(UserConfirmation.DONT_SEND);
Crashes.notifyUserConfirmation(UserConfirmation.SEND);
Crashes.notifyUserConfirmation(UserConfirmation.ALWAYS_SEND);

Catatan

Untuk menggunakan fitur ini, konfigurasikan aplikasi Anda dengan benar untuk layanan Crash. Fitur ini bergantung pada Pemrosesan crash di JavaScript.

Mendapatkan informasi tentang status pengiriman untuk log crash

Terkadang, Anda ingin mengetahui status crash aplikasi Anda. Kasus penggunaan umum adalah Anda mungkin ingin menampilkan UI yang memberi tahu pengguna bahwa aplikasi Anda mengirimkan laporan crash, atau, jika aplikasi Anda crash dengan cepat setelah peluncuran, Anda ingin menyesuaikan perilaku aplikasi untuk memastikan log crash dapat dikirimkan. App Center Crashes memiliki tiga panggilan balik berbeda yang dapat Anda gunakan di aplikasi untuk diberi tahu tentang apa yang terjadi.

Untuk melakukan ini, tentukan pendengar peristiwa dalam kode Anda seperti yang ditunjukkan dalam contoh berikut:

Crashes.setListener({
    onBeforeSending: function (report) {
        // called after Crashes.process and before sending the crash.
    },
    onSendingSucceeded: function (report) {
        // called when crash report sent successfully.
    },
    onSendingFailed: function (report) {
        // called when crash report couldn't be sent.
    }

    // Other callbacks must also be defined at the same time if used.
    // Default values are used if a method with return parameter isn't defined.
});

Semua panggilan balik bersifat opsional. Anda tidak perlu menyediakan semua 3 metode di objek pendengar peristiwa, misalnya Anda hanya onBeforeSendingdapat menerapkan .

Catatan

Untuk menggunakan fitur tersebut, Anda perlu mengonfigurasi aplikasi dengan benar untuk layanan Crash.

Fitur ini tergantung pada Pemrosesan crash di JavaScript.

Catatan

Jika Crashes.setListener dipanggil lebih dari sekali, yang terakhir menang; ini menimpa pendengar yang sebelumnya ditetapkan oleh Crashes.setListener.

Penerimaan onSendingFailed berarti terjadi kesalahan yang tidak dapat dipulihkan seperti kode 4xx . Misalnya, 401 berarti appSecret salah.

Panggilan balik ini tidak dipicu jika merupakan masalah jaringan. Dalam hal ini, SDK terus mencoba kembali (dan juga menjeda percobaan kembali saat koneksi jaringan tidak berfungsi). Jika kami mengalami masalah jaringan atau pemadaman pada titik akhir, dan Anda memulai ulang aplikasi, onBeforeSending dipicu lagi setelah proses dimulai ulang.

Menambahkan lampiran ke laporan crash

Anda dapat menambahkan lampiran biner dan teks ke laporan crash. SDK akan mengirimkannya bersama dengan crash sehingga Anda dapat melihatnya di portal App Center. Panggilan balik berikut dipanggil tepat sebelum mengirim crash yang disimpan dari peluncuran aplikasi sebelumnya. Ini tidak akan dipanggil ketika crash terjadi. Pastikan file lampiran tidak dinamai minidump.dmp sebagai nama tersebut dicadangkan untuk file minidump. Berikut adalah contoh cara melampirkan teks dan gambar ke crash:

import Crashes, { ErrorAttachmentLog } from 'appcenter-crashes';

Crashes.setListener({
    getErrorAttachments(report) {
        const textAttachment = ErrorAttachmentLog.attachmentWithText('Hello text attachment!', 'hello.txt');
        const binaryAttachment = ErrorAttachmentLog.attachmentWithBinary(`${imageAsBase64string}`, 'logo.png', 'image/png');
        return [textAttachment, binaryAttachment];
    }

    // Other callbacks must also be defined at the same time if used.
    // Default values are used if a method with return parameter isn't defined.
});

Parameter fileName bersifat opsional (dapat berupa null) dan hanya digunakan di portal App Center. Dari kejadian crash tertentu di portal, Anda dapat melihat lampiran dan mengunduhnya. Jika Anda menentukan nama file, itu akan menjadi nama file untuk diunduh, jika tidak, nama file dibuat untuk Anda.

Untuk menyiapkan getErrorAttachments panggilan balik agar berfungsi dengan fungsi asinkron/tunggu ES2017, kembalikan Janji yang terpenuhi sebagai gantinya. Contoh berikut melampirkan teks dan gambar ke crash dengan cara asinkron:

import Crashes, { ErrorAttachmentLog } from 'appcenter-crashes';

Crashes.setListener({
    getErrorAttachments(report) {
        return (async () => {
            const textContent = await readTextFileAsync(); // use your async function to read text file
            const binaryContent = await readBinaryFileAsync(); // use your async function to read binary file
            const textAttachment = ErrorAttachmentLog.attachmentWithText(textContent, 'hello.txt');
            const binaryAttachment = ErrorAttachmentLog.attachmentWithBinary(binaryContent, 'logo.png', 'image/png');
            return [textAttachment, binaryAttachment];
        })();
    }

    // Other callbacks must also be defined at the same time if used.
    // Default values are used if a method with return parameter isn't defined.
});

Catatan

Untuk menggunakan fitur tersebut, Anda perlu mengonfigurasi aplikasi dengan benar untuk layanan Crash.

Fitur ini tergantung pada Pemrosesan crash di JavaScript.

Catatan

Batas ukuran saat ini adalah 1,4 MB di Android dan 7 MB di iOS. Mencoba mengirim lampiran yang lebih besar akan memicu kesalahan.

Kesalahan yang Ditangani

App Center juga memungkinkan Anda melacak kesalahan dengan menggunakan pengecualian yang ditangani melalui trackError metode . Aplikasi dapat secara opsional melampirkan properti atau/dan lampiran ke laporan kesalahan yang ditangani untuk memberikan konteks lebih lanjut.

try {
    // Throw error.
} catch (error) {

    // Prepare properties.
    const properties = { 'Category' : 'Music', 'Wifi' : 'On' };

    // Prepare attachments.
    const textAttachment = ErrorAttachmentLog.attachmentWithText('Hello text attachment!', 'hello.txt');
    const attachments = [textAttachment];

    // Create an exception model from error.
    const exceptionModel1 = ExceptionModel.createFromError(error);

    // ..or generate with your own error data.
    const exceptionModel2 = ExceptionModel.createFromTypeAndMessage("type", "message", "stacktrace");

    // Track error with custom data.
    Crashes.trackError(exceptionModel1, properties, attachments);
    Crashes.trackError(exceptionModel1, properties, nil);
    Crashes.trackError(exceptionModel2, nil, attachments);
    Crashes.trackError(exceptionModel2, nil, nil);
}

Breakpad

App Center mendukung crash Breakpad dari Android NDK di aplikasi React Native.

Ikuti langkah-langkah penyiapan normal di atas, dan dalam penimpaan OnCreate Anda MainActivity.java dan tambahkan konfigurasi minidump dan panggil ke kode asli Anda yang menyiapkan konfigurasi Breakpad Anda.

Contoh:

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    Crashes.getMinidumpDirectory().thenAccept(new AppCenterConsumer<String>() {
      @Override
      public void accept(String path) {
        // Path is null when Crashes is disabled.
        if (path != null) {
          // links to NDK
          setupBreakpadListener(path);
        }
      }
    });
  }

Mengaktifkan atau menonaktifkan Crash App Center saat runtime

Anda dapat mengaktifkan dan menonaktifkan Crash App Center saat runtime. Jika Anda menonaktifkannya, SDK tidak akan melakukan pelaporan crash untuk aplikasi.

await Crashes.setEnabled(false);

Untuk mengaktifkan App Center Crash lagi, gunakan API yang sama tetapi teruskan true sebagai parameter.

await Crashes.setEnabled(true);

Status ini bertahan di penyimpanan perangkat di seluruh peluncuran aplikasi.

Periksa apakah Crash App Center diaktifkan

Anda juga dapat memeriksa apakah App Center Crash diaktifkan atau tidak:

const enabled = await Crashes.isEnabled();