sentry-javascript: Sentry is not reporting the errors as well as the performance for the NextJS 13 app routing

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/
• #9063

How do you use Sentry?

Sentry Saas (sentry.io)

Which SDK are you using?

@sentry/nextjs

SDK Version

7.69.0

Framework Version

NextJS 13.4.7

Link to Sentry event

No response

SDK Setup

sentry.client.config.ts

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

Sentry.init({
  dsn: process.env.SENTRY_DSN ?? '',
  tracesSampleRate: 1.0,
  tracePropagationTargets: ['localhost', /^https:\/\/hostname\.io\/api/],

  debug: true,
  replaysOnErrorSampleRate: 1.0,
  replaysSessionSampleRate: 0.1,
  integrations: [
    new Sentry.Replay({
      maskAllText: true,
      blockAllMedia: true,
    }),
  ],
})

sentry.server.config.ts

import * as Sentry from '@sentry/nextjs';
import { ProfilingIntegration } from '@sentry/profiling-node';

Sentry.init({
  dsn: process.env.SENTRY_DSN ?? '',
  // integrations: [new ProfilingIntegration()],
  tracesSampleRate: 1,
  debug: true,
  profilesSampleRate: 1.0,
});

sentry.properties

defaults.url=https://sentry.io/
defaults.org=organizationNama
defaults.project=projectName
cli.executable=node_modules/@sentry/cli/bin/sentry-cli

next.config.ts setup 1

/** @type {import('next').NextConfig} */
const { withSentryConfig } = require("@sentry/nextjs");

const nextConfig = {
  sentry: {
    hideSourceMaps: false,
    silent: true,
  },

  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'data.s3.amazonaws.com',
        port: '',
      },
      {
        protocol: 'https',
        hostname: 'googleusercontent.com',
        port: '',
      },
    ],
  },
}

module.exports = withSentryConfig(nextConfig);

next.config.ts setup 2

/** @type {import('next').NextConfig} */
const { withSentryConfig } = require("@sentry/nextjs");

const nextConfig = {
  sentry: {
    hideSourceMaps: false,

  },

  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'data.s3.amazonaws.com',
        port: '',
      },
      {
        protocol: 'https',
        hostname: 'googleusercontent.com',
        port: '',
      },
    ],
  },
}



const sentryConfig = {
  silent: true,
  org: "organization-423d51af",
  project: "projectname",

  authToken: process.env.SENTRY_AUTH_TOKEN ?? '',

}

module.exports = withSentryConfig(nextConfig, sentryConfig);

app > api > auth > [...nextauth]> route.ts I am using nextAuth

import NextAuth from 'next-auth';
import { options } from './options';
import { withSentry } from '@sentry/nextjs';

const handler = NextAuth(options);
export { handler as GET, handler as POST };

export default withSentry(handler);

Package Modules

"@sentry/browser": "^7.69.0",
    "@sentry/nextjs": "^7.69.0",
    "@sentry/node": "^7.69.0",
    "@sentry/profiling-node": "^1.2.1",
"next": "^13.4.7",
    "next-auth": "^4.22.1",

page.tsx

<ActionButton
            type={'button'}
            style={''}
            text={'Error'}
            onClick={() => {
              throw new Error('Error log for the sentry');
            }}
          />

I did not include the sentry.edge.config.ts as it’s the same as the server

Steps to Reproduce

I did not get any errors on the consoles, but I do have the logs I think it might be helpful for you to trace it

npm run dev

> frontend@0.1.0 dev
> next dev

