Compartir por

Bloqueos de App Center (React Native)

  • Artigo

Importante

Visual Studio App Center está programado para la retirada el 31 de marzo de 2025. Aunque puede seguir usando Visual Studio App Center hasta que se retire por completo, hay varias alternativas recomendadas a las que puede considerar la posibilidad de migrar.

Obtenga más información sobre las escalas de tiempo de soporte técnico y las alternativas.

Los bloqueos de App Center generarán automáticamente un registro de bloqueos cada vez que se bloquee la aplicación. El registro se escribe primero en el almacenamiento del dispositivo y, cuando el usuario vuelve a iniciar la aplicación, el informe de bloqueo se enviará a App Center. La recopilación de bloqueos funciona tanto para aplicaciones beta como para aplicaciones activas, es decir, las enviadas a Google Play. Los registros de bloqueo contienen información valiosa para ayudarle a corregir el bloqueo.

Siga la sección Introducción si aún no ha configurado el SDK en la aplicación.

Siempre que esté usando Bloqueos de App Center, agregue la siguiente importación en la parte superior del archivo.

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

Generación de un bloqueo de prueba

App Center Crashes proporciona una API para generar un bloqueo de prueba para facilitar las pruebas del SDK. Esta API solo se puede usar en aplicaciones de prueba o beta y no hará nada en las aplicaciones de producción.

Crashes.generateTestCrash();

También es fácil generar un bloqueo de JavaScript. Agregue la siguiente línea al código, que produce un error de JavaScript y provoca un bloqueo.

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

Sugerencia

La aplicación React Native debe compilarse en modo de versión para que este bloqueo se envíe a App Center.

Nota

En este momento, App Center no admite asignaciones de origen para desminificar los seguimientos de la pila de JavaScript para aplicaciones android React Native.

Nota

Se recomienda evitar la instrucción JavaScript throw con un valor de cadena (por ejemplo, throw 'message'), ya que React Native no conserva la pila completa de JavaScript en este escenario. En su lugar, throw un JavaScript Error (por ejemplo: throw Error('message')).

Obtener más información sobre un bloqueo anterior

App Center Crashes tiene dos API que proporcionan más información en caso de que la aplicación se bloquee.

¿La aplicación recibió una advertencia de memoria baja en la sesión anterior?

En cualquier momento después de iniciar el SDK, puede comprobar si la aplicación recibió una advertencia de memoria en la sesión anterior:

const hadLowMemoryWarning = await Crashes.hasReceivedMemoryWarningInLastSession();

Nota

En algunos casos, es posible que un dispositivo con poca memoria no envíe eventos.

¿Se bloqueó la aplicación en la sesión anterior?

En cualquier momento después de iniciar el SDK, puede comprobar si la aplicación se bloqueó en el inicio anterior:

const didCrash = await Crashes.hasCrashedInLastSession();

Esto resulta útil en caso de que quiera ajustar el comportamiento o la interfaz de usuario de la aplicación después de que se haya producido un bloqueo. Algunos desarrolladores optaron por mostrar una interfaz de usuario adicional para disculparse a sus usuarios o quieren ponerse en contacto después de que se haya producido un bloqueo.

Detalles sobre el último bloqueo

Si la aplicación se bloqueó anteriormente, puede obtener detalles sobre el último bloqueo.

const crashReport = await Crashes.lastSessionCrashReport();

Personalización del uso de bloqueos de App Center

App Center Crashes proporciona devoluciones de llamada para que los desarrolladores realicen acciones adicionales antes y al enviar registros de bloqueo a App Center.

Procesamiento de bloqueos en JavaScript

Para que los Crash.setListener métodos funcionen según lo previsto, debe comprobar si la aplicación está configurada correctamente.

  1. Abra el archivo del ios/YourAppName/AppDelegate.m proyecto y compruebe que tiene [AppCenterReactNativeCrashes register]; en lugar de [AppCenterReactNativeCrashes registerWithAutomaticProcessing];.
  2. Abra el archivo del android/app/src/main/res/values/strings.xml proyecto y compruebe que appCenterCrashes_whenToSendCrashes está establecido en ASK_JAVASCRIPT.

Todas las diferentes devoluciones de llamada del agente de escucha de eventos se describen una por una en este documento, pero debe establecer un agente de escucha de eventos que defina todas las devoluciones de llamada a la vez.

¿Se debe procesar el bloqueo?

Implemente esta devolución de llamada si desea decidir si es necesario procesar o no un bloqueo determinado. Por ejemplo, podría haber un bloqueo de nivel de sistema que le gustaría omitir y que no desea enviar a 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.
});

Nota

Para usar esa característica, debe configurar la aplicación correctamente para el servicio bloqueo.

Esta característica depende del procesamiento de bloqueos en JavaScript.

Si la privacidad del usuario es importante para usted, debe recibir la confirmación del usuario antes de enviar un informe de bloqueo a App Center. El SDK expone una devolución de llamada que indica a App Center Crashes que espere la confirmación del usuario antes de enviar informes de bloqueos.

Si decide hacerlo, es responsable de obtener la confirmación del usuario, por ejemplo, a través de un mensaje de diálogo con una de las siguientes opciones: Enviar siempre, Enviar, Enviar y No enviar. En función de la entrada, indicará a App Center qué hacer y, a continuación, se controlará el bloqueo en consecuencia.

