Skip to content

Instantly share code, notes, and snippets.

@coindegen
Created August 9, 2023 03:38
Show Gist options
  • Save coindegen/f0222b6feb97dcf5bd9cc73713383f10 to your computer and use it in GitHub Desktop.
Save coindegen/f0222b6feb97dcf5bd9cc73713383f10 to your computer and use it in GitHub Desktop.
zod problem

Hello, I am able to detect and handle ZodErrors in dev mode correctly, but lose this ability in production.

My route:

export function isZodErrorResponse(error: any): error is ZodError {
  console.dir("ZODZOD")
  console.dir(error, { depth: null })
  const isZod = error instanceof ZodError
  console.log({ isZod })
  return isZod
}

export const ErrorBoundary = () => {
  const error = useRouteError()

  if (isRouteErrorResponse(error)) {
    // handle it...  
  }

  if (isZodErrorResponse(error)) {
    return (
      <div>
        <h1>Oh no!</h1>
        <p>{error.issues[0].code} error at runtime:</p>
        <p>{JSON.stringify(error, null, 2)}</p>
      </div>
    )
  }

  console.log("neither Zod nor route error")
  console.log({ error: JSON.stringify(error) })

  return JSON.stringify(error)
}

export async function loader({ params, request }: LoaderArgs) {
  const collectionRes = await fetchCollection(params.slug)

  const collection = CollectionSchema.parse(collectionRes)

  return json({ collection })
}

When npm run dev and load route my-route, Zod parse passes useful errors to my ErrorBoundary, allowing me to detect them and handle them properly (surface the error in UI):

'ZODZOD'
ZodError: [
  {
    "code": "invalid_type",
    "expected": "string",
    "received": "undefined",
    "path": [
      "created_at"
    ],
    "message": "Required"
  }
]
    at Object.get error [as error] (file:///mysite/node_modules/zod/lib/index.mjs:537:31)
    at ZodObject.parse (file:///mysite/node_modules/zod/lib/index.mjs:636:22)
    at loader2 (file:///mysite/app/routes/$slug.tsx:93:39)
    at processTicksAndRejections (node:internal/process/task_queues:95:5)
    at /mysite/node_modules/@sentry/remix/cjs/utils/instrumentServer.js:2:3371
    at Object.callRouteLoaderRR (/mysite/node_modules/@remix-run/server-runtime/dist/data.js:11:660)
    at callLoaderOrAction (/mysite/node_modules/@remix-run/router/dist/router.cjs.js:11:74490)
    at async Promise.all (index 1)
    at loadRouteData (/mysite/node_modules/@remix-run/router/dist/router.cjs.js:11:63971)
    at queryImpl (/mysite/node_modules/@remix-run/router/dist/router.cjs.js:11:60844) {
  issues: [
    {
      code: 'invalid_type',
      expected: 'string',
      received: 'undefined',
      path: [ 'created_at' ],
      message: 'Required'
    }
  ],
  addIssue: [Function (anonymous)],
  addIssues: [Function (anonymous)]
}
{ isZod: true }
GET /my-route 500 - - 869.273 ms

In contrast, when I npm run build and npm start, I get this:

'ZODZOD'
[Error: Unexpected Server Error]
{ isZod: false }
not Zod or route error
{ error: '{}' }
GET /my-route 500 - - 2346.132 ms
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment