xenial-black

Debugging a statusCode: 500 error?

How can you debug a statusCode 500 error?

{
  "error": true,
  "url": "https://memorylink-alpha-convex-tanstack-9gycamu9f-remusris-projects.vercel.app/",
  "statusCode": 500,
  "statusMessage": "Server Error",
  "message": "Server Error"
}

{
  "error": true,
  "url": "https://memorylink-alpha-convex-tanstack-9gycamu9f-remusris-projects.vercel.app/",
  "statusCode": 500,
  "statusMessage": "Server Error",
  "message": "Server Error"
}

Zero build issues, I checked the env variables and everything was working but for some reason once deployed this is what is being returned. How can you debug this? EDIT 9/23/25: So I just tried replicating this with the RC and I'm no longer getting the same error I made a new repo using the RC and now we no longer get this error so it seems it's been fixed. https://start-basic-tanstack-rc.vercel.app/

TanStack Start | Type-Safe, Client-First, Full-Stack React Framework

TanStack Start is a type-safe, client-first, full-stack React framework.

24 Replies

adverse-sapphire•3mo ago

1. do you have the log? 2. Have you tried building with node preset and run it locally with node .output/server/index.mjs?

xenial-blackOP•3mo ago

@hokkyss I discovered the bug, but there was no build error that diagnosed it I had a zod variable inside of a route and I export that variable into another component This is what the code looked like

const userObjectUrlsSchema = z.object({
  userObjectUrlView: z
    .enum([
      'browsingSessions',
      'linkedObjects',
      'enterAndExitUrls',
      'all',
      'aiSuggested',
    ])
    .optional()
    .default('all'),
  linkedObjectsViewMode: z.enum(['canvas', 'list']).optional().default('list'),
})

export type UserObjectUrlView = z.infer<
  typeof userObjectUrlsSchema
>['userObjectUrlView']

export type LinkedObjectsViewMode = z.infer<
  typeof userObjectUrlsSchema
>['linkedObjectsViewMode']

export const Route = createFileRoute(
  '/_authed/userObjectUrls/$userObjectUrlId/',
)({
  component: RouteComponent,
  validateSearch: userObjectUrlsSchema,
})

