Partilhar via


Falhas no App Center (React Native)

Importante

O Visual Studio App Center foi desativado em 31 de março de 2025, exceto para os recursos de Análise e Diagnóstico, que continuarão a ter suporte até 30 de junho de 2026. Mais informações.

As falhas do App Center gerarão automaticamente um registro de falhas sempre que seu aplicativo falhar. O log é gravado primeiro no armazenamento do dispositivo e, quando o usuário iniciar o aplicativo novamente, o relatório de falhas será enviado para o App Center. A coleta de falhas funciona tanto para aplicativos beta quanto para aplicativos ao vivo, ou seja, aqueles enviados para o Google Play. Os registos de falhas contêm informações valiosas para ajudar a corrigir a falha.

Siga a seção Introdução se ainda não configurou o SDK em seu aplicativo.

Onde quer que esteja a utilizar o App Center Crashes, adicione o seguinte import na parte superior do arquivo.

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

Gerar uma falha de teste

O App Center Crashes fornece uma API para gerar uma falha de teste para facilitar o teste do SDK. Essa API só pode ser usada em aplicativos de teste/beta e não fará nada em aplicativos de produção.

Crashes.generateTestCrash();

Também é fácil gerar uma falha de JavaScript. Adicione a seguinte linha ao seu código, que gera um erro JavaScript e causa uma falha.

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

Sugestão

Seu aplicativo React Native precisa ser compilado no modo de lançamento para que essa falha seja enviada ao App Center.

Observação

No momento, o App Center não suporta mapas de origem para desminificar rastros de pilha de JavaScript em aplicações React Native para Android.

Observação

É uma prática recomendada evitar a instrução JavaScript throw com um valor de cadeia de caracteres (por exemplo: throw 'message'), pois o React Native não preserva a pilha JavaScript completa neste cenário. Em vez disso, throw um JavaScript Error (por exemplo: throw Error('message')).

Obter mais informações sobre uma falha anterior

O App Center Crashes tem duas APIs que fornecem mais informações caso seu aplicativo tenha falhado.

O aplicativo recebeu um aviso de falta de memória na sessão anterior?

A qualquer momento depois de iniciar o SDK, você pode verificar se o aplicativo recebeu um aviso de memória na sessão anterior:

const hadLowMemoryWarning = await Crashes.hasReceivedMemoryWarningInLastSession();

Observação

Em alguns casos, um dispositivo com pouca memória pode não enviar eventos.

O aplicativo travou na sessão anterior?

A qualquer momento depois de iniciar o SDK, você pode verificar se o aplicativo falhou na inicialização anterior:

const didCrash = await Crashes.hasCrashedInLastSession();

Isso é útil caso você queira ajustar o comportamento ou a interface do usuário do seu aplicativo após a ocorrência de uma falha. Alguns desenvolvedores optaram por mostrar uma interface do usuário adicional para pedir desculpas aos seus utilizadores, ou querem uma maneira de entrar em contacto após a ocorrência de uma falha.

Detalhes sobre o último acidente

Se o seu aplicativo travou anteriormente, você pode obter detalhes sobre a última falha.

const crashReport = await Crashes.lastSessionCrashReport();

Personalize o uso do App Center Crashes

O App Center Crashes fornece callbacks para que os desenvolvedores executem ações adicionais antes e quando enviam logs de falhas para o App Center.

Falhas de processamento em JavaScript

Para que seus Crash.setListener métodos funcionem conforme o esperado, você precisa verificar se seu aplicativo foi configurado corretamente.

  1. Abra o arquivo do ios/YourAppName/AppDelegate.m projeto e verifique se você tem [AppCenterReactNativeCrashes register]; em vez de [AppCenterReactNativeCrashes registerWithAutomaticProcessing];.
  2. Abra o arquivo do android/app/src/main/res/values/strings.xml projeto e verifique se appCenterCrashes_whenToSendCrashes está definido como ASK_JAVASCRIPT.

Todos os diferentes retornos de chamada do ouvinte de eventos são discutidos um a um neste documento, mas você precisa definir um ouvinte de eventos que defina todos os retornos de chamada de uma só vez.

O acidente deve ser processado?

Implemente este callback se quiser decidir se um crash específico precisa ser processado ou não. Por exemplo, pode haver uma falha no nível do sistema que você gostaria de ignorar e que não deseja enviar para o 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.
});

Observação

Para usar essa funcionalidade, precisa-se configurar a sua aplicação corretamente para o serviço Crash.

Esse recurso depende de falhas de processamento em JavaScript.

Se a privacidade do usuário for importante para você, você deve obter a confirmação do usuário antes de enviar um relatório de falhas para o App Center. O SDK expõe um callback que indica ao App Center Crashes para aguardar a confirmação do utilizador antes de enviar qualquer relatório de falhas.

Se você optar por fazê-lo, você é responsável por obter a confirmação do usuário, por exemplo, através de um prompt de diálogo com uma das seguintes opções: Sempre enviar, Enviar e Não enviar. Com base na entrada, você informará ao App Center Crashes o que fazer e a falha será tratada de acordo.

