Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
3 tasks done
Syammed2429 opened this issue Sep 19, 2023 · 39 comments
Closed
3 tasks done
Labels
Package: nextjs Issues related to the Sentry Nextjs SDK Stale Type: Bug

Comments

@Syammed2429
Copy link

Syammed2429 commented 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 (/)
@getsantry getsantry bot moved this to Waiting for: Product Owner in GitHub Issues with 👀 Sep 19, 2023
@github-actions github-actions bot added the Package: nextjs Issues related to the Sentry Nextjs SDK label Sep 19, 2023
@lforst
Copy link
Member

lforst commented Sep 19, 2023

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?

@Syammed2429
Copy link
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)

@getsantry getsantry bot moved this from Waiting for: Community to Waiting for: Product Owner in GitHub Issues with 👀 Sep 19, 2023
@Syammed2429
Copy link
Author

Syammed2429 commented Sep 19, 2023

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

@lforst
Copy link
Member

lforst commented Sep 19, 2023

Please take a proper look at the type definition for wrapRouteHandlerWithSentry. You need to pass in all the required arguments. Thanks!

@Syammed2429
Copy link
Author

Syammed2429 commented Sep 19, 2023

Please take a proper look at the type definition for wrapRouteHandlerWithSentry. You need to pass in all the required arguments. Thanks!

Can you please provide me the link to it, I did search for that on docs but I'm unable to find it, I found only this wrapApiHandlerWithSentry

@getsantry getsantry bot moved this to Waiting for: Product Owner in GitHub Issues with 👀 Sep 19, 2023
@Syammed2429
Copy link
Author

image
Could you please help me or tell me why it's not logging the correct endpoints? do I need to add anything in the code that I provided above @lforst

@lforst
Copy link
Member

lforst commented Sep 19, 2023

@Syammed2429

  • The type definition for wrapRouteHandlerWithSentry is in the package. It looks like this:
function wrapRouteHandlerWithSentry<F extends (...args: any[]) => any>(
  routeHandler: F,
  context: RouteHandlerContext,
): (...args: Parameters<F>) => ReturnType<F> extends Promise<unknown> ? ReturnType<F> : Promise<ReturnType<F>>;

export interface RouteHandlerContext {
  method: 'GET' | 'POST' | 'PUT' | 'PATCH' | 'DELETE' | 'HEAD' | 'OPTIONS';
  parameterizedRoute: string;
  sentryTraceHeader?: string;
  baggageHeader?: string;
}
  • You shouldn't actually need to wrap any of your routes. The SDK will do this automatically for you. Please just remove all the with* from your routes (but keep the one in next.config.js).

@Syammed2429
Copy link
Author

@lforst
route.ts

import NextAuth from 'next-auth';
import { options } from './options';

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

next.config.js

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

const nextConfig = {
  sentry: {
    hideSourceMaps: false,
  },
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'backend-data.s3.amazonaws.com',
        port: '',
      },
      {
        protocol: 'https',
        hostname: 'lh3.googleusercontent.com',
        port: '',
      },
    ],
  },
}



const sentryConfig = {
  silent: true,
  org: "org-c423d51af",
  project: "project",
  authToken: process.env.SENTRY_AUTH_TOKEN ?? '',
}

module.exports = withSentryConfig(nextConfig, sentryConfig);

I made the changes you mentioned but still, I am not sure why it's not reporting the errors or the performance logs with the correct endpoints

@getsantry getsantry bot moved this to Waiting for: Product Owner in GitHub Issues with 👀 Sep 19, 2023
@lforst
Copy link
Member

lforst commented Sep 19, 2023

What do your logs say?

@getsantry getsantry bot moved this to Waiting for: Product Owner in GitHub Issues with 👀 Sep 19, 2023
@Syammed2429
Copy link
Author

Syammed2429 commented Sep 19, 2023

When I pass directly the DSN value then I am able to capture the error and it's reporting the error, so in the Vercel do I have to set the env like SENTRY_DSN or NEXT_PUBLIC_SENTRY_DSN @lforst

@lforst
Copy link
Member

lforst commented Sep 19, 2023

When I pass directly the DSN value then I am able to capture the error and it's reporting the error, so in the Vercel do I have to set the env like SENTRY_DSN or NEXT_PUBLIC_SENTRY_DSN @lforst

Set it like NEXT_PUBLIC_SENTRY_DSN and access it with process.env.NEXT_PUBLIC_SENTRY_DSN

@Syammed2429
Copy link
Author

I think most of the things are working now with errors and the performance, only profiling is left, should I just create an issue for that @lforst ?

@getsantry getsantry bot moved this to Waiting for: Product Owner in GitHub Issues with 👀 Sep 19, 2023
@JonasBa
Copy link
Member

JonasBa commented Sep 19, 2023

I need to look into how nextjs 13 can be configured to load .node modules - the error you are seeing is thrown whenever a loader for a file is not configured so the bundler doesn't know what to do with that file type. Do you know if this is using turbopack by any chance?

@Syammed2429
Copy link
Author

I need to look into how nextjs 13 can be configured to load .node modules - the error you are seeing is thrown whenever a loader for a file is not configured so the bundler doesn't know what to do with that file type. Do you know if this is using turbopack by any chance?

Sorry for late. No I'm not using the turbo. I already removed it @JonasBa

@Syammed2429
Copy link
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

@getsantry
Copy link

getsantry bot commented 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 🥀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Package: nextjs Issues related to the Sentry Nextjs SDK Stale Type: Bug
Projects
Archived in project
Development

No branches or pull requests

4 participants