Nota

El SDK no muestra un cuadro de diálogo para esto, la aplicación debe proporcionar su propia interfaz de usuario para solicitar el consentimiento del usuario.

La siguiente devolución de llamada muestra cómo indicar al SDK que espere la confirmación del usuario antes de enviar bloqueos:

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 devuelve true, la aplicación debe obtener (con su propio código) el permiso del usuario y actualizar el SDK con el resultado mediante la SIGUIENTE 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);

Nota

Para usar esta característica, configure la aplicación correctamente para el servicio bloqueo. La característica depende de los bloqueos de procesamiento en JavaScript.

Obtener información sobre el estado de envío de un registro de bloqueo

En ocasiones, quieres conocer el estado del bloqueo de la aplicación. Un caso de uso común es que es posible que quieras mostrar la interfaz de usuario que indica a los usuarios que la aplicación está enviando un informe de bloqueo o, en caso de que la aplicación se bloquee rápidamente después del inicio, quieres ajustar el comportamiento de la aplicación para asegurarte de que se pueden enviar los registros de bloqueo. Los bloqueos de App Center tienen tres devoluciones de llamada diferentes que puedes usar en la aplicación para recibir notificaciones de lo que sucede.

Para ello, defina un agente de escucha de eventos en el código como se muestra en el ejemplo siguiente:

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

Todas las devoluciones de llamada son opcionales. No es necesario proporcionar todos los tres métodos del objeto de agente de escucha de eventos, por ejemplo, solo onBeforeSendingpuede implementar .

Nota

Para usar esa característica, debe configurar la aplicación correctamente para el servicio bloqueo.

Esta característica depende del procesamiento de bloqueos en JavaScript.

Nota

Si Crashes.setListener se llama más de una vez, el último gana; invalida los agentes de escucha establecidos previamente por Crashes.setListener.

onSendingFailed Recibir significa que se ha producido un error no recuperable, como un código 4xx. Por ejemplo, 401 significa que el error appSecret es incorrecto.

Esta devolución de llamada no se desencadena si se trata de un problema de red. En este caso, el SDK mantiene el reintento (y también detiene los reintentos mientras la conexión de red está inactiva). En caso de que tengamos problemas de red o una interrupción en el punto de conexión y reinicie la aplicación, onBeforeSending se desencadenará de nuevo después del reinicio del proceso.

Agregar datos adjuntos a un informe de bloqueo

Puede agregar datos adjuntos binarios y de texto a un informe de bloqueo. El SDK los enviará junto con el bloqueo para que pueda verlos en el portal de App Center. La siguiente devolución de llamada se invoca justo antes de enviar el bloqueo almacenado desde inicios anteriores de la aplicación. No se invocará cuando se produzca el bloqueo. Asegúrese de que el archivo adjunto no tiene nombre minidump.dmp , ya que ese nombre está reservado para los archivos minivolcados. Este es un ejemplo de cómo adjuntar texto y una imagen a un bloqueo:

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

El fileName parámetro es opcional (puede ser null) y solo se usa en el portal de App Center. Desde una aparición de bloqueo específica en el portal, puede ver los datos adjuntos y descargarlos. Si especificó un nombre de archivo, ese será el nombre de archivo que se va a descargar; de lo contrario, se generará el nombre de archivo automáticamente.

Para configurar la getErrorAttachments devolución de llamada para que funcione con las funciones asincrónicas o await de ES2017, devuelva en su lugar una promesa completada. En el ejemplo siguiente se adjunta un texto y una imagen a un bloqueo de forma asincrónica:

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

Nota

Para usar esa característica, debe configurar la aplicación correctamente para el servicio de bloqueo.

Esta característica depende de los bloqueos de procesamiento en JavaScript.

Nota

El límite de tamaño es actualmente de 1,4 MB en Android y 7 MB en iOS. Si se intenta enviar un archivo adjunto mayor, se producirá un error.

Errores controlados

App Center también permite realizar un seguimiento de los errores mediante excepciones controladas a través del trackError método . Opcionalmente, una aplicación puede adjuntar propiedades o datos adjuntos a un informe de errores controlado para proporcionar más 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);
}

Panel de interrupción

App Center admite bloqueos de Breakpad de Android NDK en una React Native aplicaciones.

Siga los pasos de configuración normales anteriores y, en MainActivity.java la invalidación OnCreate , agregue la configuración de minivolcados y llame al código nativo que configura la configuración del Panel de interrupción.

Ejemplo:

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

Habilitación o deshabilitación de bloqueos de App Center en tiempo de ejecución

Puede habilitar y deshabilitar bloqueos de App Center en tiempo de ejecución. Si la deshabilita, el SDK no hará ningún informe de bloqueos para la aplicación.

await Crashes.setEnabled(false);

Para habilitar los bloqueos de App Center de nuevo, use la misma API, pero pase true como parámetro.

await Crashes.setEnabled(true);

El estado se conserva en el almacenamiento del dispositivo en los inicios de la aplicación.

Comprobación de si los bloqueos de App Center están habilitados

También puede comprobar si los bloqueos de App Center están habilitados o no:

const enabled = await Crashes.isEnabled();