Bagikan melalui

App Center Crashes (React Native)

Penting

Visual Studio App Center dihentikan pada 31 Maret 2025, kecuali untuk fitur Analitik dan Diagnostik, yang akan terus didukung hingga 30 Juni 2026. Pelajari lebih lanjut.

App Center Crash akan secara otomatis menghasilkan log crash setiap kali aplikasi Anda mengalami 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 yang sudah dirilis, yaitu yang diterbitkan di Google Play. Catatan kerusakan berisi informasi berharga bagi Anda untuk membantu memperbaiki masalah.

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

Di mana pun Anda menggunakan App Center Crashes, tambahkan perintah import 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 uji yang mempermudah pengujian SDK. API ini hanya dapat digunakan dalam aplikasi pengujian/beta dan tidak akan melakukan apa pun di aplikasi produksi.

Crashes.generateTestCrash();

Juga mudah untuk mengakibatkan kerusakan pada JavaScript. Tambahkan baris berikut ke kode Anda, yang melemparkan kesalahan JavaScript dan menyebabkan crash.

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

Petunjuk / Saran

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

Nota

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

Nota

Sebagai praktik terbaik, hindarilah pernyataan JavaScript throw dengan nilai string (misalnya: throw 'message'), karena React Native tidak mempertahankan keseluruhan tumpukan JavaScript dalam kasus seperti ini. Sebagai gantinya, 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();

Nota

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-detail tentang kerusakan terakhir

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

const crashReport = await Crashes.lastSessionCrashReport();

Sesuaikan penggunaan App Center Crashes Anda

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

Proses penanganan kerusakan pada 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 acara dibahas satu per satu dalam dokumen ini, tetapi Anda perlu menggunakan satu pendengar acara yang menangani semua panggilan balik sekaligus.

Apakah kerusakan harus 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 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.
});

Nota

Untuk menggunakan fitur tersebut, Anda perlu mengonfigurasi aplikasi anda 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 mengekspos panggilan balik yang memberi tahu App Center Crashes untuk menunggu konfirmasi dari pengguna sebelum mengirimkan 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 Crashes apa yang harus dilakukan dan crash kemudian akan ditangani sesuai dengan itu.

Nota

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);

Nota

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

Dapatkan informasi tentang status pengiriman log kerusakan.

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 mengalami crash dengan cepat setelah peluncuran, Anda ingin menyesuaikan perilaku aplikasi untuk memastikan log crash dapat dikirimkan. App Center Crashes memiliki tiga callback berbeda yang dapat Anda gunakan di aplikasi untuk menerima pemberitahuan 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 dapat hanya menerapkan onBeforeSending.

Nota

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

Fitur ini tergantung pada Pemrosesan crash di JavaScript.

Nota

Jika Crashes.setListener dipanggil lebih dari sekali, pemanggilan terakhir yang berlaku; itu menggantikan 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 di titik akhir, dan Anda memulai ulang aplikasi, onBeforeSending dipicu lagi setelah proses dimulai ulang.

Tambahkan lampiran ke laporan crash

Anda dapat menambahkan lampiran biner dan teks ke laporan crash. SDK akan mengirimkannya bersama dengan kerusakan 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 karena nama tersebut diperuntukkan untuk file minidump. Berikut adalah contoh cara melampirkan teks dan gambar pada laporan 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 yang akan diunduh, jika tidak, nama file dibuat untuk Anda.

Untuk menyetel panggilan balik getErrorAttachments agar berfungsi dengan fungsi async/await ES2017, kembalikan sebuah Promise yang sudah 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.
});

Nota

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

Fitur ini tergantung pada Pemrosesan crash di JavaScript.

Nota

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 kerusakan yang dilaporkan melalui Breakpad dari Android NDK dalam aplikasi React Native.

Ikuti langkah-langkah penyiapan normal di atas, dan di MainActivity.java timpa OnCreate dan tambahkan konfigurasi minidump dan panggil kode asli Anda untuk 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 App Center Crash selama waktu eksekusi

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

await Crashes.setEnabled(false);

Untuk mengaktifkan kembali App Center Crashes, gunakan API yang sama tetapi masukkan true sebagai parameter.

await Crashes.setEnabled(true);

Status ini bertahan di penyimpanan perangkat di seluruh peluncuran aplikasi.

Periksa apakah App Center Crashes diaktifkan

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

const enabled = await Crashes.isEnabled();
  • Last updated on