App Center のクラッシュ (React Native)
重要
Visual Studio App Center は、2025 年 3 月 31 日に廃止される予定です。 完全に廃止されるまで Visual Studio App Center を引き続き使用できますが、移行を検討できる推奨される代替手段がいくつかあります。
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 スタック トレースを未確定にするソース マップはサポートされていません。
注意
このシナリオでは完全な JavaScript throwスタックが保持されないため、文字列値 (例: throw 'message') を含む JavaScript ステートメントを避けるのがベスト プラクティスReact Native。 代わりに、 throw JavaScript 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期待どおりに動作させるには、アプリケーションが正しく構成されているかどうかをチェックする必要があります。
- プロジェクト
ios/YourAppName/AppDelegate.mの ファイルを開き、 ではなく[AppCenterReactNativeCrashes registerWithAutomaticProcessing];があることを[AppCenterReactNativeCrashes register];確認します。 - プロジェクト
android/app/src/main/res/values/strings.xmlのファイルを開き、 が にASK_JAVASCRIPT設定されていることをappCenterCrashes_whenToSendCrashes確認します。
このドキュメントでは、イベント リスナーのすべての異なるコールバックについて 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.
});
クラッシュ ログを送信するユーザーの同意を求める
ユーザーのプライバシーが重要な場合は、クラッシュ レポートを App Center に送信する前にユーザーの確認を受け取る必要があります。 SDK は、クラッシュ レポートを送信する前にユーザーの確認を待機するように App Center クラッシュに指示するコールバックを公開します。
これを選択した場合は、ユーザーの確認を取得する必要があります。たとえば、ダイアログ プロンプトで次のいずれかのオプションを使用します。 Always Send、 Send、 Don't send。 入力に基づいて、App Center のクラッシュに何をすべきかを伝え、クラッシュはそれに応じて処理されます。
注意
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 のクラッシュには、アプリで何が起こっているかを通知するために使用できる 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実装できます。
注意
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.
});
注意
現在、サイズ制限は 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 クラッシュがサポートされています。
上記の通常のセットアップ手順に従い、オーバーライドOnCreateでミニダンプ構成をMainActivity.java追加し、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 のクラッシュが有効になっているかどうかをチェックすることもできます。
const enabled = await Crashes.isEnabled();