👰🏿 👂 🦋 Tratamento de erros de JavaScript 🤛🏾 🙅🏽 👵

Olá, Habr!

O tópico de tratamento de erros em JavaScript surge não apenas para todo iniciante, mas também para um desenvolvedor experiente. Observo que o assunto já é bastante banal, então me permitirei resumir em um breve resumo tudo o que é realmente eficaz e testado em batalha por mim, colegas e gurus de TI.

Então, para que você entenda qual é a essência e se há algo novo para você, segue abaixo a estrutura da nota:

Erro de JavaScript?
Métodos de tratamento de erros de concreto armado
Tornando nossa vida mais fácil
Erros de dependência

Erro de JavaScript?

Sem mergulhar na etimologia de um erro em JavaScript, vamos caracterizá-lo de forma abstrata, uma vez que o próprio objeto de erro em JS não é completamente padronizado.

Um erro em JS é "lançar" uma exceção. A exceção deve ser tratada pelo programa, caso contrário, o interpretador nos levará de volta ao local onde a exceção foi lançada. Por padrão, uma exceção lança um objeto Error.

Não importa se você escreve Frontend ou Backend, há apenas uma abordagem para lidar com isso - pegue a exceção infeliz e trate-a. Tudo precisa ser processado, principalmente na produção.

Vamos esclarecer imediatamente algumas situações fora do padrão (como qualquer pessoa):

erro de fora do programa,
erro de terminal.

Erro de terminal é o código de erro retornado pelo sistema operacional ou daemon.

Um erro de fora do programa pode ser um caso especial de um terminal, mas mesmo assim deve ser tratado.

, .. , , .

– ?

, :

( , ..)
( ..)
( , , undefined) –
, .

, , . , – JavaScript, Typescript.

, , Error:

name – ;
message – ;
stack – , .

, , , .

. , – 80% . 20% , – , , – .

, . , TDD E2E, , , :

, ;
(, , , ..);
(, , ..);
-;
;
/ .

. , , , , . , - .

– , . .

SOLID DRY, (middleware) , . Middleware , . .

, : , JavaScript? .

try…catch, .

// ...

const middlewareRequest = async (req) => {
  try {
    const { data } = await axios.get(req);
    
    return data;
  } catch (err) {
    throw new Error(err);
  }
}

// ...

, try…catch, « », DRY , .

: middleware – .

// ...

const wrapEventWithExcpetionHandler = (middleware) => (e) => {
  const { error } = e; // ,     
  
  if (error) {
    throw new Error(error);
  }
  
  try {
    return middleware(e);
  } catch (err) {
    throw new Error(err);
  }
}

window.addEventListener('mousemove', wrapEventWithExceptionHandler(middlewareGlobalMouseMove));

// ...

, , , , .

, «» .

, : , , . , , , .

– . – , «» . , .

DevTools , , . , , :

// ...

/*  console.log      */

/*
   ,      ,
          
*/

console.log('Check:\r\n  username - %s\r\n  age - %i\r\n  data - %o', 'Mike', 23, {status: 'registered'});
/*
Check:
  username - Mike
  age - 23
  data - {status: "registered"}
*/

/*    */
console.table([{username: 'Mike', age: 23}, {username: 'Sarah', age: 46}]);

/*         */
console.dir(document.body.childNodes[1]);

// ...

, , (, , ..), , .

1. : , . log4js. , , .

2. DevTools! . , – , . Source. , . .

3. .

4. , , (. ).

5. – , , , . , DevTools .

, , , .

JS, .

, Sentry Rollbar, , .

, , . , ( ).

Graphana, , .. JavaScript, , .

, .

, .. . ? :

. console (log, warn, error, info), (. log4js). , , .
production/development/test source-map -, , .
, , Pull Request. Fork , , .
, babel. babel AST, JavaScript . , , , , . , , , , .

Acima, consideramos métodos de tratamento de erros bastante padrão e também demonstramos exemplos de técnicas com código para pacotes populares. Além disso, existem ferramentas para automatizar a coleta e o processamento de erros. Para mais informações, leia os links.

Combine vários métodos e confie em projetos confiáveis. Certifique-se de registrar durante o desenvolvimento, os pontos de interrupção apenas ajudam a entender o problema em um caso específico, mas não são uma cura.

Autor: Rishat Gabaidullov, Chefe do Grupo de Prática de Frontend em Reksoft.

Tratamento de erros de JavaScript

Erro de JavaScript?

More articles: