[Opcional] Se voc\u00ea n\u00e3o tiver acesso ao servidor que hospeda o script, voc\u00ea pode considerar o uso de um proxy para retransmitir sua solicita\u00e7\u00e3o ao servidor e de volta ao cliente com os cabe\u00e7alhos corretos.<\/li>\n<\/ol>\nUma vez que voc\u00ea possa acessar os detalhes do erro, voc\u00ea pode ent\u00e3o definir para corrigir o problema, que provavelmente ser\u00e1 com a biblioteca de terceiros ou com a rede.<\/p>\n
Como identificar e prevenir erros no JavaScript<\/h2>\n Embora os erros discutidos acima sejam os mais comuns e frequentes no JavaScript, voc\u00ea se deparar\u00e1, confiar em alguns exemplos nunca pode ser suficiente. \u00c9 vital entender como detectar e prevenir qualquer tipo de erro em um aplicativo JavaScript enquanto a desenvolve. Aqui est\u00e1 como voc\u00ea pode lidar com erros no JavaScript.<\/p>\n
Erros de lan\u00e7amento manual e catch<\/h3>\n A maneira mais fundamental de lidar com erros que foram lan\u00e7ados manualmente ou pelo tempo de execu\u00e7\u00e3o \u00e9 peg\u00e1-los. Como a maioria das outras linguagens, o JavaScript oferece um conjunto de palavras-chave para lidar com os erros. \u00c9 essencial conhecer a fundo cada uma delas antes de defin\u00ed-las para lidar com os erros em seu aplicativo JavaScript.<\/p>\n
throw<\/h4>\n A primeira e mais b\u00e1sica palavra-chave do conjunto \u00e9 throw<\/code>. Como \u00e9 evidente, a palavra-chave throw \u00e9 usada para lan\u00e7ar erros para criar exce\u00e7\u00f5es no tempo de execu\u00e7\u00e3o do JavaScript manualmente. J\u00e1 discutimos isso antes na pe\u00e7a, e aqui est\u00e1 a ess\u00eancia do significado dessa palavra-chave:<\/p>\n\nVoc\u00ea pode throw<\/code> qualquer coisa, incluindo n\u00fameros, strings, e objetos Error<\/code>.<\/li>\nEntretanto, n\u00e3o \u00e9 aconselh\u00e1vel lan\u00e7ar tipos de dados primitivos, como strings e n\u00fameros, j\u00e1 que eles n\u00e3o carregam informa\u00e7\u00f5es de depura\u00e7\u00e3o sobre os erros.<\/li>\n Exemplo throw TypeError(\"Please provide a string\")<\/code><\/li>\n<\/ul>\ntry<\/h4>\n A palavra-chave try<\/code> \u00e9 usada para indicar que um bloco de c\u00f3digo pode lan\u00e7ar uma exce\u00e7\u00e3o. Sua sintaxe \u00e9:<\/p>\ntry {\n \/\/ error-prone code here\n}<\/code><\/pre>\n\u00c9 importante notar que um bloco catch<\/code> deve sempre seguir o bloco try<\/code> para lidar com os erros de forma eficaz.<\/p>\ncatch<\/h4>\n A palavra-chave catch<\/code> \u00e9 usada para criar um bloco catch. Este bloco de c\u00f3digo \u00e9 respons\u00e1vel por lidar com os erros que o bloco try<\/code> captura. Aqui est\u00e1 a sua sintaxe:<\/p>\ncatch (exception) {\n \/\/ code to handle the exception here\n}<\/code><\/pre>\nE \u00e9 assim que voc\u00ea implementa o try<\/code> e os blocos catch<\/code> juntos:<\/p>\ntry {\n \/\/ business logic code\n} catch (exception) {\n \/\/ error handling code\n}<\/code><\/pre>\nAo contr\u00e1rio do C++ ou Java, voc\u00ea n\u00e3o pode anexar v\u00e1rios blocos catch<\/code> a um bloco try<\/code> em JavaScript. Isto significa que voc\u00ea n\u00e3o pode fazer isto:<\/p>\ntry {\n \/\/ business logic code\n} catch (exception) {\n if (exception instanceof TypeError) {\n \/\/ do something\n }\n} catch (exception) {\n if (exception instanceof RangeError) {\n \/\/ do something\n }\n}<\/code><\/pre>\nAo inv\u00e9s disso, voc\u00ea pode usar uma declara\u00e7\u00e3o if...else<\/code> ou uma declara\u00e7\u00e3o de caso de troca dentro do bloco catch \u00fanico para lidar com todos os poss\u00edveis casos de erro. Isso seria parecido com isto:<\/p>\ntry {\n \/\/ business logic code\n} catch (exception) {\n if (exception instanceof TypeError) {\n \/\/ do something\n } else if (exception instanceof RangeError) {\n \/\/ do something else\n }\n}<\/code><\/pre>\nfinally<\/h4>\n A palavra-chave finally<\/code> \u00e9 usada para definir um bloco de c\u00f3digo que \u00e9 executado ap\u00f3s um erro ter sido tratado. Este bloco \u00e9 executado ap\u00f3s o try e os blocos catch.<\/p>\nAl\u00e9m disso, o \u00faltimo bloco ser\u00e1 executado independentemente do resultado dos outros dois blocos. Isto significa que mesmo que o bloco catch n\u00e3o possa lidar inteiramente com o erro ou um erro seja lan\u00e7ado no bloco catch, o int\u00e9rprete executar\u00e1 o c\u00f3digo no bloco final antes que o programa trave.<\/p>\n
Para ser considerado v\u00e1lido, o bloco try no JavaScript precisa ser seguido ou por um catch ou por um bloqueio final. Sem nenhum deles, o int\u00e9rprete ir\u00e1 levantar uma SyntaxError. Portanto, certifique-se de seguir seus blocos try com pelo menos um deles ao lidar com erros.<\/p>\n
Gerencie os erros de maneira global com o m\u00e9todo onerror()<\/h3>\n O m\u00e9todo onerror()<\/code> est\u00e1 dispon\u00edvel para todos os elementos HTML para lidar com quaisquer erros que possam ocorrer com eles. Por exemplo, se uma tag img<\/code> n\u00e3o encontrar a imagem cuja URL \u00e9 especificada, ela dispara seu m\u00e9todo onerror para permitir ao usu\u00e1rio lidar com o erro.<\/p>\nNormalmente, voc\u00ea forneceria outra URL de imagem na chamada ao erro para que a tag img<\/code> voltasse a cair. \u00c9 assim que voc\u00ea pode fazer isso via JavaScript:<\/p>\nconst image = document.querySelector(\"img\")\n\nimage.onerror = (event) => {\n console.log(\"Error occurred: \" + event)\n}<\/code><\/pre>\nNo entanto, voc\u00ea pode usar este recurso para criar um mecanismo global de gerenciamento de erros para o seu aplicativo. Aqui est\u00e1 como voc\u00ea pode fazer isso:<\/p>\n
window.onerror = (event) => {\n console.log(\"Error occurred: \" + event)\n}<\/code><\/pre>\nCom este manipulador de eventos, voc\u00ea pode se livrar dos m\u00faltiplos blocos try...catch<\/code> espalhados em seu c\u00f3digo e centralizar o gerenciamento de erros do seu aplicativo de forma similar ao gerenciamento de eventos. Voc\u00ea pode anexar v\u00e1rios manipuladores de erros \u00e0 janela para manter o Princ\u00edpio de Responsabilidade \u00danica dos princ\u00edpios de design SOLID. O int\u00e9rprete ir\u00e1 percorrer todos os manipuladores at\u00e9 que chegue ao apropriado.<\/p>\nTransmita os erros via callbacks<\/h3>\n Enquanto fun\u00e7\u00f5es simples e lineares permitem que o gerenciamento de erros permane\u00e7a simples, os callbacks podem complicar o caso.<\/p>\n
Considere o seguinte trecho de c\u00f3digo:<\/p>\n
const calculateCube = (number, callback) => {\n setTimeout(() => {\n const cube = number * number * number\n callback(cube)\n }, 1000)\n}\n\nconst callback = result => console.log(result)\n\ncalculateCube(4, callback)<\/code><\/pre>\nA fun\u00e7\u00e3o acima demonstra uma condi\u00e7\u00e3o ass\u00edncrona na qual uma fun\u00e7\u00e3o leva algum tempo para processar opera\u00e7\u00f5es e retorna o resultado mais tarde com a ajuda de um callbacks.<\/p>\n
Se voc\u00ea tentar inserir uma string ao inv\u00e9s de 4 na chamada de fun\u00e7\u00e3o, voc\u00ea receber\u00e1 NaN<\/code> como resultado.<\/p>\nIsto precisa ser tratado adequadamente. Aqui est\u00e1 como:<\/p>\n
const calculateCube = (number, callback) => {\n\n setTimeout(() => {\n if (typeof number !== \"number\")\n throw new Error(\"Numeric argument is expected\")\n\n const cube = number * number * number\n callback(cube)\n }, 1000)\n}\n\nconst callback = result => console.log(result)\n\ntry {\n calculateCube(4, callback)\n} catch (e) { console.log(e) }<\/code><\/pre>\nIsto deve resolver o problema de forma ideal. Entretanto, se voc\u00ea tentar passar uma string para a chamada de fun\u00e7\u00e3o, voc\u00ea receber\u00e1 isto:<\/p>\nExemplo de erro com o argumento errado.<\/figcaption><\/figure>\nMesmo que voc\u00ea tenha implementado um bloco try enquanto chamava a fun\u00e7\u00e3o, ele ainda diz que o erro n\u00e3o foi corrigido. O erro \u00e9 lan\u00e7ado ap\u00f3s o bloco catch ter sido executado devido ao timeout delay.<\/p>\n
Isso pode ocorrer rapidamente em chamadas de rede, onde atrasos inesperados se infiltram. Voc\u00ea precisa cobrir tais casos enquanto desenvolve seu aplicativo.<\/p>\n
Aqui est\u00e1 como voc\u00ea pode lidar corretamente com os erros nos callbacks:<\/p>\n
const calculateCube = (number, callback) => {\n\n setTimeout(() => {\n if (typeof number !== \"number\") {\n callback(new TypeError(\"Numeric argument is expected\"))\n return\n }\n const cube = number * number * number\n callback(null, cube)\n }, 2000)\n}\n\nconst callback = (error, result) => {\n if (error !== null) {\n console.log(error)\n return\n }\n console.log(result)\n}\n\ntry {\n calculateCube('hey', callback)\n} catch (e) {\n console.log(e)\n}<\/code><\/pre>\nAgora, o resultado no console ser\u00e1:<\/p>\nTypeError exemplo com argumento ilegal.<\/figcaption><\/figure>\nIsto indica que o erro foi tratado de forma apropriada.<\/p>\n
Resolva os erros Promises<\/h3>\n A maioria das pessoas tende a preferir promises para lidar com atividades ass\u00edncronas. As promises t\u00eam outra vantagem – uma promises rejeitada n\u00e3o termina o seu script. No entanto, voc\u00ea ainda precisa implementar um bloqueio para lidar com os erros nas promises. Para entender isso melhor, vamos reescrever a fun\u00e7\u00e3o calculateCube()<\/code> usando promise:<\/p>\nconst delay = ms => new Promise(res => setTimeout(res, ms));\n\nconst calculateCube = async (number) => {\n if (typeof number !== \"number\")\n throw Error(\"Numeric argument is expected\")\n await delay(5000)\n const cube = number * number * number\n return cube\n}\n\ntry {\n calculateCube(4).then(r => console.log(r))\n} catch (e) { console.log(e) }<\/code><\/pre>\nO timeout do c\u00f3digo anterior foi isolado na fun\u00e7\u00e3o delay<\/code> para compreens\u00e3o. Se voc\u00ea tentar inserir uma string ao inv\u00e9s de 4, a resultado que voc\u00ea obt\u00e9m ser\u00e1 semelhante a esta:<\/p>\nTypeError exemplo com um argumento ilegal em Promise<\/figcaption><\/figure>\nMais uma vez, isto se deve ao lan\u00e7amento do erro em Promise<\/code> depois de tudo o resto ter completado a execu\u00e7\u00e3o. A solu\u00e7\u00e3o para este problema \u00e9 simples. Simplesmente adicione uma chamada catch()<\/code> \u00e0 cadeia de promises\u00a0como esta:<\/p>\ncalculateCube(\"hey\")\n.then(r => console.log(r))\n.catch(e => console.log(e))<\/code><\/pre>\nAgora o resultado ser\u00e1:<\/p>\nExemplo do TypeError com argumento ilegal.<\/figcaption><\/figure>\nVoc\u00ea pode observar como \u00e9 f\u00e1cil lidar com erros com promises. Al\u00e9m disso, voc\u00ea pode encadear um bloco finally()<\/code> e a chamada de promessa para adicionar c\u00f3digo que ser\u00e1 executado ap\u00f3s o gerenciamento de erros ter sido completado.<\/p>\nAlternativamente, voc\u00ea tamb\u00e9m pode lidar com erros em promises\u00a0usando a t\u00e9cnica tradicional try-catch-finally. Aqui est\u00e1 como seria a sua promessa nesse caso:<\/p>\n
try {\n let result = await calculateCube(\"hey\")\n console.log(result)\n} catch (e) {\n console.log(e)\n} finally {\n console.log('Finally executed\")\n}<\/code><\/pre>\nEntretanto, isto funciona apenas dentro de uma fun\u00e7\u00e3o ass\u00edncrona. Portanto, a maneira mais preferida de lidar com erros em promises\u00a0\u00e9 encadear catch<\/code> e finally<\/code> para a chamada de promessa.<\/p>\n
![\"Exemplo](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/11\/type-error-output-numeric.png\")