diff --git a/assets/scss/_styles_project.scss b/assets/scss/_styles_project.scss index 228c908bf1c6..a5744e664c08 100644 --- a/assets/scss/_styles_project.scss +++ b/assets/scss/_styles_project.scss @@ -275,14 +275,6 @@ body.td-page--draft .td-content { } } -// TODO(@chalin): upstream -.tab-body { - > .highlight:only-child { - margin: -1.5rem; - max-width: calc(100% + 3rem); - } -} - details { margin-bottom: $paragraph-margin-bottom; } diff --git a/content/en/docs/instrumentation/erlang/exporters.md b/content/en/docs/instrumentation/erlang/exporters.md index 8f12600bedb4..f17a549184a4 100644 --- a/content/en/docs/instrumentation/erlang/exporters.md +++ b/content/en/docs/instrumentation/erlang/exporters.md @@ -27,7 +27,7 @@ Zipkin also run by [docker-compose](https://docs.docker.com/compose/). To export to the running Collector the `opentelemetry_exporter` package must be added to the project's dependencies: -{{< tabpane text=true langEqualsHeader=true >}} {{% tab Erlang %}} +{{< tabpane text=true >}} {{% tab Erlang %}} ```erlang {deps, [{opentelemetry_api, "~> {{% param versions.otelApi %}}"}, @@ -56,7 +56,7 @@ attempts to initialize and use the exporter. Example of Release configuration in `rebar.config` and for [mix's Release task](https://hexdocs.pm/mix/Mix.Tasks.Release.html): -{{< tabpane text=true langEqualsHeader=true >}} {{% tab Erlang %}} +{{< tabpane text=true >}} {{% tab Erlang %}} ```erlang %% rebar.config @@ -94,7 +94,7 @@ the HTTP protocol with endpoint of `localhost` on port `4318`. If using `grpc` for the `otlp_protocol` the endpoint should be changed to `http://localhost:4317`. -{{< tabpane text=true langEqualsHeader=true >}} {{% tab Erlang %}} +{{< tabpane text=true >}} {{% tab Erlang %}} ```erlang %% config/sys.config.src diff --git a/content/en/docs/instrumentation/erlang/getting-started.md b/content/en/docs/instrumentation/erlang/getting-started.md index 906850559f55..969ba1d0983a 100644 --- a/content/en/docs/instrumentation/erlang/getting-started.md +++ b/content/en/docs/instrumentation/erlang/getting-started.md @@ -304,7 +304,7 @@ more telemetry backends. To get started with this guide, create a new project with `rebar3` or `mix`: -{{< tabpane text=true langEqualsHeader=true >}} {{% tab Erlang %}} +{{< tabpane text=true >}} {{% tab Erlang %}} ```erlang rebar3 new release otel_getting_started @@ -322,7 +322,7 @@ Then, in the project you just created, add both `opentelemetry_api` and `opentelemetry` as dependencies. We add both because this is a project we will run as a Release and export spans from. -{{< tabpane text=true langEqualsHeader=true >}} {{% tab Erlang %}} +{{< tabpane text=true >}} {{% tab Erlang %}} ```erlang {deps, [{opentelemetry_api, "~> {{% param versions.otelApi %}}"}, @@ -346,7 +346,7 @@ In the case of Erlang, the API Application will also need to be added to `src/otel_getting_started.app.src` and a `relx` section to `rebar.config`. In an Elixir project, a `releases` section needs to be added to `mix.exs`: -{{< tabpane text=true langEqualsHeader=true >}} {{% tab Erlang %}} +{{< tabpane text=true >}} {{% tab Erlang %}} ```erlang %% src/otel_getting_started.app.src @@ -413,7 +413,7 @@ To configure OpenTelemetry to use a particular exporter, in this case the `exporter` for the span processor `otel_batch_processor`, a type of span processor that batches up multiple spans over a period of time: -{{< tabpane text=true langEqualsHeader=true >}} {{% tab Erlang %}} +{{< tabpane text=true >}} {{% tab Erlang %}} ```erlang %% config/sys.config.src @@ -440,7 +440,7 @@ config :opentelemetry, Now that the dependencies and configuration are set up, we can create a module with a function `hello/0` that starts some spans: -{{< tabpane text=true langEqualsHeader=true >}} {{% tab Erlang %}} +{{< tabpane text=true >}} {{% tab Erlang %}} ```erlang %% apps/otel_getting_started/src/otel_getting_started.erl diff --git a/content/en/docs/instrumentation/erlang/manual.md b/content/en/docs/instrumentation/erlang/manual.md index 318bc3865be0..56552699c506 100644 --- a/content/en/docs/instrumentation/erlang/manual.md +++ b/content/en/docs/instrumentation/erlang/manual.md @@ -53,7 +53,7 @@ interactive shell, a `Tracer` with a blank name and version is used. The created `Tracer`'s record can be looked up by the name of a module in the OTP Application: -{{< tabpane text=true langEqualsHeader=true >}} {{% tab Erlang %}} +{{< tabpane text=true >}} {{% tab Erlang %}} ```erlang opentelemetry:get_application_tracer(?MODULE) @@ -75,7 +75,7 @@ This is how the Erlang and Elixir macros for starting and updating `Spans` get a Now that you have [Tracer](/docs/concepts/signals/traces/#tracer)s initialized, you can create [Spans](/docs/concepts/signals/traces/#spans). -{{< tabpane text=true langEqualsHeader=true >}} {{% tab Erlang %}} +{{< tabpane text=true >}} {{% tab Erlang %}} ```erlang ?with_span(main, #{}, fun() -> @@ -104,7 +104,7 @@ common kind of Span to create. ### Create Nested Spans -{{< tabpane text=true langEqualsHeader=true >}} {{% tab Erlang %}} +{{< tabpane text=true >}} {{% tab Erlang %}} ```erlang parent_function() -> @@ -160,7 +160,7 @@ attaching the context and setting the new span as currently active in the process. The whole context should be attached in order to not lose other telemetry data like [baggage](/docs/specs/otel/baggage/api/). -{{< tabpane text=true langEqualsHeader=true >}} {{% tab Erlang %}} +{{< tabpane text=true >}} {{% tab Erlang %}} ```erlang SpanCtx = ?start_span(child), @@ -204,7 +204,7 @@ Span Links that causally link it to another Span. A [Link](/docs/concepts/signals/traces/#span-links) needs a Span context to be created. -{{< tabpane text=true langEqualsHeader=true >}} {{% tab Erlang %}} +{{< tabpane text=true >}} {{% tab Erlang %}} ```erlang Parent = ?current_span_ctx, @@ -243,7 +243,7 @@ The following example shows the two ways of setting attributes on a span by both setting an attribute in the start options and then again with `set_attributes` in the body of the span operation: -{{< tabpane text=true langEqualsHeader=true >}} {{% tab Erlang %}} +{{< tabpane text=true >}} {{% tab Erlang %}} ```erlang ?with_span(my_span, #{attributes => [{'start-opts-attr', <<"start-opts-value">>}]}, @@ -276,7 +276,7 @@ from the specification and provided in For example, an instrumentation for an HTTP client or server would need to include semantic attributes like the scheme of the URL: -{{< tabpane text=true langEqualsHeader=true >}} {{% tab Erlang %}} +{{< tabpane text=true >}} {{% tab Erlang %}} ```erlang -include_lib("opentelemetry_semantic_conventions/include/trace.hrl"). @@ -306,7 +306,7 @@ message on an [Span](/docs/concepts/signals/traces/#spans) that represents a discrete event with no duration that can be tracked by a single timestamp. You can think of it like a primitive log. -{{< tabpane text=true langEqualsHeader=true >}} {{% tab Erlang %}} +{{< tabpane text=true >}} {{% tab Erlang %}} ```erlang ?add_event(<<"Gonna try it">>), @@ -330,7 +330,7 @@ Tracer.add_event("Did it!") Events can also have attributes of their own: -{{< tabpane text=true langEqualsHeader=true >}} {{% tab Erlang %}} +{{< tabpane text=true >}} {{% tab Erlang %}} ```erlang ?add_event(<<"Process exited with reason">>, [{pid, Pid)}, {reason, Reason}])) @@ -354,7 +354,7 @@ could override the Error status with `StatusCode.OK`, but don’t set The status can be set at any time before the span is finished: -{{< tabpane text=true langEqualsHeader=true >}} {{% tab Erlang %}} +{{< tabpane text=true >}} {{% tab Erlang %}} ```erlang -include_lib("opentelemetry_api/include/opentelemetry.hrl"). diff --git a/content/en/docs/instrumentation/erlang/propagation.md b/content/en/docs/instrumentation/erlang/propagation.md index 11e2c3289bb8..edf4fb7c49f4 100644 --- a/content/en/docs/instrumentation/erlang/propagation.md +++ b/content/en/docs/instrumentation/erlang/propagation.md @@ -26,7 +26,7 @@ propagators. By default the global propagators used are the W3C These global propagators can be configured by the Application environment variable `text_map_propagators`: -{{< tabpane text=true langEqualsHeader=true >}} {{% tab Erlang %}} +{{< tabpane text=true >}} {{% tab Erlang %}} ```erlang %% sys.config @@ -55,7 +55,7 @@ and `b3multi`. To manually inject or extract context the `otel_propagator_text_map` module can be used: -{{< tabpane text=true langEqualsHeader=true >}} {{% tab Erlang %}} +{{< tabpane text=true >}} {{% tab Erlang %}} ```erlang %% uses the context from the process dictionary to add to an empty list of headers diff --git a/content/en/docs/instrumentation/erlang/resources.md b/content/en/docs/instrumentation/erlang/resources.md index 9049ce834a2c..1c4063923bc4 100644 --- a/content/en/docs/instrumentation/erlang/resources.md +++ b/content/en/docs/instrumentation/erlang/resources.md @@ -20,7 +20,7 @@ detectors use the OS environment variable `OTEL_RESOURCE_ATTRIBUTES` and the The detectors to use is a list of module names and can be configured in the Application configuration: -{{< tabpane text=true langEqualsHeader=true >}} {{% tab Erlang %}} +{{< tabpane text=true >}} {{% tab Erlang %}} ```erlang %% sys.config @@ -61,7 +61,7 @@ OTEL_RESOURCE_ATTRIBUTES="deployment.environment=development" Alternatively, use the `resource` Application environment under the `opentelemetry` Application configuration of `sys.config` or `runtime.exs`: -{{< tabpane text=true langEqualsHeader=true >}} {{% tab Erlang %}} +{{< tabpane text=true >}} {{% tab Erlang %}} ```erlang %% sys.config diff --git a/content/en/docs/instrumentation/erlang/sampling.md b/content/en/docs/instrumentation/erlang/sampling.md index b520374142fd..f7e6afe6ffd0 100644 --- a/content/en/docs/instrumentation/erlang/sampling.md +++ b/content/en/docs/instrumentation/erlang/sampling.md @@ -58,7 +58,7 @@ This tells the SDK to sample spans such that only 10% of Traces get created. Example in the Application configuration with a root sampler for sampling 10% of Traces and using the parent decision in the other cases: -{{< tabpane text=true langEqualsHeader=true >}} {{% tab Erlang %}} +{{< tabpane text=true >}} {{% tab Erlang %}} ```erlang %% config/sys.config.src @@ -107,7 +107,7 @@ export OTEL_TRACES_SAMPLER="parentbased_always_off" Here's an example in the Application configuration with a root sampler that always samples and using the parent decision in the other cases: -{{< tabpane text=true langEqualsHeader=true >}} {{% tab Erlang %}} +{{< tabpane text=true >}} {{% tab Erlang %}} ```erlang %% config/sys.config.src @@ -137,7 +137,7 @@ Custom samplers can be created by implementing the [`otel_sampler` behaviour](https://hexdocs.pm/opentelemetry/1.3.0/otel_sampler.html#callbacks). This example sampler: -{{< tabpane text=true langEqualsHeader=true >}} {{% tab Erlang %}} +{{< tabpane text=true >}} {{% tab Erlang %}} ```erlang -module(attribute_sampler). @@ -202,7 +202,7 @@ passed as the sampler's configuration. Example configuration to not sample any Span with an attribute specifying the URL requested is `/healthcheck`: -{{< tabpane text=true langEqualsHeader=true >}} {{% tab Erlang %}} +{{< tabpane text=true >}} {{% tab Erlang %}} ```erlang {opentelemetry, {sampler, {attributes_sampler, #{'http.target' => <<"/healthcheck">>}}}} diff --git a/content/en/docs/instrumentation/erlang/testing.md b/content/en/docs/instrumentation/erlang/testing.md index 3f4e2b49efc1..772a474fef9e 100644 --- a/content/en/docs/instrumentation/erlang/testing.md +++ b/content/en/docs/instrumentation/erlang/testing.md @@ -15,7 +15,7 @@ validation. Only the `opentelemetry` and `opentelemetry_api` libraries are required for testing in Elixir/Erlang: -{{< tabpane text=true langEqualsHeader=true >}} {{% tab Erlang %}} +{{< tabpane text=true >}} {{% tab Erlang %}} ```erlang {deps, [{opentelemetry_api, "~> {{% param versions.otelApi %}}"}, @@ -39,7 +39,7 @@ Set your `exporter` to `:none` and the span processor to `:otel_simple_processor`. This ensure that your tests don't actually export data to a destination, and that spans can be analyzed after they are processed. -{{< tabpane text=true langEqualsHeader=true >}} {{% tab Erlang %}} +{{< tabpane text=true >}} {{% tab Erlang %}} ```erlang %% config/sys.config.src @@ -69,7 +69,7 @@ A modified version of the `hello` function from the [Getting Started](/docs/instrumentation/erlang/getting-started/) guide will serve as our test case: -{{< tabpane text=true langEqualsHeader=true >}} {{% tab Erlang %}} +{{< tabpane text=true >}} {{% tab Erlang %}} ```erlang %% apps/otel_getting_started/src/otel_getting_started.erl @@ -108,7 +108,7 @@ end ## Testing -{{< tabpane text=true langEqualsHeader=true >}} {{% tab Erlang %}} +{{< tabpane text=true >}} {{% tab Erlang %}} ```erlang -module(otel_getting_started_SUITE). diff --git a/content/en/docs/instrumentation/js/exporters.md b/content/en/docs/instrumentation/js/exporters.md index e2c11acdb585..8a36a0166ca4 100644 --- a/content/en/docs/instrumentation/js/exporters.md +++ b/content/en/docs/instrumentation/js/exporters.md @@ -109,7 +109,7 @@ JavaScript) from the [Getting Started](/docs/instrumentation/js/getting-started/nodejs/) like the following to export traces and metrics via OTLP (`http/protobuf`) : -{{< tabpane text=true langEqualsHeader=true >}} {{% tab Typescript %}} +{{< tabpane text=true >}} {{% tab Typescript %}} ```ts /*instrumentation.ts*/ @@ -374,7 +374,7 @@ npm install --save @opentelemetry/exporter-prometheus Update your OpenTelemetry configuration to use the exporter and to send data to your Prometheus backend: -{{< tabpane text=true langEqualsHeader=true >}} {{% tab Typescript %}} +{{< tabpane text=true >}} {{% tab Typescript %}} ```ts import * as opentelemetry from '@opentelemetry/sdk-node'; @@ -449,7 +449,7 @@ npm install --save @opentelemetry/exporter-zipkin Update your OpenTelemetry configuration to use the exporter and to send data to your Zipkin backend: -{{< tabpane text=true langEqualsHeader=true >}} {{% tab Typescript %}} +{{< tabpane text=true >}} {{% tab Typescript %}} ```ts import * as opentelemetry from '@opentelemetry/sdk-node'; @@ -495,7 +495,7 @@ allow you to either emit spans one-by-one or batched. If not specified otherwise the SDK will use the `BatchSpanProcessor`. If you do not want to batch your spans, you can use the `SimpleSpanProcessor` instead as follows: -{{< tabpane text=true langEqualsHeader=true >}} {{% tab Typescript %}} +{{< tabpane text=true >}} {{% tab Typescript %}} ```ts /*instrumentation.ts*/ diff --git a/content/en/docs/instrumentation/js/getting-started/nodejs.md b/content/en/docs/instrumentation/js/getting-started/nodejs.md index 675a3a6e0dce..5c1e96e43ec1 100644 --- a/content/en/docs/instrumentation/js/getting-started/nodejs.md +++ b/content/en/docs/instrumentation/js/getting-started/nodejs.md @@ -70,7 +70,7 @@ npm install express Create a file named `app.ts` (or `app.js` if not using TypeScript) and add the following code to it: -{{% tabpane text=true langEqualsHeader=true %}} {{% tab TypeScript %}} +{{% tabpane text=true %}} {{% tab TypeScript %}} ```ts /*app.ts*/ @@ -171,7 +171,7 @@ application code. One tool commonly used for this task is the Create a file named `instrumentation.ts` (or `instrumentation.js` if not using TypeScript) , which will contain your instrumentation setup code. -{{< tabpane text=true langEqualsHeader=true >}} {{% tab TypeScript %}} +{{< tabpane text=true >}} {{% tab TypeScript %}} ```ts /*instrumentation.ts*/ @@ -484,7 +484,7 @@ If you'd like to explore a more complex example, take a look at the Did something go wrong? You can enable diagnostic logging to validate that OpenTelemetry is initialized correctly: -{{< tabpane text=true langEqualsHeader=true >}} {{% tab TypeScript %}} +{{< tabpane text=true >}} {{% tab TypeScript %}} ```ts /*instrumentation.ts*/ diff --git a/content/en/docs/instrumentation/js/manual.md b/content/en/docs/instrumentation/js/manual.md index 334d6656e8f7..07ecb768a9d4 100644 --- a/content/en/docs/instrumentation/js/manual.md +++ b/content/en/docs/instrumentation/js/manual.md @@ -71,7 +71,7 @@ imported as a dependency by the _app file_. Create the _library file_ named `dice.ts` (or `dice.js` if you are not using TypeScript) and add the following code to it: -{{< tabpane text=true langEqualsHeader=true >}} {{% tab TypeScript %}} +{{< tabpane text=true >}} {{% tab TypeScript %}} ```ts /*dice.ts*/ @@ -112,7 +112,7 @@ module.exports = { rollTheDice }; Create the _app file_ named `app.ts` (or `app.js` if not using TypeScript) and add the following code to it: -{{< tabpane text=true langEqualsHeader=true >}} {{% tab TypeScript %}} +{{< tabpane text=true >}} {{% tab TypeScript %}} ```ts /*app.ts*/ @@ -212,7 +212,7 @@ SDK. If you fail to initialize the SDK or initialize it too late, no-op implementations will be provided to any library that acquires a tracer or meter from the API. -{{< tabpane text=true langEqualsHeader=true >}} {{% tab TypeScript %}} +{{< tabpane text=true >}} {{% tab TypeScript %}} ```ts /*instrumentation.ts*/ @@ -344,7 +344,7 @@ npm install @opentelemetry/sdk-trace-web Next, update `instrumentation.ts` (or `instrumentation.js`) to contain all the SDK initialization code in it: -{{< tabpane text=true langEqualsHeader=true >}} {{% tab TypeScript %}} +{{< tabpane text=true >}} {{% tab TypeScript %}} ```ts import { Resource } from '@opentelemetry/resources'; @@ -434,7 +434,7 @@ In most cases, stick with `BatchSpanProcessor` over `SimpleSpanProcessor`. Anywhere in your application where you write manual tracing code should call `getTracer` to acquire a tracer. For example: -{{< tabpane text=true langEqualsHeader=true >}} {{% tab TypeScript %}} +{{< tabpane text=true >}} {{% tab TypeScript %}} ```ts import opentelemetry from '@opentelemetry/api'; @@ -480,7 +480,7 @@ tracer may be acquired with an appropriate Instrumentation Scope: First, in the _application file_ `app.ts` (or `app.js`): -{{< tabpane text=true langEqualsHeader=true >}} {{% tab TypeScript %}} +{{< tabpane text=true >}} {{% tab TypeScript %}} ```ts /*app.ts*/ @@ -542,7 +542,7 @@ app.listen(PORT, () => { And second, in the _library file_ `dice.ts` (or `dice.js`): -{{< tabpane text=true langEqualsHeader=true >}} {{% tab TypeScript %}} +{{< tabpane text=true >}} {{% tab TypeScript %}} ```ts /*dice.ts*/ @@ -608,7 +608,7 @@ care of setting the span and its context active. The code below illustrates how to create an active span. -{{< tabpane text=true langEqualsHeader=true >}} {{% tab TypeScript %}} +{{< tabpane text=true >}} {{% tab TypeScript %}} ```ts import { trace, Span } from '@opentelemetry/api'; @@ -695,7 +695,7 @@ nested in nature. For example, the `rollOnce()` function below represents a nested operation. The following sample creates a nested span that tracks `rollOnce()`: -{{< tabpane text=true langEqualsHeader=true >}} {{% tab TypeScript %}} +{{< tabpane text=true >}} {{% tab TypeScript %}} ```ts function rollOnce(i: number, min: number, max: number) { @@ -837,7 +837,7 @@ const span = opentelemetry.trace.getSpan(ctx); pairs to a [`Span`](/docs/concepts/signals/traces/#spans) so it carries more information about the current operation that it's tracking. -{{< tabpane text=true langEqualsHeader=true >}} {{% tab TypeScript %}} +{{< tabpane text=true >}} {{% tab TypeScript %}} ```ts function rollOnce(i: number, min: number, max: number) { @@ -885,7 +885,7 @@ tracer.startActiveSpan( ); ``` -{{< tabpane text=true langEqualsHeader=true >}} {{% tab TypeScript %}} +{{< tabpane text=true >}} {{% tab TypeScript %}} ```ts function rollTheDice(rolls: number, min: number, max: number) { @@ -931,7 +931,7 @@ npm install --save @opentelemetry/semantic-conventions Add the following to the top of your application file: -{{< tabpane text=true langEqualsHeader=true >}} {{% tab TypeScript %}} +{{< tabpane text=true >}} {{% tab TypeScript %}} ```ts import { SemanticAttributes } from '@opentelemetry/semantic-conventions'; @@ -1017,7 +1017,7 @@ typically used to specify that a span has not completed successfully - The status can be set at any time before the span is finished: -{{< tabpane text=true langEqualsHeader=true >}} {{% tab TypeScript %}} +{{< tabpane text=true >}} {{% tab TypeScript %}} ```ts import opentelemetry, { SpanStatusCode } from '@opentelemetry/api'; @@ -1071,7 +1071,7 @@ explicitly tracking an error. It can be a good idea to record exceptions when they happen. It's recommended to do this in conjunction with setting [span status](#span-status). -{{< tabpane text=true langEqualsHeader=true >}} {{% tab TypeScript %}} +{{< tabpane text=true >}} {{% tab TypeScript %}} ```ts import opentelemetry, { SpanStatusCode } from '@opentelemetry/api'; @@ -1114,7 +1114,7 @@ nested spans. Initializing tracing is similar to how you'd do it with Node.js or the Web SDK. -{{< tabpane text=true langEqualsHeader=true >}} {{% tab TypeScript %}} +{{< tabpane text=true >}} {{% tab TypeScript %}} ```ts import opentelemetry from '@opentelemetry/api'; @@ -1264,7 +1264,7 @@ If you have not created it for tracing already, create a separate `instrumentation.ts` (or `instrumentation.js`) file that has all the SDK initialization code in it: -{{< tabpane text=true langEqualsHeader=true >}} {{% tab TypeScript %}} +{{< tabpane text=true >}} {{% tab TypeScript %}} ```ts import opentelemetry from '@opentelemetry/api'; @@ -1363,7 +1363,7 @@ Now that a `MeterProvider` is configured, you can acquire a `Meter`. Anywhere in your application where you have manually instrumented code you can call `getMeter` to acquire a meter. For example: -{{< tabpane text=true langEqualsHeader=true >}} {{% tab TypeScript %}} +{{< tabpane text=true >}} {{% tab TypeScript %}} ```ts import opentelemetry from '@opentelemetry/api'; @@ -1455,7 +1455,7 @@ Histograms are used to measure a distribution of values over time. For example, here's how you report a distribution of response times for an API route with Express: -{{< tabpane text=true langEqualsHeader=true >}} {{% tab TypeScript %}} +{{< tabpane text=true >}} {{% tab TypeScript %}} ```ts import express from 'express';