Theo's Typesafe Cult•2mo ago

[TRPCClientError]: Converting circular structure to JSON

I'm getting this error only in production (Vercel). I'm using tRPC, Supabase, Clerk. The website crashes right after login. Browser error:

Application error: a server-side exception has occurred (see the server logs for more information).

Vercel logs:

l [TRPCClientError]: Converting circular structure to JSON
    --> starting at object with constructor 'Timeout'
    |     property '_idlePrev' -> object with constructor 'TimersList'
    --- property '_idleNext' closes the circle
    at l.from (/var/task/.next/server/chunks/696.js:7:53047)
    at /var/task/.next/server/app/activity/page.js:1:48095
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
  meta: undefined,
  shape: undefined,
  data: undefined,
  digest: '2788403914',
  [cause]: TypeError: Converting circular structure to JSON
      --> starting at object with constructor 'Timeout'
      |     property '_idlePrev' -> object with constructor 'TimersList'
      --- property '_idleNext' closes the circle
      at JSON.stringify (<anonymous>)
      ... 5 lines matching cause stack trace ...
      at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
    code: 'INTERNAL_SERVER_ERROR',
    name: 'TRPCError',
    [cause]: TypeError: Converting circular structure to JSON
        --> starting at object with constructor 'Timeout'
        |     property '_idlePrev' -> object with constructor 'TimersList'
        --- property '_idleNext' closes the circle
        at JSON.stringify (<anonymous>)
        at /var/task/.next/server/chunks/101.js:1:12977
        at t (/var/task/.next/server/chunks/338.js:13:359299)
        at a (/var/task/.next/server/chunks/338.js:13:359613)
        at c (/var/task/.next/server/chunks/338.js:13:353322)
        at /var/task/.next/server/app/activity/page.js:1:47939
        at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
  }
}

l [TRPCClientError]: Converting circular structure to JSON
    --> starting at object with constructor 'Timeout'
    |     property '_idlePrev' -> object with constructor 'TimersList'
    --- property '_idleNext' closes the circle
    at l.from (/var/task/.next/server/chunks/696.js:7:53047)
    at /var/task/.next/server/app/activity/page.js:1:48095
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
  meta: undefined,
  shape: undefined,
  data: undefined,
  digest: '2788403914',
  [cause]: TypeError: Converting circular structure to JSON
      --> starting at object with constructor 'Timeout'
      |     property '_idlePrev' -> object with constructor 'TimersList'
      --- property '_idleNext' closes the circle
      at JSON.stringify (<anonymous>)
      ... 5 lines matching cause stack trace ...
      at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
    code: 'INTERNAL_SERVER_ERROR',
    name: 'TRPCError',
    [cause]: TypeError: Converting circular structure to JSON
        --> starting at object with constructor 'Timeout'
        |     property '_idlePrev' -> object with constructor 'TimersList'
        --- property '_idleNext' closes the circle
        at JSON.stringify (<anonymous>)
        at /var/task/.next/server/chunks/101.js:1:12977
        at t (/var/task/.next/server/chunks/338.js:13:359299)
        at a (/var/task/.next/server/chunks/338.js:13:359613)
        at c (/var/task/.next/server/chunks/338.js:13:353322)
        at /var/task/.next/server/app/activity/page.js:1:47939
        at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
  }
}

Solution:

idk what the issue was, but I recreated the setup and it works now

Jump to solution

5 Replies

Mocha•2mo ago

And sometimes I get this in server logs:

[97;46m << query [1;97;46m #1 log.logs [0m {
  input: undefined,
  result: l [TRPCClientError]: Converting circular structure to JSON
      --> starting at object with constructor 'Timeout'
      |     property '_idlePrev' -> object with constructor 'TimersList'
      --- property '_idleNext' closes the circle
      at l.from (/var/task/.next/server/chunks/696.js:7:53047)
      at /var/task/.next/server/app/activity/page.js:1:48095
      at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
    meta: undefined,
    shape: undefined,
    data: undefined,
    [cause]: TypeError: Converting circular structure to JSON
        --> starting at object with constructor 'Timeout'
        |     property '_idlePrev' -> object with constructor 'TimersList'
        --- property '_idleNext' closes the circle
        at JSON.stringify (<anonymous>)
        ... 5 lines matching cause stack trace ...
        at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
      code: 'INTERNAL_SERVER_ERROR',
      name: 'TRPCError',
      [cause]: TypeError: Converting circular structure to JSON
          --> starting at object with constructor 'Timeout'
          |     property '_idlePrev' -> object with constructor 'TimersList'
          --- property '_idleNext' closes the circle
          at JSON.stringify (<anonymous>)
          at /var/task/.next/server/chunks/101.js:1:12977
          at t (/var/task/.next/server/chunks/338.js:13:359299)
          at a (/var/task/.next/server/chunks/338.js:13:359613)
          at c (/var/task/.next/server/chunks/338.js:13:353322)
          at /var/task/.next/server/app/activity/page.js:1:47939
          at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    }
  },
  elapsedMs: 47
}

[97;46m << query [1;97;46m #1 log.logs [0m {
  input: undefined,
  result: l [TRPCClientError]: Converting circular structure to JSON
      --> starting at object with constructor 'Timeout'
      |     property '_idlePrev' -> object with constructor 'TimersList'
      --- property '_idleNext' closes the circle
      at l.from (/var/task/.next/server/chunks/696.js:7:53047)
      at /var/task/.next/server/app/activity/page.js:1:48095
      at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
    meta: undefined,
    shape: undefined,
    data: undefined,
    [cause]: TypeError: Converting circular structure to JSON
        --> starting at object with constructor 'Timeout'
        |     property '_idlePrev' -> object with constructor 'TimersList'
        --- property '_idleNext' closes the circle
        at JSON.stringify (<anonymous>)
        ... 5 lines matching cause stack trace ...
        at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
      code: 'INTERNAL_SERVER_ERROR',
      name: 'TRPCError',
      [cause]: TypeError: Converting circular structure to JSON
          --> starting at object with constructor 'Timeout'
          |     property '_idlePrev' -> object with constructor 'TimersList'
          --- property '_idleNext' closes the circle
          at JSON.stringify (<anonymous>)
          at /var/task/.next/server/chunks/101.js:1:12977
          at t (/var/task/.next/server/chunks/338.js:13:359299)
          at a (/var/task/.next/server/chunks/338.js:13:359613)
          at c (/var/task/.next/server/chunks/338.js:13:353322)
          at /var/task/.next/server/app/activity/page.js:1:47939
          at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    }
  },
  elapsedMs: 47
}

Sturlen•2mo ago

at a glance I'm guessing you're returning a complex object that tRPC can't serialize into JSON. More context: https://stackoverflow.com/questions/64735881/typeerror-converting-circular-structure-to-json-starting-at-object-with-con

Stack Overflow

TypeError: Converting circular structure to JSON --> starting at ob...

I am a nest.js beginner and I am trying to implement Axios with my code and this error occurs and I would like to fix it. --> starting at object with constructor 'ClientRequest' | pr...

Sturlen•2mo ago

In particular, you might be returning a Node Timeout object, which can be returned from a setTimeout function: https://stackoverflow.com/a/37777603/5502241

Stack Overflow

What exactly are Javascript Timeout objects?

Here's a link with some sample code. http://jsfiddle.net/4djNt/2/ I assumed, until I started testing, that the return value of a setTimeout() would be some kind of browser object. In fact it see...

Mocha•2mo ago

Yes, but I didn't know where to start looking, especially since everything has been working fine for weeks without touching the code or anything around the code. It's a deeper issue that occurs at this function

const enforceUserIsAuthed = t.middleware(async ({ ctx, next }) => {
  if (!ctx.userId || !ctx.orgId || !ctx.orgSlug) {
    throw new TRPCError({
      code: 'UNAUTHORIZED',
      message: JSON.stringify(ctx),
    })
  }
    
  return next({
    ctx: {
      userId: ctx.userId,
      orgId: ctx.orgId,
      orgSlug: ctx.orgSlug,
    },
   })
})

const enforceUserIsAuthed = t.middleware(async ({ ctx, next }) => {
  if (!ctx.userId || !ctx.orgId || !ctx.orgSlug) {
    throw new TRPCError({
      code: 'UNAUTHORIZED',
      message: JSON.stringify(ctx),
    })
  }
    
  return next({
    ctx: {
      userId: ctx.userId,
      orgId: ctx.orgId,
      orgSlug: ctx.orgSlug,
    },
   })
})

so I updated the code. It still gave me an error, but the error is just the ctx object that I passed, so we don't know what it actually is

import { stringify } from 'flatted'
///
  message: stringify(ctx),

import { stringify } from 'flatted'
///
  message: stringify(ctx),

For context, here's my createTRPCContext:

export async function createTRPCContext(_: { headers: Headers }) {
  const session = auth()
  return {
    userId: session.userId,
    orgId: session.orgId,
    orgSlug: session.orgSlug,
    db: supabase,
  }
}

export async function createTRPCContext(_: { headers: Headers }) {
  const session = auth()
  return {
    userId: session.userId,
    orgId: session.orgId,
    orgSlug: session.orgSlug,
    db: supabase,
  }
}

And supabase is exported from:

import { env } from '~/env'
import { createClient } from '@supabase/supabase-js'
import type { Database } from '~/db'

export const supabase = createClient<Database>(
  env.SUPABASE_URL,
  env.SUPABASE_ANON_KEY
)

import { env } from '~/env'
import { createClient } from '@supabase/supabase-js'
import type { Database } from '~/db'

export const supabase = createClient<Database>(
  env.SUPABASE_URL,
  env.SUPABASE_ANON_KEY
)

Solution

Mocha•2mo ago

idk what the issue was, but I recreated the setup and it works now

Gaming

Programming

[TRPCClientError]: Converting circular structure to JSON