Todos os produtos
Search

Este produto

    Application Real-Time Monitoring Service:Conectar um aplicativo Web e H5

    Central de documentação

    Application Real-Time Monitoring Service:Conectar um aplicativo Web e H5

    Última atualização: Aug 17, 2026

    O ARMS Real User Monitoring para Web & H5 monitora páginas de navegador e páginas H5 em aplicativos móveis. Instale um agente leve por meio de um script JavaScript (JS) ou pacote npm para coletar métricas de desempenho e rastrear erros. Isso ajuda a melhorar a experiência do usuário no seu site.

    Importante

    O RUM está disponível para uso comercial desde 00:00:00 (UTC+8) de 24 de junho de 2024. Para detalhes sobre preços, consulte Billing. Para suporte técnico, entre no grupo do DingTalk (ID: 67370002064).

    Crie um aplicativo

    1. Faça logon no ARMS console.

    2. No painel de navegação à esquerda, escolha Real User Monitoring > > Application List e selecione a região de destino na barra de menu superior.

    3. Na página Application List, clique em Add Application.

    4. No painel Create Application, clique em Web & H5.

    5. No painel Add Web & H5 Application, insira o nome e a descrição do aplicativo e clique em Create .

      Nota

      O nome do aplicativo deve ser exclusivo.

      Após criar o aplicativo, um endereço de endpoint aparece na seção STEP 2.

    6. Na seção STEP 2, selecione um método de instalação e instale o SDK do agente.

      Carregamento assíncrono via CDN

      Copie o código abaixo e cole-o como a primeira linha dentro da tag <body> da sua página HTML.

      Nota

      Substitua your endpoint no código a seguir pelo endereço de endpoint gerado para o seu aplicativo.

      <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>

      Carregamento síncrono via CDN

      Copie o código abaixo e cole-o como a primeira linha dentro da tag <body> da sua página HTML.

      Nota

      Substitua your endpoint no código a seguir pelo endereço de endpoint gerado para o seu aplicativo.

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

      VuePress

      Projetos VuePress não exigem configuração por página. Insira o agente CDN uma única vez no arquivo de modelo HTML para aplicá-lo a todas as páginas.

      • VuePress 2.x (Vue 3): O arquivo de modelo é .vuepress/template.html. Especifique o caminho do modelo com o item de configuração templateBuild em .vuepress/config.mjs.

        import { dirname } from 'path'
import { fileURLToPath } from 'url'
const __dirname = dirname(fileURLToPath(import.meta.url))
export default defineUserConfig({
  templateBuild: __dirname + '/template.html',
})

      • VuePress 1.x (Vue 2): O arquivo de modelo é .vuepress/index.html.

      No arquivo de modelo, insira o script do agente CDN como a primeira linha dentro da tag <body>.

      Importante

      Coloque o script do agente dentro da tag <body>. Se você o colocar dentro da tag <head>, ocorrerá um TypeError porque a tag <body> ainda não foi carregada.

      Caso seu projeto não tenha um arquivo de modelo HTML, use o método de instalação via pacote npm.

      Pacote npm

      1. Instale o pacote npm.

        npm install @arms/rum-browser --save

      2. Inicialize o aplicativo.

        Nota

        Substitua your endpoint no código a seguir pelo endereço de endpoint gerado para o seu aplicativo.

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

      A partir da versão 0,1.x do SDK, não é mais necessário passar um PID, pois o endpoint já contém os parâmetros necessários. Certifique-se de usar a versão mais recente do SDK e do endpoint.

      Veja a seguir os detalhes de cada método de instalação:

      • Carregamento assíncrono: Também conhecido como carregamento não bloqueante. O navegador continua a processar a página enquanto baixa o script JS. Recomendado quando o desempenho da página é alta prioridade.

        Importante

        No carregamento assíncrono, o ARMS não captura erros de JS ou de carregamento de recursos que ocorram antes do carregamento e da inicialização do SDK do agente.

      • Carregamento síncrono: Também chamado de carregamento bloqueante. O navegador aguarda o carregamento do script JS antes de processar o restante da página. Ideal para cenários em que é necessário capturar todos os erros de JS e de carregamento de recursos desde a abertura da página.

      • Pacote npm: Reduz o carregamento de scripts externos na página, permite gerenciar a entrega via CDN e tratar o Real User Monitoring como um módulo separado.

      Ao carregar o SDK de um CDN, use o namespace global RumSDK.default para acessar a instância de monitoramento do 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');

    Documentos relacionados

    O SDK do ARMS Real User Monitoring oferece diversas opções de configuração. Para obter a lista completa de parâmetros, consulte SDK Configuration Reference.