DEV Community

ThiagO
ThiagO

Posted on

 

Error Handling com Next JS e TypeScript

Neste exemplo veremos como implementar error boundaries usando Next Js e TypeScript

O que é ?

Error boundaries são componentes React que capturam erros de JavaScript em qualquer lugar na sua árvore de componentes filhos, para você poder mostrar uma UI alternativa para os usuários em vez de uma tela de erro como esta 👇

Erro em produção

Este exemplo da imagem acima é uma página de erro que o Next Js renderiza quando a sua aplicação está em produção, em ambiente de desenvolvimento você verá uma página como esta 👇

Erro em desenvolvimento

Implementando Error Boundaries

Primeiro crie um componente ErrorBoundary em sua aplicação Next Js

Deve ser criado como componente de classe

import { Component, ErrorInfo, ReactNode } from "react";

interface Props {
  children: ReactNode;
}

interface State {
  hasError: boolean;
}

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

  public static getDerivedStateFromError(): State {
    // Atualiza o state para que a próxima renderização mostre a UI alternativa.
    return { hasError: true };
  }

  public componentDidCatch(error: Error, errorInfo: ErrorInfo) {
    // Aqui você pode ver os detalhes do erro e talvez registrar em um serviço de relatórios de erro
    console.error("Error:", error, errorInfo);
  }

  public render() {
    // Se hasError for true renderiza sua nova UI de alternativa.
    if (this.state.hasError) {
      return <h1>Ops.. Houve um erro em sua aplicação 🥺</h1>; 
      // Aqui você pode colocar seu componente customizado
    }
    // Se hasError for false renderiza o componente filho.
    return this.props.children;
  }
}

export default ErrorBoundary;
Enter fullscreen mode Exit fullscreen mode

Após criar o componente ErrorBoundary importe-o em pages/_app.tsx

// Importe o componente ErrorBoundary
import ErrorBoundary from "../components/ErrorBoundary";

function MyApp({ Component, pageProps }) {
  return (
    // Coloque como um provider em volta de Component
    <ErrorBoundary>
      <Component {...pageProps} />
    </ErrorBoundary>
  );
}

export default MyApp;
Enter fullscreen mode Exit fullscreen mode

Resultado em produção

Esta será sua nova UI de erro em produção 😀

Resultado

Por que ErrorBoundary deve ser um componente de classe ?

Componentes React tornam-se error boundaries uma vez que implementam um (ou ambos) dos métodos de ciclo de vida getDerivedStateFromError() e/ou componentDidCatch(). Para usar esses métodos de ciclo de vida, deve ser um componente de classe.

Onde colocar Error Boundaries ?

Você tem a liberdade de colocar error boundaries em qualquer parte da sua aplicação, seja global ou em um componente específico.

Documentação Next JS

Top comments (0)

🌚 Friends don't let friends browse without dark mode.

Sorry, it's true.