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