React-router v7 Setup Instructions Fail With x is not a function

[parrotmac]

Is there an existing issue for this?

• I have checked for existing issues https://github.com/getsentry/sentry-javascript/issues
• I have reviewed the documentation https://docs.sentry.io/
• I am using the latest SDK release https://github.com/getsentry/sentry-javascript/releases

How do you use Sentry?

Sentry Saas (sentry.io)

Which SDK are you using?

@sentry/react-router

SDK Version

@sentry/react-router 10.26.0

Framework Version

react-router 7.9.6

Link to Sentry event

No response

Reproduction Example/SDK Setup

Initialize new React-Router project

pnpx create-react-router@latest example-rr-app

Reveal entries

pnpm react-router reveal

Follow instructions 1-2: https://docs.sentry.io/platforms/javascript/guides/react-router/

Diff (excludes lockfile): https://gist.github.com/parrotmac/736830b408dbf5f5cbbb4ea77d9abc09

Steps to Reproduce

1. Boostrap react-router app
2. Integrate sentry
3. Run server
4. Observe that nothing works

Expected Result

Pages load

Actual Result

All routes return

Unexpected Server Error

TypeError: handleDocumentRequestFunction is not a function

Additional Context

No response

Priority

_{React with 👍 to help prioritize this issue. Please use comments to provide useful context, avoiding +1 or me too, to help us triage it.}

[linear]

JS-1187

[s1gr1d]

Hello, do you maybe have a stacktrace of this error? Our code does not include a reference to this function so this might be coming from somewhere else.

[parrotmac]

Oh, also forgot to mention that there's a repro repo https://github.com/parrotmac/react-router-sentry-issue-repro

$ pnpm dev
> example-rr-app@ dev /Users/isaac/Dev/react-router-sentry-issue-repro
> NODE_OPTIONS='--import ./instrument.server.mjs' react-router dev

Invalid Sentry Dsn: https://<redacted>.us.sentry.io/<snip>
  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help
TypeError: handleDocumentRequestFunction is not a function
    at renderHtml (file:///Users/isaac/Dev/react-router-sentry-issue-repro/node_modules/.pnpm/react-router@7.9.6_react-dom@19.2.0_react@19.2.0__react@19.2.0/node_modules/react-router/dist/development/chunk-G3INQAYP.mjs:1376:20)
    at handleDocumentRequest (file:///Users/isaac/Dev/react-router-sentry-issue-repro/node_modules/.pnpm/react-router@7.9.6_react-dom@19.2.0_react@19.2.0__react@19.2.0/node_modules/react-router/dist/development/chunk-G3INQAYP.mjs:1320:22)
    at requestHandler (file:///Users/isaac/Dev/react-router-sentry-issue-repro/node_modules/.pnpm/react-router@7.9.6_react-dom@19.2.0_react@19.2.0__react@19.2.0/node_modules/react-router/dist/development/chunk-G3INQAYP.mjs:1176:18)
    at nodeHandler (/Users/isaac/Dev/react-router-sentry-issue-repro/node_modules/.pnpm/@react-router+dev@7.9.6_@react-router+serve@7.9.6_react-router@7.9.6_react-dom@19.2.0_r_4edf341b885e1cd0953c68295d1900d6/node_modules/@react-router/dev/dist/vite.js:3490:30)
    at /Users/isaac/Dev/react-router-sentry-issue-repro/node_modules/.pnpm/@react-router+dev@7.9.6_@react-router+serve@7.9.6_react-router@7.9.6_react-dom@19.2.0_r_4edf341b885e1cd0953c68295d1900d6/node_modules/@react-router/dev/dist/vite.js:3496:17
TypeError: handleDocumentRequestFunction is not a function
    at renderHtml (file:///Users/isaac/Dev/react-router-sentry-issue-repro/node_modules/.pnpm/react-router@7.9.6_react-dom@19.2.0_react@19.2.0__react@19.2.0/node_modules/react-router/dist/development/chunk-G3INQAYP.mjs:1423:22)
    at handleDocumentRequest (file:///Users/isaac/Dev/react-router-sentry-issue-repro/node_modules/.pnpm/react-router@7.9.6_react-dom@19.2.0_react@19.2.0__react@19.2.0/node_modules/react-router/dist/development/chunk-G3INQAYP.mjs:1320:22)
    at requestHandler (file:///Users/isaac/Dev/react-router-sentry-issue-repro/node_modules/.pnpm/react-router@7.9.6_react-dom@19.2.0_react@19.2.0__react@19.2.0/node_modules/react-router/dist/development/chunk-G3INQAYP.mjs:1176:18)
    at nodeHandler (/Users/isaac/Dev/react-router-sentry-issue-repro/node_modules/.pnpm/@react-router+dev@7.9.6_@react-router+serve@7.9.6_react-router@7.9.6_react-dom@19.2.0_r_4edf341b885e1cd0953c68295d1900d6/node_modules/@react-router/dev/dist/vite.js:3490:30)
    at /Users/isaac/Dev/react-router-sentry-issue-repro/node_modules/.pnpm/@react-router+dev@7.9.6_@react-router+serve@7.9.6_react-router@7.9.6_react-dom@19.2.0_r_4edf341b885e1cd0953c68295d1900d6/node_modules/@react-router/dev/dist/vite.js:3496:17
11:58:36 AM [vite] (client) ✨ new dependencies optimized: @sentry/react-router
11:58:36 AM [vite] (client) ✨ optimized dependencies changed. reloading

Using the commented-out handler works, replacing it with the Sentry.createSentryHandleRequest line produces the crash.

Thanks!

[RulaKhaled]

Hello! React Router v7 expects the handleRequest function to be exported as a default export, not a named export, can you alter the code to reflect something like this? https://docs.sentry.io/platforms/javascript/guides/react-router/#configure-server-side-sentry

const handleRequest = Sentry.createSentryHandleRequest({
    ServerRouter,
    renderToPipeableStream,
    createReadableStreamFromReadable,
});

export default handleRequest;

lmk if that doesn't work!