Défaillances d'App Center (React Native)

App Center Crashes génèrera automatiquement un journal des crashs chaque fois que votre application se bloque. Le journal est d’abord écrit dans le stockage de l’appareil et lorsque l’utilisateur redémarre l’application, le rapport d’incident est envoyé à App Center. La collecte de plantages fonctionne à la fois pour les applications bêta et en direct, c’est-à-dire celles soumises à Google Play. Les journaux de crash contiennent des informations précieuses pour vous aider à résoudre le crash.

Suivez la section Prise en main si vous n’avez pas encore configuré le Kit de développement logiciel (SDK) dans votre application.

Où que vous utilisiez App Center Crashes, ajoutez l'instruction d'importation suivante en haut du fichier.

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

Générer un plantage de test

App Center Crash vous fournit une API pour générer un plantage de test pour faciliter le test du Kit de développement logiciel (SDK). Cette API ne peut être utilisée que dans les applications de test/bêta et ne fera rien dans les applications de production.

Crashes.generateTestCrash();

Il est également facile de générer un blocage JavaScript. Ajoutez la ligne suivante à votre code, qui lance une erreur JavaScript et provoque un plantage.

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

Obtenir plus d’informations sur un incident précédent

App Center Crash a deux API qui vous donnent plus d’informations au cas où votre application s’est écrasée.

L’application a-t-elle reçu un avertissement de mémoire faible dans la session précédente ?

À tout moment après avoir démarré le Kit de développement logiciel (SDK), vous pouvez vérifier si l’application a reçu un avertissement de mémoire dans la session précédente :

const hadLowMemoryWarning = await Crashes.hasReceivedMemoryWarningInLastSession();

L’application s’est-elle bloquée dans la session précédente ?

À tout moment après avoir démarré le Kit de développement logiciel (SDK), vous pouvez vérifier si l’application s’est bloquée lors du lancement précédent :

const didCrash = await Crashes.hasCrashedInLastSession();

Cela est pratique si vous souhaitez ajuster le comportement ou l’interface utilisateur de votre application une fois qu’un incident s’est produit. Certains développeurs ont choisi d’afficher une interface utilisateur supplémentaire pour s’excuser auprès de leurs utilisateurs ou de vouloir entrer en contact après un incident.

Détails sur le dernier incident

Si votre application s’est écrasée précédemment, vous pouvez obtenir des détails sur le dernier incident.

const crashReport = await Crashes.lastSessionCrashReport();

Personnalisez votre utilisation des pannes d’App Center

App Center Crash fournit des rappels aux développeurs pour effectuer des actions supplémentaires avant et lors de l’envoi de journaux d’incident à App Center.

Traitement des blocages dans JavaScript

Pour que vos Crash.setListener méthodes fonctionnent comme prévu, vous devez vérifier si votre application est configurée correctement.

1. Ouvrez le fichier du projet ios/YourAppName/AppDelegate.m et vérifiez que vous ayez [AppCenterReactNativeCrashes register]; au lieu de [AppCenterReactNativeCrashes registerWithAutomaticProcessing];.
2. Ouvrez le fichier de android/app/src/main/res/values/strings.xml du projet et vérifiez que appCenterCrashes_whenToSendCrashes est défini sur ASK_JAVASCRIPT.

Tous les rappels différents de l’écouteur d’événements sont abordés un par un dans ce document, mais vous devez définir un écouteur d’événement qui définit tous les rappels à la fois.

La panne doit-elle être traitée ?

Implémentez ce rappel si vous souhaitez décider si un incident particulier doit être traité ou non. Par exemple, il peut y avoir un blocage au niveau du système que vous souhaitez ignorer et que vous ne souhaitez pas envoyer à 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.
});

Demander le consentement de l’utilisateur pour envoyer un journal d’incident

Si la confidentialité de l’utilisateur est importante pour vous, vous devez obtenir la confirmation de l’utilisateur avant d’envoyer un rapport d’incident à App Center. Le Kit de développement logiciel (SDK) expose une fonction de rappel qui indique à App Center Crashes d'attendre la confirmation de l’utilisateur avant d’envoyer tout rapport d’incident.

Si vous avez choisi de le faire, vous êtes responsable de l’obtention de la confirmation de l’utilisateur, par exemple via une invite de dialogue avec l’une des options suivantes : Toujours envoyer, envoyer et ne pas envoyer. En fonction des données fournies, vous allez indiquer à App Center Crashes ce qu’il doit faire et le plantage sera ensuite géré en conséquence.

