使用 Hono RPC 实现优雅的错误处理和端到端类型安全

我对 JavaScript 的错误处理一直是又爱又恨。它对 try-catch 块和抛出异常的依赖可能对其他人有用，但有时确实让我感到沮丧。

考虑这个典型的 JavaScript 错误处理模式：

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);
  }
}

代码太多，但我们仍然不知道错误的类型。

我的观点是，在处理错误时，你要知道错误是由什么引起的，错误从哪里来，是什么类型的错误，并立即处理。特别是当您处于服务器环境中时。 对我来说

---

golang方式

我更喜欢像 golang 处理错误那样处理错误，基本上将错误视为值。

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

这样您就可以立即处理错误，并且不必担心出现错误时运行的其余代码。

Supabase 使用他们的 supabase-js 库做了同样的事情。

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

---

使用 Hono RPC 进行优雅的错误处理

我们来谈谈节目的主要明星

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: "/" });
};

这个函数可能看起来并不多，但它通过 RPC 提供类型安全的 JSON 参数。它处理所有错误并返回一个包含数据或错误的对象，数据类型是根据端点的返回类型从 RPC 定义推断出来的。

---

设置优雅的错误处理

使用官方文档设置Hono Rpc

设置 Hono 错误处理程序

后端应始终返回包含错误消息和状态代码的文本响应。

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);

根据 Hono 的文档，你应该像这样抛出 HTTPException

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" });
});

现在我们知道，如果出现错误，我们将始终收到包含错误消息和状态代码的文本响应。

---

3. 在前端设置错误处理程序

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;

callRpc 会根据 RPC 定义自动推断数据类型，并返回包含数据或错误的对象。

---

4. 使用方法

从您发送的内容到您收到的内容，一切都是类型安全的

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: "/" });
};

我一直在一个代码库中工作，它的设置是这样的，这是我所拥有的最流畅的开发体验。我只是来分享的。

---

缺点

• 后端仅限于返回错误文本和成功响应 JSON
• 这种模式偏离了 javascript 中处理错误的惯用方式
• 你必须立即处理错误，这可能不是你想要的

以上是使用 Hono RPC 实现优雅的错误处理和端到端类型安全的详细内容。更多信息请关注PHP中文网其他相关文章！