Nextjs capture console integration typescript error and doesn't work

[alperen-bircak]

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.105.0

Framework Version

13.4.19

Link to Sentry event

No response

SDK Setup

// 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";
import { captureConsoleIntegration } from "@sentry/integrations";

Sentry.init({
dsn: "https://2a75dde0ac4fbfcadf73320cd05cb65a@o4507152635658240.ingest.de.sentry.io/4507152692609104",

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

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: [
	Sentry.replayIntegration({
		// Additional Replay configuration goes in here, for example:
		maskAllText: true,
		blockAllMedia: true,
	}),
	captureConsoleIntegration({
		levels: ["error", "warn"],
	}),
],

environment: process.env.NEXT_PUBLIC_GEARBOX_SHELL?.split(".").slice(-1).join(""),

});

Steps to Reproduce

1. Configure sentry for nextjs using the cli
2. Add captureConsoleIntegration from @sentry/integrations
3. Typescript error is immediately visible
4. Ignore typesript and run the applicaton
5. Console errors arent captured at all

Expected Result

Console errors to be captured and typescript to not throw an error.

Actual Result

Typescript error last three lines.
`Types of property 'attachmentType' are incompatible.

Type 'string | undefined' is not assignable to type 'AttachmentType | undefined'.

Type 'string' is not assignable to type 'AttachmentType | undefined'.`

[s1gr1d]

Hello, thanks for writing!
What are the versions of @sentry/nextjs and @sentry/integrations in your package.json and your lock file?

You can quickly grep it with the following example commands:
grep -i '@sentry/nextjs' package.json
grep -i '@sentry/nextjs' yarn.lock (for yarn)

[s1gr1d]

As we included the integration to @sentry/nextjs in a later release, you could also do this:

1. Remove @sentry/integrations from your package.json
2. Bump the version of @sentry/nextjs to the latest version of v7
3. Import the integration from @sentry/nextjs

[alperen-bircak]

Hi, thanks for answering. When I import the itnegration from the @sentry/nextjs and use it like below:

import * as Sentry from "@sentry/nextjs";
...
integrations: [Sentry.replayIntegration(), Sentry.consoleIntegration()],
...

I get the following error:

Attempted import error: 'consoleIntegration' is not exported from '@sentry/nextjs' (imported as 'Sentry').

My sentry version is 7.113.0. Is there soething else you mean by "Import the integration from @sentry/nextjs"?
Thanks for your attention.

[mydea]

You want Sentry.captureConsoleIntegration(), not Sentry.consoleIntegration() - the latter only exists for node, while captureConsole is available in browser and node.

[mydea]

Could you verify if the steps outlined above, plus using Sentry.captureConsoleIntegration(), works for you now?