Skip to content

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

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.

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

Closed
Prithvirajkumar opened this issue Sep 19, 2023 · 25 comments
Assignees
Labels
Package: remix Issues related to the Sentry Remix SDK Type: Improvement

Comments

@Prithvirajkumar
Copy link
Member

Prithvirajkumar commented Sep 19, 2023

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
Copy link
Member

@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 AbhiPrasad added the Package: remix Issues related to the Sentry Remix SDK label Sep 19, 2023
@AbhiPrasad
Copy link
Member

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.

@AbhiPrasad AbhiPrasad self-assigned this Sep 19, 2023
@onurtemizkan
Copy link
Collaborator

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

@AbhiPrasad
Copy link
Member

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

@AbhiPrasad
Copy link
Member

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

@marisajackson
Copy link

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

@bitforcesrl
Copy link

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
Copy link

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

@petfriendlydev
Copy link

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

@AbhiPrasad
Copy link
Member

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

@petfriendlydev
Copy link

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

@petfriendlydev
Copy link

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

@vemundeldegard
Copy link

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

@petfriendlydev
Copy link

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 AbhiPrasad reopened this Oct 7, 2024
@AbhiPrasad AbhiPrasad assigned AbhiPrasad and unassigned onurtemizkan Oct 7, 2024
@AbhiPrasad
Copy link
Member

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
Copy link
Member

AbhiPrasad commented Oct 9, 2024

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

The README has some instructions.

Screenshots:

Image

Image

@PeterDKC
Copy link

@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.

Image

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
Copy link

@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.

@sergio-nezhigay
Copy link

Same here! I followed the example repository, but I’m encountering the same error during deployment:

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

It works locally without issues, but fails when deploying. @AbhiPrasad, any fixes for this?

@PeterDKC
Copy link

@sergio-nezhigay For what it's worth, we were never able to get past this and after months of trying just gave up and pivoted to a different solution. It doesn't appear that Sentry is willing to spend time getting this working. Best of luck.

@j-Riv
Copy link

j-Riv commented Feb 20, 2025

@AbhiPrasad I followed your repo as a guide and it all works in dev, but when I try to do a build & preview it fails. I thought I must have missed something so I cloned your repo and put in my SENTRY info. It doesn't work. I keep getting this error.

Image

@AbhiPrasad
Copy link
Member

We've done some work to improve potenial runtime errors, and we've published it to the official docs site: https://docs.sentry.io/platforms/javascript/guides/remix/frameworks/hydrogen/

please upgrade to the latest version of the remix SDK, and follow the guide above. This should work without errors. If you see any problems, please open a new issue so we can triage and follow accordingly.

@marisajackson
Copy link

@AbhiPrasad Thank you so much! It's working for the most part. My only remaining issue is that the backend console.error's are not logging. If I throw an error, it logs. And I added the captureConsoleIntegration to the client.entry file, so that frontend console.errors are logging. But if there is a console.error in the loader or action, it does not log. Any suggestions?

@AbhiPrasad
Copy link
Member

@marisajackson in your server.ts file, you should be able to pass the captureConsoleIntegration to options in wrapRequestHandler.

Effectively the wrapRequestHandler option can be given everything that Sentry.init can be given.

@marisajackson
Copy link

🙏🏽 Thank you! It's all working now!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Package: remix Issues related to the Sentry Remix SDK Type: Improvement
Projects
None yet
Development

No branches or pull requests

10 participants