Skip to content

feat: add React + Stripe.js OTel instrumentation example#152

Open
prathamesh-sonpatki wants to merge 1 commit into
mainfrom
react-stripe-otel-example
Open

feat: add React + Stripe.js OTel instrumentation example#152
prathamesh-sonpatki wants to merge 1 commit into
mainfrom
react-stripe-otel-example

Conversation

@prathamesh-sonpatki
Copy link
Copy Markdown
Member

Summary

  • Full-stack OpenTelemetry instrumentation for a Stripe checkout flow
  • React frontend: traces Stripe.js load, PaymentElement mount latency, confirmPayment(), and 3DS challenge lifecycle; ships structured OTel logs for every payment event
  • Rails API backend: traces PaymentIntent creation and webhook processing (succeeded, failed, 3DS required, disputes); emits OTel log records with payment attributes
  • Includes value prop in README: what this instruments that Datadog/New Relic auto-instrumentation misses (Stripe.js-specific spans, 3DS tracking, decline codes as trace attributes)

Test plan

  • cd backend && bundle install && rails server -p 3001 — health check at /api/v1/health
  • cd frontend && npm install && npm start — checkout form renders at localhost:3000
  • Test payment with Stripe test card 4242 4242 4242 4242 — verify traces appear in Last9
  • Test 3DS card 4000 0025 0000 3155 — verify stripe.3ds.challenge span
  • docker compose up — both services start and connect

🤖 Generated with Claude Code

Full-stack payment observability: React frontend traces Stripe.js load,
PaymentElement mount, confirmPayment, and 3DS challenges; Rails API backend
traces PaymentIntent creation and webhook processing. Both emit structured
OTel logs alongside traces.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
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