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 7 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.
251 changes: 251 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,251 @@
---
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/
Set the `traceparent` in the server's HTML template code. It should be
dynamically generated server side to have the server's request trace Id,
a parent span Id that was set on the server's request span, and the trace
flags to indicate the server's sampling decision
(01 = sampled, 00 = not sampled).
'{version}-{traceId}-{spanId}-{sampleDecision}'
-->
leandrocarpenter marked this conversation as resolved.
Show resolved Hide resolved
<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 um `.ts` ou `.js` extensão,
leandrocarpenter marked this conversation as resolved.
Show resolved Hide resolved
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 file - the code snippet is the same for both the languages */
leandrocarpenter marked this conversation as resolved.
Show resolved Hide resolved
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({
// Changing default contextManager to use ZoneContextManager - supports asynchronous operations - optional
leandrocarpenter marked this conversation as resolved.
Show resolved Hide resolved
contextManager: new ZoneContextManager(),
});

// Registering instrumentations
leandrocarpenter marked this conversation as resolved.
Show resolved Hide resolved
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 de desenvolvimento web (e.g. at `http://localhost:1234`) para ver se o seu código funciona.

Esse e deveria ser maiúsculo ou minusculo?


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
spans no console.
leandrocarpenter marked this conversation as resolved.
Show resolved Hide resolved

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..
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
Você também pode querer usar o `BatchSpanProcessor` para exportar trechos em lotes para usar os recursos de forma mais eficiente..
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 file - the code is the same for both the languages */
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 file - the code is the same for both the languages */
/* document-load.ts|js arquivo - 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({
// Changing default contextManager to use ZoneContextManager - supports asynchronous operations - optional
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
// Changing default contextManager to use ZoneContextManager - supports asynchronous operations - optional
// Alterando o contextManager padrão para usar ZoneContextManager - oferece suporte para operações assíncronas - opcional

contextManager: new ZoneContextManager(),
});

// Registering instrumentations
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
// Registering instrumentations
// 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}


Se você quiser instrumentar solicitações Ajax, interações do usuário e outros, você pode
registrar instrumentações adicionais para eles:
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ê quiser instrumentar solicitações Ajax, interações do usuário e outros, você pode
registrar instrumentações adicionais para eles:
Caso deseje instrumentar solicitações Ajax, interações do usuário e outros, é possível registrar instrumentações adicionais para esses elementos:

Acha que assim fica melhor?


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