@sentry/nextjs not reporting errors in next.js api routes

[Jay-flow]

Version

@sentry/nextjs: 7.23.0
next: 13.0.6

Issue

@sentry/nextjs not reporting errors in next.js api routes
Only errors from the font-end are reported to Sentry.

Do not report API errors to Sentry.

pages/api/test.ts

import { withSentry } from "@sentry/nextjs"
import { OK } from "http-status"
import { NextApiRequest, NextApiResponse } from "next"

const handle = async (req: NextApiRequest, res: NextApiResponse) => {
  throw new Error("API Test 1")

  return res.status(OK).end()
}

export default withSentry(handle)

I completed the setting according to the guide.

Below are the files I set up.
sentry.client.config.ts

import * as Sentry from "@sentry/nextjs"

Sentry.init({
  dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
  tracesSampleRate: 1.0,
})

sentry.server.config.ts

import * as Sentry from "@sentry/nextjs"

Sentry.init({
  dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
  tracesSampleRate: 1.0,
  debug: true,
})

next.config.js

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

const securityHeaders = [
  {
    key: "X-XSS-Protection",
    value: "1; mode=block",
  },
]

const nextConfig = {
  reactStrictMode: false,
  sentry: {
    hideSourceMaps: true,
  },
  webpack: (config) => {
    if (!config.experiments) {
      config.experiments = {}
    }

    config.experiments.topLevelAwait = true
    config.resolve.fallback = {
      ...config.resolve.fallback,
      fs: false,
    }

    return config
  },
 async headers() {
    return [
      {
        source: "/:path*",
        headers: securityHeaders,
      },
    ]
  },
}

module.exports = withSentryConfig(nextConfig, {
  // silent: true,
})

pages/_error.tsx

/**
 * NOTE: This requires `@sentry/nextjs` version 7.3.0 or higher.
 *
 * This page is loaded by Nextjs:
 *  - on the server, when data-fetching methods throw or reject
 *  - on the client, when `getInitialProps` throws or rejects
 *  - on the client, when a React lifecycle method throws or rejects, and it's
 *    caught by the built-in Nextjs error boundary
 *
 * See:
 *  - https://nextjs.org/docs/basic-features/data-fetching/overview
 *  - https://nextjs.org/docs/api-reference/data-fetching/get-initial-props
 *  - https://reactjs.org/docs/error-boundaries.html
 */

import * as Sentry from "@sentry/nextjs"
import type { NextPage } from "next"
import type { ErrorProps } from "next/error"
import NextErrorComponent from "next/error"

const CustomErrorComponent: NextPage<ErrorProps> = (props) => {
  // If you're using a Nextjs version prior to 12.2.1, uncomment this to
  // compensate for https://github.com/vercel/next.js/issues/8592
  // Sentry.captureUnderscoreErrorException(props);

  return <NextErrorComponent statusCode={props.statusCode} />
}

CustomErrorComponent.getInitialProps = async (contextData) => {
  // In case this is running in a serverless function, await this in order to give Sentry
  // time to send the error before the lambda exits
  await Sentry.captureUnderscoreErrorException(contextData)

  // This will contain the status code of the response
  return NextErrorComponent.getInitialProps(contextData)
}

export default CustomErrorComponent

.sentryclirc

[auth]
token=xxxxxxxxxxxxxxx

sentry.prooperties

defaults.url=https://sentry.io/
defaults.org=xxxx
defaults.project=javascript-nextjs
cli.executable=node_modules/@sentry/cli/bin/sentry-cli

Below is the log displayed on the console.

