Uncaught (in promise) SyntaxError: Unexpected token '<', "<!DOCTYPE "... is not valid JSON [Next 13 (Page)]

[jameswong3388]

I cant receive JSON from the response, but rather HTML.

.env

UPSTASH_REDIS_REST_URL='https://adapting-rooster-30239.upstash.io'
UPSTASH_REDIS_REST_TOKEN='xxx'

redis.ts

import { Redis } from '@upstash/redis'

export const getRedisClient = () => {
  return new Redis({
    url: process.env.UPSTASH_REDIS_REST_URL || '',
    token: process.env.UPSTASH_REDIS_REST_TOKEN || '',
  })
}

rate-limit.ts

import { getRedisClient } from '~/lib/redis'
import { Ratelimit } from '@upstash/ratelimit'

import type { User } from '@supabase/gotrue-js/src/lib/types'

const rateLimitTypeToKey = (identifier: User) => {
  return `${identifier.id}`
};

export const checkCompletionsRateLimits = async (identifier: User) => {
  const ratelimit = new Ratelimit({
    redis: getRedisClient(),
    limiter: Ratelimit.slidingWindow(1, '86400 s'),
    analytics: true,
    timeout: 1000,
  })

  console.log('ratelimit', ratelimit)

  const result = await ratelimit.limit(rateLimitTypeToKey(identifier))

  console.log('result', result)

  // Calcualte the remaining time until generations are reset
  const diff = Math.abs(new Date(result.reset).getTime() - new Date().getTime())
  const hours = Math.floor(diff / 1000 / 60 / 60)
  const minutes = Math.floor(diff / 1000 / 60) - hours * 60

  return { result, hours, minutes }
}

As you can see from the above file, I am able to log ratelimit, but not the result, i really need help !

[chronark]

this is a browser console, right?

I suspect your environment variables are not available in your browser, can you double check?

[chronark]

pretty sure this is what's happening here

[jameswong3388]

@chronark Found the solution?

[chronark]

I posted it above the url is not loaded properly from your environment

[jameswong3388]

@chronark, but i am able to log the client

export const checkCompletionsRateLimits = async (identifier: User) => {

  const redis = getRedisClient()

  console.log('redis', redis)

  const ratelimit = new Ratelimit({
    redis: redis,
    limiter: Ratelimit.cachedFixedWindow(1, '86400 s'),
    analytics: true,
    timeout: 1000,
  })

  console.log('ratelimit', ratelimit)

  const result = await ratelimit.limit(rateLimitTypeToKey(identifier))

  console.log('result', result)

  // Calcualte the remaining time until generations are reset
  const diff = Math.abs(new Date(result.reset).getTime() - new Date().getTime())
  const hours = Math.floor(diff / 1000 / 60 / 60)
  const minutes = Math.floor(diff / 1000 / 60) - hours * 60

  return { result, hours, minutes }
}

[chronark]

logging the client doesn't proof anything try logging the url or token

[jameswong3388]

@chronark, oh yea it say undefined, but my other libraries were able to access the env var in .env.local

[chronark]

you are running this in your browser, not server side by default environment variables are not leaked to the browser