function RouteComponent() {
  const { userObjectUrlId } = Route.useParams()
  const { userObjectUrlView, linkedObjectsViewMode } = Route.useSearch()

  // const router = useRouterState()
  // const navigate = useNavigate({ from: Route.fullPath }) // or the literal path

  const {
    userObjectUrlQuery,
    superLinkBetweenObjects,
    handleViewChange,
    userLinkBetweenObjects,
    aiSuggestedLinkBetweenObjects,
  } = useUserObjectUrlId()

return (
<div>
...
</div>
)

const userObjectUrlsSchema = z.object({
  userObjectUrlView: z
    .enum([
      'browsingSessions',
      'linkedObjects',
      'enterAndExitUrls',
      'all',
      'aiSuggested',
    ])
    .optional()
    .default('all'),
  linkedObjectsViewMode: z.enum(['canvas', 'list']).optional().default('list'),
})

export type UserObjectUrlView = z.infer<
  typeof userObjectUrlsSchema
>['userObjectUrlView']

export type LinkedObjectsViewMode = z.infer<
  typeof userObjectUrlsSchema
>['linkedObjectsViewMode']

export const Route = createFileRoute(
  '/_authed/userObjectUrls/$userObjectUrlId/',
)({
  component: RouteComponent,
  validateSearch: userObjectUrlsSchema,
})

function RouteComponent() {
  const { userObjectUrlId } = Route.useParams()
  const { userObjectUrlView, linkedObjectsViewMode } = Route.useSearch()

  // const router = useRouterState()
  // const navigate = useNavigate({ from: Route.fullPath }) // or the literal path

  const {
    userObjectUrlQuery,
    superLinkBetweenObjects,
    handleViewChange,
    userLinkBetweenObjects,
    aiSuggestedLinkBetweenObjects,
  } = useUserObjectUrlId()

return (
<div>
...
</div>
)

by exporting userObjectUrlsSchema I got a build error

adverse-sapphire•3mo ago

runtime error you mean?

xenial-blackOP•3mo ago

This was the file it was imported into

...
import { useUserObjectUrlId } from '#/routes/_authed/userObjectUrls/$userObjectUrlId'
...


export const UserObjectUrlIdAllDynamicGrid = () => {

...
import { useUserObjectUrlId } from '#/routes/_authed/userObjectUrls/$userObjectUrlId'
...


export const UserObjectUrlIdAllDynamicGrid = () => {

adverse-sapphire•3mo ago

so have you fixed it?

xenial-blackOP•3mo ago

The error came after I deployed the website When I loaded up the website this is all I got

{
  "error": true,
  "url": "https://memorylink-alpha-convex-tanstack-9gycamu9f-remusris-projects.vercel.app/",
  "statusCode": 500,
  "statusMessage": "Server Error",
  "message": "Server Error"
}

{
  "error": true,
  "url": "https://memorylink-alpha-convex-tanstack-9gycamu9f-remusris-projects.vercel.app/",
  "statusCode": 500,
  "statusMessage": "Server Error",
  "message": "Server Error"
}

So this is a bug with tanstack

adverse-sapphire•3mo ago

if build error, it will error when vercel builds the application.

xenial-blackOP•3mo ago

it should have caught this error

adverse-sapphire•3mo ago

and fails deployment

xenial-blackOP•3mo ago

No build error and it didnt' fail deployment but in production all I got was that JSON back

adverse-sapphire•3mo ago

No build error and it didnt' fail deployment

yeah that is why it is not a build error :v

but in production all I got was that JSON back

and that is also why i asked for the logs and also no2 above, because they are usually logged to the console

xenial-blackOP•3mo ago

I can go find it

xenial-blackOP•3mo ago

Here is the logs

message.txt

xenial-blackOP•3mo ago

Someone on the tanstack team should know about this or maybe I don't have my package.json properly configured

adverse-sapphire•3mo ago

find the runtime log from here

xenial-blackOP•3mo ago

I just made a repo demonstrating the issue https://github.com/remusris/tanstack-start-deployment-bug

GitHub

GitHub - remusris/tanstack-start-deployment-bug

Contribute to remusris/tanstack-start-deployment-bug development by creating an account on GitHub.

xenial-blackOP•3mo ago

This is the deployed app https://tanstack-start-deployment-bug.vercel.app/ If you delete the import from ComponentWithImportedZod it should go away all I did to create this bug is set up a fresh tanstack-start repo, then export a const from a route file and that was able to successfuly reproduce the error

xenial-blackOP•3mo ago

I'm not sure if I reported this in the right place but I put a bug report in the create-tsroute-app repo on github Below is the report https://github.com/TanStack/create-tsrouter-app/issues/167

GitHub

Error in production but not caught by linter via pnpm build · Issu...

Which project does this relate to? Create Tanstack App Describe the bug I discovered a bug because I was trying to figure out why my code was building and deplying without errors then upon visiting...

xenial-blackOP•3mo ago

So I just tried replicating this with the RC and I'm no longer getting the same error I made a new repo using the RC and now I'm no longer get this error so it seems it's been fixed. https://start-basic-tanstack-rc.vercel.app/

TanStack Start | Type-Safe, Client-First, Full-Stack React Framework

TanStack Start is a type-safe, client-first, full-stack React framework.

plain-purple•3mo ago

how did you deploy to vercel?

xenial-blackOP•3mo ago

Here's the code you can take a look https://github.com/remusris/start-basic-tanstack-rc

GitHub

GitHub - remusris/start-basic-tanstack-rc

Contribute to remusris/start-basic-tanstack-rc development by creating an account on GitHub.

xenial-blackOP•3mo ago

Using nitroV2Plugin() as the docs recommend for vercel

import { tanstackStart } from '@tanstack/react-start/plugin/vite'
import { defineConfig } from 'vite'
import tsConfigPaths from 'vite-tsconfig-paths'
import viteReact from '@vitejs/plugin-react'
import { nitroV2Plugin } from '@tanstack/nitro-v2-vite-plugin'


export default defineConfig({
  server: {
    port: 3000,
  },
  plugins: [
    tsConfigPaths({
      projects: ['./tsconfig.json'],
    }),
    tanstackStart({
      srcDirectory: 'src',
      start: { entry: './start.tsx' },
      server: { entry: './server.ts' }
    }),
    nitroV2Plugin(),
    viteReact(),
  ],
})

import { tanstackStart } from '@tanstack/react-start/plugin/vite'
import { defineConfig } from 'vite'
import tsConfigPaths from 'vite-tsconfig-paths'
import viteReact from '@vitejs/plugin-react'
import { nitroV2Plugin } from '@tanstack/nitro-v2-vite-plugin'


export default defineConfig({
  server: {
    port: 3000,
  },
  plugins: [
    tsConfigPaths({
      projects: ['./tsconfig.json'],
    }),
    tanstackStart({
      srcDirectory: 'src',
      start: { entry: './start.tsx' },
      server: { entry: './server.ts' }
    }),
    nitroV2Plugin(),
    viteReact(),
  ],
})

foreign-sapphire•3mo ago

How did you solve it? I'm having this error in coolify, locally it's ok, but in production it gives this error

> start
> node .output/server/index.mjs

Listening on http://0.0.0.0:80
npm warn config production Use `--omit=dev` instead.
[h3] Implicit event handler conversion is deprecated. Use `eventHandler()` or `fromNodeMiddleware()` to define event handlers.  
     Handler: (event) => handler(event.req, event.context)
TypeError: Invalid URL
    at new URL (node:internal/url:816:29)
    ... 7 lines matching cause stack trace ...
    at async Server.toNodeHandle (file:///app/.output/server/index.mjs:1829:7) {
  cause: TypeError: Invalid URL
      at new URL (node:internal/url:816:29)
      at startRequestResolver (file:///app/.output/server/chunks/virtual/entry.mjs:854:17)
      at file:///app/.output/server/chunks/virtual/entry.mjs:441:13
      at AsyncLocalStorage.run (node:internal/async_local_storage/async_hooks:91:14)
      at file:///app/.output/server/chunks/virtual/entry.mjs:439:35
      at Object.handler (file:///app/.output/server/chunks/virtual/entry.mjs:378:20)
      at file:///app/.output/server/index.mjs:1489:43
      at async Object.handler (file:///app/.output/server/index.mjs:1558:19)
      at async Server.toNodeHandle (file:///app/.output/server/index.mjs:1829:7) {
    code: 'ERR_INVALID_URL',
    input: '/categorias'
  },
  status: 500,
  statusText: undefined,
  headers: undefined,
  data: undefined,
  body: undefined,
  unhandled: true
}

> start
> node .output/server/index.mjs

Listening on http://0.0.0.0:80
npm warn config production Use `--omit=dev` instead.
[h3] Implicit event handler conversion is deprecated. Use `eventHandler()` or `fromNodeMiddleware()` to define event handlers.  
     Handler: (event) => handler(event.req, event.context)
TypeError: Invalid URL
    at new URL (node:internal/url:816:29)
    ... 7 lines matching cause stack trace ...
    at async Server.toNodeHandle (file:///app/.output/server/index.mjs:1829:7) {
  cause: TypeError: Invalid URL
      at new URL (node:internal/url:816:29)
      at startRequestResolver (file:///app/.output/server/chunks/virtual/entry.mjs:854:17)
      at file:///app/.output/server/chunks/virtual/entry.mjs:441:13
      at AsyncLocalStorage.run (node:internal/async_local_storage/async_hooks:91:14)
      at file:///app/.output/server/chunks/virtual/entry.mjs:439:35
      at Object.handler (file:///app/.output/server/chunks/virtual/entry.mjs:378:20)
      at file:///app/.output/server/index.mjs:1489:43
      at async Object.handler (file:///app/.output/server/index.mjs:1558:19)
      at async Server.toNodeHandle (file:///app/.output/server/index.mjs:1829:7) {
    code: 'ERR_INVALID_URL',
    input: '/categorias'
  },
  status: 500,
  statusText: undefined,
  headers: undefined,
  data: undefined,
  body: undefined,
  unhandled: true
}

Web:

{
  "status": 500,
  "unhandled": true,
  "message": "HTTPError"
}

{
  "status": 500,
  "unhandled": true,
  "message": "HTTPError"
}

xenial-blackOP•3mo ago

What was causing the issue I faced was that I was exporting a zod schema from a route. This used to be an issue in the TS beta but in the TS RC I'm not longer having that issue. I've known gotten back this server error 500 from missing an environment variable. As to what is causing your issue in particular I'm not sure but I think better error handling would be helpful.

Gaming

Programming

Debugging a statusCode: 500 error?

Did you find this page helpful?