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

PHP中文网 • 2025年3月7日 07:16:58 • 编程技术 • 阅读 2

JavaScript 的错误处理机制，虽然提供了 try-catch 块和异常抛出，但在实际应用中常常显得不够简洁直观。本文介绍一种借鉴 Golang 错误处理方式，结合 Hono RPC 实现更优雅、类型安全的错误处理方法。

传统 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 库也采用了类似的模式。

Hono RPC 的优雅错误处理

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 官方文档，配置错误处理程序：

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(","), 400);  }  console.error(err);  return c.text("Something went wrong", 500);};// Add as an error handler on the Hono instanceconst 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" });});

登录后复制

前端错误处理程序配置

import { ClientResponse, hc } from "hono/client";import type { ApiRoutes } from "../../../backend/app";const client = hc("/");export const callrpc = async (  rpc: Promise): Promise => {  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 定义自动推断数据类型，返回包含数据或错误的对象。

使用方法

端到端类型安全：

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

登录后复制登录后复制