Présentation
Activez les rapports de crash et le suivi des erreurs pour React Native afin d’accéder à des rapports de crash complets et à des tendances sur les erreurs via la solution Real User Monitoring..
Chaque fois que vous publiez une nouvelle version de CodePush pour votre application React Native, vous devez importer les source maps sur Datadog afin de déminifier les erreurs.
Datadog vous conseille d’utiliser @datadog/mobile-react-native-code-push
dans votre app et la commande datadog-ci react-native codepush
pour importer vos source maps. De cette façon, la version
indiquée sera identique dans les rapports de crash et dans les source maps importées.
Implémentation
Consultez les instructions d’installation de la page Surveillance React Native pour installer @datadog/mobile-react-native
.
Ensuite, installez @datadog/mobile-react-native-code-push
.
Pour effectuer l’installation avec NPM, exécutez :
npm install @datadog/mobile-react-native-code-push
Pour effectuer l’installation avec Yarn, exécutez :
yarn add @datadog/mobile-react-native-code-push
Initialisation avec DdSdkReactNative.initialize
Remplacez DdSdkReactNative.initialize
par DatadogCodepush.initialize
dans votre code :
import { DdSdkReactNativeConfiguration } from '@datadog/mobile-react-native';
import { DatadogCodepush } from '@datadog/mobile-react-native-code-push';
const config = new DdSdkReactNativeConfiguration(
'<TOKEN_CLIENT>',
'<NOM_ENVIRONNEMENT>',
'<ID_APPLICATION_RUM>',
true, // effectuer le suivi des interactions utilisateur (comme des sélections de boutons). Vous pouvez utiliser la propriété de l'élément 'accessibilityLabel' pour nommer l'action de toucher. Sinon, le type de l'élément est transmis.
true, // effectuer le suivi des ressources XHR
true // effectuer le suivi des erreurs
);
await DatadogCodepush.initialize(config);
Initialisation avec DatadogProvider
Remplacez DatadogProvider
par DatadogCodepushProvider
dans votre composant App :
import { DatadogCodepushProvider } from '@datadog/mobile-react-native-code-push';
export default function App() {
return (
<DatadogCodepushProvider configuration={datadogConfiguration}>
<Navigation />
</DatadogCodepushProvider>
);
}
Étant donné que l’obtention de la version de CodePush est une étape asynchrone qui doit être effectuée avant d’initialiser le SDK React Native Datadog pour RUM, il n’y a aucune différence entre InitializationMode.SYNC
et InitializationMode.ASYNC
lors de l’utilisation de DatadogCodepushProvider
.
Importer des source maps CodePush
Installez @datadog/datadog-ci
en tant que dépendance de développement pour votre projet.
Pour l’installer avec NPM :
npm install @datadog/datadog-ci --save-dev
Pour l’installer avec Yarn :
yarn add -D @datadog/datadog-ci
Créez un fichier gitignore datadog-ci.json
à la racine de votre projet contenant votre clé API et le site Datadog (s’il ne s’agit pas de datadoghq.com
) :
{
"apiKey": "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
"site": "datadoghq.eu"
}
Vous pouvez également les exporter en tant que variables d’environnement DATADOG_API_KEY
et DATADOG_SITE
.
Lors de la publication d’un nouveau bundle CodePush, indiquez le répertoire dans lequel placer les source maps et le bundle :
appcenter codepush release-react -a MyOrganization/MyApplication -d MyDeployment --sourcemap-output --output-dir ./build
Exécutez la commande datadog-ci react-native codepush
en passant les arguments CodePush app
et deployment
adéquats.
Pour l’exécuter avec 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
Pour l’exécuter avec 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
Solutions alternatives
Ces étapes permettent de s’assurer que la version
correspond au format {commercialVersion}-codepush.{codePushLabel}
, tel que 1.2.4-codepush.v3
.
Vous pouvez également y parvenir en spécifiant un versionSuffix
dans la configuration du SDK :
const config = new DdSdkReactNativeConfiguration(
'<TOKEN_CLIENT>',
'<NOM_ENVIRONNEMENT>',
'<ID_APPLICATION_RUM>',
true, // effectuer le suivi des interactions utilisateur (p. ex. : sélections de boutons. Vous pouvez utiliser la propriété de l'élément 'accessibilityLabel' pour nommer l'action de toucher. Sinon le type de l'élément est transmis.)
true, // effectuer le suivi des ressources XHR
true // effectuer le suivi des erreurs
);
config.versionSuffix = `codepush.${codepushVersion}`; // aura pour résultat "1.0.0-codepush.v2"
Afin d’éviter les conflits de versions potentiels, le versionSuffix
ajoute un tiret (-
) avant le suffixe.
Pour obtenir la codepushVersion
, vous pouvez la coder en dur ou utiliser CodePush.getUpdateMetadata
.
Ensuite, importez vos source maps à l’aide de la commande datadog-ci react-native upload
et assurez-vous que l’argument --release-version
correspond à celui défini dans la configuration du SDK.
Pour aller plus loin
Documentation, liens et articles supplémentaires utiles: