Application Real-Time Monitoring Service:Guia de início rápido para aplicações Web & H5

Visão geral da solução

1. Crie uma aplicação: Crie uma aplicação no console para monitorar páginas Web & H5. Copie e salve o trecho JavaScript que carrega o SDK Web & H5 via CDN.

2. Integre o SDK: Em um único arquivo HTML, insira o código do script na seção <body>. Se houver múltiplos arquivos HTML, inclua o script em um arquivo de layout e referencie esse arquivo em todas as páginas.

3. Visualize os dados de monitoramento: O SDK envia dados automaticamente. Visualize as métricas de usuário do seu site na página de detalhes da aplicação.

4. Crie alertas: Configure regras de alerta e políticas de notificação e revise o histórico de alertas.

Preparação de dados

Este guia utiliza um site de exemplo hospedado em uma instância ECS com endereço IP público. Para fazer login na instância ECS, consulte Fazer login em uma instância Linux usando o Workbench.

O Real User Monitoring é cobrado com base na quantidade de sessões e de relatórios personalizados. Uma OCU corresponde a um número específico de sessões e relatórios personalizados. Cada usuário recebe uma cota gratuita de 100 OCU por mês. Para detalhes sobre preços, consulte Visão geral do faturamento.

1. Criar uma aplicação

1. Faça login no console do ARMS, navegue até Real User Monitoring » Application List e clique em Add Application.

   No painel Create Application, selecione Web & H5 como tipo de aplicação.

2. Insira um nome para a aplicação no painel à direita e clique em Create . Mantenha os demais parâmetros com seus valores padrão e copie o trecho 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>

   Parâmetro	Descrição
   endpoint	Endpoint de envio de dados de aplicações Web & H5.
   <script type="text/javascript" src="...">	Carrega o SDK Web & H5 via CDN.

2. Integrar o SDK

1. Em um único arquivo HTML, insira o código do script na seção <body>. Se houver múltiplos arquivos HTML, inclua o script em um arquivo de layout e referencie esse arquivo em todas as páginas. O site de exemplo deste tópico (shopping.zip) usa um arquivo de layout. Substitua o conteúdo da tag <script> no arquivo layout.html pelo trecho obtido na etapa anterior.

   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. Após integrar o SDK, execute o programa do site digitando python app.py no terminal do servidor.

3. Visualizar detalhes do monitoramento

1. Acesse o site no navegador digitando ${public IP address of the ECS instance}:5000 e interaja com ele.

2. No console do ARMS, navegue até Real User Monitoring > Application List. Clique no nome da aplicação desejada para visualizar a visão geral, o rastreamento de sessões, as visitas à página, o carregamento de recursos e outras métricas. Para descrições detalhadas das páginas de monitoramento, consulte Detalhes do monitoramento Web & H5.

4. Criar alertas

1. Criar uma regra de alerta: Configure a aplicação de destino e as condições de alerta. Defina as Notification Policies como Do Not Specify Notification Policy. Após a criação, copie o ID da regra de alerta:

   No painel de navegação à esquerda, clique em alert rules. Localize a regra de alerta recém-criada na lista e copie seu ID.

2. Criar uma política de notificação: Configure regras de correspondência para eventos de alerta. Defina a condição para que o ID da regra de alerta seja igual ao ID copiado na etapa anterior. Siga o assistente de configuração para definir o agrupamento de eventos e os destinatários da notificação.

3. Visualize o histórico de alertas: Consulte Visualizar histórico de eventos de alerta.

Próximos passos

• Este tópico utiliza o método padrão de carregamento síncrono via CDN. O Real User Monitoring também oferece suporte a carregamento assíncrono via CDN e instalação de pacote npm. Para etapas de configuração e cenários de uso dos três métodos, consulte Integrar aplicações Web & H5.

• O SDK Web & H5 aceita itens de configuração como ID da aplicação, endpoint de envio e ambiente da aplicação. Para mais detalhes, consulte Referência de configuração do SDK.