Exporting Replay from @sentry/nextjs

[kachkaev]

Problem Statement

It’d be great to be able to do the same as #6508, but via @sentry/nextjs.

Current

import { Replay } from "@sentry/browser";
import * as Sentry from "@sentry/nextjs";

// new Replay()

Expected

import * as Sentry from "@sentry/nextjs";

// new Sentry.Replay()

Solution Brainstorm

• Re-export Replay from @sentry/nextjs

[Lms24]

Hi @kachkaev, weird, I thought this should work. The client side NextJS SDK exports * from @sentry/react which exports * from @sentry/browser which exports Replay...

I just tested it in a small NextJS app and for me it seems to work.

[kachkaev]

Can it be a bug related to TypeScript typings and server-side bundle? See CI failure in blockprotocol/blockprotocol#836

tsc output

// sentry.client.config.ts
Property 'Replay' does not exist on type 'typeof import("/path/to/project/node_modules/@sentry/nextjs/types/index.server")'. ts(2339)

next build on Vercel

TypeError: nextjs_.Replay is not a constructor
    at Object.375 (/vercel/path0/apps/site/.next/server/chunks/375.js:24:9)
    at __webpack_require__ (/vercel/path0/apps/site/.next/server/webpack-runtime.js:25:42)
    at __webpack_exec__ (/vercel/path0/apps/site/.next/server/pages/[shortname]/[[...profile-tabs]].js:1412:39)
    at /vercel/path0/apps/site/.next/server/pages/[shortname]/[[...profile-tabs]].js:1413:133
    at Function.__webpack_require__.X (/vercel/path0/apps/site/.next/server/webpack-runtime.js:177:21)
    at /vercel/path0/apps/site/.next/server/pages/[shortname]/[[...profile-tabs]].js:1413:47
    at Object.<anonymous> (/vercel/path0/apps/site/.next/server/pages/[shortname]/[[...profile-tabs]].js:1416:3)
    at Module._compile (node:internal/modules/cjs/loader:1155:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1209:10)
    at Module.load (node:internal/modules/cjs/loader:1033:32)
> Build error occurred
Error: Failed to collect page data for /[shortname]/[[...profile-tabs]]
    at /vercel/path0/node_modules/next/dist/build/utils.js:960:15
    at processTicksAndRejections (node:internal/process/task_queues:96:5) {

[Lms24]

@kachkaev, you're right, TS complains indeed. I opened a PR (#6577) to fix this. Expect it to be released in the next SDK version.

Until then, I guess a good old // @ts-ignore should do the trick.

[kachkaev]

Awesome, thanks for fixing! I tried // @ts-ignore but it did not work because the error is also a runtime one. It’d be great to see a patch release available before Christmas to close blockprotocol/blockprotocol#836. But if we have to wait for 7.28, no worries too!

[Lms24]

We might just get a patch out before christmas ;) Will let you know!

[Lms24]

@kachkaev we just released 7.28.0 which contains the fix, feel free to give it a try ;)

[kachkaev]

Perfect, thanks for pinging me 🚀

• Update dependency @sentry/nextjs to v7.28.0 blockprotocol/blockprotocol#836
• Update Sentry to v7.28.0 hashintel/hash#1708

[Redskinsjo]

I have this ts error in ^8.20.0

[Lms24]

@Redskinsjo the class-based Replay integration was removed in v8 of the SDK in favour of the replayIntegration() function. More details here: https://docs.sentry.io/platforms/javascript/guides/nextjs/migration/v7-to-v8/#removal-of-class-based-integrations

Or are you already using replayIntegration and the error still appears? If so, can you please open a new issue with a reproduction example? This one is quite old by now. Thanks!