# Navegador > Aprenda como adicionar o OpenTelemetry à sua aplicação de navegador --- LLMS index: [llms.txt](/llms.txt) --- {{__hugo_ctx/}} Embora este guia utilize o exemplo de aplicação apresentada abaixo, as etapas para instrumentar a sua própria aplicação devem ser similares. ## Pré-requisitos {#prerequisites} Certifique-se de que você tenha instalado localmente: - [Node.js](https://nodejs.org/en/download/) - [TypeScript](https://www.typescriptlang.org/download), caso esteja utilizando TypeScript. ## Exemplo de aplicação {#example-application} Este é um guia muito simples. Caso deseje visualizar exemplos mais complexos, consulte o repositório [examples/opentelemetry-web](https://github.com/open-telemetry/opentelemetry-js/tree/main/examples/opentelemetry-web). Copie o conteúdo a seguir em um arquivo em um diretório vazio e salve-o como `index.html`. ```html Exemplo de Instrumentação ao Carregar Documento Exemplo de utilização do Tracer Web com instrumentação do carregamento de documento com Exporter de Console e Exporter de Collector ``` ### Instalação {#installation} Para criar rastros no navegador, você precisará do `@opentelemetry/sdk-trace-web` e da instrumentação `@opentelemetry/instrumentation-document-load`: ```shell npm init -y npm install @opentelemetry/api \ @opentelemetry/sdk-trace-web \ @opentelemetry/instrumentation-document-load \ @opentelemetry/context-zone ``` ### Inicialização e configuração {#initialization-and-configuration} Caso esteja escrevendo seu código em TypeScript, execute o seguinte comando: ```shell tsc --init ``` Em seguida, adicione o [parcel](https://parceljs.org/), que permitirá (entre outras coisas) que você trabalhe com TypeScript. ```shell npm install --save-dev parcel ``` Crie um arquivo de código vazio chamado `document-load` com a extensão `.ts` ou `.js`, conforme apropriado, com base na linguagem que você escolheu para escrever sua aplicação. Adicione o seguinte código ao seu HTML, logo antes da tag de fechamento ``: 
<script type="module" src="document-load.ts"></script>

<script type="module" src="document-load.js"></script>
Adicionaremos o código para rastrear os tempos de carregamento do documento e relatar esses dados como trechos OpenTelemetry. ### Criando um Tracer Provider {#creating-a-tracer-provider} Adicione o seguinte código ao arquivo `document-load.ts|js` para criar um Tracer Provider, que trará a instrumentação para rastrear o tempo de carregamento do documento: ```js /* arquivo document-load.ts|js - este trecho do código é o mesmo para ambas as linguagens */ import { WebTracerProvider } from '@opentelemetry/sdk-trace-web'; import { DocumentLoadInstrumentation } from '@opentelemetry/instrumentation-document-load'; import { ZoneContextManager } from '@opentelemetry/context-zone'; import { registerInstrumentations } from '@opentelemetry/instrumentation'; const provider = new WebTracerProvider(); provider.register({ // Alterando o contextManager padrão para utilizar o ZoneContextManager - oferece suporte para operações assíncronas - opcional contextManager: new ZoneContextManager(), }); // Registrando instrumentações registerInstrumentations({ instrumentations: [new DocumentLoadInstrumentation()], }); ``` Agora crie a aplicação com parcel: ```shell npx parcel index.html ``` e acesse o servidor web de desenvolvimento (por exemplo, em `http://localhost:1234`) para validar se o seu código funciona. Ainda não haverá saída de rastros, para isso precisamos adicionar um exportador. ### Criando um Exporter {#creating-an-exporter} No exemplo a seguir, utilizaremos o `ConsoleSpanExporter` que exibe todos os trechos no console. Para visualizar e analisar seus rastros, você precisará exportá-los para um _backend_ de rastreamento. Siga [estas instruções](../../exporters) para configurar um _backend_ e um exportador. Você também pode utilizar o `BatchSpanProcessor` para exportar trechos em lotes de forma a utilizar os recursos mais eficientemente. Para exportar os rastros para o console, modifique o arquivo `document-load.ts|js` para que corresponda ao seguinte trecho de código: ```js /* arquivo document-load.ts|js - o código é o mesmo para ambas as linguagens */ import { ConsoleSpanExporter, SimpleSpanProcessor, } from '@opentelemetry/sdk-trace-base'; import { WebTracerProvider } from '@opentelemetry/sdk-trace-web'; import { DocumentLoadInstrumentation } from '@opentelemetry/instrumentation-document-load'; import { ZoneContextManager } from '@opentelemetry/context-zone'; import { registerInstrumentations } from '@opentelemetry/instrumentation'; const provider = new WebTracerProvider({ spanProcessors: [new SimpleSpanProcessor(new ConsoleSpanExporter())], }); provider.register({ // Alterando o contextManager padrão para utilizar o ZoneContextManager - oferece suporte para operações assíncronas - opcional contextManager: new ZoneContextManager(), }); // Registrando instrumentações registerInstrumentations({ instrumentations: [new DocumentLoadInstrumentation()], }); ``` Agora, reconstrua sua aplicação e abra o navegador novamente. No console da barra de ferramentas do desenvolvedor, você deverá ver alguns rastros sendo exportados: ```json { "traceId": "ab42124a3c573678d4d8b21ba52df3bf", "parentId": "cfb565047957cb0d", "name": "documentFetch", "id": "5123fc802ffb5255", "kind": 0, "timestamp": 1606814247811266, "duration": 9390, "attributes": { "component": "document-load", "http.response_content_length": 905 }, "status": { "code": 0 }, "events": [ { "name": "fetchStart", "time": [1606814247, 811266158] }, { "name": "domainLookupStart", "time": [1606814247, 811266158] }, { "name": "domainLookupEnd", "time": [1606814247, 811266158] }, { "name": "connectStart", "time": [1606814247, 811266158] }, { "name": "connectEnd", "time": [1606814247, 811266158] }, { "name": "requestStart", "time": [1606814247, 819101158] }, { "name": "responseStart", "time": [1606814247, 819791158] }, { "name": "responseEnd", "time": [1606814247, 820656158] } ] } ``` ### Adicionar instrumentações {#add-instrumentations} Caso deseje instrumentar requisições Ajax, interações do usuário e outros, é possível adicionar as bibliotecas de instrumentação adicionais e registrá-las: ```sh npm install @opentelemetry/instrumentation-user-interaction \ @opentelemetry/instrumentation-xml-http-request \ ``` ```javascript import { UserInteractionInstrumentation } from '@opentelemetry/instrumentation-user-interaction'; import { XMLHttpRequestInstrumentation } from '@opentelemetry/instrumentation-xml-http-request'; registerInstrumentations({ instrumentations: [ new DocumentLoadInstrumentation(), new UserInteractionInstrumentation(), new XMLHttpRequestInstrumentation(), ], }); ``` ## Pacotes Meta para Web {#meta-packages-for-web} Para aproveitar as instrumentações mais comuns em um único lugar, você pode simplesmente usar os [Pacotes Meta do OpenTelemetry para Web](https://www.npmjs.com/package/@opentelemetry/auto-instrumentations-web).