Como instalar o agente de monitoramento de navegador do ARMS para uma aplicação web usando CDN - Application Real-Time Monitoring Service: Central de Documentação do Alibaba Cloud

Instale o agente de monitoramento de navegador

Faça login no console do ARMS.
No painel de navegação à esquerda, escolha Browser Monitoring > Browser Monitoring. Na barra de navegação superior, selecione uma região.
Na página Browser Monitoring, clique em Create Application Site no canto superior direito.
No painel Integration Center, na seção Frontend, Mobile, and Client Applications, clique em Web & H5.
No painel Integrate Web & H5, insira um nome personalizado para a aplicação na seção Create Application.
No painel Integrate Web & H5, selecione as opções desejadas na seção SDK Extension Configuration para gerar o código do agente.
- Disable Automatic API Reporting: Se você selecionar esta opção, será necessário chamar manualmente o método __bl.api() para reportar a taxa de sucesso da API.
- Enable Automatic SPA Resolution: Esta opção faz com que o ARMS escute o evento hashchange e reporte automaticamente as visualizações de página. Ideal para aplicações de página única (SPAs).
- Enable FMP Collection: Habilita a coleta de dados de First Meaningful Paint (FMP) pelo ARMS.
- Enable Page Resource Reporting: Quando ativada, o agente reporta os recursos estáticos da página assim que o evento onload é disparado.
- Associate with Application Monitoring: Correlaciona as requisições de API com o Application Monitoring de back-end, permitindo o rastreamento de ponta a ponta.
- Enable User Behavior Backtracking: Ativa o User Behavior Backtracking para auxiliar no diagnóstico de erros de JavaScript.
- Enable Console Tracking: Permite que o User Behavior Backtracking rastreie o conteúdo do console, incluindo error, warn, log e info.
  
  Importante
  Este recurso afeta o caminho do console.

Escolha um dos métodos a seguir para instalar o agente de monitoramento de navegador.

Carregamento assíncrono: Copie o código fornecido e cole-o como a primeira linha dentro do elemento <body> no HTML da página. Em seguida, reinicie a aplicação. Selecione a aba Asynchronous loading, copie o código disponibilizado e cole-o como a primeira linha do conteúdo de <body> no HTML da página.

O código a seguir apresenta um exemplo completo de HTML:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="ie=edge,chrome=1" />
    <meta name="viewport" content="width=device-width" />
    <title>ARMS</title>
  </head>
  <body>
    <script>
      !(function (c, b, d, a) {
        c[a] || (c[a] = {})
        c[a].config = {
          pid: 'xxx',
          appType: 'web',
          imgUrl: 'https://arms-retcode.aliyuncs.com/r.png?',
          sendResource: true,
          enableLinkTrace: true,
          behavior: true,
          useFmp: true,
          enableSPA: true,
        }
        with (b) with (body) with (insertBefore(createElement('script'), firstChild)) setAttribute('crossorigin', '', (src = d))
      })(window, document, 'https://sdk.rum.aliyuncs.com/v1/bl.js', '__bl')
    </script>
    <div id="app"></div>
  </body>
</html>

Carregamento síncrono: Copie o código e cole-o como o primeiro elemento dentro da tag <body> da sua página. Depois, reinicie a aplicação.

Pacote npm:

Execute o comando a seguir para instalar o pacote npm.
```
npm install alife-logger --save
```

Copie o seguinte comando de inicialização do console e execute-o.

const BrowserLogger = require('alife-logger');
const __bl = BrowserLogger.singleton({pid:"b590lhguqs@8cc3f63543d****",appType:"web",imgUrl:"https://arms-retcode.aliyuncs.com/r.png?",sendResource:true,behavior:true,enableLinkTrace:true,enableConsole:true});

Diferenças entre carregamento assíncrono e síncrono

Carregamento assíncrono: Também conhecido como carregamento não bloqueante. O navegador baixa e executa o arquivo JavaScript do agente sem bloquear a renderização da página. Recomendado quando o desempenho da página é a principal prioridade.

Importante
Devido à sua natureza assíncrona, o ARMS não consegue capturar erros de JavaScript ou falhas no carregamento de recursos ocorridas antes da conclusão do carregamento e da inicialização do SDK de monitoramento.
Carregamento síncrono: Também chamado de carregamento bloqueante. O navegador pausa a renderização da página até que o arquivo JavaScript do agente seja totalmente carregado e executado. Indicado quando é necessário capturar todos os erros de JavaScript e falhas de carregamento de recursos durante todo o ciclo de vida da página.

Defina um UID personalizado

O SDK gera automaticamente um ID de usuário (UID) para contabilizar visitantes únicos (UVs) e outras métricas. Embora o UID gerado automaticamente distinga os usuários, ele não possui contexto de negócio. Para utilizar um UID personalizado, adicione o seguinte ao objeto config no seu código:

uid: "xxx" // This value identifies a user. Set it based on your business logic.

Por exemplo:

<script>
!(function(c,b,d,a){c[a]||(c[a]={});c[a].config={pid:"xxx",appType:undefined,imgUrl:"https://arms-retcode.aliyuncs.com/r.png?", uid: "xxxx"};
with(b)with(body)with(insertBefore(createElement("script"),firstChild))setAttribute("crossorigin","",src=d)
})(window,document,"https://sdk.rum.aliyuncs.com/v1/bl.js","__bl");
</script>

Importante

Se você alterar as opções na seção SDK Extension Configuration, o código será modificado. Certifique-se de copiar e colar o novo código gerado.

Parâmetros comuns do SDK

A tabela a seguir lista os parâmetros comuns de configuração do SDK.

Parâmetro	Tipo	Descrição	Obrigatório	Padrão
pid	String	ID exclusivo do projeto. O ARMS o gera automaticamente durante a criação de um site.	Sim	Nenhum
uid	String	Identificador do usuário. Utilizado para buscar o usuário nos logs. Aceita valores personalizados. Se este parâmetro não for especificado, o SDK gera e atualiza o UID automaticamente a cada seis meses.	Não	Gerado automaticamente pelo SDK
tag	String	Tag de entrada. Cada log carrega uma tag associada.	Não	Nenhum
release	String	Versão da aplicação. Configure este parâmetro para visualizar relatórios separados por versão.	Não	`undefined`
environment	String	Campo de ambiente. Valores válidos: prod, gray, pre, daily e local. O valor prod indica um ambiente online. O valor gray indica um ambiente de liberação gradual. O valor pre indica um ambiente de staging. O valor daily indica um ambiente diário. O valor local indica um ambiente local.	Não	`prod`
sample	Integer	Configuração de amostragem de logs. Valor inteiro de 1 a 100. Os logs de desempenho e de sucesso de API são amostrados na proporção de `1/sample`. Para mais detalhes sobre as métricas desses logs, consulte Métricas estatísticas.	Não	`1`
behavior	Boolean	Define se o comportamento do usuário deve ser registrado ao reportar erros, facilitando a solução de problemas.	Não	`true`
enableSPA	Boolean	Escuta eventos hashchange na página e reporta o PV novamente. Aplicável a cenários de aplicação de página única.	Não	`false`
enableLinkTrace	Boolean	Para mais informações sobre o Tracing Analysis de ponta a ponta, consulte Diagnosticar erros de API com rastreamento de ponta a ponta.	Não	`false`

Para obter a lista completa de parâmetros de configuração do SDK, consulte Referência do SDK.