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!)