Resumo da Aula sobre Error Boundaries no React

Olá pessoal, estamos de volta nesta aula, vamos falar de error boundaries, fronteiras de erro ou limites de erro. Vamos ao error boundary para poder lidar com erros caso o componente preguiçoso fale em carregar. Então se houver erro em carregamento no nosso exemplo do painel que é um componente preguiçoso, se aquele pedido do chunk, do pedaço de código falhar o que vai acontecer, a gente tem que lidar com erro. Então vamos ver aqui, vamos começar, vamos primeiro simular um erro para poder simular o erro vou fazer o seguinte, eu vou aqui de volta ao menor negador, deixa eu ver aqui, no Chrome, se você usar o Chrome tem uma opção de dizer offline, mas acho que o Firefox não tem ou eu não sei onde é, o que é que é esse aqui, então como eu não tenho isso, mas se vocês vão ao Chrome é só clicar offline e clicar abrir painel para fazer esse negócio, tá? Então eu quero usar outra maneira, então outra maneira de fazer isso vai determinar e vou fazer o seguinte, depois quando tiver aqui o app de arrodão, eu mato o servidor aqui com control C e eu vou clicar abrir painel, então tudo desapareceu, olhou o console, ocorreu um erro, falhou ao carregar o chunk, agora isso não é muito legal, o usuário está usando o seu aplicativo, aí clica lá e tudo, não só aquela parte, mas tudo desaparece, então não é muito legal, então ele recomenda usar o error boundary, olha aqui essa mensagem, error boundary são as chamadas fronteiras de erro ou limites de erro que a gente vai definir aqui para lidar com esse erro, então error boundary é só um componente normal, é certo que a gente adiciona, tá? A gente define um método, nesse caso a gente vai definir o método estático get derived state from error, esse método quando, se for definido em um componente de react, esse próprio componente se torna um error boundary, gente vai usar esse error boundary, vai mostrar um mensagem de erro aqui na tela, lá? Então vamos ver aqui, voltando ao seu, voltando ao código, app.js, você vai fazer o seguinte, para poder lidar com o erro, você põe e cobre o suspense aqui do seu error boundary, você qualquer nome, eu vou dizer error boundary, mas pode ser qualquer nome, tá? Então você tem que cobrir o suspense com o error boundary, importa lá o error boundary, deixa eu importar aqui, import error boundary, a gente vai definir esse componente já, from.bar error boundary, então vamos definir agora, já abriaba aqui com os arquivos, eu vou que dentro da parte da src que o app está, vamos criar outro componente chamado error boundary.js, agora o error boundary vai ser um componente de react, então vai importar o react, from react, vamos mudar o export default já na mesma hora, vamos ter que perder tempo, aí vai dar class, componente de class, vamos chamar error boundary, pode ser qualquer nome, tá? Eu vou chamar o error boundary, extends react component, você vê que é um componente normal, é certo que a gente vai definir um método aqui chamado component, did, opa, desculpa, não component, did, catch, tem também component, did, catch, normalmente você pode usar isso para logar coisas, mas eu não vou usar isso, eu vou usar outro, pra poder se fazer esse error boundary, vou usar o static catch derived state from error, e ele recebe como um parâmetro, o erro tá, vou botar error aqui em glazeman, pra esse cara, it tem o método render, tá? Então esse componente, se não tiver nenhum erro, ele só vai retornar os filhos, now children, filhos e filhas, então a gente vai dar o return des, do prof, children, que vem nesse caso aqui, voltando aqui no app, split no app aqui, essa parte de baixo é o app, antes de ver o S, você vê que o error boundary tem children, filhos, e esses caras aqui, então se não haver nenhum erro, esse cara aqui vai só retornar esses caras, sem problemas. Agora se tiver um erro, if, erro né, a gente vai definir o erro, variável, já já, a gente vai retornar alguma coisa para lidar com o erro, tá? Eu vou deixar isso bem simples, só mostrar mensagem que deu erro, tá? Eu vou retornar, um endive, desenhar de deu erro, agora isso não é muito legal em aplicativos do mundo real, né? Então você tem que fazer uma coisa bem mais elegante do que isso, mas é só para demonstrar o uso do error boundary. Então você também pode fazer coisa para lidar com o erro, para recuperar esse crash do erro e várias coisas, tá? Eu vou só mostrar mensagem, tá? Agora onde é que vai estar esse erro, né? A gente vai definir uma variável no estado desse componente, eu vou botar this.state.error, tá? Agora se essa variável este devalou true, ele vai mandar essa mensagem em vez de renderizar esses componentes aqui. Tá? Agora vamos definir o estado inicial desse error boundary componente, vamos fazer isso no constructor, chamo super, props sempre, e define o estado inicial desse.state e vai lá e põe a variável error que inicialmente vai ser falso que eu não tenho nenhum erro. Com isso ele vai renderizar inicialmente o desprope child. E se der erro, né? Caso esse suspense jogue ou throw o erro aqui, ele vai ser capturado pelo error boundary e a... Como é que ele vai saber que o state.error, como é que ele vai mudar esse cara para true, é verdadeiro, é aqui no getderive.state from error. Então esse método aqui do error boundary, ele vai ser chamado quando houver um erro, ele vai capturar aquele erro e daquela captura a gente vai retornar o novo state desse componente, por isso que se chama getderive.state, obter o estado derivado. Então a gente vai retornar o estado aqui com o erro sendo true, tá? Então o estado aqui com o erro sendo true e com isso ele vai dar o render de novo, vai bater aqui, o erro vai estar verdadeiro e vai retornar deu erro. Tá certo? Então vamos salvar esse componente, já esportamos default, sem problemas. Tá? Deixa eu mostrar aqui para você ver, definimos o construtor, getderive.state from error, e assim por diante, note que a gente não usa essa variável, erro se você quiser o console logo para ver o que é que está nesse error, você pode ver mesmo, mas eu nem usei mesmo essa variável, tá? Vai ser o erro que vai ser capturado, tá? O objeto de erro. Agora vamos voltar o f.js importamos error boundary, estamos aqui embaixo, já põe o error boundary cubrindo esses caras, o suspense com o componente lazy. Vamos salvar, deixa eu rodar o servidor de novo aqui. Hala brand new, se você tiver o Chrome é só usar aquele toggle de offline que tem na aba network ou rede, tá? Eu não sei fazer aqui no 10 Firefox, se você souber fazer isso no Firefox, deixe comentário. Então vamos dar o reload, tá aí, vou matar o servidor para simular aquele erro, né, para falhar, vou clicar abrir painel e reparecer o mensagem de erro em vez do painel, tá? Então funcionou direitinho, os outros elementos dessa interface de usuário ainda permanecem na tela e não teve nenhum aparecimento de tudo, não deu crash. Tá bom, então esse é o como lidar com o erro do componente que foi carregado dinamicamente com o react lazy que está dentro de um suspense. Tá bom usando error boundary, error boundary em apenas um componente de react que tem o método estático getter avstate from error definido. A gente nem viu o console log aqui, vamos ver. Então error loading chunks zero build. Então é aquele erro que falhou ao carregar o chunk. Então é isso mesmo, tá? Então é isso por essa aula é só, muito obrigado por assistir, não se esqueça de se inscrever, ajuda muito ao canal crescer e o apoio, seu apoio ajuda a criar mais vídeos e aulas, muito obrigado, não se esqueça de clicar também no sino para receber as notificações com as últimas aulas e os últimos cursos do NVK Mundo Tech. Muito obrigado e até a próxima.