API Response returning HTML in development #7912

j03k64 · 2023-04-19T16:46:36Z

j03k64
Apr 19, 2023

Hello, I just started playing with Sentry inside of NextJS and I have a question on what is expected.

I have a file in src/pages/api/hello.tsx:

import type { NextApiRequest, NextApiResponse } from "next"
import * as Sentry from "@sentry/nextjs";

const handler = (
  req: NextApiRequest,
  res: NextApiResponse
): Promise<void> | void => {
  if (req.query.error) {
    throw new Error('Bad request')
  }

  res.json({
    success: true,
    message: 'Everything is just fine! ;)',
  })
}

export default Sentry.wrapApiHandlerWithSentry(handler, "/api/hello");

But, the problem is I'll get HTML responses vs. JSON responses (e.g.):

% curl -v "http://localhost:3000/api/hello?error=1"
*   Trying 127.0.0.1:3000...
* Connected to localhost (127.0.0.1) port 3000 (#0)
> GET /api/hello?error=1 HTTP/1.1
> Host: localhost:3000
> User-Agent: curl/7.87.0
> Accept: */*
> 
* Mark bundle as not supporting multiuse
< HTTP/1.1 500 Internal Server Error
< cache-control: no-store, must-revalidate
< x-powered-by: Next.js
< etag: "76tnqc2k643bs"
< content-type: text/html; charset=utf-8
< vary: Accept-Encoding
< date: Wed, 19 Apr 2023 16:42:23 GMT
< connection: close
< transfer-encoding: chunked
< 
<!DOCTYPE html><html><head><style data-next-hide-fouc="true">body{display:none}</style><noscript data-next-hide-fouc="true"><style>body{display:block}</style></noscript><meta charSet="utf-8"/><meta name="viewport" content="width=device-width"/><meta name="next-head-count" content="2"/><link data-next-font="" rel="preconnect" href="/" crossorigin="anonymous"/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills.js?ts=1681922543782"></script><script src="/_next/static/chunks/webpack.js?ts=1681922543782" defer=""></script><script src="/_next/static/chunks/main.js?ts=1681922543782" defer=""></script><script src="/_next/static/chunks/pages/_app.js?ts=1681922543782" defer=""></script><script src="/_next/static/chunks/pages/_error.js?ts=1681922543782" defer=""></script><script src="/_next/static/development/_buildManifest.js?ts=1681922543782" defer=""></script><script src="/_next/static/development/_ssgManifest.js?ts=1681922543782" defer=""></script><noscript id="__next_css__DO_NOT_USE__"></noscript></head><body><div id="__next"></div><script src="/_next/static/chunks/react-refresh.js?ts=1681922543782"></script><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{"statusCode":500,"_sentryTraceData":"ed540ad38c284179b929a9955ed40709-9337e56ba2e96da9-1","_sentryBaggage":"sentry-environment=development,sentry-release=development,sentry-transaction=%2F_error,sentry-public_key=e3e818e9379741cb8ca9f4bde34bbd27,sentry-trace_id=ed540ad38c284179b929a9955ed40709,sentry-sample_rate=1"}},"page":"/_error","query":{"__NEXT_PAGE":"/api/hello"},"buildId":"development","isFallback":false,"err":{"name":"Error","source":"server","message":"Bad request","stack":"Error: Bad request\n    at handler (webpack-internal:///(api)/./src/pages/api/hello.tsx:12:15)\n    at Object.apply (/app/node_modules/@sentry/nextjs/cjs/server/wrapApiHandlerWithSentry.js:54:31)\n    at Object.apply (/app/node_modules/@sentry/nextjs/cjs/server/wrapApiHandlerWithSentry.js:26:61)\n    at /app/node_modules/@sentry/nextjs/cjs/server/wrapApiHandlerWithSentry.js:136:56\n    at /app/node_modules/@sentry/node/cjs/async/hooks.js:38:14\n    at AsyncLocalStorage.run (node:async_hooks:338:14)\n    at Object.runWithAsyncContext (/app/node_modules/@sentry/node/cjs/async/hooks.js:37:25)\n    at Object.runWithAsyncContext (/app/node_modules/@sentry/core/cjs/hub.js:527:36)\n    at Object.apply (/app/node_modules/@sentry/nextjs/cjs/server/wrapApiHandlerWithSentry.js:59:33)\n    at Object.apply (/app/node_modules/@sentry/nextjs/cjs/server/wrapApiHandlerWithSentry.js:26:61)\n    at /app/node_modules/next/dist/server/api-utils/node.js:377:16\n    at /app/node_modules/next/dist/server/lib/trace/tracer.js:92:36\n    at NoopContextManager.with (/app/node_modules/next/dist/compiled/@opentelemetry/api/index.js:1:7057)\n    at ContextAPI.with (/app/node_modules/next/dist/compiled/@opentelemetry/api/index.js:1:516)\n    at NoopTracer.startActiveSpan (/app/node_modules/next/dist/compiled/@opentelemetry/api/index.js:1:18086)\n    at ProxyTracer.startActiveSpan (/app/node_modules/next/dist/compiled/@opentelemetry/api/index.js:1:18847)\n    at /app/node_modules/next/dist/server/lib/trace/tracer.js:81:107\n    at NoopContextManager.with (/app/node_modules/next/dist/compiled/@opentelemetry/api/index.js:1:7057)\n    at ContextAPI.with (/app/node_modules/next/dist/compiled/@opentelemetry/api/index.js:1:516)\n    at NextTracerImpl.trace (/app/node_modules/next/dist/server/lib/trace/tracer.js:81:32)\n    at Object.apiResolver (/app/node_modules/next/dist/server/api-utils/node.js:375:63)\n    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)\n    at async DevServer.runApi (/app/node_modules/next/dist/server/next-server.js:571:9)\n    at async Object.fn (/app/node_modules/next/dist/server/next-server.js:1018:35)\n    at async Router.execute (/app/node_modules/next/dist/server/router.js:297:32)\n    at async DevServer.runImpl (/app/node_modules/next/dist/server/base-server.js:522:29)\n    at async DevServer.run (/app/* Closing connection 0
node_modules/next/dist/server/dev/next-dev-server.js:869:20)\n    at async DevServer.handleRequestImpl (/app/node_modules/next/dist/server/base-server.js:456:20)"},"gip":true,"scriptLoader":[]}</script></body></html>

I've updated that handler to look like this:

import type { NextApiRequest, NextApiResponse } from "next"
import * as Sentry from "@sentry/nextjs";

const handler = (
  req: NextApiRequest,
  res: NextApiResponse
): Promise<void> | void => {
  try {
    if (req.query.error) {
      throw new Error('Bad request')
    }

    res.json({
      success: true,
      message: 'Everything is just fine! ;)',
    })
  }
  catch (error) {
    Sentry.captureException(error)
    res.status(400).json({
      success: false,
      message: error.toString(),
    })
  }
}

export default Sentry.wrapApiHandlerWithSentry(handler, "/api/hello");

So now I'll always get JSON responses (e.g):

% curl -v "http://localhost:3000/api/hello?error=1"
*   Trying 127.0.0.1:3000...
* Connected to localhost (127.0.0.1) port 3000 (#0)
> GET /api/hello?error=1 HTTP/1.1
> Host: localhost:3000
> User-Agent: curl/7.87.0
> Accept: */*
> 
* Mark bundle as not supporting multiuse
< HTTP/1.1 400 Bad Request
< content-type: application/json; charset=utf-8
< etag: "jm9krzh6if1c"
< vary: Accept-Encoding
< date: Wed, 19 Apr 2023 16:35:18 GMT
< connection: close
< transfer-encoding: chunked
< 
* Closing connection 0
{"success":false,"message":"Error: Bad request"}

I guess I was expecting that Sentry.wrapApiHandlerWithSentry would handle whether it is an HTML request vs. API/REST request. As there doesn't appear to be a much on the web regarding this, I feel like I have something configured incorrectly or something.

Any help would be appreciated.

AbhiPrasad · 2023-04-20T09:37:07Z

AbhiPrasad
Apr 20, 2023
Maintainer

Hey @j03k64 couple of things here.

The Sentry wrappers aim to just send information in Sentry, and leave managing the response to the developer (no magic). In the first example, what does the handler return if you do export default handler instead of using the wrapApiHandlerWithSentry?

Also, why are you manually adding wrapApiHandlerWithSentry? We heavily recommend turning on the automatic wrapping, and using excludeServerRoutes to deny list the routes you don't want instrumented: https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup/#opt-out-of-auto-instrumentation-on-specific-routes

0 replies

j03k64 · 2023-04-20T14:26:19Z

j03k64
Apr 20, 2023
Author

Thanks for that clarification @AbhiPrasad. I guess I was expecting it to be handled by Sentry, but your explanation makes sense. I've answered your questions below.

The Sentry wrappers aim to just send information in Sentry, and leave managing the response to the developer (no magic). In the first example, what does the handler return if you do export default handler instead of using the wrapApiHandlerWithSentry?
Still HTML, and even removing Sentry all together returns HTML; so it's obviously a NextJS thing.

Also, why are you manually adding wrapApiHandlerWithSentry? We heavily recommend turning on the automatic wrapping, and using excludeServerRoutes to deny list the routes you don't want instrumented: https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup/#opt-out-of-auto-instrumentation-on-specific-routes

I was hacking trying to get Errors thrown in the api path to always return JSON... and assumed that was the most (blunt way) to make sure Sentry was handling it. I've removed that now since there isn't a need for it.

Cheers

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

API Response returning HTML in development #7912

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 2 comments

{{title}}

{{title}}

Select a reply

API Response returning HTML in development #7912

j03k64 Apr 19, 2023

Replies: 2 comments

AbhiPrasad Apr 20, 2023 Maintainer

j03k64 Apr 20, 2023 Author

j03k64
Apr 19, 2023

AbhiPrasad
Apr 20, 2023
Maintainer

j03k64
Apr 20, 2023
Author