req.headers.get is not a function (TRPC pages router)

[gaufranc]

Im encountering an error when trying to implement this: https://github.com/c-ehrlich/next-axiom-trpc-example/tree/main/pages-router

GET /api/trpc/notifications.getCountOfUserNotifications,auctions.getAuctionsHeroHome,auctions.getAuctionsEndingSoonHome,auctions.getFeaturedAuctionsHome?batch=1&input=%7B%220%22%3A%7B%22json%22%3Anull%2C%22meta%22%3A%7B%22values%22%3A%5B%22undefined%22%5D%7D%7D%2C%221%22%3A%7B%22json%22%3Anull%2C%22meta%22%3A%7B%22values%22%3A%5B%22undefined%22%5D%7D%7D%2C%222%22%3A%7B%22json%22%3Anull%2C%22meta%22%3A%7B%22values%22%3A%5B%22undefined%22%5D%7D%7D%2C%223%22%3A%7B%22json%22%3Anull%2C%22meta%22%3A%7B%22values%22%3A%5B%22undefined%22%5D%7D%7D%7D 500 in 22ms ⨯ TypeError: req.headers.get is not a function at C:\work\stringtree-nextjs\nextjs\node_modules\next-axiom\dist\withAxiom.js:75:31 at Generator.next (<anonymous>) at C:\work\stringtree-nextjs\nextjs\node_modules\next-axiom\dist\withAxiom.js:8:71 at new Promise (<anonymous>) at __awaiter (C:\work\stringtree-nextjs\nextjs\node_modules\next-axiom\dist\withAxiom.js:4:12) at C:\work\stringtree-nextjs\nextjs\node_modules\next-axiom\dist\withAxiom.js:56:26 at eval (webpack-internal:///(api)/./src/server/tools/axiomMiddleware.ts:15:92) at K (C:\work\stringtree-nextjs\nextjs\node_modules\next\dist\compiled\next-server\pages-api.runtime.dev.js:21:2877) at process.processTicksAndRejections (node:internal/process/task_queues:95:5) at async U.render (C:\work\stringtree-nextjs\nextjs\node_modules\next\dist\compiled\next-server\pages-api.runtime.dev.js:21:3955) at async DevServer.runApi (C:\work\stringtree-nextjs\nextjs\node_modules\next\dist\server\next-server.js:600:9) at async NextNodeServer.handleCatchallRenderRequest (C:\work\stringtree-nextjs\nextjs\node_modules\next\dist\server\next-server.js:269:37) at async DevServer.handleRequestImpl (C:\work\stringtree-nextjs\nextjs\node_modules\next\dist\server\base-server.js:816:17) at async C:\work\stringtree-nextjs\nextjs\node_modules\next\dist\server\dev\next-dev-server.js:339:20 at async Span.traceAsyncFn (C:\work\stringtree-nextjs\nextjs\node_modules\next\dist\trace\trace.js:154:20) { page: '/api/trpc/[trpc]' }

Thats the error im encountering, it happens on every call i make to the backend via TRPC. The problem arises when i implement withAxiom in pages/api/trpc/[trpc].ts

I see that the package uses "req.headers.get", i tried to patch the headers im sending with no luck. Is this a common issue?

Here are my TRPC context without axiom: `const createInnerTRPCContext = ({ auth, req }: AuthContext) => { return { auth, prisma, req, } }

export const createTRPCContext = (opts: CreateNextContextOptions) => { return createInnerTRPCContext({ req: opts.req, auth: getAuth(opts.req), }) }`

Im trying to implement this because i linked the application with Vercel but my function logs are not showing on the Axiom dashboard

[bkdiehl]

I'm running into this same issue. It not only fails to log, it causes all my trpc requests to fail.

[gaufranc]

@bkdiehl same here. If i try to just log with new Logger() all my long logs are truncated. Is there not a way to fix this?

[bkdiehl]

I'm not sure. In my case, I was upgrading from an old version of axiom (v0.17) at the same time I was upgrading my project from nextjs v12 to v14. In addition to the trpc errors I was experiencing, the public endpoints in the app also had unexpected behavior. It looks like some types/functionality were removed to support nextjs 14, but those changes appear to have removed support for using axiom with api requests. I ended up forking next-axiom v0.17 and publishing to a private npm registry with updated peer dependencies that include nextjs 14.

[vlucas]

Came here to report the same issue. This issue makes it impossible to use next-axiom for wrapping API routes in the old pages router, as described in the README file in the root of this project.

⨯ TypeError: req.headers.get is not a function
    at /Users/vlucas/Code/my-project-name-here/node_modules/next-axiom/dist/withAxiom.js:75:31
    at Generator.next (<anonymous>)
    at /Users/vlucas/Code/my-project-website/node_modules/next-axiom/dist/withAxiom.js:8:71
    at new Promise (<anonymous>)
    at __awaiter (/Users/vlucas/Code/my-project-website/node_modules/next-axiom/dist/withAxiom.js:4:12)
    at /Users/vlucas/Code/my-project-website/node_modules/next-axiom/dist/withAxiom.js:56:26
    at K (/Users/vlucas/Code/my-project-website/node_modules/next/dist/compiled/next-server/pages-api.runtime.dev.js:21:2877)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async U.render (/Users/vlucas/Code/my-project-website/node_modules/next/dist/compiled/next-server/pages-api.runtime.dev.js:21:3955)
    at async DevServer.runApi (/Users/vlucas/Code/my-project-website/node_modules/next/dist/server/next-server.js:598:9)
    at async NextNodeServer.handleCatchallRenderRequest (/Users/vlucas/Code/my-project-website/node_modules/next/dist/server/next-server.js:269:37)
    at async DevServer.handleRequestImpl (/Users/vlucas/Code/my-project-website/node_modules/next/dist/server/base-server.js:810:17)
    at async /Users/vlucas/Code/my-project-website/node_modules/next/dist/server/dev/next-dev-server.js:339:20
    at async Span.traceAsyncFn (/Users/vlucas/Code/my-project-website/node_modules/next/dist/trace/trace.js:154:20)
    at async DevServer.handleRequest (/Users/vlucas/Code/my-project-website/node_modules/next/dist/server/dev/next-dev-server.js:336:24) {
  page: '/api/my-api-route'

[gaufranc]

Still having the same issue. My current workaround is to just log something like this:

`import { Logger } from 'next-axiom' export const logWithAxion = async (type: 'info' | 'error' = 'info', ...args: any[]) => { try { const message = args .map((arg) => (typeof arg === 'object' ? JSON.stringify(arg, getCircularReplacer()) : String(arg))) .join(' ') console.log(message)

    const log = new Logger()
    log[type](message)

    await log.flush()
} catch (error) {
    console.error('Error logging with Axiom', error)
}

}`

however this is not ideal

[gaufranc]

The only way i made this to work is to use "next": "^14.2.1", "next-axiom": "^0.18.1",

if i use a newer next-axiom version, it breaks.

[c-ehrlich]

Hi, unfortunately next-axiom v1 is not compatible with the pages router (and probably will never be). v0 will still receive security updates as necessary for the foreseeable future. More information in the readme: https://github.com/axiomhq/next-axiom?tab=readme-ov-file#introduction

The example should work as documented with next@latest and [email protected]

[thesollyz]

On top of what @c-ehrlich said, we have been cooking a new library that offers more flexibility in regarding how to setup the logging flow. Perhaps it could be used to build something better for tRPC. We only released it last night and we are happy to receive feedback. Anyone up for giving it a shot? docs here