React Native Crash Reporting and Error Tracking

Documentos > Error Tracking > Error Tracking en el frontend > Mobile Crash Reporting > React Native Crash Reporting and Error Tracking

This page is not yet available in Spanish. We are working on its translation.
If you have any questions or feedback about our current translation project, feel free to reach out to us!

Información general

Habilita la notificación de fallos y el seguimiento de errores React Native para obtener informes completos de fallos y tendencias de errores mediante Real User Monitoring. Con esta función, puedes acceder a:

Dashboards y atributos de fallos agregados React Native
Informes de fallos React Native simbolizados (JavaScript y iOS o Android nativos)
Análisis de tendencias con el seguimiento de errores React Native

Para simbolizar tus stack traces, carga manualmente tus mapas fuente y símbolos de depuración nativos en Datadog.

Tus informes de fallos aparecen en Seguimiento de errores.

Configuración

Si aún no has configurado el SDK para React Native, sigue las instrucciones de configuración en la aplicación o consulta la documentación de configuración de React Native.

Añadir la notificación de fallos

Actualiza tu fragmento de inicialización para habilitar la notificación de fallos nativo JavaScript:

const config = new DdSdkReactNativeConfiguration(
    '<CLIENT_TOKEN>',
    '<ENVIRONMENT_NAME>',
    '<APPLICATION_ID>',
    true,
    true,
    true // enable JavaScript crash reporting
);
config.nativeCrashReportEnabled = true; // enable native crash reporting

Obtener trazas de stack tecnológico desofuscadas

Los símbolos de depuración se utilizan para desenmascarar stack traces, lo que ayuda a depurar errores. Con un ID de compilación único que se genera, Datadog hace coincidir automáticamente los stack traces correctos con los símbolos de depuración correspondientes. Esto garantiza que, independientemente de cuándo se hayan cargado los símbolos de depuración (ya sea durante las compilaciones de preproducción o de producción), se disponga de la información correcta para un control de calidad eficaz al revisar los fallos y errores notificados en Datadog.

Para las aplicaciones de React Native, la coincidencia de los stack traces y los mapas fuente se basa en una combinación de los campos service, version, bundle_name y platform. De todos los mapas fuente que coinciden con estos campos, Datadog utiliza el que tiene el valor build_number más alto.

Para reducir el tamaño de tu aplicación, su código se minifica cuando se compila para su lanzamiento. Para vincular los errores a tu código real, debes cargar los siguientes archivos de simbolización:

Mapas fuente de JavaScript para tu paquete iOS JavaScript
Mapas fuente de JavaScript para tu paquete Android JavaScript
dSYM para tu código iOS nativo
Archivos de asignación Proguard, si has habilitado la ofuscación de código para tu código nativo de Android.

Para configurar el proyecto para que envíe automáticamente los archivos de simbolización, ejecuta npx datadog-react-native-wizard.

Consulta las opciones en la documentación oficial del asistente.

Opciones de transmisión para tus cargas

Uso del script `datadog-sourcemaps.gradle`

Para especificar un nombre de servicio diferente, añade el siguiente código a tu archivo android/app/build.gradle, antes de la línea apply from: "../../node_modules/@datadog/mobile-react-native/datadog-sourcemaps.gradle":

project.ext.datadog = [
    serviceName: "com.my.custom.service"
]

Mediante el comando `datadog-ci react-native xcode`

Las opciones del comando datadog-ci react-native xcode están disponibles en la página de documentación del comando.

Especificación de una versión personalizada

Utiliza la variable de entorno DATADOG_RELEASE_VERSION para especificar una versión diferente para tus mapas fuente, a partir de @datadog/mobile-react-native@2.3.5 y @datadog/datadog-ci@v2.37.0.

Cuando el SDK se inicializa con un sufijo de versión, debes anular manualmente la versión de lanzamiento para que el mapa fuente y las versiones de compilación coincidan.

Lista de los mapas fuente cargados

Consulta la página Símbolos de depuración de RUM para ver todos los símbolos cargados.

Limitaciones

El tamaño de los mapas fuente y los archivos de mapas está limitado a 500 MB cada uno, mientras que los archivos dSYM pueden llegar a 2 GB cada uno.

Para calcular el tamaño de los mapas de origen y del paquete, ejecuta el siguiente comando:

npx react-native bundle \
  --dev false \
  --platform ios \
  --entry-file index.js \
  --bundle-output build/main.jsbundle \
  --sourcemap-output build/main.jsbundle.map

sourcemapsize=$(wc -c build/main.jsbundle.map | awk '{print $1}')
bundlesize=$(wc -c build/main.jsbundle | awk '{print $1}')
payloadsize=$(($sourcemapsize + $bundlesize))

echo "Size of source maps and bundle is $(($payloadsize / 1000000))MB"

