Passo 1: Configuração do projeto Certifique-se de ter o ambiente de desenvolvimento React com TypeScript configurado e funcionando corretamente. Isso inclui ter o Node.js e o npm (ou yarn) instalados.

Passo 2: Crie um novo projeto React com TypeScript Inicie um novo projeto React usando o seguinte comando no terminal:

npx create-react-app meu-app --template typescript

Isso criará uma nova pasta chamada "meu-app" com a estrutura básica de um projeto React com TypeScript.

Passo 3: Criação de um componente Crie um novo componente React para demonstrar o tratamento de erros. Vamos chamá-lo de "ErrorBoundary".

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

interface ErrorBoundaryProps {
  children: ReactNode;
}

interface ErrorBoundaryState {
  hasError: boolean;
}

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

  componentDidCatch(error: Error, errorInfo: ErrorInfo) {
    this.setState({ hasError: true });
    console.error('Error:', error);
    console.error('Error Info:', errorInfo);
  }

  render() {
    if (this.state.hasError) {
      return <h1>Algo deu errado.</h1>;
    }

    return this.props.children;
  }
}

export default ErrorBoundary;

Neste componente, estamos usando as interfaces para definir os tipos das props e do estado. Estamos também usando a funcionalidade componentDidCatch para capturar erros que ocorrem em qualquer componente filho renderizado por ele. Se ocorrer algum erro, definimos hasError como true no estado e exibimos uma mensagem de erro na interface.

Passo 4: Utilizando o componente ErrorBoundary Agora, vamos usar nosso componente ErrorBoundary para envolver um componente que pode gerar erros. Por exemplo, vamos criar um componente chamado "ErroProneComponent" que sempre lança um erro.

import React from 'react';

const ErroProneComponent = () => {
  throw new Error('Erro intencional!');
};

export default ErroProneComponent;

Agora, vamos importar e usar o ErrorBoundary para envolver nosso componente "ErroProneComponent" no componente "App".

import React from 'react';
import ErrorBoundary from './ErrorBoundary';
import ErroProneComponent from './ErroProneComponent';

const App = () => {
  return (
    <div>
      <h1>Tratamento de Erros no React</h1>
      <ErrorBoundary>
        <ErroProneComponent />
      </ErrorBoundary>
    </div>
  );
};

export default App;

Passo 5: Execute o aplicativo Agora, inicie o aplicativo React executando o seguinte comando no terminal:

npm start

Isso iniciará o aplicativo React no navegador. Você verá a mensagem "Algo deu errado." exibida na tela, indicando que o erro foi capturado pelo componente ErrorBoundary.

Passo 6: Lidando com erros de forma mais robusta No exemplo acima, apenas exibimos uma mensagem de erro simples. No entanto, você pode personalizar a lógica de tratamento de erros para atender às suas necessidades. Por exemplo, você pode exibir um componente de erro mais elaborado, registrar o erro em um serviço de log, ou até mesmo enviar uma notificação ao usuário.

Espero que este tutorial tenha sido útil para lidar com tratamento de erros no React usando TypeScript!