Theo's Typesafe Cult•2y ago

Proper way to handle TRPC server errors on client?

I have some code that looks a little like this, but I'm not too sure what we should be putting in the catch for typing the error. I'm just using the default t3 stack error formatter. Is there a built in type for the client I can use that doesn't require me to JSON.parse the error object?

subscribe
      .mutateAsync({
        email: form.email,
      })
      .then(() => {
        return router.push("/success");
      })
      .catch((err: Error) => {
        const message = err.message;
        const errors = JSON.parse(message) as {
          message: string;
        }[];
        setError(
          errors.length === 0
            ? "something went wrong =("
            : errors[0]?.message ?? "something went wrong"
        );
      })

subscribe
      .mutateAsync({
        email: form.email,
      })
      .then(() => {
        return router.push("/success");
      })
      .catch((err: Error) => {
        const message = err.message;
        const errors = JSON.parse(message) as {
          message: string;
        }[];
        setError(
          errors.length === 0
            ? "something went wrong =("
            : errors[0]?.message ?? "something went wrong"
        );
      })

1 Reply

Web Dev Cody•2y ago

maybe mutateAsync is an anti pattern... if I use subscribe.error I get all the types or I should just use with the options param like so:

subscribe.mutateAsync({email: form.email}, {
      onError() {
        
      }
    })

subscribe.mutateAsync({email: form.email}, {
      onError() {
        
      }
    })

Gaming

Programming

Proper way to handle TRPC server errors on client?