Si aún no existe un directorio build, créalo primero ejecutando mkdir build y, a continuación, ejecuta el comando anterior.

Para probar tu implementación

Para verificar la configuración de las notificaciones de fallos y el seguimiento de errores React Native, necesitas generar un error en tu aplicación y confirmar que el error aparece en Datadog.

Para probar tu implementación

Ejecuta tu aplicación en un simulador, emulador o dispositivo real. Si estás ejecutando en iOS, asegúrate de que el depurador no está conectado. De lo contrario, Xcode captura el fallo antes de que lo haga el SDK de Datadog.

Ejecuta código que contenga un error o fallo. Por ejemplo:

const throwError = () => {
 throw new Error("My Error")
}

Para los informes de error ofuscados que no provocan un fallo, puedes verificar la simbolización y la desofuscación en Rastreo de errores.
Para los fallos, después de que se produzcan, reinicia tu aplicación y espera a que el SDK de React Native cargue el informe del fallo en Rastreo de errores.

Para asegurarte de que tus mapas fuente se envían y enlazan correctamente con tu aplicación, también puedes generar fallos con el paquete react-native-performance-limiter.

Instálalo con yarn o npm y luego vuelve a instalar tus pods:

yarn add react-native-performance-limiter # or npm install react-native-performance-limiter
(cd ios && pod install)

Genera un fallo en el subproceso de JavaScript desde tu aplicación:

import { crashJavascriptThread } from 'react-native-performance-limiter';

const crashApp = () => {
    crashJavascriptThread('custom error message');
};

Vuelve a compilar tu aplicación para la versión para enviar los nuevos mapas fuente, desencadenar el fallo y esperar en la página Error Tracking que aparezca el error.

Para probar la carga de tus archivos dSYM y de asignación Proguard, genera un fallo en el subproceso principal nativo:

import { crashNativeMainThread } from 'react-native-performance-limiter';

const crashApp = () => {
    crashNativeMainThread('custom error message');
};

Opciones de configuración adicionales

Alternativas a `datadog-react-native-wizard` para la simbolización

Si el uso de datadog-react-native-wizard no tuvo éxito o si no quieres cargar tus archivos de simbolización automáticamente en cada versión, sigue los siguientes pasos para simbolizar los informes de fallos.

Carga de mapas de origen JavaScript en compilaciones iOS

En primer lugar, debes instalar @datadog/datadog-ci como dependencia de desarrollo en tu proyecto:

yarn add -D @datadog/datadog-ci
# or
npm install --save-dev @datadog/datadog-ci

Automáticamente en cada versión (React Native v0.69 o posterior)

Cargar manualmente tus mapas de origen en cada compilación de versión lleva tiempo y puede generar errores. Datadog recomienda enviar automáticamente los mapas de origen cada vez que ejecutes una compilación de versión.

Crea un archivo de script llamado datadog-sourcemaps.sh en la raíz de tu proyecto, que contenga lo siguiente:

#!/bin/sh
set -e

DATADOG_XCODE="../node_modules/.bin/datadog-ci react-native xcode"

/bin/sh -c "$DATADOG_XCODE"

Este script ejecuta un comando que se encarga de cargar los mapas de origen con todos los parámetros correctos. Para obtener más información, consulta la documentación de datadog-ci.

Abre tu .xcworkspace con Xcode, luego selecciona tu proyecto > Fases de la compilación > Empaquetar código e imágenes nativos de React Native. Edita el script para que tenga el siguiente aspecto:

set -e
WITH_ENVIRONMENT="../node_modules/react-native/scripts/xcode/with-environment.sh"
# Añade estas dos líneas
REACT_NATIVE_XCODE="./datadog-sourcemaps.sh"
export SOURCEMAP_FILE=$DERIVED_FILE_DIR/main.jsbundle.map

# Edita la siguiente línea
/bin/sh -c "$WITH_ENVIRONMENT $REACT_NATIVE_XCODE"

Para que la carga funcione, debes proporcionar tu clave de API Datadog. Si utilizas una herramienta de línea de comandos o un servicio externo, puedes especificarlos como una variable de entorno DATADOG_API_KEY. Si ejecutas la compilación desde Xcode, crea un archivo datadog-ci.json en la raíz de tu proyecto que contenga la clave de API:

{
    "apiKey": "<YOUR_DATADOG_API_KEY>"
}

También puedes especificar el sitio Datadog (como datadoghq.eu) como una variable de entorno DATADOG_SITE o como una clave datadogSite, en tu archivo datadog-ci.json.

Automáticamente en cada versión (React Native anterior a v0.69)

set -e

export NODE_BINARY=node
export SOURCEMAP_FILE=$DERIVED_FILE_DIR/main.jsbundle.map
../node_modules/.bin/datadog-ci react-native xcode

