Request for Hydrogen + Sentry demo repo with best-in-class instrumentation/context

[Prithvirajkumar]

Problem Statement

Currently we do not have a Hydrogen + Sentry demo repo with best-in-class instrumentation/context.

Solution Brainstorm

Overview:
The request is to create a demo instance using Hydrogen, Shopify's React-based headless toolkit built on Remix.
The demo instance should have Sentry's Remix SDK instrumented.
Using the instance developers should be able to understand how to be successfully set up Sentry for a Hydrogen app.

Sentry Features that should be included:

• Tags: Demonstrating how to attach tags to events for better searching and visualization.
• Breadcrumbs: Showcasing how to create and utilize breadcrumbs for improved debugging.
• Hydrogen specific context: Showcasing how to capture Hydrogen specific context within Sentry.
• Source Maps: Uploading source maps to a Sentry instance for a readable stack trace.
• Distributed Tracing: Setting up distributed tracing to track transactions across services.
• Releases: Configuring releases to associate issues with specific code releases.
• Performance: Registering transactions with regards to page loads and navigations along with Web Vital specific metrics.
• Profiling: Registering profiles to identify bottlenecks and optimize code.
• Session Replay: Replays of user sessions to visually understand the context in which errors occur.

Expected Outcome:
We expect that the demo instance will provide developers with a clear understanding of how to integrate Sentry effectively with Hydrogen, showcasing best practices and demonstrating how to harness the full power of Sentry for error tracking and performance monitoring.

Additional Context:
Hydrogen is based on Remix v2 which is supported by Sentry (GitHub PR)

Tasks

### Tasks
- [x] Create sample hydrogen v2 app (uses Remix under the hood)
- [x] Add Sentry Remix SDK to Hydrogen v2 demo app
- [x] Get sourcemaps uploading working
- [x] Get releases working for backend/frontend
- [x] Add Session Replay
- [x] Add Browser Profiling
- [ ] Add Node.js Profiling
- [ ] [Investigation] Add hydrogen specific context and information
- [ ] Create pages to show off error monitoring
- [ ] Create pages to show off setting custom tags
- [ ] Create pages to show off performance monitoring
- [ ] Instrument GraphQL

[AbhiPrasad]

@Prithvirajkumar where is this expected to live? Within https://github.com/sentry-demos/empower, or as a new repo?

@onurtemizkan would be great if you could help with tackling this! Building out a demo app of some kind with all these features - good opportunity for us to play around with Hydrogen as well to see what it can do.

[AbhiPrasad]

Alright we can make it a new repo in https://github.com/getsentry. @onurtemizkan when you're ready to take this on let me know and I can create a new repo for you.

[onurtemizkan]

@AbhiPrasad, sure I'm starting to work on this.

[AbhiPrasad]

I created https://github.com/getsentry/sentry-hydrogen-demo and sent an invite to you @onurtemizkan

[AbhiPrasad]

Please see #5610 (comment) - we have @sentry/cloudflare that folks can use to instrument cloudflare pages/workers which is what hydrogen relies on.

[marisajackson]

I'm confused on how this is complete? I am still not understanding how to integrate Sentry in to a Hydrogen/Oxygen app.

[bitforcesrl]

Hi @AbhiPrasad could you please confirm that this demo: https://github.com/getsentry/sentry-hydrogen-demo (or update it ) is still valid and working? we've tried the remix sentry wizard but is not working with hydrogen

thanks