Técnicas avançadas de tratamento de erros em TypeScript

O tratamento eficaz de erros é crucial para a construção de aplicativos TypeScript robustos. Além dos blocos try-catch básicos, o TypeScript fornece várias técnicas avançadas para lidar com erros graciosamente e garantir a confiabilidade do código. Este artigo explora algumas dessas estratégias avançadas de tratamento de erros.

1. Classes de erro personalizadas

Criar classes de erro personalizadas permite que você represente diferentes tipos de erros com mais precisão. Erros personalizados podem incluir propriedades ou métodos adicionais, que podem ajudar a identificar e lidar com problemas específicos.

class CustomError extends Error {
  constructor(public message: string, public code: number) {
    super(message);
    this.name = 'CustomError';
  }
}

function throwError() {
  throw new CustomError('Something went wrong', 500);
}

try {
  throwError();
} catch (error) {
  if (error instanceof CustomError) {
    console.error(`Error: ${error.message}, Code: ${error.code}`);
  } else {
    console.error('Unexpected error:', error);
  }
}

Neste exemplo, CustomError estende a classe interna Error e adiciona uma propriedade code para especificar um código de erro.

2. Tratamento de erros em código assíncrono

Código assíncrono frequentemente requer tratamento especial para erros. Usar async e await junto com blocos try-catch pode simplificar o tratamento de erros em operações assíncronas.

async function fetchData(url: string): Promise {
  try {
    const response = await fetch(url);
    if (!response.ok) {
      throw new CustomError('Failed to fetch data', response.status);
    }
    const data = await response.json();
    console.log(data);
  } catch (error) {
    if (error instanceof CustomError) {
      console.error(`Error: ${error.message}, Code: ${error.code}`);
    } else {
      console.error('Unexpected error:', error);
    }
  }
}

fetchData('https://api.example.com/data');

Este exemplo demonstra o tratamento de erros de uma chamada assíncrona fetch usando async, await e try-catch.

3. Limites de erro em React com TypeScript

Ao trabalhar com React e TypeScript, limites de erro ajudam a capturar erros na árvore de componentes e exibir uma UI de fallback. Implementar limites de erro com TypeScript garante a segurança de tipo e o tratamento de erro adequado.

import React, { Component, ErrorInfo } from 'react';

interface Props {}

interface State {
  hasError: boolean;
}

class ErrorBoundary extends Component<Props, State> {
  constructor(props: Props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(): State {
    return { hasError: true };
  }

  componentDidCatch(error: Error, errorInfo: ErrorInfo): void {
    console.error('Error caught by boundary:', error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      return <h1>Something went wrong.</h1>
    }

    return this.props.children;
  }
}

export default ErrorBoundary;

Neste exemplo do React, o componente ErrorBoundary captura erros em seus componentes filhos e exibe uma interface de usuário de fallback se ocorrer um erro.

4. Usando proteções de tipo para tipos de erro

Os type guards ajudam a restringir o tipo de erro no TypeScript. Isso é particularmente útil ao lidar com erros com tipos diferentes ou de várias fontes.

function isCustomError(error: any): error is CustomError {
  return error instanceof CustomError;
}

try {
  throw new CustomError('Example error', 400);
} catch (error) {
  if (isCustomError(error)) {
    console.error(`CustomError: ${error.message}, Code: ${error.code}`);
  } else {
    console.error('Unknown error:', error);
  }
}

A função isCustomError é um protetor de tipo que ajuda a determinar se o erro detectado é uma instância de CustomError.

5. Tratamento de erros centralizado

Para grandes aplicações, centralizar o tratamento de erros pode simplificar o gerenciamento de erros e garantir consistência. Isso pode ser feito usando middleware em Express.js ou manipuladores de erros globais em outras estruturas.

import express, { Request, Response, NextFunction } from 'express';

const app = express();

app.use((err: any, req: Request, res: Response, next: NextFunction) => {
  console.error('Centralized Error:', err.message);
  res.status(500).send('Internal Server Error');
});

app.listen(3000, () => {
  console.log('Server running on port 3000');
});

Este exemplo demonstra um manipulador de erros centralizado para um aplicativo Express.js. Ele captura todos os erros e responde com uma mensagem genérica.

Conclusão

Técnicas avançadas de tratamento de erros no TypeScript aumentam a robustez de seus aplicativos ao fornecer mais controle sobre o gerenciamento de erros. Classes de erro personalizadas, tratamento de erros assíncronos, uso de limites de erro no React, proteções de tipo e tratamento de erro centralizado são estratégias essenciais para um gerenciamento de erros eficaz. Implementar essas técnicas levará a um código mais sustentável e confiável.