- ready started server on 0.0.0.0:3000, url: http://localhost:3000
- info Loaded env from C:\Users\ASUS\Desktop\appi\newtry\.env.local
- event compiled client and server successfully in 474 ms (20 modules)
- wait compiling...
- event compiled client and server successfully in 271 ms (20 modules)
- wait compiling /api/auth/[...nextauth]/route (client and server)...
- event compiled successfully in 1251 ms (378 modules)
Sentry Logger [log]: Initializing SDK...
Sentry Logger [log]: Integration installed: InboundFilters
Sentry Logger [log]: Integration installed: FunctionToString
Sentry Logger [log]: Integration installed: Console
Sentry Logger [log]: Integration installed: Http
Sentry Logger [log]: Integration installed: Undici
Sentry Logger [log]: Integration installed: OnUncaughtException
Sentry Logger [log]: Integration installed: OnUnhandledRejection
Sentry Logger [log]: Integration installed: ContextLines
Sentry Logger [log]: Integration installed: LocalVariables
Sentry Logger [log]: Integration installed: Context
Sentry Logger [log]: Integration installed: Modules
Sentry Logger [log]: Integration installed: RequestData
Sentry Logger [log]: Integration installed: LinkedErrors
Sentry Logger [log]: Integration installed: RewriteFrames
Sentry Logger [log]: SDK successfully initialized
Sentry Logger [log]: Initializing SDK...
Sentry Logger [log]: Integration installed: InboundFilters
Sentry Logger [log]: Integration installed: FunctionToString
Sentry Logger [log]: Integration installed: Console
Sentry Logger [log]: Integration installed: Http
Sentry Logger [log]: Integration installed: Undici
Sentry Logger [log]: Integration installed: OnUncaughtException
Sentry Logger [log]: Integration installed: OnUnhandledRejection
Sentry Logger [log]: Integration installed: ContextLines
Sentry Logger [log]: Integration installed: LocalVariables
Sentry Logger [log]: Integration installed: Context
Sentry Logger [log]: Integration installed: Modules
Sentry Logger [log]: Integration installed: RequestData
Sentry Logger [log]: Integration installed: LinkedErrors
Sentry Logger [log]: Integration installed: RewriteFrames
Sentry Logger [log]: SDK successfully initialized
- error Detected default export in 'C:\Users\ASUS\Desktop\app\newtry\app\api\auth\[...nextauth]\route.ts'. Export a named export for each HTTP method instead.
Sentry Logger [log]: [Tracing] starting http.server transaction - GET /
[next-auth][warn][DEBUG_ENABLED]
https://next-auth.js.org/warnings#debug_enabled
Sentry Logger [log]: [Tracing] Finishing http.server transaction: GET /.
- wait compiling /(dashboard)/dashboard/clients/page (client and server)...
- wait compiling /(dashboard)/dashboard/page (client and server)...
<w> [webpack.cache.PackFileCacheStrategy] Skipped not serializable cache item 'Compilation/modules|C:\Users\ASUS\Desktop\app\newtry\node_modules\next\dist\build\webpack\loaders\css-loader\src\index.js??ruleSet[1].rules[3].oneOf[12].use[2]!C:\Users\ASUS\Desktop\app\newtry\node_modules\next\dist\build\webpack\loaders\postcss-loader\src\index.js??ruleSet[1].rules[3].oneOf[12].use[3]!C:\Users\ASUS\Desktop\app\newtry\app\globals.css': No serializer registered for Warning
<w> while serializing webpack/lib/cache/PackFileCacheStrategy.PackContentItems -> webpack/lib/NormalModule -> Array { 1 items } -> webpack/lib/ModuleWarning -> Warning
- warn ./app/globals.css.webpack[javascript/auto]!=!./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[3].oneOf[12].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[3].oneOf[12].use[3]!./app/globals.css
Warning

(38:5) Nested CSS was detected, but CSS nesting has not been configured correctly.
Please enable a CSS nesting plugin *before* Tailwind in your configuration.
See how here: https://tailwindcss.com/docs/using-with-preprocessors#nesting

