showReportDialog not working with nextjs app router

[rvermootenct]

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

7.64.0

Framework Version

16.6.0

Link to Sentry event

No response

SDK Setup

// This file configures the initialization of Sentry for edge features (middleware, edge routes, and so on).
// The config you add here will be used whenever one of the edge features is loaded.
// Note that this config is unrelated to the Vercel Edge Runtime and is also required when running locally.
// https://docs.sentry.io/platforms/javascript/guides/nextjs/

import * as Sentry from '@sentry/nextjs'

Sentry.init({
  dsn: 'xxxxxxx,

  // 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,
})

// This file configures the initialization of Sentry on the client.
// The config you add here will be used whenever a users loads a page in their browser.
// https://docs.sentry.io/platforms/javascript/guides/nextjs/

import * as Sentry from '@sentry/nextjs'

Sentry.init({
  dsn: 'xxxxxxx,

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

  replaysOnErrorSampleRate: 1.0,

  // This sets the sample rate to be 10%. You may want this to be 100% while
  // in development and sample at a lower rate in production
  replaysSessionSampleRate: 0.1,

  // You can remove this option if you're not planning to use the Sentry Session Replay feature:
  integrations: [
    new Sentry.Replay({
      // Additional Replay configuration goes in here, for example:
      maskAllText: true,
      blockAllMedia: true,
    }),
  ],
})

// This file configures the initialization of Sentry on the server.
// The config you add here will be used whenever the server handles a request.
// https://docs.sentry.io/platforms/javascript/guides/nextjs/

import * as Sentry from '@sentry/nextjs'

Sentry.init({
  dsn: 'xxxxxxx',

  // 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,
})

Steps to Reproduce

1.) Created a basic client component:

'use client'

import { showReportDialog } from '@sentry/nextjs'

function Dev(): JSX.Element {
  return (
    <button
      type="button"
      onClick={() => {
        showReportDialog()
      }}
    >
      Open Report Dialog
    </button>
  )
}

export default Dev

Expected Result

I expect when I click the button that I see the report dialog.

Actual Result

I get these errors in my console:

GET https://sentry.io/api/embed/error-page/?dsn=https://xxxxxx&eventId=undefined net::ERR_ABORTED 400

Refused to execute script from 'https://sentry.io/api/embed/error-page/?dsn=https://xxxx&eventId=undefined' because its MIME type ('application/json') is not executable, and strict MIME type checking is enabled.

[rvermootenct]

I have noticed if I do something like this:

const eventId = captureMessage('something')
 showReportDialog({ eventId })

that works.

But the typing is quite confusing, esp with the text: 'Everything is optional, we try to fetch all info need from the global scope.'
Also the tests I see here don't indicate I need it, which makes me think it works for the pages dir but not for app?

[lforst]

Hi, thanks for writing in. This is a duplicate of #8707

For more context see #8707 (comment)