info  - @sentry/nextjs is running with the autoInstrumentServerFunctions flag set, which means API routes no longer need to be manually wrapped with withSentry. Detected manual wrapping in /api/test.
wait  - compiling /_error (client and server)...
error - pages/api/test.ts (6:8) @ handle
error - Error: API Test 1
    at handle (webpack-internal:///(api)/./pages/api/test.ts?__sentry_wrapped__:12:11)
    at sentryWrappedHandler (/Users/asdf/Projects/test-web/node_modules/@sentry/nextjs/cjs/config/wrappers/withSentryAPI.js:62:14)
    at /Users/asdfProjects/test-web/node_modules/@sentry/nextjs/cjs/config/wrappers/withSentryAPI.js:132:37
    at bound (node:domain:433:15)
    at runBound (node:domain:444:12)
    at sentryWrappedHandler (/Users/asdf/Projects/test-web/node_modules/@sentry/nextjs/cjs/config/wrappers/withSentryAPI.js:196:12)
    at Object.apiResolver (/Users/asdf/Projects/test-web/node_modules/next/dist/server/api-utils/node.js:363:15)
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async DevServer.runApi (/Users/asdf/Projects/test-web/node_modules/next/dist/server/next-server.js:474:9) {
  page: '/api/test'
}
  4 | 
  5 | const handle = async (req: NextApiRequest, res: NextApiResponse) => {
> 6 |   throw new Error("API Test 1")
    |        ^
  7 | 
  8 |   return res.status(OK).end()
  9 | }
[Sentry Webpack Plugin] Creating new release:
 'development'
[Sentry Webpack Plugin] Calling upload-sourcemaps with:
 {
  finalize: true,
  rewrite: true,
  include: [
    {
      paths: [
        '/Users/asdf/Projects/test-web/.next/static/chunks/pages'
      ],
      urlPrefix: '~/_next/static/chunks/pages'
    }
  ],
  ignore: [],
  configFile: 'sentry.properties',
  stripPrefix: [ 'webpack://_N_E/' ],
  urlPrefix: '~/_next',
  entries: [Function: entries],
  release: 'development',
  dryRun: true
}
[Sentry Webpack Plugin] Finalizing release:
 'development'
[Sentry Webpack Plugin] Creating new release:
 'development'
[Sentry Webpack Plugin] Calling upload-sourcemaps with:
 {
  finalize: true,
  rewrite: true,
  include: [
    {
      paths: [ '/Users/asdf/Projects/test-web/.next/server/pages/' ],
      urlPrefix: '~/_next/server/pages'
    },
    {
      paths: [ '/Users/asdf/Projects/test-web/.next/server/chunks/' ],
      urlPrefix: '~/_next/server/chunks'
    }
  ],
  ignore: [],
  configFile: 'sentry.properties',
  stripPrefix: [ 'webpack://_N_E/' ],
  urlPrefix: '~/_next',
  entries: [Function: entries],
  release: 'development',
  dryRun: true
}
[Sentry Webpack Plugin] Finalizing release:
 'development'
event - compiled client and server successfully in 538 ms (1680 modules)

Expected Result

@sentry/nextjs should be reported to Sentry about API errors.

Actual Result

@sentry/nextjs not reporting errors in next.js api routes

Related Issues

#3917

[lforst]

Hi, are the logs you shared from running next build or next start or next dev? We're not guaranteeing to report errors that happen during build.

[lforst]

Also, can you share the logs with debug: true in sentry.server.config.ts? Thank you.

[Jay-flow]

@lforst
I learned something from a few tests.
When the command below is executed sequentially, it normally reports API errors to Sentry.

1. yarn build
2. yarn start

In other words, if I run Next.js after building, error reporting works normally.

However, when I run the development mode with the yarn dev command, it doesn't report API errors.
The difference occurs when no code has been changed and only the command being executed is different.

My scripts

"scripts": {
    "dev": "next dev",
    "build": "tsc --noEmit && next build",
    "start": "next start",
 }

the logs with debug: true in sentry.server.config.ts

ready - started server on 0.0.0.0:3000, url: http://localhost:3000
info  - Loaded env from /Users/asdf/Projects/test-web/.env
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: OnUncaughtException
Sentry Logger [log]: Integration installed: OnUnhandledRejection
Sentry Logger [log]: Integration installed: ContextLines
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]: [Tracing] Continuing trace dda07f49f5394bff9eaa9319f883b055.
Sentry Logger [log]: [Tracing] starting http.server transaction - GET /api/auth/[...nextauth]
Sentry Logger [log]: [Tracing] Finishing http.server transaction: GET /api/auth/[...nextauth].
Sentry Logger [log]: Flushing events...
Sentry Logger [log]: Done flushing events
Sentry Logger [log]: [Tracing] starting http.server transaction - GET /api/test
info  - @sentry/nextjs is running with the autoInstrumentServerFunctions flag set, which means API routes no longer need to be manually wrapped with withSentry. Detected manual wrapping in /api/test.
Sentry Logger [log]: [Tracing] starting http.server transaction - GET /api/test
Sentry Logger [log]: [Tracing] Finishing http.server transaction: GET /api/test.
Sentry Logger [log]: Flushing events...
Sentry Logger [log]: Done flushing events
Error: API TEST
    at handle (/Users/asdf/Projects/test-web/.next/server/pages/api/test.js:76:11)
    at sentryWrappedHandler (/Users/asdf/Projects/test-web/node_modules/@sentry/nextjs/cjs/config/wrappers/withSentryAPI.js:62:14)
    at /Users/asdf/Projects/test-web/node_modules/@sentry/nextjs/cjs/config/wrappers/withSentryAPI.js:132:37
    at bound (node:domain:433:15)
    at runBound (node:domain:444:12)
    at sentryWrappedHandler (/Users/asdf/Projects/test-web/node_modules/@sentry/nextjs/cjs/config/wrappers/withSentryAPI.js:196:12)
    at Object.apiResolver (/Users/jasdf/Projects/test-web/node_modules/next/dist/server/api-utils/node.js:363:15)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async NextNodeServer.runApi (/Users/asdf/Projects/test-web/node_modules/next/dist/server/next-server.js:474:9)
    at async Object.fn (/Users/asdfProjects/test-web/node_modules/next/dist/server/next-server.js:736:37)
Sentry Logger [log]: Flushing events...
Sentry Logger [log]: Done flushing events
Sentry Logger [log]: [Tracing] starting http.server transaction - GET /api/auth/session
Sentry Logger [log]: [Tracing] starting http.server transaction - GET /api/auth/[...nextauth]
Sentry Logger [log]: [Tracing] Finishing http.server transaction: GET /api/auth/[...nextauth].
Sentry Logger [log]: Flushing events...
Sentry Logger [log]: Done flushing events

[lforst]

Ok, I think I can somewhat reproduce this. I will put this on our backlog but just as a quick disclaimer fixing this is not gonna have a high priority. Dev mode is super sketchy in Next.js/Webpack and our priority is clearly in getting production builds to work smoothly. Thank you for surfacing this though!

If you want to debug your Sentry SDK configuration I recommend just doing a production build locally.

[wscotten]

Bump. Seems like Nextjs api route handlers are still not supported automatically with Sentry. This would be a very nice nice-to-have 😄.

[lforst]

@wscotten the issue you want to follow is likely this one: #7228.

We already started implementing support but the app router was still constantly changing and we didn't wanna do work twice (or even thrice) so we delayed it a bit until Next.js gets more stable again.