You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: docs/advanced-features/instrumentation.md
+2-2Lines changed: 2 additions & 2 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,5 +1,5 @@
1
1
---
2
-
description: Learn how to instrument your Next.js app.
2
+
description: Learn how to use instrumentation to run code at server startup in your Next.js app
3
3
---
4
4
5
5
> **Note**: This feature is experimental. To use it, you must explicitly opt in by defining `experimental.instrumentationHook = true;` in your `next.config.js`.
@@ -35,7 +35,7 @@ export const register() {
35
35
36
36
By doing this, you can colocate all of your side effects in one place in your code, and avoid any unintended consequences from importing files.
37
37
38
-
We call `register` in all environments, so it's necessary to conditionally require any code that doesn't support both `edge` and `nodejs`. You can use environment variable `NEXT_RUNTIME` to get the current environment. Importing environment specific code would look like this:
38
+
We call `register` in all environments, so it's necessary to conditionally require any code that doesn't support both `edge` and `nodejs`. You can use the environment variable `NEXT_RUNTIME` to get the current environment. Importing an environment-specific code would look like this:
Copy file name to clipboardExpand all lines: docs/advanced-features/open-telemetry.md
+13-13Lines changed: 13 additions & 13 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,5 +1,5 @@
1
1
---
2
-
description: Learn how instrument your Next.js app with OpenTelemetry.
2
+
description: Learn how to instrument your Next.js app with OpenTelemetry.
3
3
---
4
4
5
5
> **Note**: This feature is experimental, you need to explicitly opt-in by providing `experimental.instrumentationHook = true;` in your `next.config.js`.
@@ -11,13 +11,13 @@ Observability is crucial for understanding and optimizing the behavior and perfo
11
11
As applications become more complex, it becomes increasingly difficult to identify and diagnose issues that may arise. By leveraging observability tools, such as logging and metrics, developers can gain insights into their application's behavior and identify areas for optimization. With observability, developers can proactively address issues before they become major problems and provide a better user experience. Therefore, it is highly recommended to use observability in your Next.js applications to improve performance, optimize resources, and enhance user experience.
12
12
13
13
We recommend using OpenTelemetry for instrumenting your apps.
14
-
It's a platformagnostic way to instrument apps that allows you to change your observability provider without changing your code.
14
+
It's a platform-agnostic way to instrument apps that allows you to change your observability provider without changing your code.
15
15
Read [Official OpenTelemetry docs](https://opentelemetry.io/docs/) for more information about OpenTelemetry and how it works.
16
16
17
17
This documentation uses terms like _Span_, _Trace_ or _Exporter_ throughout this doc, all of which can be found in [the OpenTelemetry Observability Primer](https://opentelemetry.io/docs/concepts/observability-primer/).
18
18
19
-
Next.js supports OpenTelemetry instrumentation out of the box, that means that we already instrumented Next.js itself.
20
-
When you enable OpenTelemetry you we will automatically wrap all your code like `getStaticProps` in a_spans_ with helpful attributes.
19
+
Next.js supports OpenTelemetry instrumentation out of the box, which means that we already instrumented Next.js itself.
20
+
When you enable OpenTelemetry we will automatically wrap all your code like `getStaticProps` in _spans_ with helpful attributes.
21
21
22
22
> **Note:** We currently support OpenTelemetry bindings only in serverless functions.
23
23
> We don't provide any for `edge` or client side code.
Now you can initialize `NodeSDK`in your `instrumentation.ts`.
64
-
OpenTelemetry APIs are not compatible with edge runtime, so you need to make sure that you are importing them only when `process.end.NEXT_RUNTIME === "nodejs"`. Conditionally importing with an `require` doesn't play well with typescript. We recommend using a conditionally `require`ing new file `instrumentation.node.ts` which can use normal `import`s:
64
+
OpenTelemetry APIs are not compatible with edge runtime, so you need to make sure that you are importing them only when `process.env.NEXT_RUNTIME === 'nodejs'`. Conditionally importing with an `require` doesn't play well with typescript. We recommend using a conditionally `require`ing new file `instrumentation.node.ts` which can use normal `import`s:
65
65
66
66
```ts
67
67
// instrumentation.ts
@@ -91,11 +91,11 @@ sdk.start()
91
91
```
92
92
93
93
Doing this is equivalent to using `@vercel/otel`, but it's possible to modify and extend.
94
-
For example you could use `@opentelemetry/exporter-trace-otlp-grpc` instead of `@opentelemetry/exporter-trace-otlp-http`.
94
+
For example, you could use `@opentelemetry/exporter-trace-otlp-grpc` instead of `@opentelemetry/exporter-trace-otlp-http`.
95
95
96
96
## Testing your instrumentation
97
97
98
-
You need a OpenTelemetry collector with a compatible backend to test OpenTelemetry traces locally.
98
+
You need an OpenTelemetry collector with a compatible backend to test OpenTelemetry traces locally.
99
99
We recommend using our [OpenTelemetry dev environment](https://github.com/vercel/opentelemetry-collector-dev-setup).
100
100
101
101
If everything works well you should be able to see the root server span labeled as `GET /requested/pathname`.
@@ -132,7 +132,7 @@ If that is not possible on your platform, you can use a custom OpenTelemetry exp
132
132
133
133
## Custom Spans
134
134
135
-
You can add your own span with [OpenTelemetry APIs](https://opentelemetry.io/docs/instrumentation/js/instrumentation).
135
+
You can add a custom span with [OpenTelemetry APIs](https://opentelemetry.io/docs/instrumentation/js/instrumentation).
136
136
137
137
```bash
138
138
npm install @opentelemetry/api
@@ -166,12 +166,12 @@ Next.js automatically instruments several spans for you to provide useful insigh
166
166
Attributes on spans follow [OpenTelemetry semantic conventions](https://opentelemetry.io/docs/reference/specification/trace/semantic_conventions/). We also add some custom attributes under the `next` namespace:
167
167
168
168
- `next.span_name` - duplicates span name
169
-
- `next.span_type` - each span type has unique identifier
169
+
- `next.span_type` - each span type has a unique identifier
170
170
- `next.route` - The route pattern of the request (e.g., `/[param]/user`).
171
171
- `next.page`
172
172
- This is an internal value used by an app router.
173
173
- You can think about it as a route to a special file (like `page.ts`, `layout.ts`, `loading.ts` and others)
174
-
- It can be used as an unique identifier only when paired with `next.route` because `/layout` can be used to identify both `/(groupA)/layout.ts` and `/(groupB)/layout.ts`
174
+
- It can be used as a unique identifier only when paired with `next.route` because `/layout` can be used to identify both `/(groupA)/layout.ts` and `/(groupB)/layout.ts`
175
175
176
176
### `[http.method] [next.route]`
177
177
@@ -195,7 +195,7 @@ Attributes:
195
195
196
196
- `next.span_type`: `AppRender.getBodyResult`.
197
197
198
-
This span represents the process of rendering a route in app router.
198
+
This span represents the process of rendering a route inthe app router.
0 commit comments