React Router v7 deployed to Cloudflare Workers

[souredoutlook]

Description

This is an issue that serves as a place-holder for Abhi to investigate how best to instrument a React Router v7 app that is deployed to Cloudflare Workers

At this time we are recommending folks instrument /cloudflare/worker/app.ts with @sentry/cloudflare to start

[AbhiPrasad]

This won't be done until the React Router SDK is in a stable state, so https://github.com/getsentry/sentry-javascript/issues/14519 is closed

[airtonix]

@souredoutlook Are you referring to this? https://github.com/getsentry/sentry-javascript/tree/master/packages/cloudflare#setup-cloudflare-workers

or something more like Toucan.js

[AbhiPrasad]

I recommend following the docs here: https://docs.sentry.io/platforms/javascript/guides/cloudflare/

but yup, that's what is being referred to.

[moishinetzer]

From the experimental framework mode docs, how much of that can be reused for cloudflare workers? It seems that the only node-specific instruction is importing the instrumentation as a module before running the server. Can this be done in a cloudflare based environment too?

[AbhiPrasad]

You can probably replace Sentry.createSentryHandleRequest with the wrapRequestHandler method from https://docs.sentry.io/platforms/javascript/guides/cloudflare/#setup-cloudflare-workers - but I haven't tested this out.

[sebws]

given #14519 is closed, is there a next step? i'm unsure if I should be following the cloudflare setup, the react router setup, or the cloudflare hydrogen react router setup (which is not particularly hydrogen specific but is about cloudflare + react router)

[chargome]

@sebws in case you're using hydrogen you can follow this guide. Otherwise I'd just follow the standard react-router guide for now, but make sure to import the server instrumentation file. React router will add better support for server-side tracing soon, we'll update the SDK accordingly.

[sebws]

@chargome thanks for the quick response!

i have tried for my (not hydrogen) react router v7 cloudflare site

one note – in entry.server.tsx and instrument.server.ts I have used @sentry/react-router/cloudflare which has some different exports for this case. I've used wrapSentryHandleRequest and done the "Do you need to customize your handleError function?" error handler

looking forward to the better react router support!

edit:

I also added the extra cloudflare integration using Sentry.withSentry in the worker export.