DEV Community

Cover image for Elegant Error Handling and End to End typesafety with Hono RPC
mmvergara
mmvergara

Posted on

2 1 1 1 1

Elegant Error Handling and End to End typesafety with Hono RPC

I've always had a love-hate relationship with JavaScript's error handling. Its reliance on try-catch blocks and throwing exceptions might work for others, but it definitely frustrates me sometimes.

Consider this typical JavaScript error handling pattern:

async function fetchData(url) {
  try {
    const response = await fetch(url);
    if (!response.ok) {
      throw new Error(`HTTP error! Status: ${response.status}`);
    }
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error("Error fetching data:", error.message);
  }
}
Enter fullscreen mode Exit fullscreen mode

That's a lot of code and we still don't know the type of the error.

My opinion is that when dealing with errors, you want to know what caused the error, where it came from, and what type of error it is and handle it right away. Especially when you're in a server environment. For me


The golang way

I prefer to handle errors like how golang handles them, basically error as values.

data, err := getData()
if err != nil {
  // handle error
}
Enter fullscreen mode Exit fullscreen mode

This way you handle the error right away and you don't have to worry about the rest of the code running if there's an error.

Supabase does the same thing with their supabase-js library.

const { data, error } = await supabase.from("users").select("*");
if (error) {
  // handle error
}
Enter fullscreen mode Exit fullscreen mode

Graceful Error Handling with Hono RPC

Let us talk about the main star of the show

const onSubmit = async (data: SignUpSchema) => {
  const res = await callRpc(api.auth.signup.$post({ json: data }));

  if (res.error) {
    toast.error(res.error);
    return;
  }

  toast.success("Account created successfully");
  router.navigate({ to: "/" });
};
Enter fullscreen mode Exit fullscreen mode

This function might not look much, but it provides type-safe JSON parameters via RPC. It handles all errors and returns an object containing either data or error, with the data type inferred from the RPC definition based on the endpoint's return type.


Setting up the graceful error handling

Setup Hono Rpc using the official documentation

Setting up the Hono error handler

The backend should always return a text response with the error message and status code.

export const errorHandler = (err: Error | HTTPException, c: Context) => {
  console.log("=== Caught Error ===");
  if (err instanceof HTTPException) {
    return c.text(err.message, err.status);
  }
  if (err instanceof z.ZodError) {
    return c.text(err.errors.map((err) => err.message).join(",\n"), 400);
  }
  console.error(err);
  return c.text("Something went wrong", 500);
};

// Add as a errorHandler on the Hono instance
const app = new Hono();
app.onError(errorHandler);
Enter fullscreen mode Exit fullscreen mode

Based on the Hono's documentation you should throw HTTPException like this

import { HTTPException } from "hono/http-exception";

app.post("/", async (c, next) => {
  if (somethingWentWrong) {
    throw new HTTPException(401, { message: "Custom error message" });
  }
  return c.json({ message: "Success" });
});
Enter fullscreen mode Exit fullscreen mode

Now we know that if there's an error, we will always receive a text response with the error message and status code.


3. Setting up the error handler in the frontend

import { ClientResponse, hc } from "hono/client";
import type { ApiRoutes } from "../../../backend/app";
const client = hc<ApiRoutes>("/");

export const callRpc = async <T>(
  rpc: Promise<ClientResponse<T>>
): Promise<{ data: T; error: null } | { data: null; error: string }> => {
  try {
    const data = await rpc;

    if (!data.ok) {
      const res = await data.text();
      return { data: null, error: res };
    }

    const res = await data.json();
    return { data: res as T, error: null };
  } catch (error) {
    return { data: null, error: (error as Error).message };
  }
};

export default client.api;
Enter fullscreen mode Exit fullscreen mode

callRpc will automatically infer the type of the data based on the RPC definition and return an object containing either data or error.


4. Usage

Everything is typesafe from what you send to what you receive

const onSubmit = async (data: SignUpSchema) => {
  const res = await callRpc(api.auth.signup.$post({ json: data }));

  if (res.error) {
    toast.error(res.error);
    return;
  }

  toast.success("Account created successfully");
  router.navigate({ to: "/" });
};
Enter fullscreen mode Exit fullscreen mode

I have been working in a codebase where it is set up like this and it is the smoothest developer experience I have had. I'm just here to share it.


Drawbacks

  • The backend is limited to returning text for errors and JSON for success responses
  • Doing this pattern shifts away from the idiomatic way of handling errors in javascript
  • You have to handle the error right away, which might not be what you want

Sentry blog image

How to reduce TTFB

In the past few years in the web dev world, we’ve seen a significant push towards rendering our websites on the server. Doing so is better for SEO and performs better on low-powered devices, but one thing we had to sacrifice is TTFB.

In this article, we’ll see how we can identify what makes our TTFB high so we can fix it.

Read more

Top comments (1)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Engage with a sea of insights in this enlightening article, highly esteemed within the encouraging DEV Community. Programmers of every skill level are invited to participate and enrich our shared knowledge.

A simple "thank you" can uplift someone's spirits. Express your appreciation in the comments section!

On DEV, sharing knowledge smooths our journey and strengthens our community bonds. Found this useful? A brief thank you to the author can mean a lot.

Okay