Skip to content

Sentry is not reporting the errors as well as the performance for the NextJS 13 app routing  #9045

New issue
New issue
Closed
Closed
Sentry is not reporting the errors as well as the performance for the NextJS 13 app routing #9045
Labels
Stale

Description

@Syammed2429
Syammed2429
opened on Sep 19, 2023

Is there an existing issue for this?

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 (/)

Activity

  1. Syammed2429
    added
    Type: Bug
    on Sep 19, 2023
  2. getsantry
    added
    Waiting for: Product Owner
    on Sep 19, 2023
  3. getsantry
    added this to GitHub Issues with 👀on Sep 19, 2023
  4. getsantry
    moved this to Waiting for: Product Owner in GitHub Issues with 👀on Sep 19, 2023
  5. github-actions
    added
    Package: Nextjs
    on Sep 19, 2023

  6. lforst commented on Sep 19, 2023

    @lforst
    lforst
    on Sep 19, 2023
    Contributor

    You're using the wrong wrapper for the route handler. You would need to use wrapRouteHandlerWithSentry instead of withSentry. Did you see any docs that tell you to use withSentry?

  7. getsantry
    removed
    Waiting for: Product Owner
    on Sep 19, 2023
  8. getsantry
    moved this from Waiting for: Product Owner to No status in GitHub Issues with 👀on Sep 19, 2023
  9. lforst
    added
    Waiting for: Community
    on Sep 19, 2023
  10. getsantry
    moved this to Waiting for: Community in GitHub Issues with 👀on Sep 19, 2023

  11. Syammed2429 commented on Sep 19, 2023

    @Syammed2429
    Syammed2429
    on Sep 19, 2023
    Author

    wrapRouteHandlerWithSentry

    I think I saw it somewhere, I'm not able to remember where I saw that, but I did tried this

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

const handler = NextAuth(options);
export { handler as GET, handler as POST };
export default wrapRouteHandlerWithSentry(handler, '/api.name.io');

    It's giving an error like
    Argument of type 'string' is not assignable to parameter of type 'RouteHandlerContext'.ts(2345)

  12. getsantry
    added
    Waiting for: Product Owner
    and removed
    Waiting for: Community
    on Sep 19, 2023
  13. getsantry
    moved this from Waiting for: Community to Waiting for: Product Owner in GitHub Issues with 👀on Sep 19, 2023

  14. Syammed2429 commented on Sep 19, 2023

    @Syammed2429
    Syammed2429
    on Sep 19, 2023
    Author

    But one thing I do not understand is why it's not logging the correct routes in the performance, it's just logging as unknow-server something like that @lforst

  15. 84 remaining items

  16. getsantry
    moved this to Waiting for: Product Owner in GitHub Issues with 👀on Sep 19, 2023
  17. getsantry
    added this to GitHub Issues with 👀on Sep 19, 2023
  18. hubertdeng123
    removed
    Waiting for: Product Owner
    on Sep 20, 2023
  19. getsantry
    moved this from Waiting for: Product Owner to No status in GitHub Issues with 👀on Sep 20, 2023

  20. Syammed2429 commented on Sep 20, 2023

    @Syammed2429
    Syammed2429
    on Sep 20, 2023
    Author

    @freekii & @JonasBa , I'll close this issue with a conclusion so if any other users get the same thing they can easily fix and I'll create an issue for the profiling

  21. getsantry
    added
    Waiting for: Product Owner
    on Sep 20, 2023
  22. getsantry
    moved this to Waiting for: Product Owner in GitHub Issues with 👀on Sep 20, 2023
  23. lforst
    added
    Waiting for: Community
    and removed
    Waiting for: Product Owner
    on Sep 20, 2023
  24. getsantry
    moved this from Waiting for: Product Owner to No status in GitHub Issues with 👀on Sep 20, 2023
  25. getsantry
    moved this to Waiting for: Community in GitHub Issues with 👀on Sep 20, 2023

  26. getsantry commented on Oct 12, 2023

    @getsantry
    getsantryBot
    on Oct 12, 2023

    This issue has gone three weeks without activity. In another week, I will close it.

    But! If you comment or otherwise update it, I will reset the clock, and if you remove the label Waiting for: Community, I will leave it alone ... forever!

    "A weed is but an unloved flower." ― Ella Wheeler Wilcox 🥀

  27. getsantry
    added
    Stale
    on Oct 12, 2023
  28. getsantry
    closed this as completedon Oct 20, 2023
  29. getsantry
    removed
    Waiting for: Community
    on Oct 20, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    Stale

    Projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions