The released packages:
vercel / otel Goto Github PK
View Code? Open in Web Editor NEWOTEL tracing for Vercel
Home Page: https://vercel.com/docs/observability/otel-overview
OTEL tracing for Vercel
Home Page: https://vercel.com/docs/observability/otel-overview
The released packages:
It appears that fetch may not be instrumented. The docs appear to say it should work out of the box but a few spot checks doing fetch calls did not see any of them being reported. Happy to investigate in code if someone could point be in the right direction for where itβs implemented
At minimum it would be nice to set the environment. Even better if we could pass an entire attributes object.
Hey people, I am the author of the new OTel library for Cloudflare Workers, which can now be done properly now that they have implemented AsyncLocalStorage.
Would you want to collaborate on making that work for the Vercel runtime? I would be happy to split up my package into core OTel and the Cloudflare Workers specific auto-instrumentation.
I'm trying to get this set up with a NextJS app, however when I try to run the app I get the following error:
Error: An error occurred while loading instrumentation hook: ENOENT: no such file or directory, open '.next/server/jaeger-idl/thrift/jaeger.thrift'
I checked in the server folder and it is indeed not there. Did I miss a setup step?
There appears to be dependency issues with the project at this point.
npx create-next-app
and accept all the defaults.yarn install
yarn add @vercel/otel
The package installs with no warnings
I get several error messages for peer dependencies:
*[main][~/code/learning/otel-sandbox]$ yarn add @vercel/otel
yarn add v1.22.21
[1/4] π Resolving packages...
β (node:26982) [DEP0040] DeprecationWarning: The `punycode` module is deprecated. Please use a userland alternative sinstead.
(Use `node --trace-deprecation ...` to show where the warning was created)
[2/4] π Fetching packages...
[3/4] π Linking dependencies...
warning "@vercel/otel > @opentelemetry/exporter-trace-otlp-grpc > @opentelemetry/[email protected]" has incorrect peer dependency "@opentelemetry/api@>=1.0.0 <1.5.0".
warning "@vercel/otel > @opentelemetry/[email protected]" has incorrect peer dependency "@opentelemetry/api@>=1.3.0 <1.5.0".
warning "@vercel/otel > @opentelemetry/sdk-node > @opentelemetry/[email protected]" has incorrect peer dependency "@opentelemetry/api@>=1.0.0 <1.5.0".
warning "@vercel/otel > @opentelemetry/exporter-trace-otlp-grpc > @opentelemetry/[email protected]" has incorrect peer dependency "@opentelemetry/api@>=1.0.0 <1.5.0".
warning "@vercel/otel > @opentelemetry/sdk-node > @opentelemetry/sdk-trace-node > @opentelemetry/[email protected]" has incorrect peer dependency "@opentelemetry/api@>=1.0.0 <1.5.0".
warning "@vercel/otel > @opentelemetry/exporter-trace-otlp-grpc > @opentelemetry/[email protected]" has incorrect peer dependency "@opentelemetry/api@>=1.3.0 <1.5.0".
warning "@vercel/otel > @opentelemetry/sdk-node > @opentelemetry/sdk-trace-node > @opentelemetry/[email protected]" has incorrect peer dependency "@opentelemetry/api@>=1.0.0 <1.5.0".
warning "@vercel/otel > @opentelemetry/sdk-node > @opentelemetry/sdk-trace-node > @opentelemetry/[email protected]" has incorrect peer dependency "@opentelemetry/api@>=1.0.0 <1.5.0".
warning "@vercel/otel > @opentelemetry/exporter-trace-otlp-grpc > @opentelemetry/[email protected]" has incorrect peer dependency "@opentelemetry/api@>=1.0.0 <1.5.0".
warning "@vercel/otel > @opentelemetry/sdk-node > @opentelemetry/[email protected]" has incorrect peer dependency "@opentelemetry/api@>=1.3.0 <1.5.0".
[4/4] π¨ Building fresh packages...
success Saved lockfile.
success Saved 49 new dependencies.
info Direct dependencies
ββ @vercel/[email protected]
info All dependencies
ββ @grpc/[email protected]
ββ @opentelemetry/[email protected]
ββ @opentelemetry/[email protected]
ββ @opentelemetry/[email protected]
ββ @opentelemetry/[email protected]
ββ @opentelemetry/[email protected]
ββ @opentelemetry/[email protected]
ββ @opentelemetry/[email protected]
ββ @opentelemetry/[email protected]
ββ @opentelemetry/[email protected]
ββ @opentelemetry/[email protected]
ββ @opentelemetry/[email protected]
ββ @opentelemetry/[email protected]
ββ @opentelemetry/[email protected]
ββ @opentelemetry/[email protected]
ββ @protobufjs/[email protected]
ββ @protobufjs/[email protected]
ββ @protobufjs/[email protected]
ββ @protobufjs/[email protected]
ββ @protobufjs/[email protected]
ββ @protobufjs/[email protected]
ββ @protobufjs/[email protected]
ββ @protobufjs/[email protected]
ββ @protobufjs/[email protected]
ββ @vercel/[email protected]
ββ [email protected]
ββ [email protected]
ββ [email protected]
ββ [email protected]
ββ [email protected]
ββ [email protected]
ββ [email protected]
ββ [email protected]
ββ [email protected]
ββ [email protected]
ββ [email protected]
ββ [email protected]
ββ [email protected]
ββ [email protected]
ββ [email protected]
ββ [email protected]
ββ [email protected]
ββ [email protected]
ββ [email protected]
ββ [email protected]
ββ [email protected]
ββ [email protected]
ββ [email protected]
ββ [email protected]
β¨ Done in 5.44s.
*
I'm having an issue trying to install @versel/otel both with npm install @versel/otel
or inside the pipeline with npm ci
.
here is an example of the error:
npm ERR! Found: @opentelemetry/[email protected]
npm ERR! node_modules/@opentelemetry/api-logs
npm ERR! @opentelemetry/api-logs@"^0.4[9](https://github.com/*************/actions/runs/8784239706/job/24102065468?pr=182#step:5:10).1" from @azure/[email protected]
npm ERR! node_modules/@azure/monitor-opentelemetry
npm ERR! @azure/monitor-opentelemetry@"^1.3.0" from the root project
npm ERR! @opentelemetry/api-logs@"0.49.1" from @opentelemetry/[email protected]
npm ERR! node_modules/@opentelemetry/instrumentation
npm ERR! @opentelemetry/instrumentation@"^0.49.1" from @azure/[email protected]
npm ERR! node_modules/@azure/monitor-opentelemetry
npm ERR! @azure/monitor-opentelemetry@"^1.3.0" from the root project
npm ERR! @opentelemetry/instrumentation@"^0.49.1" from @opentelemetry/[email protected]
npm ERR! node_modules/@opentelemetry/instrumentation-bunyan
npm ERR! @opentelemetry/instrumentation-bunyan@"^0.36.0" from @azure/[email protected]
npm ERR! node_modules/@azure/monitor-opentelemetry
npm ERR! @azure/monitor-opentelemetry@"^1.3.0" from the root project
npm ERR! 7 more (@opentelemetry/instrumentation-http, ...)
npm ERR! 4 more (@opentelemetry/instrumentation-bunyan, ...)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! @vercel/otel@"latest" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: @opentelemetry/[email protected]
npm ERR! node_modules/@opentelemetry/api-logs
npm ERR! peer @opentelemetry/api-logs@"^0.46.0" from @vercel/[email protected]
npm ERR! node_modules/@vercel/otel
npm ERR! @vercel/otel@"latest" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
react and next version:
"next": "13.4.19",
"next-i18next": "^15.2.0",
"pdf-parse": "^1.1.1",
"react": "18.2.0",
"react-dom": "18.2.0",
Inside the CI pipeline it run on node as 18.17
locally on node 21
Ideally we can assign properties from request headers directly to a span on all requests (without needing to modify code in a bunch of apiroutes etc...)
When trying to use this package with latest Next.js, I get a build failure using next build
pnpm create next-app my-app
pnpm run build
Expected:
Should build
Actual:
Throws Legacy octal escape is not permitted in strict mode
.
./node_modules/.pnpm/[email protected]/node_modules/ansi-color/lib/ansi-color.js
Error:
Γ Legacy octal escape is not permitted in strict mode
ββ[/Users/tom.sherman/code/next-app-dir-tracing/node_modules/.pnpm/[email protected]/node_modules/ansi-color/lib/ansi-color.js:32:1]
32 β var color_attrs = color.split("+");
33 β var ansi_str = "";
34 β for(var i=0, attr; attr = color_attrs[i]; i++) {
35 β ansi_str += "\033[" + ANSI_CODES[attr] + "m";
Β· ββ
36 β }
37 β ansi_str += str + "\033[" + ANSI_CODES["off"] + "m";
38 β return ansi_str;
β°ββββ
Γ Legacy octal escape is not permitted in strict mode
ββ[/Users/tom.sherman/code/next-app-dir-tracing/node_modules/.pnpm/[email protected]/node_modules/ansi-color/lib/ansi-color.js:34:1]
34 β for(var i=0, attr; attr = color_attrs[i]; i++) {
35 β ansi_str += "\033[" + ANSI_CODES[attr] + "m";
36 β }
37 β ansi_str += str + "\033[" + ANSI_CODES["off"] + "m";
Β· ββ
38 β return ansi_str;
39 β };
β°ββββ
Caused by:
Syntax Error
Import trace for requested module:
./node_modules/.pnpm/[email protected]/node_modules/ansi-color/lib/ansi-color.js
./node_modules/.pnpm/[email protected]/node_modules/bufrw/annotated_buffer.js
./node_modules/.pnpm/[email protected]/node_modules/bufrw/interface.js
./node_modules/.pnpm/[email protected]/node_modules/bufrw/index.js
./node_modules/.pnpm/[email protected]/node_modules/thriftrw/index.js
./node_modules/.pnpm/[email protected]/node_modules/jaeger-client/dist/src/reporters/udp_sender.js
./node_modules/.pnpm/@[email protected]_@[email protected]/node_modules/@opentelemetry/exporter-jaeger/build/src/types.js
./node_modules/.pnpm/@[email protected]_@[email protected]/node_modules/@opentelemetry/exporter-jaeger/build/src/jaeger.js
./node_modules/.pnpm/@[email protected]_@[email protected]/node_modules/@opentelemetry/exporter-jaeger/build/src/index.js
./node_modules/.pnpm/@[email protected]_@[email protected]/node_modules/@opentelemetry/sdk-node/build/src/TracerProviderWithEnvExporter.js
./node_modules/.pnpm/@[email protected]_@[email protected]/node_modules/@opentelemetry/sdk-node/build/src/sdk.js
./node_modules/.pnpm/@[email protected]_@[email protected]/node_modules/@opentelemetry/sdk-node/build/src/index.js
./node_modules/.pnpm/@[email protected]/node_modules/@vercel/otel/dist/index.node.js
./src/OTEL-initializer.ts.ts
./src/fetcher.ts
./src/app/page.tsx
https://github.com/tom-sherman/next-app-dir-tracing
vercel/otel version: 0.3.0
@opentelemetry/api: 1.4.1
Operating System:
Platform: darwin
Arch: arm64
Version: Darwin Kernel Version 22.4.0: Mon Mar 6 20:59:28 PST 2023; root:xnu-8796.101.5~3/RELEASE_ARM64_T6000
Binaries:
Node: 18.13.0
npm: 8.13.2
Yarn: 1.22.19
pnpm: 8.2.0
Relevant packages:
next: 13.4.4
eslint-config-next: N/A
react: 18.2.0
react-dom: 18.2.0
typescript: 5.0.4
I'm trying to use the package in my project, but I'm getting an import error deep inside the @vercel/otel package, so there's nothing I can do about it.
I created the official nextjs example from the docs to ensure this wasn't a problem specific to my project.
$ npx create-next-app --example with-opentelemetry with-opentelemetry-app
$ npm run dev
> dev
> next
- ready started server on 0.0.0.0:3000, url: http://localhost:3000
- warn You have enabled experimental feature (instrumentationHook) in next.config.js.
- warn Experimental features are not covered by semver, and may cause unexpected or broken application behavior. Use at your own risk.
- event compiled client and server successfully in 129 ms (20 modules)
- wait compiling...
- wait compiling /instrumentation (client and server)...
- event compiled client and server successfully in 164 ms (62 modules)
file:///tmp/bla/with-opentelemetry-app/node_modules/@vercel/otel/dist/index.node.js:3
import { Resource } from "@opentelemetry/resources";
^^^^^^^^
SyntaxError: Named export 'Resource' not found. The requested module '@opentelemetry/resources' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:
import pkg from '@opentelemetry/resources';
const { Resource } = pkg;
at ModuleJob._instantiate (node:internal/modules/esm/module_job:124:21)
at async ModuleJob.run (node:internal/modules/esm/module_job:190:5) {
type: 'SyntaxError'
}
NodeJS version: 18.16.0
npm version: 9.5.1
Apparently, the problem was that I followed these official instructions and there is missing the need to install @opentelemetry/api
, which causes the error above.
Following other recipe solved the issue.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. πππ
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google β€οΈ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.