主页 / coding / 问题 / 79171517
Accepted
RobertW
Asked: 2024-11-09 04:45:30 +0800 CST

在 ExpressJS 上抛出错误并在 Typescript 客户端上使用它们的正确方法？

  • 772

我正在客户端上使用 React 和 Typescript 构建应用程序，在服务器上使用 ExpressJS 和 Typescript。我想确保在服务器上正确抛出错误并在客户端上正确处理它们。

下面是我必须创建 MediaSet（认为“文件夹”）的 Route 方法的精简版：

const createMediaSet = async (req: Request, res: Response) => {
  const values = req.body;

  const name: string = values.name + '_'; // '_' only added to force error
  const parentId: string | null = values.parent_id;

  try {
    if (!FileFolderNameRegex.test(name)) {
      throw new Error(`Mediaset name '${name}' is invalid!`);
    }

    const results = await createMediaSetRecord(name, parentId);
    const media_set_id = results.rows[0].media_set_id;
    res.status(StatusCode.SuccessCreated).json({media_set_id: media_set_id});
  } catch (error) {
    console.error(error);
    res.status(StatusCode.ErrorBadRequest).send({ status: false, message: String(error) });
  }
};

然后在客户端，这里是处理上述异步请求的简化代码：

React.useEffect(() => {
  if (!isProcessing) {
    if (data) {
      switch (mode) {
       // ... much processing here ...
      }
    }

    if (error) {
      console.error(error.message);
      alert(`Something went wrong! - ${error.response.data.message}`);
    }
  }
}, [isProcessing, data, error]);

我的问题有两个：

  1. 我处理服务器上错误代码的方式正确吗？
  2. 我处理客户端可能出现错误的方式是否正确？坦白说，这error.response.data.message看起来很奇怪，但确实让我得到了从服务器发送的错误消息。
typescript

1 个回答

  1. Best Answer

    看起来相当简单。在后端，我要改变的是不要对已知检查抛出通用错误。我会创建一个自定义错误类，如下所示：

    class ValidationError extends Error {
    constructor(message: string) {
        super(message);
        this.name = "ValidationError";
    }
}

    并使用它

    try {
    if (!FileFolderNameRegex.test(mediaSetName)) {
        throw new ValidationError(`Mediaset name '${mediaSetName}' is invalid!`);
} catch (error) {
    if (error instanceof ValidationError) {
    res.status(StatusCode.BadRequest).send({ status: false, message: error.message });
} else {
    console.error(error); // here you could also want to use a custom logging library
    res.status(StatusCode.InternalServerError).send({ status: false, message: "An unexpected error occurred." });
}

    至于前端，看起来不错，但不能肯定，因为我不知道如何进行调用。不幸的是，根据响应，您正在使用 axios 或 fetch 或类似的东西，因此 response.error.data.message 是获取响应的方式。您可以做的是，将其移动到单独的 utils 文件中，并从那里将错误作为 errorMessage 或类似的东西返回，以便在您的组件中使用它。这样，如果您计划处理更多这样的错误，您只需使用 utils 函数，而不是到处都有 error.response...

    export function handleError(error: any): string {
    return error?.response?.data?.message || "some default message";
}
    • 1

相关问题