Skip to content

feat: inject traceparent meta tag when OpenTelemetry is active #3729

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
bartlomieju merged 9 commits into from
Mar 29, 2026
Merged

feat: inject traceparent meta tag when OpenTelemetry is active #3729

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
f839491
feat: inject traceparent meta tag when OpenTelemetry is active
bartlomieju Mar 28, 2026
ab88649
fmt
bartlomieju Mar 29, 2026
ed8671d
Merge branch 'main' into feat/otel-traceparent-meta
bartlomieju Mar 29, 2026
dbfc15d
fix: resolve lint errors and add traceparent docs
bartlomieju Mar 29, 2026
dc27e6d
fmt
bartlomieju Mar 29, 2026
77fbac0
fix: move lint-ignore to directly above the line with `as any`
bartlomieju Mar 29, 2026
dbc79f0
fix: replace npmjs link with GitHub repo link
bartlomieju Mar 29, 2026
fcdce3b
fix: correct GitHub link path for instrumentation-document-load
bartlomieju Mar 29, 2026
6f4ffc7
fix: use permalink for instrumentation-document-load link
bartlomieju Mar 29, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 22 additions & 0 deletions docs/latest/advanced/opentelemetry.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -127,3 +127,25 @@ deno task start

Open `http://localhost:16686` to browse traces. You'll see each request broken
down into its middleware, handler, and rendering spans.

## Client-side trace correlation

When an OpenTelemetry exporter is active, Fresh automatically injects a
[W3C Trace Context](https://www.w3.org/TR/trace-context/) `<meta>` tag into the
`<head>` of every rendered page:

```html
<head>
<meta
name="traceparent"
content="00-ab42124a3c573678d4d8b21ba52df3bf-d21f7bc17caa5aba-01"
>
<!-- ... -->
</head>
```

This allows client-side OpenTelemetry instrumentation (such as
[`@opentelemetry/instrumentation-document-load`](https://github.com/open-telemetry/opentelemetry-js-contrib/tree/c9d62be989802534c01373e8ab41e13747d7ee3e/packages/instrumentation-document-load))
to link browser performance traces back to the server-side span that rendered
the page, giving you end-to-end visibility from server rendering through page
load.
17 changes: 17 additions & 0 deletions packages/fresh/src/runtime/server/preact_hooks.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,7 @@ import { getCodeFrame } from "../../dev/middlewares/error_overlay/code_frame.ts"
import { escapeScript } from "../../utils.ts";
import { HeadContext } from "../head.ts";
import { useContext } from "preact/hooks";
import { isSpanContextValid, trace } from "@opentelemetry/api";

interface InternalPreactOptions extends PreactOptions {
[OptionsType.ATTR](name: string, value: unknown): string | void;
Expand Down Expand Up @@ -282,6 +283,22 @@ options[OptionsType.DIFF] = (vnode) => {
}
}

// Inject W3C traceparent meta tag when OpenTelemetry is active,
// enabling client-side tracing to connect to the server span.
const activeSpan = trace.getActiveSpan();
if (activeSpan) {
const spanCtx = activeSpan.spanContext();
if (isSpanContextValid(spanCtx)) {
const flags = (spanCtx.traceFlags & 1) ? "01" : "00";
const traceparent =
`00-${spanCtx.traceId}-${spanCtx.spanId}-${flags}`;
items.push(
// deno-lint-ignore no-explicit-any
h("meta", { name: "traceparent", content: traceparent }) as any,
);
}
}

// deno-lint-ignore no-explicit-any
items.push(h(RemainingHead, null) as VNode<any>);

Expand Down
Loading