Remix Framework SDK

[AbhiPrasad]

Problem Statement

Support https://remix.run/ JavaScript framework. See: https://github.com/remix-run/remix.

If you are interested in this, please react to this issue and/or leave a comment below!

Solution Brainstorm

A SDK similar to what we have for NextJS.

Uses React + Node SDK under the hood

• Hook into build pipeline and automatically create releases/upload sourcemaps
• Instrument client side
  • Performance dependent on Support React Router v6 #4118
• Instrument server side

Work

• Add boilerplate package for Remix SDK feat: Add Remix SDK package boilerplate. #5256
• Add client-side instrumentation support feat(remix): Add Remix client SDK. #5264
  • Add client-side instrumentation tests
• Add server-side instrumentation support feat(remix): Add Remix server SDK #5269
  • Add server-side instrumentation tests
• Add support for sourcemaps feat(remix): Add release / sourcemap upload script. #5312
• Add @sentry/remix to the release registry feat: Add @sentry/remix SDK sentry-release-registry#77
• Revert ci: Ignore sentry-remix for publishing #5274 and Remove

  sentry-javascript/packages/remix/package.json

  Line 16 in 8a8e489

  "private": true,

  feat(remix): Enable Remix SDK #5327
• Alpha Release meta: Add CHANGELOG for 7.4.0 #5346
  • Dog food with https://github.com/getsentry/vanguard feat: Add @sentry/remix vanguard#3
  • Remove query parameters from Remix Server side transaction names fix(remix): Strip query params from transaction names #5368
  • Flesh out README for SDK
  • Add docs to https://docs.sentry.io/ Add Remix SDK docs sentry-docs#5247
  • Add Sentry Remix SDK in product onboarding feat(platforms): Add Remix as a platform sentry#37060
  • Improve source maps UX for Remix SDK #5486
• EA Release
  • Product landing page for Remix on marketing site
  • Add integration tests for Remix test(remix): Add a boilerplate for Remix SDK integration tests. #5453
• GA Release

Stretch Goals (will be converted to separate issues if not tackled by GA)

• Automatically wrap client with our ErrorBoundary feat(remix): Wrap root with ErrorBoundary. #5365
• Wrap handleDocumentRequest functions fix(remix): Wrap handleDocumentRequest functions. #5387
• Wrap request functions
• Set meta tag to propogate sentry-trace header from server -> client feat(remix): Set sentry-trace <meta> on server-side. #5440
• Consider cli sentry-wizard - validate usage and complexities in adding and maintaining
• Rethink sentry source maps upload for sentry (relies on sentry-cli with a wrapper)
• Support Cloudflare Workers

[dcramer]

#4946

[nokome]

Hi. Just wanted say that we'd love to see this SDK and to note that https://github.com/jacob-ebey/remix-sentry seems to have made a good start on it.

See in particular, https://github.com/jacob-ebey/remix-sentry/blob/7ec8c84689b1cadb2752e741c152d0981f5d45f0/server/sentry-remix-node.js and the results here: #4946 (comment)

[danecando]

I took the one in there and added the express tracing on top of it so it picks up that transaction. Then in my root loader I pick up __sentry_transaction off of context and add it to data so I can include it in the sentry-trace meta tag on my page. I've managed to get it so that pageloads are tied to the server transaction and vise versa doing that. The only thing I'm missing I think is a more comprehensive browser integration with the router on the client side.

[AbhiPrasad]

After we have the SDK in a good place, let's make sure we dogfood with https://github.com/getsentry/vanguard - I've updated the PR checklist accordingly (and I can take care of this!)

[binajmen]

Can't wait to see it released 🤗

[schwar6-michael]

Do we think this will be released today? Seems like it is almost at the finish line!

[AbhiPrasad]

@schwar6-michael - we are wrapping some stuff up, release will come within the next 1-2 days!

[schwar6-michael]

@schwar6-michael - we are wrapping some stuff up, release will come within the next 1-2 days!

Amazing, cannot wait!

[vladanpaunovic]

@sentry/remix alpha is released 🎉

Our team at Sentry has put lots of effort into bringing this SDK to the world as fast as possible so you can enjoy Remix together with Sentry sooner. For this - thank you team! 🙇

We are not done yet.

At the time of writing this comment, there are still open tasks in this issue. We are on it and will be delivering on these in the upcoming days and weeks. If you are inpatient - we are always happy to accept PRs from our community!

Have in mind that this is the alpha release and the design may/will change in the future depending on the feedback we receive from the community.

I would like to encourage all of you to give @sentry/remix a try and let us know about your experience in discussions or submit an issue if you encounter something wrong or we are missing on something.

npm install @sentry/remix
yarn add @sentry/remix

npm: https://www.npmjs.com/package/@sentry/remix

I would also like to thank all of you who contributed your ideas, code reviews and actual code to make this happen!

[mwawrusch]

Hi guys, I wanted to use the @sentry/remix with a remix.run app running on netlify but the SDK is 53 mb and that breaks netlify as it has a 50mb zip file limit.

[mwawrusch]

In particular it is the

    "@sentry/cli": "2.2.0",
    "@sentry/webpack-plugin": "1.18.9",

who cause a 48mb bloat. Any reason why they are imported by @sentry/remix ?

[marcus-sa]

In particular it is the

    "@sentry/cli": "2.2.0",
    "@sentry/webpack-plugin": "1.18.9",

who cause a 48mb bloat. Any reason why they are imported by @sentry/remix ?

I reckon they should be in devDependencies and not dependencies.

[mwawrusch]

Update: Thanks to AlexMachin1997 I was able to fix this. If you use netlify, add this to your netlify.toml file:

[functions]
  node_bundler="nft"
  

[smeubank]

hi folks,

Just realizing we didn't respond directly here. this isn't an entirely new problem and just to remix, we created this issue to surface more of our internal discussions and try to track and more comprehensive solution

@mwawrusch and @marcus-sa

[AbhiPrasad]

Hey folks. The Remix SDK has been considering feature complete for an initial launch! We're still in beta, but the public API should be relatively stable. Want to start using it? It's as simple as creating a new Sentry project, and selecting Remix! From there, follow the docs we have to set up your SDK.

I'll be closing this issue, and opening new individual one's to track some of the outstanding items we have left.

Some of these include

• Improving the UX around source maps uploading
• Improving server-side errors for request handling
• [Internal] Expanding our integration test suite for server-side errors

Thanks a lot to everyone who helped us build this out, we appreciate all the help! We could not have done this without the help of the Remix community. Please reach out if you have any feedback or bugs to report!