App Center 충돌(React 네이티브)

중요합니다

Visual Studio App Center는 2026년 6월 30일까지 계속 지원되는 분석 및 진단 기능을 제외하고 2025년 3월 31일에 사용 중지되었습니다. 자세히 알아보기.

• 안드로이드
• iOS
• MAUI/Xamarin
• UWP
• WPF/WinForms
• React Native
• macOS
• tvOS
• 유니티

App Center 크래시는 앱이 크래시할 때마다 자동으로 크래시 로그를 생성합니다. 로그는 먼저 디바이스의 스토리지에 기록되며 사용자가 앱을 다시 시작하면 크래시 보고서가 App Center로 전송됩니다. 크래시 수집은 베타 및 라이브 앱( 즉, Google Play에 제출된 앱)에서 모두 작동합니다. 크래시 로그에는 충돌을 해결하는 데 도움이 되는 중요한 정보가 포함되어 있습니다.

애플리케이션에서 SDK를 아직 설정하지 않은 경우 시작 섹션을 따릅니다.

App Center Crashes를 사용할 때마다 파일의 상단에 다음 import 구문을 추가하십시오.

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

테스트 크래시 생성

App Center Crashes 기능은 SDK를 쉽게 테스트할 수 있도록 테스트 크래시를 생성하는 API를 제공합니다. 이 API는 테스트/베타 앱에서만 사용할 수 있으며 프로덕션 앱에서는 아무 작업도 수행하지 않습니다.

Crashes.generateTestCrash();

JavaScript 충돌도 쉽게 발생시킬 수 있습니다. 다음 줄을 코드에 추가합니다. 그러면 JavaScript 오류가 발생하고 충돌이 발생합니다.

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

팁 (조언)

이 크래시가 App Center로 전송되려면 React Native 앱을 릴리스 모드 로 컴파일해야 합니다.

비고

현재 App Center는 Android React 네이티브 앱에 대한 JavaScript 스택 추적을 수정하기 위한 원본 맵을 지원하지 않습니다.

비고

React Native는 이 시나리오에서 전체 JavaScript throw 문자열 값(예: throw 'message')이 있는 JavaScript 문을 방지하는 것이 가장 좋습니다. 대신 JavaScript 코드 throwError를 사용하세요 (예: throw Error('message')).

이전 충돌에 대한 자세한 정보 가져오기

App Center 크래시에는 앱이 충돌하는 경우에 더 많은 정보를 제공하는 두 개의 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로 설정되어 있는지 확인합니다.

이벤트 수신기의 모든 다른 콜백은 이 문서에서 하나씩 설명하지만 모든 콜백을 한 번에 정의하는 하나의 이벤트 수신기를 설정해야 합니다.

크래시가 처리되어야 하나요?

특정 크래시가 처리되어야 하는지 여부를 결정하려는 경우 이 콜백을 구현합니다. 예를 들어, 무시하고 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 Crashs에 지시하는 콜백을 노출합니다.

이렇게 하기로 선택했을 경우, 사용자의 확인을 받기 위해 다음 옵션 중 하나를 포함한 대화 상자 프롬프트를 통해 사용자의 승인을 받을 책임이 있습니다: 항상 전송, 전송, 전송하지 않음. 입력에 따라 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 Crashes'에는 앱에서 무슨 일이 일어나고 있는지 알려주는 세 가지 다른 콜백이 있습니다.

이렇게 하려면 다음 예제와 같이 코드에서 이벤트 수신기를 정의합니다.

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 마지막 하나가 우선합니다. 이 값은 이전에 설정한 Crashes.setListener수신기를 재정의합니다.

수신은 onSendingFailed4xx 코드와 같은 복구할 수 없는 오류가 발생했음을 의미합니다. 예를 들어 401 은 잘못된 것을 의미합니다 appSecret .

이 콜백은 네트워크 문제인 경우 트리거되지 않습니다. 이 경우 SDK는 계속 다시 시도하며 네트워크 연결이 중단되는 동안 다시 시도를 일시 중지합니다. 엔드포인트에 네트워크 문제나 장애가 발생하여 앱을 onBeforeSending 재시작하면, 프로세스가 다시 시작될 때 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는 선택 사항이며 오직 App Center 포털에서만 사용됩니다. 포털에서 특정 크래시 발생 시 첨부 파일을 확인하고 다운로드할 수 있습니다. 파일 이름을 지정하는 경우 다운로드할 파일 이름이 됩니다. 그렇지 않으면 파일 이름이 자동으로 생성됩니다.

ES2017 비동기/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.4MB, iOS에서는 7MB입니다. 더 큰 첨부 파일을 보내려고 하면 오류가 트리거됩니다.

처리된 오류

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 Crashes 기능을 활성화하거나 비활성화합니다.

런타임에 App Center 크래시 기능을 사용하거나 사용하지 않도록 설정할 수 있습니다. 사용하지 않도록 설정하면 SDK에서 앱에 대한 크래시 보고를 수행하지 않습니다.

await Crashes.setEnabled(false);

App Center Crashes를 다시 활성화하려면 동일한 API를 사용하되, 매개 변수로 true을(를) 전달합니다.

await Crashes.setEnabled(true);

상태는 애플리케이션 시작 시 디바이스의 스토리지에 유지됩니다.

App Center 크래시가 사용하도록 설정되어 있는지 확인

App Center Crashes가 사용 설정되어 있는지 여부를 확인할 수 있습니다.

const enabled = await Crashes.isEnabled();