Este script ejecuta un comando que se encarga de cargar los mapas de origen con todos los parámetros correctos. Para obtener más información, consulta la documentación de datadog-ci.

{
    "apiKey": "<YOUR_DATADOG_API_KEY>"
}

También puedes especificar el sitio Datadog (como datadoghq.eu) como una variable de entorno DATADOG_SITE o como una clave datadogSite, en tu archivo datadog-ci.json.

Manualmente en cada compilación

Para generar un mapa de origen, es necesario editar la fase de compilación de Xcode “Empaquetar código e imágenes de React Native”.

Abre el archivo ios/YourAppName.xcworkspace en Xcode.
En el panel izquierdo, selecciona el icono “Archivo” y haz clic en tu proyecto.
En el panel central, selecciona “Fases de la compilación” en la barra superior.

Cambia el script añadiendo esto después de la línea set -e:

set -e
export SOURCEMAP_FILE=./build/main.jsbundle.map # <- añade esta línea para generar mapas de origen
# no realices ningún cambio al resto del script

En adelante, podrás encontrar los mapas de origen de tu paquete en cada compilación de iOS.

Para encontrar la ruta a tu archivo de paquete desde Xcode, despliega el Report Navigator en Xcode y filtra por BUNDLE_FILE para su localización.

La localización habitual es ~/Library/Developer/Xcode/DerivedData/YourAppName-verylonghash/Build/Intermediates.noindex/ArchiveIntermediates/YourAppName/BuildProductsPath/Release-iphoneos/main.jsbundle, donde YourAppName es el nombre de tu aplicación y verylonghash es un hash de 28 letras.

Para cargar los mapas de origen, ejecuta esto desde tu proyecto React Native:

export DATADOG_API_KEY= # fill with your API key
export SERVICE=com.myapp # replace by your service name
export VERSION=1.0.0 # replace by the version of your app in Xcode
export BUILD=100 # replace by the build of your app in Xcode
export BUNDLE_PATH= # fill with your bundle path

yarn datadog-ci react-native upload --platform ios --service $SERVICE --bundle $BUNDLE_PATH --sourcemap ./build/main.jsbundle.map --release-version $VERSION --build-version $BUILD

Manualmente en cada compilación (con Hermes para React Native anterior a v0.71)

Existe un error en las versiones de React Native hasta la v0.71 que genera un mapa de origen incorrecto al utilizar Hermes.

Para solucionarlo, es necesario añadir más líneas al final de la fase de compilación para generar un archivo de mapa de origen correcto.

Edita tu fase de compilación de la siguiente forma:

set -e
export SOURCEMAP_FILE=./build/main.jsbundle.map # <- añade esta línea para generar mapas de origen
# Para React Native v0.70, debes definir USE_HERMES como verdadero para que se generen mapas de origen
export USE_HERMES=true

# no realices ningún cambio al resto del script

# añade estas líneas para componer los mapas de origen del empaquetador y el compilador en un único archivo
REACT_NATIVE_DIR=../node_modules/react-native

if [ -f "$REACT_NATIVE_DIR/scripts/find-node-for-xcode.sh" ]; then
    source "$REACT_NATIVE_DIR/scripts/find-node-for-xcode.sh"
else
    # Antes de RN v0.70, el script se llamaba find-node.sh
    source "$REACT_NATIVE_DIR/scripts/find-node.sh"
fi
source "$REACT_NATIVE_DIR/scripts/node-binary.sh"
"$NODE_BINARY" "$REACT_NATIVE_DIR/scripts/compose-source-maps.js" "$CONFIGURATION_BUILD_DIR/main.jsbundle.map" "$CONFIGURATION_BUILD_DIR/$UNLOCALIZED_RESOURCES_FOLDER_PATH/main.jsbundle.map" -o "../$SOURCEMAP_FILE"

Para cargar el mapa de origen, ejecuta esto desde la raíz de tu proyecto React Native:

export DATADOG_API_KEY= # fill with your API key
export SERVICE=com.myapp # replace by your service name
export VERSION=1.0.0 # replace by the version of your app in Xcode
export BUILD=100 # replace by the build of your app in Xcode
export BUNDLE_PATH= # fill with your bundle path

yarn datadog-ci react-native upload --platform ios --service $SERVICE --bundle $BUNDLE_PATH --sourcemap ./build/main.jsbundle.map --release-version $VERSION --build-version $BUILD

Carga de mapas de origen JavaScript en compilaciones Android

Automáticamente en cada versión (React Native v0.71 o posterior)

En tu archivo android/app/build.gradle, añade lo siguiente después de la línea apply plugin: "com.facebook.react":

apply from: "../../node_modules/@datadog/mobile-react-native/datadog-sourcemaps.gradle"

Para que la carga funcione, debes proporcionar tu clave de API Datadog. Puedes especificarla como una variable de entorno DATADOG_API_KEY o crear un archivo datadog-ci.json en la raíz de tu proyecto que contenga la clave de API:

