Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[pt] Localize content/pt/docs/languages/js/getting-started/ #5415

Open
wants to merge 10 commits into
base: main
Choose a base branch
from
Open

[pt] Localize content/pt/docs/languages/js/getting-started/ #5415

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
f32c782
Tradução JS - Getting Started
leandrocarpenter Oct 16, 2024
8cf736e
Merge branch 'main' into ptbr_translate_languages_js_gs
leandrocarpenter Oct 16, 2024
898227c
Merge branch 'main' into ptbr_translate_languages_js_gs
leandrocarpenter Oct 16, 2024
0ef2e5e
Merge branch 'main' into ptbr_translate_languages_js_gs
leandrocarpenter Oct 21, 2024
264168e
Merge branch 'main' into ptbr_translate_languages_js_gs
edsoncelio Nov 2, 2024
97d539b
Ajuste das recomendações e inclusão do "default_lang_commit"
leandrocarpenter Nov 5, 2024
17ee3b8
Merge branch 'main' into ptbr_translate_languages_js_gs
leandrocarpenter Nov 5, 2024
180c657
Update content/pt/docs/languages/js/getting-started/browser.md
leandrocarpenter Nov 19, 2024
efc33db
Ajust translation
leandrocarpenter Nov 19, 2024
dc741a9
Merge branch 'main' into ptbr_translate_languages_js_gs
leandrocarpenter Nov 19, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 9 additions & 0 deletions content/pt/docs/languages/js/getting-started/_index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
---
title: Começando
aliases: [/docs/js/getting_started]
weight: 10
description: Começando a usar OpenTelemetry no Node.js e no navegador.
default_lang_commit: 06837fe15457a584f6a9e09579be0f0400593d57
---

Esses dois guias para Node.js e o navegador usam exemplos básicos em JavaScript para você começar com OpenTelemetry.
250 changes: 250 additions & 0 deletions content/pt/docs/languages/js/getting-started/browser.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,250 @@
---
title: Navegador
aliases: [/docs/js/getting_started/browser]
description: Aprenda como adicionar OpenTelemetry para seu aplicativo de navegador
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
description: Aprenda como adicionar OpenTelemetry para seu aplicativo de navegador
description: Aprenda como adicionar OpenTelemetry para sua aplicação de navegador

weight: 20
default_lang_commit: 06837fe15457a584f6a9e09579be0f0400593d57
---

{{% alert title="Warning" color="warning" %}}
{{% _param notes.browser-instrumentation %}} {{% /alert %}}

Enquanto este guia utiliza o exemplo de aplicação apresentado abaixo, os passos para instrumentar sua própria aplicação devem ser similares.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
Enquanto este guia utiliza o exemplo de aplicação apresentado abaixo, os passos para instrumentar sua própria aplicação devem ser similares.
Enquanto este guia utiliza aplicação de exemplo apresentada abaixo, os passos para instrumentar sua própria aplicação devem ser similares.


## Pré-requisitos
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
## Pré-requisitos
## Pré-requisitos {#prerequisites}

Adiciona ancora


Certifique-se de que você tem instalado localmente:

