App Center 충돌(React Native)

중요

Visual Studio App Center는 2025년 3월 31일에 사용 중지될 예정입니다. Visual Studio App Center가 완전히 사용 중지될 때까지 계속 사용할 수 있지만 마이그레이션을 고려할 수 있는 몇 가지 권장 대안이 있습니다.

지원 타임라인 및 대안에 대해 자세히 알아보세요.

• Android
• iOS
• MAUI/Xamarin
• UWP
• WPF/WinForms
• React Native
• macOS
• tvOS
• Unity
• Cordova

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 Crashs는 SDK를 쉽게 테스트하기 위한 테스트 크래시를 생성하는 API를 제공합니다. 이 API는 테스트/베타 앱에서만 사용할 수 있으며 프로덕션 앱에서는 아무 작업도 수행하지 않습니다.

Crashes.generateTestCrash();

JavaScript 크래시도 쉽게 생성할 수 있습니다. JavaScript 오류를 throw하고 충돌을 일으키는 코드에 다음 줄을 추가합니다.

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

팁

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

참고

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

참고

이 시나리오에서는 React Native 전체 JavaScript 스택을 유지하지 않으므로 문자열 값(예: throw 'message')이 있는 JavaScript throw 문을 사용하지 않는 것이 좋습니다. 대신 JavaScript throwError (예: throw Error('message')).

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

App Center Crashs에는 앱이 충돌하는 경우 더 많은 정보를 제공하는 두 개의 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.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 다시 시작하는 경우 프로세스가 다시 시작되면 가 다시 트리거됩니다.

크래시 보고서에 첨부 파일 추가

크래시 보고서에 이진 및 텍스트 첨부 파일을 추가할 수 있습니다. 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 비동기/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의 중단 패드 충돌을 지원합니다.

위의 일반적인 설정 단계를 수행하고 재정 OnCreate 의에서 MainActivity.java 미니덤프 구성을 추가하고 네이티브 코드에 를 호출하여 중단 패드 구성을 설정합니다.

예제:

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