Import trace for requested module:
./app/globals.css.webpack[javascript/auto]!=!./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[3].oneOf[12].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[3].oneOf[12].use[3]!./app/globals.css
./app/globals.css
./app/layout.tsx
Sentry Logger [log]: [Tracing] Adding sentry-trace header 63e9b35f023d4ec6ae22ba0e290a21ca-b6bb1add2be29b31 to outgoing request to "http://127.0.0.1:56034/": 
Sentry Logger [log]: [Tracing] Adding sentry-trace header 63e9b35f023d4ec6ae22ba0e290a21ca-997ca614b50327e0 to outgoing request to "http://127.0.0.1:56034/":
Sentry Logger [log]: [Tracing] Adding sentry-trace header 63e9b35f023d4ec6ae22ba0e290a21ca-baf3a875af36bbc9 to outgoing request to "http://127.0.0.1:56034/": 
Sentry Logger [log]: [Tracing] Adding sentry-trace header 63e9b35f023d4ec6ae22ba0e290a21ca-bb4e181521577f78 to outgoing request to "http://127.0.0.1:56034/": 
Sentry Logger [log]: [Tracing] Adding sentry-trace header 63e9b35f023d4ec6ae22ba0e290a21ca-b1741244175b9783 to outgoing request to "http://127.0.0.1:56034/":
Sentry Logger [log]: [Tracing] Adding sentry-trace header 63e9b35f023d4ec6ae22ba0e290a21ca-ab2f69463ab102d6 to outgoing request to "http://127.0.0.1:56034/":
<w> [webpack.cache.PackFileCacheStrategy] Skipped not serializable cache item 'Compilation/modules|C:\Users\ASUS\Desktop\app\newtry\node_modules\next\dist\build\webpack\loaders\css-loader\src\index.js??ruleSet[1].rules[3].oneOf[12].use[2]!C:\Users\ASUS\Desktop\app\newtry\node_modules\next\dist\build\webpack\loaders\postcss-loader\src\index.js??ruleSet[1].rules[3].oneOf[12].use[3]!C:\Users\ASUS\Desktop\app\newtry\app\globals.css': No serializer registered for Warning
<w> while serializing webpack/lib/cache/PackFileCacheStrategy.PackContentItems -> webpack/lib/NormalModule -> Array { 1 items } -> webpack/lib/ModuleWarning -> Warning
Sentry Logger [log]: Initializing SDK...
Sentry Logger [log]: Integration installed: InboundFilters
Sentry Logger [log]: Integration installed: FunctionToString
Sentry Logger [log]: Integration installed: Console
Sentry Logger [log]: Integration installed: Http
Sentry Logger [log]: Integration installed: Undici
Sentry Logger [log]: Integration installed: OnUncaughtException
Sentry Logger [log]: Integration installed: OnUnhandledRejection
Sentry Logger [log]: Integration installed: ContextLines
Sentry Logger [log]: Integration installed: LocalVariables
Sentry Logger [log]: Integration installed: Context
Sentry Logger [log]: Integration installed: Modules
Sentry Logger [log]: Integration installed: RequestData
Sentry Logger [log]: Integration installed: LinkedErrors
Sentry Logger [log]: Integration installed: RewriteFrames
Sentry Logger [log]: SDK successfully initialized
Sentry Logger [log]: Initializing SDK...
Sentry Logger [log]: SDK already initialized
Sentry Logger [log]: [Tracing] starting function.nextjs transaction - Unknown Server Component (/)
Sentry Logger [log]: [Tracing] Finishing function.nextjs transaction: Unknown Server Component (/).
Sentry Logger [log]: Initializing SDK...
Sentry Logger [log]: Integration installed: InboundFilters
Sentry Logger [log]: Integration installed: FunctionToString
Sentry Logger [log]: Integration installed: Console
Sentry Logger [log]: Integration installed: Http
Sentry Logger [log]: Integration installed: Undici
Sentry Logger [log]: Integration installed: OnUncaughtException
Sentry Logger [log]: Integration installed: OnUnhandledRejection
Sentry Logger [log]: Integration installed: ContextLines
Sentry Logger [log]: Integration installed: LocalVariables
Sentry Logger [log]: Integration installed: Context
Sentry Logger [log]: Integration installed: Modules
Sentry Logger [log]: Integration installed: RequestData
Sentry Logger [log]: Integration installed: LinkedErrors
Sentry Logger [log]: Integration installed: RewriteFrames
Sentry Logger [log]: SDK successfully initialized

Expected Result

It should log the API errors and all types of errors, and log the correct performance endpoints instead of the

Sentry Logger [log]: [Tracing] starting function.nextjs transaction - Not-found Server Component (/)
Sentry Logger [log]: [Tracing] starting function.nextjs transaction - Unknown Server Component (/)

Actual Result

It’s not reporting/logging any errors and logging incorrect endpoints

The below is from the performance

Sentry Logger [log]: [Tracing] starting function.nextjs transaction - Not-found Server Component (/)
Sentry Logger [log]: [Tracing] starting function.nextjs transaction - Unknown Server Component (/)