Observação

O SDK não exibe uma caixa de diálogo para isso, o aplicativo deve fornecer sua própria interface do usuário para solicitar o consentimento do usuário.

O seguinte callback mostra como instruir o SDK a esperar pela confirmação do usuário antes de enviar crashes:

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

Se você retornar true, seu aplicativo deverá obter (usando seu próprio código) a permissão do usuário e atualizar o SDK com o resultado usando a seguinte API:

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

Observação

Para usar esse recurso, configure seu aplicativo corretamente para o serviço de falha. O recurso depende de falhas de processamento em JavaScript.

Obter informações sobre o estado de envio de um registo de falhas

Às vezes, você quer saber o status da falha do seu aplicativo. Um caso de uso comum é que você pode querer mostrar a interface do usuário que informa aos usuários que seu aplicativo está enviando um relatório de falhas ou, caso seu aplicativo esteja falhando rapidamente após a inicialização, você deseja ajustar o comportamento do aplicativo para garantir que os logs de falhas possam ser enviados. O App Center Crashes tem três retornos de chamada diferentes que pode usar na sua aplicação para ser notificado do que está a acontecer.

Para fazer isso, defina um ouvinte de eventos em seu código, conforme mostrado no exemplo a seguir:

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

Todos os retornos de chamada são opcionais. Você não precisa fornecer todos os 3 métodos no objeto ouvinte de eventos, por exemplo, você pode implementar apenas onBeforeSending.

Observação

Para usar essa funcionalidade, precisa-se configurar a sua aplicação corretamente para o serviço Crash.

Esse recurso depende de falhas de processamento em JavaScript.

Observação

Se Crashes.setListener for invocado mais de uma vez, o último prevalece, anulando os ouvintes anteriormente definidos por Crashes.setListener.

Receber onSendingFailed significa que ocorreu um erro não recuperável, como ocorreu um código 4xx . Por exemplo, 401 significa que o appSecret está errado.

Esse retorno de chamada não é acionado se for um problema de rede. Nesse caso, o SDK continua tentando novamente (e também pausa novas tentativas enquanto a conexão de rede está inativa). No caso de termos problemas de rede ou uma interrupção no ponto de extremidade, e você reiniciar o aplicativo, onBeforeSending é acionado novamente após a reinicialização do processo.

Adicionar anexos a um relatório de falhas

Você pode adicionar anexos binários e de texto a um relatório de falhas. O SDK irá enviá-los juntamente com o crash para que os possa ver no portal do App Center. O seguinte callback é invocado antes de enviar o crash armazenado de lançamentos anteriores do aplicativo. Ele não será invocado quando a falha acontecer. Certifique-se de que o arquivo anexo não é nomeado minidump.dmp , pois esse nome está reservado para arquivos minidump. Aqui está um exemplo de como anexar texto e uma imagem a uma falha:

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

O fileName parâmetro é opcional (pode ser null) e é usado apenas no portal do App Center. A partir de uma ocorrência de falha específica no portal, você pode ver anexos e baixá-los. Se você especificou um nome de arquivo, esse será o nome do arquivo para download, caso contrário, o nome do arquivo será gerado para você.

Para configurar o retorno de chamada para trabalhar com as getErrorAttachments funções assíncronas/aguardadas do ES2017, retorne uma Promessa cumprida. O exemplo a seguir liga um texto e uma imagem a um erro de forma assíncrona.

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

Observação

Para usar essa funcionalidade, precisa-se configurar a sua aplicação corretamente para o serviço Crash.

Esse recurso depende de falhas de processamento em JavaScript.

Observação

O limite de tamanho é atualmente de 1,4 MB no Android e 7 MB no iOS. A tentativa de enviar um anexo maior desencadeará um erro.

Erros tratados

O App Center também permite que você rastreie erros usando exceções manipuladas via trackError método. Opcionalmente, um aplicativo pode anexar propriedades e/ou anexos a um relatório de erros manipulado para fornecer mais contexto.

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

O App Center suporta falhas do Breakpad do Android NDK em aplicativos React Native.

Siga as etapas normais de configuração acima e, em sua MainActivity.java substituição OnCreate , adicione a configuração de minidump e chame seu código nativo que configura sua configuração do Breakpad.

Exemplo:

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

Ativar ou desativar falhas do App Center em tempo de execução

Você pode habilitar e desabilitar a funcionalidade Crashes do App Center em tempo de execução. Se você desativá-lo, o SDK não fará nenhum relatório de falhas para o aplicativo.

await Crashes.setEnabled(false);

Para habilitar as falhas do App Center novamente, use a mesma API, mas passe true como parâmetro.

await Crashes.setEnabled(true);

O estado é persistido no armazenamento do dispositivo em todas as inicializações de aplicativos.

Verifique se o App Center Crashes está ativado

Você também pode verificar se o App Center Crashes está ativado ou não:

const enabled = await Crashes.isEnabled();