Notificación de fallos y seguimiento de errores React Native
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, puede 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 trazas (traces) de stack tecnológico, carga manualmente tus archivos de asignación 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 archivos de asignación se utilizan para desofuscar trazas de stack tecnológico, lo que ayuda a depurar errores. Mediante el ID de compilación único que se genera, Datadog hace coincidir automáticamente las trazas de stack tecnológico correctas con los archivos de asignación correspondientes. Esto garantiza que, independientemente de cuándo se haya cargado el archivo de asignación (ya sea durante la compilación de preproducción o de producción), se disponga de la información correcta para garantizar procesos de control de calidad eficaces al revisar fallos y errores notificados en Datadog.
En las aplicaciones React Native, la coincidencia de las trazas de stack tecnológico y los mapas de origen se basa en una combinación de los campos service
, version
, bundle_name
y platform
. De todos los mapas de origen 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:
- Mapa de origen JavaScript para tu paquete iOS JavaScript
- Mapa de origen 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"
]
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 de orígenes, 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 para que el mapa de orígenes y las versiones de compilaciones coincidan.
Limitaciones
Los mapas de orígenes, los archivos de asignación y los archivos dSYM tienen un límite de 500 MB cada uno.
Los mapas de orígenes, los archivos de asignación y los archivos dSYM tienen un límite de 500 MB 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 aplicació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 aplicació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 de origen se envían y vinculan 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)
Bloquea el subproceso JavaScript desde tu aplicación:
import { crashJavascriptThread } from 'react-native-performance-limiter';
const crashApp = () => {
crashJavascriptThread('custom error message');
};
Vuelve a crear tu aplicación para que envíe los nuevos mapas de origen, activa el fallo y espera a que aparezca el error en la página Rastreo de errores.
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
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
.
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
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.
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
.
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 al archivo de tu paquete desde XCode, despliega el Navegador de informes 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= # rellena con tu clave de API
export SERVICE=com.myapp # sustituye por el nombre de tu servicio
export VERSION=1.0.0 # sustituye por la versión de tu aplicación en XCode
export BUILD=100 # sustituye por la versión de tu compilación en XCode
export BUNDLE_PATH= # rellena con la ruta de tu paquete
yarn datadog-ci react-native upload --platform ios --service $SERVICE --bundle $BUNDLE_PATH --sourcemap ./build/main.jsbundle.map --release-version $VERSION --build-version $BUILD
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= # rellena con tu clave de API
export SERVICE=com.myapp # sustituye por el nombre de tu servicio
export VERSION=1.0.0 # sustituye por la versión de tu aplicación en XCode
export BUILD=100 # sustituye por la versión de tu compilación en XCode
export BUNDLE_PATH= # rellena con la ruta de tu paquete
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
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
.
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"
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
.
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
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.
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
}
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
.
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)
.
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()}"] }
}
Nota: Volver a cargar un mapa de origen no anula el existente si la versión no ha cambiado.
Referencias adicionales
Additional helpful documentation, links, and articles: