Application Real-Time Monitoring Service:Démarrage rapide pour les applications Web et H5

Présentation de la solution

1. Créez une application : Créez une application dans la console pour surveiller les pages Web et H5. Copiez et enregistrez l'extrait de code JavaScript qui charge le SDK Web et H5 via CDN.

2. Intégrez le SDK : Pour un seul fichier HTML, insérez le code du script dans la section <body>. Pour plusieurs fichiers HTML, incluez le script dans un fichier de mise en page et référencez ce fichier sur toutes les pages.

3. Consultez les données de surveillance : Le SDK transmet automatiquement les données. Consultez les métriques utilisateur de votre site web sur la page des détails de l'application.

4. Créez des alertes : Configurez les règles d'alerte et les politiques de notification, puis examinez l'historique des alertes.

Préparation des données

Ce guide utilise un exemple de site web hébergé sur une instance ECS dotée d'une adresse IP publique. Pour vous connecter à l'instance ECS, consultez la rubrique Se connecter à une instance Linux à l'aide de Workbench.

La facturation de Real User Monitoring est basée sur le nombre de sessions et le nombre de rapports personnalisés. Une OCU correspond à un nombre spécifique de sessions et de rapports personnalisés. Chaque utilisateur bénéficie d'un quota gratuit de 100 OCU par mois. Pour plus d'informations sur la tarification, consultez la rubrique Présentation de la facturation.

1. Créer une application

1. Connectez-vous à la console ARMS, accédez à Real User Monitoring » Application List, puis cliquez sur Add Application.

   Dans le volet Create Application, sélectionnez Web & H5 comme type d'application.

2. Saisissez un nom d'application dans le volet de droite et cliquez sur Create . Laissez les autres paramètres à leurs valeurs par défaut, puis copiez l'extrait de code JavaScript.

   <script>
   window.__rum = {
     "endpoint": "https://jjd****-default-cn.rum.aliyuncs.com?workspace=&service_id="
   };
   </script>
   <script type="text/javascript" src="https://sdk.rum.aliyuncs.com/v2/browser-sdk.js" crossorigin></script>

   Paramètre	Description
   endpoint	Le endpoint de transmission des données pour les applications Web et H5.
   <script type="text/javascript" src="...">	Charge le SDK Web et H5 via CDN.

2. Intégrer le SDK

1. Pour un seul fichier HTML, insérez le code du script dans la section <body>. Pour plusieurs fichiers HTML, incluez le script dans un fichier de mise en page et référencez ce fichier sur toutes les pages. L'exemple de site web utilisé dans cette rubrique (shopping.zip) utilise un fichier de mise en page. Remplacez le contenu de la balise <script> du fichier layout.html par l'extrait de l'étape précédente.

   layout.html

   <!DOCTYPE html>
   <html lang="en">
   <head>
       <meta charset="UTF-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <title>Shopping Site</title>
       <script>
           window.__rum = {
               "endpoint": "https://jj****-default-cn.rum.aliyuncs.com"
           };
       </script>
       <script type="text/javascript" src="https://jj******-sdk.rum.aliyuncs.com/v2/browser-sdk.js" crossorigin></script>
   </head>
   <body>
       {% block content %}{% endblock %}
   </body>
   </html>
   

2. Après avoir intégré le SDK, exécutez le programme du site web en saisissant python app.py dans le terminal du serveur.

3. Consulter les détails de la surveillance

1. Accédez au site web dans votre navigateur en saisissant ${public IP address of the ECS instance}:5000 et interagissez avec celui-ci.

2. Dans la console ARMS, accédez à Real User Monitoring > Application List. Cliquez sur le nom de l'application cible pour consulter sa vue d'ensemble, le suivi des sessions, les visites de pages, le chargement des ressources et d'autres métriques. Pour des descriptions détaillées des pages de surveillance, consultez la rubrique Détails de la surveillance Web et H5.

4. Créer des alertes

1. Créer une règle d'alerte : Configurez l'application cible et les conditions d'alerte. Définissez les Notification Policies sur Do Not Specify Notification Policy. Après la création, copiez l'ID de la règle d'alerte :

   Dans le volet de navigation de gauche, cliquez sur alert rules. Recherchez votre règle d'alerte nouvellement créée dans la liste et copiez son ID de règle d'alerte.

2. Créer une politique de notification : Configurez les règles de correspondance pour les événements d'alerte. Définissez la condition de sorte que l'ID de la règle d'alerte soit égal à l'ID copié à l'étape précédente. Suivez l'assistant de configuration pour définir le regroupement des événements et les destinataires des notifications.

3. Consultez l'historique des alertes : Voir Consulter l'historique des événements d'alerte.

Étapes suivantes

• Cette rubrique utilise la méthode de chargement synchrone CDN par défaut. Real User Monitoring prend également en charge le chargement asynchrone CDN et l'installation du package npm. Pour les étapes de configuration et les scénarios d'utilisation des trois méthodes, consultez la rubrique Intégrer des applications Web et H5.

• Le SDK Web et H5 prend en charge des éléments de configuration tels que l'ID d'application, le endpoint de transmission et l'environnement de l'application. Pour plus d'informations, consultez la rubrique Référence de configuration du SDK.