Configuración de RUM CodePush
Habilita el informe de fallos y el rastreo de errores de React Native para obtener informes completos de fallos y tendencias de errores con Real User Monitoring.
Cada vez que publiques una nueva versión de CodePush para tu aplicación React Native, deberás subir los mapas de fuente a Datadog para desminificar los errores.
Datadog recomienda utilizar @datadog/mobile-react-native-code-push en la aplicación y el comando Datadog-ci react-native codepush para cargar los mapas de fuente. Esto garantiza que version sea coherente tanto en los fallos informados como en los mapas de fuente cargados.
Si tienes algún problema al configurar el SDK de Datadog con codepush, puedes consultar nuestra aplicación de ejemplo como referencia.
Configuración
Consulta los pasos de instalación de la Monitorización de React Native para instalar @datadog/mobile-react-native.
A continuación, instala @datadog/mobile-react-native-code-push.
Para instalar con NPM, ejecuta:
npm install @datadog/mobile-react-native-code-push
Para instalar con Yarn, ejecuta:
yarn add @datadog/mobile-react-native-code-push
Inicialización con DdSdkReactNative.initialize
Sustituye DdSdkReactNative.initialize por DatadogCodepush.initialize en tu código:
import { DdSdkReactNativeConfiguration } from '@datadog/mobile-react-native';
import { DatadogCodepush } from '@datadog/mobile-react-native-code-push';
const config = new DdSdkReactNativeConfiguration(
'<CLIENT_TOKEN>',
'<ENVIRONMENT_NAME>',
'<RUM_APPLICATION_ID>',
true, // rastrear interacciones de usuario (como toques en botones). Puedes usas la propiedad del elemento 'accessibilityLabel' para nombrar la acción de toque, de lo contrario, se informa el tipo de elemento
true, // rastrear recursos XHR
true // rastrear errores
);
await DatadogCodepush.initialize(config);
Inicialización con DatadogProvider
Sustituye DatadogProvider por DatadogCodepushProvider en el componente de tu aplicación:
import { DatadogCodepushProvider } from '@datadog/mobile-react-native-code-push';
export default function App() {
return (
<DatadogCodepushProvider configuration={datadogConfiguration}>
<Navigation />
</DatadogCodepushProvider>
);
}
Como obtener la versión de CodePush es un paso asíncrono que debe realizarse antes de inicializar el SDK de Datadog React Native para RUM, no hay diferencia entre InitializationMode.SYNC y InitializationMode.ASYNC cuando se utiliza DatadogCodepushProvider.
Cargar mapas de fuente de CodePush
Instala @datadog/datadog-ci como dependencia de desarrollo en tu proyecto.
Para instalarlo con NPM:
npm install @datadog/datadog-ci --save-dev
Para instalarlo con Yarn:
yarn add -D @datadog/datadog-ci
Crea un archivo gitignored datadog-ci.json en la raíz de tu proyecto que contenga tu clave de API y el sitio de Datadog (si no datadoghq.com):
{
"apiKey": "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
"site": "datadoghq.eu"
}
También puedes exportarlas como variables de entorno DATADOG_API_KEY y DATADOG_SITE.
Cuando lances un nuevo paquete de CodePush, especifica un directorio de salida para los mapas de fuente y el paquete:
appcenter codepush release-react -a MyOrganization/MyApplication -d MyDeployment --sourcemap-output --output-dir ./build
Ejecuta el comando datadog-ci react-native codepush pasando los argumentos de CodePush app y deployment adecuados.
Para ejecutarlo con NPM:
npm run datadog-ci react-native codepush --platform ios --service com.company.app --bundle ./build/CodePush/main.jsbundle --sourcemap ./build/CodePush/main.jsbundle.map --app MyOrganization/MyApplication --deployment MyDeployment
Para ejecutarlo con Yarn:
yarn datadog-ci react-native codepush --platform ios --service com.company.app --bundle ./build/CodePush/main.jsbundle --sourcemap ./build/CodePush/main.jsbundle.map --app MyOrganization/MyApplication --deployment MyDeployment
Alternativas
Estos pasos garantizan que la version coincide con el formato {commercialVersion}-codepush.{codePushLabel}, como 1.2.4-codepush.v3.
También puedes hacerlo especificando un versionSuffix en la configuración del SDK:
const config = new DdSdkReactNativeConfiguration(
'<CLIENT_TOKEN>',
'<ENVIRONMENT_NAME>',
'<RUM_APPLICATION_ID>',
true, // rastrear interacciones de usuario (por ejemplo, toques en botones). Puedes usar la propiedad del elemento 'accessibilityLabel' para nombrar la acción de toque, de lo contrario se informará el tipo de elemento)
true, // rastrear recursos XHR
true // rastrear errores
);
config.versionSuffix = `codepush.${codepushVersion}`; // will result in "1.0.0-codepush.v2"
Para evitar posibles conflictos de versiones, versionSuffix añade un guión (-) antes del sufijo.
Para obtener la codepushVersion, puedes codificarla o utilizar CodePush.getUpdateMetadata.
A continuación, carga tus mapas de fuente mediante el comando datadog-ci react-native upload y asegúrate de que el argumento --release-version coincide con lo establecido en la configuración del SDK.
Envío de datos cuando el dispositivo está desconectado
RUM garantiza la disponibilidad de los datos cuando el dispositivo del usuario está desconectado. En caso de zonas con baja conexión de red o cuando la carga de la batería del dispositivo es demasiado baja, todos los eventos de RUM se almacenan primero en el dispositivo local en lotes.
Cada lote sigue la especificación de entrada. Se envían tan pronto como la red está disponible y la batería está lo suficientemente cargada como para garantizar que el SDK de Datadog no afecte la experiencia del usuario final. Si la red no está disponible mientras tu aplicación está en primer plano o si falla una carga de datos, el lote se conserva hasta que se lo pueda enviar con éxito.
Esto significa que incluso si los usuarios abren tu aplicación mientras están desconectados, no se pierde ningún dato. Para garantizar que el SDK no utilice demasiado espacio de disco, los datos del disco se descartan automáticamente si son demasiado antiguos.
Referencias adicionales
Más enlaces, artículos y documentación útiles:
