Início / coding / Perguntas / 79171517
Accepted
RobertW
Asked: 2024-11-09 04:45:30 +0800 CST

Qual é a maneira correta de lançar erros no ExpressJS e consumi-los no cliente Typescript?

  • 772

Estou construindo um aplicativo com React e Typescript no cliente e ExpressJS e Typescript no servidor. Quero garantir que estou lançando erros corretamente no servidor e lidando com eles adequadamente no cliente.

Aqui está uma versão resumida de um método de rota que preciso usar para criar um MediaSet (pense em "pasta"):

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

Então, no cliente, aqui está o código resumido para lidar com a solicitação assíncrona acima:

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

Minhas perguntas são duplas:

  1. A maneira como estou lidando com o código de erro no servidor está correta?
  2. A maneira como estou lidando com um possível erro no cliente está correta? Francamente, error.response.data.messageparece estranho, mas me dá a mensagem de erro que enviei do servidor.
typescript

1 respostas

  1. Best Answer

    Parece bem direto. No backend, a coisa que eu mudaria é não lançar um Error genérico para uma verificação conhecida. Eu criaria uma classe de erro personalizada, algo assim:

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

    e use-o

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

    Quanto ao frontend, parece bom, mas não posso dizer com certeza, pois não sei como a chamada é feita. Infelizmente, com base na resposta, você está usando axios ou fetch ou algo semelhante, então response.error.data.message é a maneira de reunir a resposta. O que você pode fazer é movê-lo para debaixo do tapete em um arquivo utils separado e retornar o erro de lá como errorMessage ou algo semelhante, então em seu componente você usaria isso. Dessa forma, se você planeja lidar com mais erros como esse, você pode simplesmente usar a função utils em vez de ter em todos os lugares o error.response...

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

relate perguntas