From e35710f71f8e0f2844add1a97513a65a54a6f2a3 Mon Sep 17 00:00:00 2001 From: Jan Kaifer Date: Thu, 6 Apr 2023 14:17:47 +0200 Subject: [PATCH] Recommend @opentelemetry/api instead of @vercel/otel reexport (#48013) - remove vscode folder from example - recommend `@poentelemetry/api` over `@vercel/otel` fix NEXT-959 --- docs/advanced-features/open-telemetry.md | 11 ++++++----- examples/with-opentelemetry/.vscode/settings.json | 4 ---- examples/with-opentelemetry/package.json | 1 + .../with-opentelemetry/shared/fetch-github-stars.ts | 2 +- 4 files changed, 8 insertions(+), 10 deletions(-) delete mode 100644 examples/with-opentelemetry/.vscode/settings.json diff --git a/docs/advanced-features/open-telemetry.md b/docs/advanced-features/open-telemetry.md index 04b9adf8e55c3..d2095413496ab 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 87e57c9a65f37..0000000000000 --- 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 e8028a639eb8c..0fad98a05bdc7 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 754a50998ad3e..aeb202097b239 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