Zod error message for union is misleading

[bajewole]

Issue: Zod error message for unions is misleading

const SuccessCode = z.number().min(1000).max(1999);
const ClientErrorCode = z.number().min(2000).max(2999);
const ServerErrorCode = z.number().min(3000).max(3999);

const StatusCode = z.union([
  SuccessCode,
  ClientErrorCode,
  ServerErrorCode,
]);

Zod error I got is

const input = 4000;
    expect(() => StatusCode.parse(input)).toThrowErrorMatchingInlineSnapshot(`
    "[
      {
        \\"code\\": \\"too_big\\",
        \\"maximum\\": 1999,
        \\"type\\": \\"number\\",
        \\"inclusive\\": true,
        \\"exact\\": false,
        \\"message\\": \\"Number must be less than or equal to 1999\\",
        \\"path\\": []
      }
    ]"`);

The valid error object should be this instead

const input = 4000;
    expect(() => StatusCode.parse(input)).toThrowErrorMatchingInlineSnapshot(`
    "[
      {
        \\"code\\": \\"too_big\\",
        \\"maximum\\": 3999,
        \\"type\\": \\"number\\",
        \\"inclusive\\": true,
        \\"exact\\": false,
        \\"message\\": \\"Number must be less than or equal to 3999\\",
        \\"path\\": []
      }
    ]"`);

The validation works but the error is misleading.

I tried creating a custom error by using errorMap but it still returned the above error

const StatusCode = z.union([
  SuccessCode,
  ClientErrorCode,
  ServerErrorCode,
],
  {
    errorMap: () => {
      return {
        message: "StatusCode must be between 1000 and 3999",
      };
    },
  });

[JacobWeisenburger]

Is this what you are looking for?

const SuccessCode = z.number().min( 1000 ).max( 1999 )
const ClientErrorCode = z.number().min( 2000 ).max( 2999 )
const ServerErrorCode = z.number().min( 3000 ).max( 3999 )

const StatusCode = z.union( [
    ServerErrorCode,
    ClientErrorCode,
    SuccessCode,
] )

const input = 4000
const result = StatusCode.safeParse( input )
!result.success && console.log( result.error.issues )
// [
//     {
//         code: "too_big",
//         maximum: 3999,
//         type: "number",
//         inclusive: true,
//         exact: false,
//         message: "Number must be less than or equal to 3999",
//         path: []
//     }
// ]

If you found my answer satisfactory, please consider supporting me. Even a small amount is greatly appreciated. Thanks friend! 🙏
https://github.com/sponsors/JacobWeisenburger

[JacobWeisenburger]

also I tried it in codesandbox
https://codesandbox.io/p/sandbox/bold-gould-j7p8hg

[bajewole]

What happens when you use a number lower than 1000? Let's say 999. 👀

[JacobWeisenburger]

// [
//     {
//         code: "too_small",
//         minimum: 3000,
//         type: "number",
//         inclusive: true,
//         exact: false,
//         message: "Number must be greater than or equal to 3000",
//         path: []
//     }
// ]

[bajewole]

And that wasn't the expected response @JacobWeisenburger, it should be

// [
//     {
//         code: "too_small",
//         minimum: 1000,
//         type: "number",
//         inclusive: true,
//         exact: false,
//         message: "Number must be greater than or equal to 1000",
//         path: []
//     }
// ]

This is why I created this issue. Can you kindly move it back to an issue?

[JacobWeisenburger]

it's probably a good idea to include context like this in issues, because it shows what you or someone else has tried to do to solve this.