App Center のクラッシュ (React Native)

重要

Visual Studio App Center は、2026 年 6 月 30 日まで引き続きサポートされる分析機能と診断機能を除き、2025 年 3 月 31 日に廃止されました。 詳細を参照してください。

App Center のクラッシュでは、アプリがクラッシュするたびにクラッシュ ログが自動的に生成されます。 ログは最初にデバイスのストレージに書き込まれ、ユーザーがアプリを再度起動すると、クラッシュ レポートが App Center に送信されます。 クラッシュの収集は、ベータ版アプリとライブ アプリ、つまり Google Play に送信されたアプリの両方で機能します。 クラッシュ ログには、クラッシュの修正に役立つ貴重な情報が含まれています。

アプリケーションで SDK をまだ設定していない場合は、「 はじめ に」セクションに従います。

App Center のクラッシュを使用している場合は、ファイルの先頭に次のインポートを追加します。

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

テスト クラッシュを生成する

App Center のクラッシュには、SDK を簡単にテストするためのテスト クラッシュを生成する API が用意されています。 この API はテスト/ベータ アプリでのみ使用でき、運用アプリでは何も行いません。

Crashes.generateTestCrash();

また、JavaScript のクラッシュを生成することも簡単です。 コードに次の行を追加すると、JavaScript エラーをスローし、クラッシュさせます。

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

ヒント

このクラッシュを App Center に送信するには、React Native アプリを リリース モード でコンパイルする必要があります。

注

現時点では、App Center では、Android React Native アプリの JavaScript スタック トレースを縮小しないソース マップはサポートされていません。

注

このシナリオではthrow、文字列値 (例: throw 'message') を含む JavaScript ステートメントは避けるのがベスト プラクティスです。 代わりに、JavaScript throw (例: Error) をthrow Error('message')します。

以前のクラッシュに関する詳細情報を取得する

App Center のクラッシュには、アプリがクラッシュした場合に備えて詳細情報を提供する 2 つの API があります。

アプリは前のセッションでメモリ不足の警告を受け取りましたか?

SDK を起動した後は、前のセッションでアプリがメモリ警告を受信したかどうかをいつでも確認できます。

const hadLowMemoryWarning = await Crashes.hasReceivedMemoryWarningInLastSession();

注

場合によっては、メモリが不足しているデバイスがイベントを送信しないことがあります。

前のセッションでアプリがクラッシュしましたか?

SDK を起動した後は、前回の起動時にアプリがクラッシュしたかどうかをいつでも確認できます。

const didCrash = await Crashes.hasCrashedInLastSession();

これは、クラッシュが発生した後にアプリの動作または UI を調整する場合に便利です。 一部の開発者は、UI を追加して謝罪するか、クラッシュが発生した後にユーザーと接触する方法を望んでいます。

前回のクラッシュの詳細

アプリが以前にクラッシュした場合は、最後のクラッシュに関する詳細を取得できます。

const crashReport = await Crashes.lastSessionCrashReport();

App Center のクラッシュ機能の使い方をカスタマイズする

App Center のクラッシュは、クラッシュ ログを App Center に送信する前と送信する際に、開発者が追加のアクションを実行するためのコールバックを提供します。

JavaScript でのクラッシュの処理

Crash.setListenerメソッドを想定どおりに動作させるには、アプリケーションが正しく構成されているかどうかを確認する必要があります。

  1. プロジェクトのios/YourAppName/AppDelegate.m ファイルを開き、[AppCenterReactNativeCrashes register];ではなく[AppCenterReactNativeCrashes registerWithAutomaticProcessing];があることを確認します。
  2. プロジェクトの android/app/src/main/res/values/strings.xml ファイルを開き、 appCenterCrashes_whenToSendCrashes が ASK_JAVASCRIPT に設定されていることを確認します。

このドキュメントでは、イベント リスナーのさまざまなコールバックについて 1 つずつ説明しますが、すべてのコールバックを一度に定義するイベント リスナーを 1 つずつ設定する必要があります。

クラッシュを処理する必要がありますか?

特定のクラッシュを処理する必要があるかどうかを判断する場合は、このコールバックを実装します。 たとえば、無視して 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.
});

注

この機能を使用するには、クラッシュ サービス用にアプリケーションを適切に構成する必要があります。

この機能は、 JavaScript での処理クラッシュに依存します。

ユーザーのプライバシーが重要な場合は、クラッシュ レポートを App Center に送信する前にユーザーの確認を受け取る必要があります。 SDK は、クラッシュ レポートを送信する前にユーザーの確認を待機するように App Center のクラッシュに指示するコールバックを公開します。

これを選択した場合は、ユーザーの確認を取得する必要があります。たとえば、ダイアログ プロンプトで次のいずれかのオプションを使用します。 Always Send、 Send、 Don't send。 入力に基づいて、App Center Crashes にどのように指示するかを決定し、その結果クラッシュが適切に処理されます。

