diff --git a/docs/advanced-features/open-telemetry.md b/docs/advanced-features/open-telemetry.md index 04b9adf8e5..d209541349 100644 --- a/docs/advanced-features/open-telemetry.md +++ b/docs/advanced-features/open-telemetry.md @@ -56,13 +56,16 @@ To see more spans, you must set `NEXT_OTEL_VERBOSE=1`. ## Custom Spans -OpenTelemetry enables you to add your own custom spans to trace using official OpenTelemetry APIs. -Our package `@vercel/otel` exports everything from `@opentelemetry/api` so you don't need to install anything. +You can add your own span with [OpenTelemetry APIs](https://opentelemetry.io/docs/instrumentation/js/instrumentation). + +```bash +npm install @opentelemetry/api +``` The following example demonstrates a function that fetches GitHub stars and adds a custom `fetchGithubStars` span to track the fetch request's result: ```ts -import { trace } from '@vercel/otel' +import { trace } from '@opentelemetry/api' export async function fetchGithubStars() { return await trace @@ -77,8 +80,6 @@ export async function fetchGithubStars() { } ``` -More documentation can be found in [OpenTelemetry docs](https://opentelemetry.io/docs/instrumentation/js/instrumentation/). - The `register` function will execute before your code runs in a new environment. You can start creating new spans, and they should be correctly added to the exported trace. diff --git a/examples/with-opentelemetry/.vscode/settings.json b/examples/with-opentelemetry/.vscode/settings.json deleted file mode 100644 index 87e57c9a65..0000000000 --- a/examples/with-opentelemetry/.vscode/settings.json +++ /dev/null @@ -1,4 +0,0 @@ -{ - "typescript.tsdk": "../../node_modules/.pnpm/typescript@4.7.4/node_modules/typescript/lib", - "typescript.enablePromptUseWorkspaceTsdk": true -} diff --git a/examples/with-opentelemetry/package.json b/examples/with-opentelemetry/package.json index e8028a639e..0fad98a05b 100644 --- a/examples/with-opentelemetry/package.json +++ b/examples/with-opentelemetry/package.json @@ -8,6 +8,7 @@ }, "dependencies": { "@vercel/otel": "latest", + "@opentelemetry/api": "^1.4.1", "next": "latest", "react": "^18.2.0", "react-dom": "^18.2.0" diff --git a/examples/with-opentelemetry/shared/fetch-github-stars.ts b/examples/with-opentelemetry/shared/fetch-github-stars.ts index 754a50998a..aeb202097b 100644 --- a/examples/with-opentelemetry/shared/fetch-github-stars.ts +++ b/examples/with-opentelemetry/shared/fetch-github-stars.ts @@ -1,4 +1,4 @@ -import { trace } from '@vercel/otel' +import { trace } from '@opentelemetry/api' export async function fetchGithubStars() { return await trace