Application Real-Time Monitoring Service:Connecter une application Web et H5

Créer une application

1. Connectez-vous à la console ARMS.

2. Dans le volet de navigation de gauche, sélectionnez Real User Monitoring > > Application List, puis choisissez la région cible dans la barre de menus supérieure.

3. Sur la page Application List, cliquez sur Add Application.

4. Dans le panneau Create Application, cliquez sur Web & H5.

5. Dans le panneau Add Web & H5 Application, saisissez un nom d'application et une description, puis cliquez sur Create .

   Remarque

   Le nom de l'application doit être unique.

   Une fois l'application créée, une adresse endpoint s'affiche dans la section STEP 2.

6. Dans la section STEP 2, choisissez une méthode d'installation et installez le SDK de l'agent.

   Chargement asynchrone via CDN

   Copiez le code suivant et collez-le en tant que première ligne à l'intérieur de la balise <body> de votre page HTML.

   Remarque

   Remplacez your endpoint dans le code ci-dessous par l'adresse endpoint générée pour votre application.

   <script>
     !(function(c,b,d,a){c[a]||(c[a]={});c[a]={
       endpoint: "your endpoint"
     };
     with(b)with(body)with(insertBefore(createElement("script"),firstChild))setAttribute("crossorigin","",src=d)
     })(window, document, "https://sdk.rum.aliyuncs.com/v2/browser-sdk.js ", "__rum");
   </script>

   Chargement synchrone via CDN

   Copiez le code suivant et collez-le en tant que première ligne à l'intérieur de la balise <body> de votre page HTML.

   Remarque

   Remplacez your endpoint dans le code ci-dessous par l'adresse endpoint générée pour votre application.

   <script>
     window.__rum = {
       endpoint: "your endpoint"
     };
   </script>
   <script type="text/javascript" src="https://sdk.rum.aliyuncs.com/v2/browser-sdk.js " crossorigin></script>

   Package npm

   1. Installez le package npm.

      npm install @arms/rum-browser --save

   2. Initialisez l'application.

      Remarque

      Remplacez your endpoint dans le code ci-dessous par l'adresse endpoint générée pour votre application.

      import armsRum from '@arms/rum-browser';
      armsRum.init({
        endpoint: "your endpoint"
      });

   Important

   À partir de la version 0.1.x du SDK, il n'est plus nécessaire de transmettre un PID, car l'endpoint contient déjà les paramètres requis. Assurez-vous d'utiliser la dernière version du SDK et l'endpoint correspondant.

   Voici une description de chaque méthode d'installation :

   • Chargement asynchrone : également appelé chargement non bloquant. Le navigateur continue de traiter la page pendant le téléchargement du script JS. Cette méthode est recommandée lorsque les performances de la page constituent une priorité élevée.

     Important

     Avec le chargement asynchrone, ARMS ne peut pas capturer les erreurs JS ni les erreurs de chargement des ressources survenant avant le chargement et l'initialisation du SDK de l'agent.

   • Chargement synchrone : également appelé chargement bloquant. Le navigateur attend que le script JS soit chargé avant de traiter le reste de la page. Privilégiez cette approche si vous devez capturer toutes les erreurs JS et les erreurs de chargement des ressources dès l'ouverture de la page.

   • Package npm : réduit le nombre de scripts externes chargés par votre page et vous permet de gérer la diffusion via CDN tout en traitant Real User Monitoring comme un module distinct.

   Lorsque vous chargez le SDK depuis un CDN, utilisez l'espace de noms global RumSDK.default pour accéder à l'instance de surveillance du SDK.

   const armsRum = window.RumSDK.default;
   // Make sure the SDK is loaded before you access RumSDK.
   // If the __rum configuration is not defined before the SDK loads, you can initialize it here.
   armsRum.init({
     endpoint: "your endpoint",
   });
   // The following usage is the same for both npm and CDN installations.
   armsRum.setConfig('env', 'pre');
   

Documentation connexe

Le SDK ARMS Real User Monitoring propose diverses options de configuration. Pour consulter la liste complète des paramètres, reportez-vous à la rubrique Référence de configuration du SDK.