[Opzionale] Se non avete accesso al server che ospita lo script, potete considerare di utilizzare un proxy per inoltrare la vostra richiesta al server e tornare al client con le intestazioni corrette.<\/li>\n<\/ol>\nUna volta che potete accedere ai dettagli dell’errore, potete poi mettervi a sistemare il problema, che probabilmente sar\u00e0 o con la libreria di terze parti o con la rete.<\/p>\n
Come Identificare e Prevenire gli Errori in JavaScript<\/h2>\n Anche se gli errori discussi sopra sono i pi\u00f9 comuni e frequenti in cui vi imbatterete in JavaScript, basarsi su alcuni esempi non sar\u00e0 mai essere sufficiente. \u00c8 fondamentale capire come individuare e prevenire qualsiasi tipo di errore in un’applicazione JavaScript mentre la si sviluppa. Ecco come potete gestire gli errori in JavaScript.<\/p>\n
Lanciare e \u2018Catturare\u2019 Manualmente gli Errori<\/h3>\n Il modo base per gestire gli errori che sono stati lanciati manualmente o dal runtime \u00e8 quello di \u2018catturarli\u2019. Come molti altri linguaggi, JavaScript offre una serie di parole chiave per gestire gli errori. \u00c8 essenziale conoscere a fondo ognuna di esse prima di iniziare a gestire gli errori nella vostra applicazione JavaScript.<\/p>\n
throw<\/h4>\n La prima e pi\u00f9 elementare parola chiave dell’insieme \u00e8 throw<\/code>, che in inglese significa lanciare. Come evidente, la parola chiave throw \u00e8 utilizzata per lanciare errori per creare eccezioni nel runtime JavaScript manualmente. Ne abbiamo gi\u00e0 parlato prima ed ecco il succo del significato di questa parola chiave:<\/p>\n\nPotete usare throw<\/code> con qualsiasi cosa, compresi i numeri, le stringhe e gli oggetti Error<\/code>.<\/li>\nTuttavia, non vi consigliamo di lanciare tipi di dati primitivi come stringhe e numeri poich\u00e9 non portano informazioni di debug sugli errori.<\/li>\n Esempio: throw TypeError(\"Please provide a string\")<\/code><\/li>\n<\/ul>\ntry<\/h4>\n La parola chiave try<\/code> \u00e8 utilizzata per indicare che un blocco di codice potrebbe lanciare un’eccezione. La sua sintassi \u00e8:<\/p>\ntry {\n \/\/ error-prone code here\n}<\/code><\/pre>\n\u00c8 importante notare che un blocco catch<\/code> deve sempre seguire il blocco try<\/code> per gestire efficacemente gli errori.<\/p>\ncatch<\/h4>\n La parola chiave catch<\/code> \u00e8 utilizzata per creare un blocco catch. Questo blocco di codice \u00e8 responsabile della gestione degli errori che il blocco finale try<\/code> cattura. Ecco la sua sintassi:<\/p>\ncatch (exception) {\n \/\/ code to handle the exception here\n}<\/code><\/pre>\nE questo \u00e8 il modo in cui si implementano i blocchi try<\/code> e catch<\/code> insieme:<\/p>\ntry {\n \/\/ business logic code\n} catch (exception) {\n \/\/ error handling code\n}<\/code><\/pre>\nA differenza di C++ o Java, non potete aggiungere pi\u00f9 blocchi catch<\/code> a un blocco try<\/code> in JavaScript. Questo significa che non potete fare questo:<\/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>\nPotete invece usare un’istruzione if...else<\/code> o un’istruzione switch case all’interno del singolo blocco catch per gestire tutti i possibili casi di errore. Sarebbe come questo:<\/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 La parola chiave finally<\/code> si usa per definire un blocco di codice che viene eseguito dopo che un errore \u00e8 stato gestito. Questo blocco viene eseguito dopo i blocchi try e catch.<\/p>\nInoltre, il blocco finally viene eseguito indipendentemente dal risultato degli altri due blocchi. Questo significa che anche se il blocco catch non pu\u00f2 gestire completamente l’errore o se viene lanciato un errore nel blocco catch, l’interprete eseguir\u00e0 il codice nel blocco finally prima che il programma vada in crash.<\/p>\n
Per essere considerato valido, il blocco try in JavaScript deve essere seguito da un blocco catch o un blocco finally. Senza uno di questi, l’interprete sollever\u00e0 un SyntaxError. Pertanto, assicuratevi di seguire i vostri blocchi try con almeno uno dei due quando gestite gli errori.<\/p>\n
Gestire gli Errori a Livello Globale con il Metodo onerror()<\/h3>\n Il metodo onerror()<\/code> \u00e8 disponibile per tutti gli elementi HTML e serve a gestire qualsiasi errore che pu\u00f2 verificarsi con essi. Per esempio, se un tag img<\/code> non riesce a trovare l’immagine il cui URL \u00e8 specificato, questo lancia il suo metodo onerror per permettere all’utente di gestire l’errore.<\/p>\nDi solito dovreste fornire un altro URL dell’immagine nella chiamata onerror per il tag img<\/code>. Ecco come potete farlo tramite JavaScript:<\/p>\nconst image = document.querySelector(\"img\")\n\nimage.onerror = (event) => {\n console.log(\"Error occurred: \" + event)\n}<\/code><\/pre>\nTuttavia, potete usare questa funzione per creare un meccanismo globale di gestione degli errori per la vostra applicazione. Ecco come potete farlo:<\/p>\n
window.onerror = (event) => {\n console.log(\"Error occurred: \" + event)\n}<\/code><\/pre>\nCon questo gestore di eventi, potete sbarazzarvi dei molteplici blocchi try...catch<\/code> sparsi nel vostro codice e centralizzare la gestione degli errori della vostra applicazione in modo simile alla gestione degli eventi. Potete attaccare pi\u00f9 gestori di errori alla finestra per mantenere il principio di responsabilit\u00e0 unica dai principi di progettazione SOLID. L’interprete passer\u00e0 ciclicamente attraverso tutti i gestori fino a raggiungere quello appropriato.<\/p>\nPassare gli Errori Tramite Callback<\/h3>\n Mentre le funzioni semplici e lineari permettono alla gestione degli errori di rimanere semplice, le callback possono complicare la faccenda.<\/p>\n
Considerate il codice seguente:<\/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>\nLa funzione qui sopra dimostra una condizione asincrona in cui una funzione impiega del tempo per elaborare le operazioni e restituisce il risultato pi\u00f9 tardi con l’aiuto di una callback.<\/p>\n
Se provate a inserire una stringa invece di 4 nella chiamata della funzione, otterrete NaN<\/code> come risultato.<\/p>\nQuesto deve essere gestito correttamente. Ecco come:<\/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>\nQuesto in teoria dovrebbe risolvere il problema. Tuttavia, se provate a passare una stringa alla chiamata della funzione, riceverete questo:<\/p>\nEsempio di errore con argomento sbagliato.<\/figcaption><\/figure>\nAnche se avete implementato un blocco try-catch mentre chiamate la funzione, dice che l’errore non \u00e8 stato gestito, \u00e8 ancora uncaught. L’errore viene lanciato dopo che il blocco catch \u00e8 stato eseguito a causa del ritardo del timeout.<\/p>\n
Questo pu\u00f2 verificarsi rapidamente nelle chiamate di rete, dove si insinuano ritardi imprevisti. Dovete occuparvi di questi casi mentre sviluppate la vostra applicazione.<\/p>\n
Ecco come potete gestire correttamente gli errori nelle callback:<\/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>\nOra, l’output nella console sar\u00e0:<\/p>\nEsempio di TypeError con argomento non ammesso.<\/figcaption><\/figure>\nQuesto indica che l’errore \u00e8 stato gestito in modo appropriato.<\/p>\n
Gestire gli Errori nelle Promises<\/h3>\n La maggior parte delle persone tende a preferire le promises<\/em> per gestire le attivit\u00e0 asincrone. Le promises hanno un altro vantaggio: una promise rifiutata non termina il vostro script. Tuttavia, avete ancora bisogno di implementare un blocco catch per gestire gli errori nelle promises. Per capire meglio a cosa ci riferiamo, riscriviamo la funzione calculateCube()<\/code> usando le promises:<\/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>\nIl timeout del codice precedente \u00e8 stato isolato nella funzione delay<\/code> per la comprensione. Se provate a inserire una stringa invece di 4, l’output che otterrete sar\u00e0 simile a questo:<\/p>\nEsempio di TypeError con un argomento non ammesso in Promise.<\/figcaption><\/figure>\nDi nuovo, questo \u00e8 dovuto al fatto che Promise<\/code> lancia l’errore dopo che tutto il resto ha completato l’esecuzione. La soluzione a questo problema \u00e8 semplice. Aggiungete semplicemente una chiamata catch()<\/code> alla catena delle promises come questa:<\/p>\ncalculateCube(\"hey\")\n.then(r => console.log(r))\n.catch(e => console.log(e))<\/code><\/pre>\nOra l’output sar\u00e0:<\/p>\nEsempi di gestione di un TypeError con argomento non ammesso.<\/figcaption><\/figure>\nCome vedete \u00e8 abbastanza facile gestire gli errori con le promises. Inoltre, potete concatenare un blocco finally()<\/code> e la chiamata alla promise per aggiungere codice che verr\u00e0 eseguito dopo che la gestione dell’errore \u00e8 stata completata.<\/p>\nIn alternativa, potete anche gestire gli errori nelle promises usando la tradizionale tecnica try-catch-finally. Ecco come sarebbe la vostra chiamata a promise in questo 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>\nTuttavia, questo funziona solo all’interno di una funzione asincrona. Quindi il modo migliore per gestire gli errori nelle promises \u00e8 quello di concatenare catch<\/code> e
![\"L\u2019errore](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/11\/type-error-output-numeric.png\")