Skip to content

Commit

Permalink
Tweak long lines in /js/getting-started/ (#2146)
Browse files Browse the repository at this point in the history
  • Loading branch information
windsonsea committed Jan 9, 2023
1 parent 0bb0b1c commit 803c945
Show file tree
Hide file tree
Showing 2 changed files with 35 additions and 17 deletions.
25 changes: 17 additions & 8 deletions content/en/docs/instrumentation/js/getting-started/browser.md
Expand Up @@ -15,7 +15,8 @@ Ensure that you have the following installed locally:

## Example Application

This is a very simple guide, if you'd like to see more complex examples go to [examples/opentelemetry-web](https://github.com/open-telemetry/opentelemetry-js/tree/main/examples/opentelemetry-web)
This is a very simple guide, if you'd like to see more complex examples go to
[examples/opentelemetry-web](https://github.com/open-telemetry/opentelemetry-js/tree/main/examples/opentelemetry-web).

Copy the following file into an empty directory and call it `index.html`.

Expand Down Expand Up @@ -46,7 +47,8 @@ Copy the following file into an empty directory and call it `index.html`.

### Installation

To create traces in the browser, you will need `@opentelemetry/sdk-trace-web`, and the instrumentation `@opentelemetry/instrumentation-document-load`:
To create traces in the browser, you will need `@opentelemetry/sdk-trace-web`,
and the instrumentation `@opentelemetry/instrumentation-document-load`:

```shell
npm init -y
Expand All @@ -64,13 +66,16 @@ If you are coding in TypeScript, then run the following command:
tsc --init
```

Then acquire [parcel](https://parceljs.org/), which will (among other things) let you work in Typescript.
Then acquire [parcel](https://parceljs.org/), which will (among other things)
let you work in Typescript.

```shell
npm install --save-dev parcel
```

Create an empty code file named `document-load` with a `.ts` or `.js` extension, as appropriate, based on the language you've chosen to write your app in. Add the following code to your HTML right before the `</body>` closing tag:
Create an empty code file named `document-load` with a `.ts` or `.js` extension,
as appropriate, based on the language you've chosen to write your app in. Add the
following code to your HTML right before the `</body>` closing tag:

{{< tabpane lang=html >}}

Expand All @@ -84,11 +89,13 @@ Create an empty code file named `document-load` with a `.ts` or `.js` extension,

{{< /tabpane >}}

We will add some code that will trace the document load timings and output those as OpenTelemetry Spans.
We will add some code that will trace the document load timings and output those
as OpenTelemetry Spans.

### Creating a Tracer Provider

Add the following code to the `document-load.ts|js` to create a tracer provider, which brings the instrumentation to trace document load:
Add the following code to the `document-load.ts|js` to create a tracer provider,
which brings the instrumentation to trace document load:

```js
/* document-load.ts|js file - the code snippet is the same for both the languages */
Expand Down Expand Up @@ -157,7 +164,8 @@ registerInstrumentations({
});
```

Now, rebuild your application and open the browser again. In the console of the developer toolbar you should see some traces being exported:
Now, rebuild your application and open the browser again. In the console of the
developer toolbar you should see some traces being exported:

```json
{
Expand Down Expand Up @@ -238,7 +246,8 @@ Now, rebuild your application and open the browser again. In the console of the

### Add Instrumentations

If you want to instrument AJAX requests, User Interactions and others, you can register additional instrumentations for those:
If you want to instrument AJAX requests, User Interactions and others, you can
register additional instrumentations for those:

```javascript
registerInstrumentations({
Expand Down
27 changes: 18 additions & 9 deletions content/en/docs/instrumentation/js/getting-started/nodejs.md
Expand Up @@ -84,7 +84,8 @@ app.listen(PORT, () => {

{{< /tabpane>}}

Run the application with the following request and open <http://localhost:8080> in your web browser to ensure it is working.
Run the application with the following request and open <http://localhost:8080>
in your web browser to ensure it is working.

{{< tabpane lang=console >}}

Expand All @@ -100,7 +101,6 @@ Listening for requests on http://localhost:8080

{{< /tabpane >}}


## Tracing

### Dependencies
Expand All @@ -126,17 +126,23 @@ You may also want to use the `BatchSpanProcessor` to export spans in batches in

#### Instrumentation Modules

Many common modules such as the `http` standard library module, `express`, and others can be automatically instrumented using autoinstrumentation modules. To find autoinstrumenatation modules, you can look at the [registry](/registry/?language=js&component=instrumentation).
Many common modules such as the `http` standard library module, `express`, and
others can be automatically instrumented using autoinstrumentation modules.
To find autoinstrumenatation modules, you can look at the
[registry](/registry/?language=js&component=instrumentation).

You can also install all instrumentations maintained by the OpenTelemetry authors by using the `@opentelemetry/auto-instrumentations-node` module.
You can also install all instrumentations maintained by the OpenTelemetry authors
by using the `@opentelemetry/auto-instrumentations-node` module.

```shell
npm install @opentelemetry/auto-instrumentations-node
```

### Setup

The tracing setup and configuration should be run before your application code. One tool commonly used for this task is the [`-r, --require module`](https://nodejs.org/api/cli.html#cli_r_require_module) flag.
The tracing setup and configuration should be run before your application code.
One tool commonly used for this task is the
[`-r, --require module`](https://nodejs.org/api/cli.html#cli_r_require_module) flag.

Create a file named `tracing.ts|js`, which will contain your tracing setup code.

Expand Down Expand Up @@ -182,7 +188,8 @@ sdk.start()

### Run Application

Now you can run your application as you normally would, but you can use the `--require` flag to load the tracing code before the application code.
Now you can run your application as you normally would, but you can use the
`--require` flag to load the tracing code before the application code.

{{< tabpane lang=console >}}

Expand All @@ -198,7 +205,8 @@ Listening for requests on http://localhost:8080

{{< /tabpane >}}

Open <http://localhost:8080> in your web browser and reload the page a few times, after a while you should see the spans printed in the console by the `ConsoleSpanExporter`.
Open <http://localhost:8080> in your web browser and reload the page a few times,
after a while you should see the spans printed in the console by the `ConsoleSpanExporter`.

<details>
<summary>View example output</summary>
Expand Down Expand Up @@ -287,15 +295,16 @@ Open <http://localhost:8080> in your web browser and reload the page a few times
## Next Steps

Enrich your instrumentation generated automatically with
[manual instrumentation](/docs/instrumentation/js/instrumentation) of your own codebase. This gets you
customized observability data.
[manual instrumentation](/docs/instrumentation/js/instrumentation) of your own codebase.
This gets you customized observability data.

You'll also want to configure an appropriate exporter to [export your telemetry
data](/docs/instrumentation/js/exporters) to one or more telemetry backends.

## Troubleshooting

Did something go wrong? Remember that you need to explicitly enable logging in order to see logs from OpenTelemetry:

{{< tabpane langEqualsHeader=true >}}

{{< tab TypeScript >}}
Expand Down

0 comments on commit 803c945

Please sign in to comment.