- [Node.js](https://nodejs.org/en/download/)
- [TypeScript](https://www.typescriptlang.org/download), se você for usar
TypeScript.

## Exemplo de Aplicação
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
## Exemplo de Aplicação
## Exemplo de Aplicação {#example-application}


Este é um guia muito simples, se você quiser ver exemplos mais complexos, vá para
[examples/opentelemetry-web](https://github.com/open-telemetry/opentelemetry-js/tree/main/examples/opentelemetry-web).

Copie o seguinte arquivo em um diretório vazio e chame-o `index.html`.

```html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Document Load Instrumentation Example</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 no lado do servidor para conter o
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
Ele deve ser gerado dinamicamente no lado do servidor para conter o
Ele deve ser gerado dinamicamente pelo servidor para conter o

trace Id da requisição do servidor, um span Id de pai que foi definido
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
trace Id da requisição do servidor, um span Id de pai que foi definido
Id do rastro da requisição do servidor, o Id do trecho pai que foi definido

no span de requisição do servidor, e as flags de rastreamento para
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
no span de requisição do servidor, e as flags de rastreamento para
no trecho de requisição do servidor, e as flags de rastreamento para

indicar a decisão de amostragem do servidor (01 = amostrado, 00 = não amostrado).
'{version}-{traceId}-{spanId}-{sampleDecision}'
-->
<meta
name="traceparent"
content="00-ab42124a3c573678d4d8b21ba52df3bf-d21f7bc17caa5aba-01"
/>
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
Example of using Web Tracer with document load instrumentation with console
exporter and collector exporter
</body>
</html>
```

### Instalação
Copy link
Contributor

@EzzioMoreira EzzioMoreira Nov 20, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
### Instalação
### Instalação {#installation}


Para criar rastros no navegador, você irá precisar `@opentelemetry/sdk-trace-web`,
e a 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
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
### Inicialização e Configuração
### Inicialização e Configuração {#initialization-and-configuration}


Se você estiver codificando em TypeScript, execute o seguinte comando:
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
Se você estiver codificando em TypeScript, execute o seguinte comando:
Se você estiver escrevendo seu código em TypeScript, execute o seguinte comando:


```shell
tsc --init
```

Então adicione [parcel](https://parceljs.org/), que (entre outras coisas) permitirá 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`,
com base no idioma que você escolheu para escrever seu aplicativo. Adicione o seguinte código ao seu HTML logo antes do `</body>` fechando tag:
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
com base no idioma que você escolheu para escrever seu aplicativo. Adicione o seguinte código ao seu HTML logo antes do `</body>` fechando tag:
com base na linguagem que você escolheu para escrever sua aplicação. Adicione o seguinte código ao seu HTML logo antes da tag `</body>`:


{{< tabpane text=true >}} {{% tab TypeScript %}}

```html
<script type="module" src="document-load.ts"></script>
```

{{% /tab %}} {{% tab JavaScript %}}

```html
<script type="module" src="document-load.js"></script>
```

{{% /tab %}} {{< /tabpane >}}

Implementaremos código para monitorar os tempos de carregamento do documento e relatar esses dados como Spans OpenTelemetry.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
Implementaremos código para monitorar os tempos de carregamento do documento e relatar esses dados como Spans OpenTelemetry.
Adicionaremos o código para rastrear os tempos de carregamento do documento e relatar esses dados como trechos OpenTelemetry.


### Criando um Provedor de Rastros
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
### Criando um Provedor de Rastros
### Criando um Provedor de Rastros {#creating-a-tracer-provider}

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pelo glossário, não estamos traduzindo neste caso

Suggested change
### Criando um Provedor de Rastros
### Criando um Tracer Provider


Adicione o seguinte código ao `document-load.ts|js` para criar um provedor de rastros,
que traz a instrumentação para rastrear a carga do documento:
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
que traz a instrumentação para rastrear a carga do documento:
que traz a instrumentação para rastrear o tempo de carregamento do documento:


```js
/* document-load.ts|js arquivo - o trecho de código é o mesmo para ambas as linguagens */
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
/* document-load.ts|js arquivo - o trecho de código é o mesmo para ambas as linguagens */
/* 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 usar ZoneContextManager - oferece suporte para operações assíncronas - opcional
contextManager: new ZoneContextManager(),
});

// Registrando instrumentações
registerInstrumentations({
instrumentations: [new DocumentLoadInstrumentation()],
});
```

Agora crie o aplicativo com parcel:
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
Agora crie o aplicativo com parcel:
Agora crie a aplicação com parcel:


```shell
npx parcel index.html
```

E abra o servidor de desenvolvimento web (e.g. at `http://localhost:1234`) para ver se o seu código funciona.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
E abra o servidor de desenvolvimento web (e.g. at `http://localhost:1234`) para ver se o seu código funciona.
E abra o servidor web de desenvolvimento (e.g. at `http://localhost:1234`) para ver se o seu código funciona.


Ainda não haverá saída de rastros, para isso precisamos adicionar um exportador.

### Criando um Exportador
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
### Criando um Exportador
### Criando um Exportador {#creating-an-exporter}

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
### Criando um Exportador
### Criando um Exporter

este também não está sendo traduzido


No exemplo a seguir, usaremos o `ConsoleSpanExporter` que imprime todos os
trechos no console.

Para visualizar e analisar seus rastros, você precisará exportá-los para um
backend de rastreamento. Seguir [estas instruções](../../exporters) para configurar um
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
backend de rastreamento. Seguir [estas instruções](../../exporters) para configurar um
_backend_ de rastreamento. Siga [estas instruções](../../exporters) para configurar um

backend e exportador.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
backend e exportador.
_backend_ e exportador.


Você também pode querer usar o `BatchSpanProcessor` para exportar trechos em lotes para usar os recursos de forma mais eficiente.

Para exportar rastros para o console, modifique `document-load.ts|js` para que corresponda
ao seguinte trecho de código:

```js
/* document-load.ts|js arquivo - o código é o mesmo para ambas as linguagens */
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
/* document-load.ts|js arquivo - o código é o mesmo para ambas as linguagens */
/* 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();
provider.addSpanProcessor(new SimpleSpanProcessor(new ConsoleSpanExporter()));

provider.register({
// Alterando o contextManager padrão para usar ZoneContextManager - oferece suporte para operações assíncronas - opcional
contextManager: new ZoneContextManager(),
});

// Registrando Instrumentações
registerInstrumentations({
instrumentations: [new DocumentLoadInstrumentation()],
});
```

Agora, reconstrua seu aplicativo e abra o navegador novamente. No console da
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
Agora, reconstrua seu aplicativo e abra o navegador novamente. No console da
Agora, reconstrua sua aplicação e abra o navegador novamente. No console da

barra de ferramentas do desenvolvedor, você deve 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
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
### Adicionar Instrumentações
### Adicionar Instrumentações {#add-instrumentations}


Caso deseje instrumentar solicitações Ajax, interações do usuário e outros, é possível registrar instrumentações adicionais para esses elementos:

```javascript
registerInstrumentations({
instrumentations: [
new UserInteractionInstrumentation(),
new XMLHttpRequestInstrumentation(),
],
});
```

## Meta Pacotes para Web
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
## Meta Pacotes para Web
## Meta Pacotes para Web {#meta-packages-for-web}


Para aproveitar as instrumentações mais comuns em um só lugar, você pode simplesmente usar o
[OpenTelemetry Meta Pacotes para Web](https://www.npmjs.com/package/@opentelemetry/auto-instrumentations-web)
Loading
Loading