Skip to content

feat(chat): migrate Langfuse tracing to OTEL + add user feedback#18

Merged
phucbm merged 3 commits into
mainfrom
feat/langfuse-otel-migration
Jun 9, 2026
Merged

feat(chat): migrate Langfuse tracing to OTEL + add user feedback#18
phucbm merged 3 commits into
mainfrom
feat/langfuse-otel-migration

Conversation

@phucbm

@phucbm phucbm commented Jun 9, 2026

Copy link
Copy Markdown
Contributor

Summary

  • Migrate Langfuse tracing from manual HTTP (approach B) to canonical OTEL (approach A)
  • Add 👍👎 user feedback buttons wired to Langfuse scores
  • Track promptVersion, messageCount, service.name (VERCEL_ENV) in traces
  • Fix action bar visibility (pre-existing -mb-7.5 clip issue exposed by autohideFloat)
  • Add langfuse-otel-tracing.md learnings doc

What changed

File Change
instrumentation.ts NEW — NodeTracerProvider + LangfuseSpanProcessor + resourceFromAttributes
app/api/chat/route.ts observe() + propagateAttributes() + experimental_telemetry, injects traceId into messageMetadata
lib/langfuse.ts Removed sendChatTrace(), added postFeedbackScore()
app/api/chat/feedback/route.ts NEW — server proxy for feedback scores
components/chat/chat-runtime.tsx FeedbackAdapter reads traceId from message metadata, POSTs to feedback route
components/assistant-ui/thread.tsx 👍👎 in action bar, autohideFloat="always" + group-hover CSS, removed -mb-7.5

Test plan

  • Send chat message → check Langfuse traces show OTEL spans (not manual HTTP)
  • Verify promptVersion, messageCount, service.name appear in trace metadata
  • Hover over completed assistant message → Copy / Reload / 👍 / 👎 / ⋯ visible
  • Click 👍 or 👎 → Network tab shows POST /api/chat/feedback 204
  • Check Langfuse trace → user-feedback score (1 or 0) appears under Scores tab

🤖 Generated with Claude Code

- Add instrumentation.ts: NodeTracerProvider + LangfuseSpanProcessor
- Rewrite api/chat/route.ts: observe() wrapper, propagateAttributes(),
  experimental_telemetry, getActiveTraceId() injected into messageMetadata
- Remove manual sendChatTrace() HTTP calls from lib/langfuse.ts
- Add postFeedbackScore() using POST /api/public/scores (not batch ingestion)
- Add /api/chat/feedback proxy route (secret key server-side)
- Add FeedbackAdapter to useChatRuntime, reads traceId from message metadata
- Add ActionBarPrimitive.FeedbackPositive/Negative buttons to AssistantActionBar
- Install: @opentelemetry/sdk-trace-node, @opentelemetry/api, langfuse

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@vercel

vercel Bot commented Jun 9, 2026

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
openwallet Canceled Canceled Jun 9, 2026 4:19am

- Add 👍👎 feedback buttons to assistant action bar (hover to reveal)
- Track promptVersion and messageCount in Langfuse trace metadata
- Set service.name from VERCEL_ENV for environment-aware traces
- Fix action bar visibility: remove -mb-7.5 clip, use autohideFloat="always"
- Add @opentelemetry/resources for resourceFromAttributes (v2 API)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
…lity section

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@phucbm phucbm merged commit a336f89 into main Jun 9, 2026
2 of 3 checks passed
@phucbm phucbm deleted the feat/langfuse-otel-migration branch June 9, 2026 04:19
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant