Theo's Typesafe Cult•14mo ago

TRPC error handling

Hey guys. I'm currently looking for some advice in regards to handling errors on my trpc endpoints. My current implementation is as follows:

const TicketOverview = () => {
  const [hasRan, setHasRan] = useState(false);
  const session = useSession();
  const theme = useMantineTheme();
  const { guildId } = useRouter().query;

  const isFetching = useIsFetching();
  const isMutating = useIsMutating();
  const isRestoring = useIsRestoring();

  const { data: guild, error: guildError } = api.guilds.guild.useQuery(
    {
      guildId: guildId as string,
    },
    { enabled: !!guildId }
  );

  const { data: guildChannels, error: channelError } =
    api.guilds.guildChannels.useQuery(
      {
        guildId: guildId as string,
      },
      { enabled: !!guildId }
    );

  const { data: guildCategories, error: categoryError } =
    api.guilds.guildCategories.useQuery(
      {
        guildId: guildId as string,
      },
      { enabled: !!guildId }
    );
  
  // if any of the queries are still in progress...
  if (session.status === 'loading' || isFetching || isRestoring || isMutating)
    return <Loading />;

  if (guildError || channelError || categoryError) {
    return (
      <div>
        {guildError?.message ||
          channelError?.message ||
          categoryError?.message
        }
      </div>
    );
  }

  return (
    <div>
      <h1>Pages content...</h1>
    </div>
  )
}

const TicketOverview = () => {
  const [hasRan, setHasRan] = useState(false);
  const session = useSession();
  const theme = useMantineTheme();
  const { guildId } = useRouter().query;

  const isFetching = useIsFetching();
  const isMutating = useIsMutating();
  const isRestoring = useIsRestoring();

  const { data: guild, error: guildError } = api.guilds.guild.useQuery(
    {
      guildId: guildId as string,
    },
    { enabled: !!guildId }
  );

  const { data: guildChannels, error: channelError } =
    api.guilds.guildChannels.useQuery(
      {
        guildId: guildId as string,
      },
      { enabled: !!guildId }
    );

  const { data: guildCategories, error: categoryError } =
    api.guilds.guildCategories.useQuery(
      {
        guildId: guildId as string,
      },
      { enabled: !!guildId }
    );
  
  // if any of the queries are still in progress...
  if (session.status === 'loading' || isFetching || isRestoring || isMutating)
    return <Loading />;

  if (guildError || channelError || categoryError) {
    return (
      <div>
        {guildError?.message ||
          channelError?.message ||
          categoryError?.message
        }
      </div>
    );
  }

  return (
    <div>
      <h1>Pages content...</h1>
    </div>
  )
}

This is a quick example showing what i would like to display when an error occurs, but it doesn't feel very nice... is there any alternatives?

3 Replies

theart4290•14mo ago

You can specify predefined error codes and display some user friendly message for each of them. The actual error message could be somewhere in your internal logs

rustclan•14mo ago

Thank you 🙂

deviana•5mo ago

so many questions about trpc error handling in the app router but no answers

Gaming

Programming

TRPC error handling