{
    "apiKey": "<YOUR_DATADOG_API_KEY>"
}

También puedes especificar el sitio Datadog (como datadoghq.eu) como una variable de entorno DATADOG_SITE o como una clave datadogSite, en tu archivo datadog-ci.json.

Automáticamente en cada versión (React Native v0.71 o anterior)

En tu archivo android/app/build.gradle, añade lo siguiente después de la línea apply from: "../../node_modules/react-native/react.gradle":

apply from: "../../node_modules/@datadog/mobile-react-native/datadog-sourcemaps.gradle"

{
    "apiKey": "<YOUR_DATADOG_API_KEY>"
}

También puedes especificar el sitio Datadog (como datadoghq.eu) como una variable de entorno DATADOG_SITE o como una clave datadogSite, en tu archivo datadog-ci.json.

Manualmente en cada compilación

En Android, el archivo de mapas de origen se encuentra en android/app/build/generated/sourcemaps/react/release/index.android.bundle.map. La localización del archivo del paquete depende de tus versiones de React Native (RN) y Android Gradle Plugin (AGP):

RN v0,71 o posterior y AGP v7.4.0 o posterior: android/app/build/generated/assets/createBundleReleaseJsAndAssets/index.android.bundle
RN v0,71 o posterior y AGP v7.4.0 o anterior: android/app/build/ASSETS/createBundleReleaseJsAndAssets/index.android.bundle
RN v0,7 o anterior1: android/app/build/generated/assets/react/release/index.android.bundle

La versión de Android Gradle Plugin se especifica en el archivo android/build.gradle bajo com.android.tools.build:gradle, por ejemplo: classpath("com.android.tools.build:gradle:7.3.1").

Si tu aplicación tiene variantes más completas, sustituye release por el nombre de tu variante en las rutas. Si especificaste un bundleAssetName en tu configuración de React en android/app/build.gradle, sustituye index.android.bundle por su valor.

Después de ejecutar tu compilación, carga tu mapa de origen ejecutando esto desde la raíz de tu proyecto React Native:

export DATADOG_API_KEY= # rellena con tu clave de API
export SERVICE=com.myapp # sustituye por tu nombre de servicio 
export VERSION=1.0.0 # sustituye por el nombre de la versión de android/app/build.gradle
export BUILD=100 # sustituye por el código de la versión de android/app/build.gradle
export BUNDLE_PATH=android/app/build/generated/assets/react/release/index.android.bundle
export SOURCEMAP_PATH=android/app/build/generated/sourcemaps/react/release/index.android.bundle.map

yarn datadog-ci react-native upload --platform android --service $SERVICE --bundle $BUNDLE_PATH --sourcemap $SOURCEMAP_PATH --release-version $VERSION --build-version $BUILD

Carga de archivos dSYM iOS

Manualmente en cada compilación

Para obtener más información, consulta la documentación sobre notificación de fallos y seguimiento de errores de iOS.

Carga de archivos de asignación Android Proguard

En primer lugar, asegúrate de que la minificación Proguard está habilitada en tu proyecto. Por defecto, no está habilitada en los proyectos React Native.

Para obtener más información, consulta la documentación de Proguard React Native.

Si aún no sabes si la configuración ha sido la correcta, puedes comprobar si la ejecución de (cd android && ./gradlew tasks --all) | grep minifyReleaseWithR8 devuelve algo. Si es así, la minificación está habilitada.

Manualmente en cada compilación

En tu archivo android/app/build.gradle, añade la última versión del complemento y configúrala en la parte superior del archivo:

plugins {
    id("com.datadoghq.dd-sdk-android-gradle-plugin") version "x.y.z"
}

datadog {
    checkProjectDependencies = "none" // this is needed in any case for React Native projects
}

{
    "apiKey": "<YOUR_DATADOG_API_KEY>"
}

También puedes especificar el sitio Datadog (como datadoghq.eu) como una variable de entorno DATADOG_SITE o como una clave datadogSite en tu archivo datadog-ci.json. Para obtener más información, consulta el complemento Gradle del SDK Android en Datadog.

Para ejecutar el complemento después de una compilación, ejecuta (cd android && ./gradlew app:uploadMappingRelease).

Automatización de la carga en cada compilación

Instala el complemento como en el paso anterior.

Encuentra el bucle en applicationVariants en el archivo android/app/build.gradle. Debería parecerse a applicationVariants.all { variant ->.

Dentro del bucle, añade el siguiente fragmento:

        if (project.tasks.findByName("minify${variant.name.capitalize()}WithR8")) {
            tasks["minify${variant.name.capitalize()}WithR8"].finalizedBy { tasks["uploadMapping${variant.name.capitalize()}"] }
        }