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 https://github.com/getsentry/sentry-javascript/issues/5610#issuecomment-2263274411 - 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

[petfriendlydev]

Also looking to understand how to integrate sentry into hydrogen/oxygen. @AbhiPrasad - can you please assist?

[petfriendlydev]

Hey @AbhiPrasad! Hoping you might be able to follow up on this - can you confirm how we can integrate Sentry into Oxygen?

[AbhiPrasad]

Hey @petfriendlydev - I'll try to get something together to show this week! Sorry for the delay, just came back from vacation.

[petfriendlydev]

Hi @AbhiPrasad! Checking in to see if we're on track to get something this week? Thank you!

[petfriendlydev]

@AbhiPrasad hi again! follow up - can you help here? thank you!

[vemundeldegard]

I would love an example of this. Tried to set this up myself, without great success.

[petfriendlydev]

Trying one last time... @AbhiPrasad could you please circle back on how to integrate sentry into oxygen with more details? We remain unable to do so and are now assessing an alternative to sentry because of the roadblock here. Your help would be greatly appreciated.

[AbhiPrasad]

Assigning to myself so this doesn't get off track! We'll get this in this week for sure - sorry for the earlier delays.

[AbhiPrasad]

Here is an example repo: https://github.com/AbhiPrasad/sentry-shopify-hydrogen-example

The README has some instructions.

Screenshots:

[PeterDKC]

@AbhiPrasad Thanks for this.

In this example you've listed two plugins, one for Remix one for Cloudflare. In the server.ts there's a DSN.

My question is, should this be:

• One Sentry Project for both

Or

• One Sentry Project for the Remix Exceptions
• Another for the Cloudflare Exceptions

Or does that matter at all?

Thanks!

[marisajackson]

@AbhiPrasad I implemented everything in your example repo and I am now receiving:

Deployment failed, error: Uncaught TypeError: withSentry is not a function

I only get this upon deployment and it works locally without issue.