Navegador
Warning
Client instrumentation for the browser is experimental and mostly unspecified. If you are interested in helping out, get in touch with the Client Instrumentation SIG.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
Certifique-se de que você tenha instalado localmente:
- Node.js
- TypeScript, caso esteja utilizando TypeScript.
Exemplo de aplicação
Este é um guia muito simples. Caso deseje visualizar exemplos mais complexos, consulte o repositório examples/opentelemetry-web.
Copie o conteúdo a seguir em um arquivo em um diretório vazio e salve-o como
index.html.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Exemplo de Instrumentação ao Carregar Documento</title>
<base href="/" />
<!--
https://www.w3.org/TR/trace-context/
Defina o `traceparent` no código do template HTML do servidor. Ele
deve ser gerado dinamicamente pelo servidor para conter o ID do rastro
da requisição do servidor, um ID de trecho pai que foi definido no trecho
da requisição do servidor e as flags de rastro para indicar a decisão de
amostragem do servidor (01 = amostrado, 00 = não amostrado).
'{versão}-{IDDoRastro}-{IDDoTrecho}-{decisãoDeAmostragem}''
-->
<meta
name="traceparent"
content="00-ab42124a3c573678d4d8b21ba52df3bf-d21f7bc17caa5aba-01"
/>
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
Exemplo de utilização do Tracer Web com instrumentação do carregamento de
documento com Exporter de Console e Exporter de Collector
</body>
</html>
Instalação
Para criar rastros no navegador, você precisará do
@opentelemetry/sdk-trace-web e da instrumentação
@opentelemetry/instrumentation-document-load:
npm init -y
npm install @opentelemetry/api \
@opentelemetry/sdk-trace-web \
@opentelemetry/instrumentation-document-load \
@opentelemetry/context-zone
Inicialização e configuração
Caso esteja escrevendo seu código em TypeScript, execute o seguinte comando:
tsc --init
Em seguida, adicione o parcel, que permitirá (entre outras coisas) que você trabalhe com TypeScript.
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 </body>:
<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
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:
/* 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:
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
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 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:
/* 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:
{
"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
Caso deseje instrumentar requisições Ajax, interações do usuário e outros, é possível registrar instrumentações adicionais para esses elementos:
registerInstrumentations({
instrumentations: [
new UserInteractionInstrumentation(),
new XMLHttpRequestInstrumentation(),
],
});
Pacotes Meta para Web
Para aproveitar as instrumentações mais comuns em um único lugar, você pode simplesmente usar os Pacotes Meta do OpenTelemetry para Web.
Feedback
Was this page helpful?
Thank you. Your feedback is appreciated!
Please let us know how we can improve this page. Your feedback is appreciated!