注

SDK にはこれに対するダイアログは表示されません。アプリは、ユーザーの同意を求めるために独自の UI を提供する必要があります。

次のコールバックは、クラッシュを送信する前にユーザーの確認を待機するように SDK に指示する方法を示しています。

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

trueを返す場合、アプリはユーザーのアクセス許可を (独自のコードを使用して) 取得し、次の API を使用して結果で SDK を更新する必要があります。

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

注

この機能を使用するには、クラッシュ サービス用にアプリケーションを適切に構成します。 この機能は、 JavaScript での処理クラッシュに依存します。

クラッシュ ログの送信状態に関する情報を取得する

場合によっては、アプリのクラッシュの状態を知りたい場合があります。 一般的なユース ケースは、アプリがクラッシュ レポートを送信していることをユーザーに通知する UI を表示する場合や、起動後にアプリがすぐにクラッシュする場合は、クラッシュ ログを送信できるようにアプリの動作を調整する必要がある場合です。 App Center Crashes には、アプリ内で何が起こっているかを通知するために利用できる 3 種類の異なるコールバックがあります。

これを行うには、次の例に示すように、コードでイベント リスナーを定義します。

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

すべてのコールバックは省略可能です。 イベント リスナー オブジェクトに 3 つのメソッドをすべて指定する必要はありません。たとえば、 onBeforeSendingのみを実装できます。

注

この機能を使用するには、クラッシュ サービス用にアプリケーションを適切に構成する必要があります。

この機能は、 JavaScript での処理クラッシュに依存します。

注

Crashes.setListenerが複数回呼び出されると、最後の 1 つが優先されます。Crashes.setListenerによって以前に設定されたリスナーがオーバーライドされます。

onSendingFailedを受け取るということは、4xx コードが発生したなどの回復不可能なエラーを意味します。 たとえば、 401 は、 appSecret が間違っていることを意味します。

このコールバックは、ネットワークの問題である場合はトリガーされません。 この場合、SDK は再試行を続けます (また、ネットワーク接続がダウンしている間も再試行を一時停止します)。 エンドポイントでネットワークの問題や停止が発生し、アプリを再起動すると、プロセスの再起動後に onBeforeSending が再度トリガーされます。

クラッシュ レポートに添付ファイルを追加する

クラッシュ レポートにバイナリ添付ファイルとテキスト添付ファイルを追加できます。 SDK はクラッシュと共にそれらのデータを送信し、App Center ポータルで表示できるようになります。 次のコールバックは、以前のアプリケーションの起動から格納されたクラッシュを送信する直前に呼び出されます。 クラッシュが発生しても呼び出されません。 その名前はミニダンプ ファイル用に予約されているため、添付ファイルの名前が minidump.dmpを確認してください。 クラッシュにテキストと画像を添付する方法の例を次に示します。

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

fileName パラメーターは省略可能であり (nullできます)、App Center ポータルでのみ使用されます。 ポータルで特定のクラッシュが発生すると、添付ファイルを表示してダウンロードできます。 ファイル名を指定した場合は、ダウンロードするファイル名になります。それ以外の場合は、ファイル名が自動的に生成されます。

ES2017 の async/await 関数で動作するように getErrorAttachments コールバックを設定するには、代わりに解決された Promise を返します。 次の例では、テキストと画像を非同期的にクラッシュにアタッチします。

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

注

この機能を使用するには、クラッシュ サービス用にアプリケーションを適切に構成する必要があります。

この機能は、 JavaScript での処理クラッシュに依存します。

注

現在、サイズ制限は Android では 1.4 MB、iOS では 7 MB です。 大きな添付ファイルを送信しようとすると、エラーが発生します。

処理されたエラー

App Center では、 trackError メソッドを使用して処理された例外を使用してエラーを追跡することもできます。 アプリは必要に応じて、処理されたエラー レポートにプロパティや添付ファイルを添付して、さらにコンテキストを提供できます。

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

ブレークパッド

App Center では、React Native アプリでの Android NDK の Breakpad によるクラッシュをサポートしています。

上記の通常のセットアップ手順に従い、 MainActivity.java で OnCreate をオーバーライドし、ミニダンプ構成を追加し、Breakpad 構成を設定するネイティブ コードを呼び出します。

例:

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

実行時に App Center のクラッシュを有効または無効にする

実行時に App Center のクラッシュを有効または無効にすることができます。 無効にした場合、SDK はアプリのクラッシュ レポートを実行しません。

await Crashes.setEnabled(false);

App Center のクラッシュを再度有効にするには、同じ API を使用しますが、パラメーターとして true を渡します。

await Crashes.setEnabled(true);

状態は、アプリケーションの起動間でデバイスのストレージに保持されます。

App Center のクラッシュ機能が有効になっているかどうかを確認する

App Center Crashes 機能が有効になっているかどうかを確認することもできます。

const enabled = await Crashes.isEnabled();