Next.js error TypeError: (0 , _sentry_nextjs__WEBPACK_IMPORTED_MODULE_11__.feedbackIntegration) is not a function

[hbmartin]

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/nextjs

SDK Version

9.11.0

Framework Version

Next 15.2.4

Link to Sentry event

No response

Reproduction Example/SDK Setup

I am unable to import and use feedbackIntegration.

I have my instrumentation-client.ts configured as:

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

Sentry.init({
  dsn: "dsn",

  // Define how likely traces are sampled. Adjust this value in production, or use tracesSampler for greater control.
  tracesSampleRate: 1,

  // Setting this option to true will print useful information to the console while you're setting up Sentry.
  debug: false,

  integrations: [
    Sentry.feedbackIntegration({
      showBranding: false,
      autoInject: false,
    }),
  ],
});

Steps to Reproduce

Either of these blocks:

import { feedbackIntegration } from "@sentry/nextjs";
...
const feedback = feedbackIntegration({
  // Disable the injection of the default widget
  autoInject: false,
});

OR

import * as Sentry from "@sentry/nextjs";
...
const feedback = Sentry.feedbackIntegration({
  // Disable the injection of the default widget
  autoInject: false,
});

Expected Result

The import should work or there should be docs on correct import

Actual Result

Next.js error TypeError: (0 , _sentry_nextjs__WEBPACK_IMPORTED_MODULE_11__.feedbackIntegration) is not a function The same is true for both repro blocks.

[Lms24]

Hey @hbmartin thanks for writing in! I tried to reproduce this in a new NextJS app on 15.2.4 and couldn't get to the error. See my reproduction repo. Can you let me know what to change in this repro to reproduce the error? Otherwise, feel free to provide your own repro. thanks!

[hbmartin]

Hi thanks for the response @Lms24
That repro repo (😅) is only calling Sentry.feedbackIntegration in the config file but I was referring to manually calling it in UI component.
I was able to solve this in my UI component by doing:

import { getFeedback } from "@sentry/nextjs";
...
const feedback = getFeedback();
const form = await feedback.createForm(...)

So perhaps the solve for this issue is better docs around that pattern?

[Lms24]

Ah I see. I'm not a 100% familiar with feedback but to me it seems odd to call feedbackIntegration() and not pass it to Sentry.init. I'll talk to the Feedback team about this.

However, if you call feedbackIntegration() and get this error, does it appear on your sever-side? This would explain it because the feedback integration is client-only. So you need to ensure that this is never executed on the server (e.g. during SSR).

Anyway, calling getFeedback() in combination with adding feedbackIntegration() to your client-side Sentry.init sounds correct to me.

So perhaps the solve for this issue is better docs around that pattern?

I guess you mean this, right? Agreed, this looks misleading. Also forwarded it to the team.

[hbmartin]

I guess you mean this, right? Agreed, this looks misleading. Also forwarded it to the team.

Yes, I just now noticed that Next.js is mentioned in separate code tabs near the bottom of the docs 🙃 I proposed adding a callout near the top of the doc to make it more obvious: getsentry/sentry-docs#13242

So you need to ensure that this is never executed on the server (e.g. during SSR).

Yes I did get that for feedbackIntegration. Although that just tripped me up with browserTracingIntegration It seems to also be client only for that plugin which maybe should have been obvious from the name but I also get errors adding it to the server config.

[Lms24]

Sorry my mistake, I linked to the generic JS docs. There's a better example featuring a React/NextJS specific snippet in the Sentry NextJS docs.

Added a comment to your PR as well.

[ryan953]

@hbmartin I'm updating the docs around this so hopefully it'll be clearer from the start for the next person: getsentry/sentry-docs#13247

I guess we wrote them with the idea that each example should just show the important bit related to that section, but it's better if each example is more stand-alone so people don't have to read everything in order to get things working.

The result from feedbackIntegration() does need to be passed into Sentry.init({ integrations: [ ... ]}) every time. This is how the feedback message gets annotated with context, the user that was set, beforeSend callbacks, all that kind of stuff.

Related to getsentry/sentry-docs#13242 we do actually have a NextJS specific example file here: https://github.com/getsentry/sentry-docs/blob/master/platform-includes/user-feedback/manual-injection/javascript.nextjs.mdx#L35 so I'll probably not merge that <Alert> because it'll showup for all JS users, not just those who picked NextJS in the left sidebar.