Le callback suivant montre comment indiquer à l'SDK d'attendre la confirmation de l'utilisateur avant d'envoyer des pannes :

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

Si vous retournez true, votre application doit obtenir (à l’aide de votre propre code) l’autorisation de l’utilisateur et mettre à jour le Kit de développement logiciel (SDK) avec le résultat à l’aide de l’API suivante :

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

Obtenir des informations sur l’état d’envoi d’un journal d’incident

Il arrive que vous souhaitiez connaître l'état du crash de votre application. Un cas d’usage courant est que vous souhaiterez peut-être afficher l’interface utilisateur qui indique aux utilisateurs que votre application envoie un rapport d’incident ou, si votre application se bloque rapidement après le lancement, vous souhaitez ajuster le comportement de l’application pour vous assurer que les journaux d’incident peuvent être soumis. App Center Crash a trois rappels différents que vous pouvez utiliser dans votre application pour être informé de ce qui se passe.

Pour ce faire, définissez un écouteur d’événements dans votre code, comme illustré dans l’exemple suivant :

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

Tous les rappels sont facultatifs. Vous n’avez pas besoin de fournir toutes les 3 méthodes dans l’objet d’écouteur d’événements, par exemple, vous ne pouvez implémenter que onBeforeSending.

Recevoir onSendingFailed signifie qu'une erreur non récupérable, telle qu'un code 4xx, s'est produite. Par exemple, 401 signifie que le appSecret est incorrect.

Ce rappel n’est pas déclenché s’il s’agit d’un problème réseau. Dans ce cas, le Kit de développement logiciel (SDK) continue de réessayer (et suspend également les nouvelles tentatives pendant que la connexion réseau est en panne). Si nous avons des problèmes réseau ou une panne sur le point de terminaison, et que vous redémarrez l’application, onBeforeSending elle est déclenchée à nouveau après le redémarrage du processus.

Ajouter des pièces jointes à un rapport d’incident

Vous pouvez ajouter des pièces jointes binaires et textuelles à un rapport de plantage. Le SDK les enverra avec le rapport de plantage afin que vous puissiez les voir dans le portail App Center. La fonction de rappel suivante est appelée juste avant d'envoyer le plantage stocké à partir des lancements précédents de l’application. Il ne sera pas appelé lorsque la panne se produit. Vérifiez que le fichier de pièce jointe n’est pas nommé minidump.dmp car ce nom est réservé aux fichiers minidump. Voici un exemple d’attachement de texte et d’image à un incident :

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

Le fileName paramètre est facultatif (peut être null) et est utilisé uniquement dans le portail App Center. À partir d’une occurrence d’incident spécifique dans le portail, vous pouvez voir les pièces jointes et les télécharger. Si vous avez spécifié un nom de fichier, il s’agit du nom de fichier à télécharger, sinon le nom de fichier est généré pour vous.

Pour configurer le getErrorAttachments rappel pour qu’il fonctionne avec les fonctions asynchrones/await ES2017, retournez plutôt une promesse remplie. L’exemple suivant attache un texte et une image à un blocage de manière asynchrone :

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

Erreurs gérées

App Center vous permet également de suivre les erreurs à l’aide d’exceptions gérées via trackError la méthode. Une application peut éventuellement attacher des propriétés ou/et des pièces jointes à un rapport d’erreur géré pour fournir un contexte supplémentaire.

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

Boîtier d’arrêt

App Center prend en charge les crashs Breakpad dans l'Android NDK pour les applications React Native.

Suivez les étapes de configuration normales ci-dessus, puis, dans votre MainActivity.java remplacez OnCreate, ajoutez la configuration minidump et appelez votre code natif qui configure votre configuration Breakpad.

Exemple:

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

Activer ou désactiver les crashs d’App Center au moment de l'exécution

Vous pouvez activer et désactiver les plantages d'App Center lors de l’exécution. Si vous le désactivez, le Kit de développement logiciel (SDK) ne produit aucun rapport d’incident pour l’application.

await Crashes.setEnabled(false);

Pour réactiver App Center Plantages, utilisez la même API, mais passez true en tant que paramètre.

await Crashes.setEnabled(true);

L’état est conservé dans le stockage de l’appareil dans les lancements d’application.

Vérifier si les blocages d’App Center sont activés

Vous pouvez également vérifier si les crashs d'App Center sont activé ou non.

const enabled = await Crashes.isEnabled();