JavaScript може бути кошмаром при налагодженні: деякі помилки, які він видає, можуть бути дуже важкі для розуміння з першого погляду, і номери рядків також не завжди корисні. Хіба не було б корисно мати список, дивлячись на який можна зрозуміти сенс помилок і як виправити їх? Ось він!
Нижче наведено список дивних помилок у JavaScript. Різні браузери можуть видавати різні повідомлення про однакові помилки, тому наведено кілька прикладів там, де це можливо.
Як читати помилки?
Перед самим списком, швидко поглянемо на структуру повідомлення про помилку. Розуміння структури допомагає розуміти помилки, і ви отримаєте менше проблем, якщо натрапите на помилки, які не представлені в цьому списку.
Типова помилка з Chrome виглядає так:
Uncaught TypeError: undefined is not a function - Uncaught TypeError: ця частина повідомлення зазвичай не дуже корисна. Uncaught означає, що помилка була перехоплена в catch , а TypeError — назва помилки.
- undefined is not a function: це та сама частина про помилку У випадку з повідомленнями про помилки, читати їх потрібно буквально. Наприклад, у цьому випадку вона означає те, що код спробував використовувати значення undefined як функцію.
Тепер до помилок.
Uncaught TypeError: undefined is not a function
Пов'язані помилки: Номер не є функцією, об'єкт не є функцією, string не функціонує, Unhandled Error: 'foo' is not a function, Function Expected
Виникає при спробі виклику значення як функції, коли значення функцією немає. Наприклад:
var foo = undefined; foo(); Ця помилка зазвичай виникає, якщо ви намагаєтеся викликати функцію об'єкта, але опечаталися в назві.
var x = document.getElementByID('foo'); Неіснуючі властивості об'єкта за замовчуванням мають значення undefined, що призводить до цієї помилки.
Інші варіації, такі як “number is not a function”, виникають при спробі викликати число, ніби воно є функцією.
Як виправити помилку: переконайтеся в коректності імені функції. Для цієї помилки, номер рядка зазвичай вказує на правильне місце.
Uncaught ReferenceError: Неправильна праворучна сторона в assignment
Пов'язані помилки: Uncaught exception: ReferenceError: Зменшити розмір до 'functionCall()', Uncaught exception: ReferenceError: Cannot assign to 'this'
Викликано спробою надати значення тому, чому неможливо надати значення.
Найчастіший приклад цієї помилки – це умова в if:
if(doSomething() = 'somevalue') У цьому прикладі програміст випадково використав один знак рівності замість двох. Вираз "left-hand side in assignment" відноситься до лівої частини знака рівності, а, як можна бачити в даному прикладі, ліва частина містить щось, чому не можна привласнити значення, що і призводить до помилки.
Як виправити помилку: переконайтеся, що ви не намагаєтеся надати значення результату функції або ключовому слову this .
Uncaught TypeError: Конвертаційна структурна структура до JSON
Пов'язані помилки: Відсутність виключення: TypeError: JSON.stringify: No an acyclic Object, TypeError: cyclic object value, Circular reference in value argument not supported
Завжди викликане циклічним посиланням в об'єкті, яке потім передається в JSON.stringify .
var a = <>; var b = <a: a >; a.b = b; JSON.stringify(a); Так як a і b у прикладі вище мають посилання один на одного, об'єкт, що результує, не може бути приведений до JSON.
Як виправити помилку: видаліть циклічні посилання, як у наведеному вище прикладі, з усіх об'єктів, які ви хочете конвертувати в JSON.
Unexpected token;
Пов'язані помилки: Expected ), missing ) after argument list
Інтерпретатор JavaScript на щось очікував, але не виявив там цього. Зазвичай викликано пропущеними фігурними, круглими або квадратними дужками.
Токен у цій помилці може бути різним – може бути написано "Unexpected token]", "Expected
Як виправити помилку: іноді номер рядка не вказує на правильне розташування, що ускладнює виправлення помилки.
Помилка з [ ] < >( ) зазвичай викликана парою, що не співпадає. Перевірте, чи всі ваші дужки мають пару, що закриває. У цьому випадку номер рядка зазвичай вказує на щось інше, а не на проблемний символ.
Unexpected / пов'язано з регулярними виразами. Номер рядка для цього випадку зазвичай правильний.
Unexpected; зазвичай викликано символом; всередині літералу об'єкта чи масиву, чи списку аргументів виклику функції. Номер рядка зазвичай також буде вірним для цього випадку.
Uncaught SyntaxError: Unexpected token ILLEGAL
Пов'язані помилки: Unterminated String Literal, Invalid Line Terminator
У рядковому літералі пропущено лапку, що закриває.
Як виправити помилку: переконайтеся, що всі рядки мають правильні лапки, що закривають.
Uncaught TypeError: Cannot read property 'foo' of null, Uncaught TypeError: Cannot read property 'foo' of undefined
Пов'язані помилки: TypeError: someVal is null, Неможливо отримати property ‘foo’ of undefined or null reference
Спроба прочитати null або undefined так, ніби це об'єкт. Наприклад:
var someVal = null; console.log(someVal.foo); Як виправити помилку: зазвичай викликано друкарськими помилками. Перевірте, чи всі перемінні, використані поруч із рядком, що вказує на помилку, правильно названі.
Uncaught TypeError: Cannot set property 'foo' of null, Uncaught TypeError: Cannot set property 'foo' of undefined
Пов'язані помилки: TypeError: деякіVal is undefined;
Спроба записати null або undefined так, як це об'єкт. Наприклад:
var someVal = null; someVal.foo = 1; Як виправити помилку: це теж зазвичай спричинено помилками.Перевірте імена змінних поряд із рядком, що вказує на помилку.
Uncaught RangeError: Maximum call stack size exceeded
Пов'язані помилки: Uncaught exception: RangeError: Maximum recursion depth exceeded, too much recursion, Stack overflow
Зазвичай викликане неправильно програмною логікою, що призводить до нескінченного виклику рекурсивної функції.
Як виправити помилку: перевірте рекурсивні функції на помилки, які можуть змусити їх робити рекурсивні дзвінки вічно.
Uncaught URIError: URI malformed
Пов'язані помилки: URIError: malformed URI sequence
Викликано некоректним викликом decodeURIComponent.
Як виправити помилку: переконайтеся, що виклики decodeURIComponent на рядку помилки отримують коректні вхідні дані.
XMLHttpRequest cannot load some/url. No 'Access-Control-Allow-Origin' header is present on the requested resource
Пов'язані помилки: Cross-Origin Request Blocked: The Same Origin Policy згодні reading the remote resource at some/url
Ця проблема завжди пов'язана з використанням XMLHttpRequest.
Як виправити помилку: переконайтеся в правильності запитуваного URL і в тому, що він задовольняє same-origin policy. Хороший спосіб знайти проблемний код – подивитися на URL у повідомленні помилки та знайти його у своєму коді.
InvalidStateError: При спробі було зроблено для використання об'єкта, що не є, або не є тривалим, можна
Пов'язані помилки: InvalidStateError, DOMException code 11
Означає, що код викликав функцію, яку не можна було викликати в поточному стані. Зазвичай пов'язано з XMLHttpRequest під час спроби викликати на ньому функції перед його готовністю.
var xhr = новий XMLHttpRequest(); xhr.setRequestHeader('Some-Header', 'val'); У цьому випадку ви отримаєте помилку тому, що функція setRequestHeader може бути викликана лише після виклику xhr.open.
Як виправити помилку: подивіться на код у рядку, що вказує на помилку, і переконайтеся, що він викликається в правильний момент або додає потрібні дзвінки до цього (як xhr.open ).
Висновок
JavaScript містить в собі одні з найнепотрібніших помилок, які я коли-небудь бачив, за винятком сумнозвісної Expected T_PAAMAYIM_NEKUDOTAYIM в PHP. Велика ознайомленість із помилками привносить більше ясності. Сучасні браузери теж допомагають, тому що більше не видають абсолютно марних помилок, як це було раніше.
Які найнезрозуміліші помилки ви зустрічали? Діліться своїми спостереженнями у коментарях.
P.S. Цей переклад можна покращити, надіславши PR тут.
Обробка помилок – важлива частина будь-якої програми. Найчастіше програми стикаються із несподіваними значеннями, які потрібно правильно обробляти.
У цій статті ми розглянемо, як легко знаходити помилки та витончено їх обробляти.
Винятки краще тому, що вони дають нам знати, що помилка існує і нам потрібно її обробити.
У більшості сучасних мов програмування є вбудовані винятки, тому варто кидати їх замість коду помилки.
Коди помилок не такі очевидні, і їх легко пропустити. Винятки набагато зрозуміліші, тому що не потрібно перевіряти весь код, повернутий за помилки.
Наприклад, якщо ми повертаємо коди помилок у функціях, отримаємо такий код:
const LESS_THAN_ZERO = 'LESS_THAN_ZERO';
const TOO_MANY = 'TOO_MANY';
const NOT_A_NUMBER = 'NOT_A_NUMBER';
class FruitStand setNumFruit(numFruits) if (typeof numFruits !== 'number') return NOT_A_NUMBER;
>
if (numFruits < 0) return LESS_THAN_ZERO;
>
if (numFruits > 100) return TOO_MANY;
>
this.numFruits = numFruits;
>
>
const fruitStand = новий FruitStand();
const error = fruitStand.setNumFruit(1);
if (error !== LESS_THAN_ZERO && error !== TOO_MANY && error !== NOT_A_NUMBER) console.log(fruitStand.numFruits);
>Нам доведеться повертати всі коди помилок у методі setNumFruit. До того ж, перш ніж зробити щось після визначення класу, потрібно буде перевірити всі коди помилок.
Натомість використовуємо винятки:
const LESS_THAN_ZERO = 'LESS_THAN_ZERO';
const TOO_MANY = 'TOO_MANY';
const NOT_A_NUMBER = 'NOT_A_NUMBER';
class FruitStand setNumFruit(numFruits) if (typeof numFruits !== 'number') throw new Error(NOT_A_NUMBER);
>
if (numFruits < 0) throw new Error(LESS_THAN_ZERO);
>
if (numFruits > 100) throw new Error(TOO_MANY);
>
this.numFruits = numFruits;
>
>
const fruitStand = новий FruitStand();
try const error = fruitStand.setNumFruit(1);
console.log(fruitStand.numFruits);
> catch (ex) console.error(ex);
>Ми усунули необхідність перевіряти всі коди помилок, обернувши код, який хочемо запустити, в блок try . Тепер помилку просто відловити. І це особливо важливо, коли код стає дедалі складнішим.
Варто обертати try у коді, що генерує винятки, які ми хочемо відловити. Він створює власну область видимості для змінних області блоку, тому на оголошене з допомогою let чи const можна посилатися лише у блоці try .
На змінні, оголошені з var можна посилатися поза блоком — ми не отримаємо помилку. Такий код видасть 1 :
try var x = 1;
> catch (ex) console.error(ex);
>
console.log(x);А цей код видасть Uncaught ReferenceError: x is not defined :
try let x = 1;
> catch (ex) console.error(ex);
>
console.log(x);Потрібно повідомляти про помилки, коли вони виявляються, не можна просто відловити їх і проігнорувати, адже ми не хочемо помітити проблеми під килим.
Повідомлення про помилки дозволяють нам дізнатися про помилку та коректно обробити її.
Приклади вище, наприклад console.error, викличуть наступне:
try const error = fruitStand.setNumFruit(1);
console.log(fruitStand.numFruits);
> catch (ex) console.error(ex);
>Це один із способів повідомити про помилку. Також можна використовувати інші бібліотеки для повідомлень про помилки.
Відхилені проміси слід обробляти, як і будь-які інші винятки. Їх можна обробити за допомогою зворотного виклику, який передається в метод catch або за допомогою блоку try. catch для функцій async – вони однакові.
Наприклад, про помилку можна повідомити, написавши таке:
Promise.reject('fail')
.catch(err => console.error(err);
>)Або для функцій async напишемо:
(async() => try await Promise.reject('fail')
> catch (err) console.error(err);
>
>)()У винятках потрібно надавати достатньо контексту, щоб інші розробники могли точно визначити помилку під час кидання виключення.
Можна отримати трасування стека з винятками JavaScript, але воно може не надавати всю необхідну інформацію.
Кидання винятків краще, ніж повернення коду помилок, оскільки вони дозволяють використовувати блок try. catch для обробки помилок. Це набагато простіше, ніж перевірка множини кодів помилок.
При киданні винятків ми маємо надати достатню інформацію для точного визначення проблеми.
Не варто просто ігнорувати помилки після їх виявлення, потрібно принаймні повідомляти про них, щоб їх можна було переглянути.
Нарешті, відхилені помилки промісів необхідно обробляти як і, як інші винятки.
Всім привіт! Натхненні успіхом попередньої статті, написаної напередодні запуску курсу "Fullstack розробник JavaScriptМи вирішили продовжити серію статей для новачків і всіх тих, хто тільки починає займатися програмуванням на мові JavaScript. Сьогодні ми поговоримо про помилки, які трапляються в JS, а також про те, як саме з ними боротися.
Віджай за людину одну помилку, і він буде вдячний тобі один пулл реквест. Навчи його дебатувати самостійно, і він буде вдячний тобі весь проект.
Типові помилки початківців
Отже, почнемо з найпримітивніших помилок. Допустимо, ви тільки недавно закінчили вивчати основи HTML і CSS і тепер активно взялися за програмування JavaScript. Для прикладу: ви хочете, щоб при натисканні на кнопку у вас відкривалося, наприклад, приховане до цього моменту модальне вікно. Також ви хочете, щоб у вас після натискання на хрестик це вікно закривалося. Інтерактивний приклад доступний тут (я вибрав bitbucket через те, що його інтерфейс мені здається найпростішим, та й не все ж таки на гітхабі сидіти).
let modal_alert = document.querySelector(".modal_alert") let hero__btn = document.querySelector(".hero__btn") let modal_close = document.querySelector(".modal-close ") //ми вибрали з DOM моделі наші елементи. До речі, я використовую bulma для спрощення процесу верстки //тепер ми хочемо провести над нашими елементами якісь операції: hero__btn.addEventListener("click", function()< modal_alert.classList.add("helper_visible"); >) .addEventListener("click", function()< modal_alert.classList.remove("helper_visible"); >) //якщо ми хочемо побачити форму, то просто вішаємо дод. клас, у якому прописано css-властивість display:flex. І навпаки, якщо хочемо приховати. У нашому index.html, крім верстки, ми всередині тега head вставляємо наш script:
В index.html крім верстки всередині тега head ми вставляємо наш script:
Однак, незважаючи на те, що ми всі підключили, нічого не почне працювати і вилетить помилка:
Що дуже сумно, новачки часто губляться і не розуміють, що робити з червоними рядками, немов це вирок якийсь, а не підказка про те, що не так у вашій програмі. Якщо перекласти, то браузер говорить нам, що він не може прочитати властивість addEventListener нульового значення. Отже, чомусь із DOM моделі ми не отримали наш елемент. Який алгоритм дій слід здійснити?
По-перше, подивіться в який момент у вас викликається JavaScript. Браузер читає ваш HTML-код зверху вниз, як ви читаєте, наприклад, книгу. Коли він побачить тег script , то відразу виконає його вміст і продовжить читання наступних елементів, не особливо дбаючи про те, що у своєму скрипті ви намагаєтеся отримати елементи DOM, а він їх ще не прочитав і, отже, не побудував модель.
Що робити у такому разі? Просто додайте атрибут defer всередину вашого тега скрипт (або async , але я не буду зараз вдаватися до деталей їх роботи, це можна прочитати тут ). Або можете просто перемістити вниз ваш script тег перед закриваючим body , це теж спрацює.
По-друге, перевірте помилки. Вивчіть методологію БЕМ – вона корисна ще й тим, що ви добре знаєте, як пишеться ваш елемент – адже пишіть класи за єдиною логікою, і намагаєтеся користуватися лише правильною англійською мовою. Або копіюєте відразу назву елемента у JS файл.
Чудово. Тепер, коли ви виправили помилки, можете насолодитися робочою версією коду за наступною адресою.
Загадкова помилка
Найбільше новачків вводить у ступор дивна помилка останнього рядка коду.Наведемо приклад:
У консолі виводиться щось незрозуміле. Якщо перекладати, то буквально «Несподіваний кінець введення» — і що з цим робити? Крім того, новачок за звичкою дивиться на номер рядка. На ній начебто все нормально. І чому тоді консоль на неї вказує?
Все просто. Щоб розуміти, як інтерпретувати вашу програму, інтерпретатору JS потрібно знати, де закінчується тіло функції, і де закінчується тіло циклу. У цьому варіанті коду я абсолютно навмисно забув останню фігурну дужку:
// Тут у нас просто два масиви із заголовками та статтями let root = document.getElementById("root"); // реактно подібно використовую root let article__btn = document.querySelector("article__btn"); // при натисканні на кнопку прочитаємо статтю article__btn.onclick = () => < for (let i = 0; i < headers.length; i++) < root.insertAdjacentHTML("beforeend", ` $ $
`) // вилучення фігурної дужки виконано професіоналами. Не повторювати на продакшені. Тепер JavaScript не розуміє, де має кінець тіла функції, а де кінець циклу і не може інтерпретувати код.
Що робити у цьому випадку? У будь-якому сучасному редакторі коду, якщо ви поставите курсор перед дужкою, підсвітиться його закриває варіант (якщо редактор ще не почав підкреслювати цю помилку червоним кольором). Перегляньте код ще раз уважно, тримаючи в голові, що в JS не буває одиноких фігурних дужок. Проблемний варіант можна побачити тут, а виправлений — ось тут.
Дробимо код
Найчастіше варто займатися написанням коду, тестуючи його роботу невеликими шматочками. Або як нормальна людина вивчити TDD Наприклад, вам потрібна проста програма, яка приймає дані на вхід від користувача, складає їх у масив і після цього виводить їх середні значення:
let input_number = prompt("Введіть кількість змінних"); // визначаємо, скільки змінних до нас прийде let numbers = []; function toArray(input_number)< for (let i = 0; i < input_number; i++) < let x = prompt(`Введіть значення $`); numbers.push(x); // і складаємо значення масив > > toArray(input_number); function toAverage(numbers) < let sum = 0; for (let i = 0; i < numbers.length; i++) < sum += numbers [i]; >return sum/numbers.length; > alert(toAverage(numbers)); На перший недосвідчений погляд, у цьому коді цілком нормально. У ньому є основна логіка, подроблена на дві функції, кожну з якої можна застосовувати потім окремо. Проте досвідчений програміст відразу скаже, що це не запрацює, адже з prompt дані до нас приходять у вигляді рядка. Причому JS (такий його толерантно-пофігістичний характер) нам усе запустить, але на виході видасть настільки неймовірну нісенітницю, що навіть буде непросто зрозуміти, як ми дійшли до такого життя. Отже, спробуємо щось порахувати в нашому інтерактивному прикладі. Введемо припустимо число 3 кількість змінних, і 1 2 3 в полі введення даних:
Що? Чого? Гаразд, це JavaScript. Поговоримо краще, як ми могли уникнути такого дивного висновку. Треба було писати на Python, він би по-людськи попередив нас про помилку. Нам треба було після кожного підозрілого моменту зробити висновок типу змінних та дивитися, в якому стані знаходиться наш масив.
Варіант коду, в якому ймовірність несподіваного виводу знижена:
let input_number = prompt("Введіть кількість змінних"); console.log(typeof(input_number)); let numbers = []; function toArray(input_number)< for (let i = 0; i < input_number; i++) < let x = prompt(`Введіть значення $`); numbers.push(x); > > toArray(input_number); console.log(numbers); function toAverage(numbers) < let sum = 0; for (let i = 0; i < numbers.length; i++) < sum += numbers [i]; >return sum/numbers.length; > console.log(typeof(toAverage(numbers))); alert(toAverage(numbers)); Іншими словами, всі підозрілі місця, де щось могло піти не так, я вивів у консоль, щоб переконатися, що все йде так, як я чекаю. Звичайно, дані console.log – дитячі іграшки і в нормі, звичайно, потрібно вивчити будь-яку пристойну бібліотеку для тестування. Наприклад, цю. Результат цієї програми налагодження можна побачити в інструментах розробника тут. Як полагодити, я думаю, питань не буде, але якщо цікаво, то ось (і так, це можна зробити просто двома плюсами).
Крок вперед: освоюємо Chrome Dev Tools
Дебаг із використанням console.log у 2019 — це вже дещо архаїчна штука (але ми все одно її ніколи її не забудемо, вона вже нам як рідна). Кожен розробник, який мріє носити звання професіонала, повинен освоїти багатий інструментарій сучасних засобів розробки.
Спробуємо полагодити проблемні місця в нашому коді за допомогою Dev Tools. Якщо потрібна документація з прикладами, все можна прочитати тут. Ми спробуємо розібрати попередній приклад за допомогою Dev Tools.
Отже, відкриваємо приклад. У нас явно заховався якийсь баг у коді, але як зрозуміти, у який момент JavaScript почав щось неправильно рахувати? Правильно, обертаємо цю радість тестами на тип змінної, це дуже просто Ідемо у вкладку Sources у інструментах розробника. Відкрийте файл code.js. У вас будуть 3 частини: перша ліворуч, в якій відображається список файлів і друга – в якій відображається код. Але найбільше інформації ми зможете отримати з третьої частини знизу, в якій відображається хід виконання нашого коду. Давайте поставимо breakpoint на 15 рядку (для цього треба клацнути по номеру рядка у вікні, де у нас відображається код, після чого у вас з'явиться блакитна позначка). Перезапустіть сторінку та введіть будь-які значення в нашу програму.
Тепер ви можете витягнути з нижньої панелі debug масу корисної інформації. Ви виявите, що JS не особливо замислюючись над типом змінних адже статистичні мови тупо краще і потрібно писати тільки на них, щоб отримувати передбачувано працюючі та швидкі програми складає змінні у вигляді рядка до нашого масиву. Тепер, усвідомивши картину, ми можемо вжити контрзаходи.
Вчимося перехоплювати помилки
Конструкція try… catch трапляється у всіх сучасних мовах програмування. Навіщо ця синтаксична конструкція потрібна практично? Справа в тому, що при виникненні помилки в коді він зупиняє своє виконання на місці помилки — і все подальші інструкції інтерпретатор не виконає. У додатку, що реально працює, з кількох сотень рядків коду, нас це не влаштує. І припустимо, що ми хочемо перехопити код помилки, передати розробнику її код і продовжити виконання далі.
Наша стаття була б неповною без короткого опису основних типів помилки JavaScript:
- Error – Загальний конструктор об'єкта помилки.
- EvalError тип помилки, що з'являється під час помилок виконання eval() , але не синтаксичних, а при неправильному використанні цієї глобальної функції.
- RangeError – відбувається, коли ви виходите за межі допустимого діапазону у виконанні коду.
- ReferenceError — відбувається, коли ви намагаєтеся викликати змінну, функцію чи об'єкт, яких немає у програмі.
- SyntaxError – Помилка в синтаксисі.
- TypeError – відбувається при спробі створення об'єкта з невідомим типом змінної або при спробі виклику неіснуючого методу
- URIError — код, що рідко зустрічає, який виникає при неправильному використанні методів encodeURL і DecodeURL.
Давайте створимо найпростіший калькулятор (навіть калькулятором його називати голосно, я сказав би: «виконавець введених виразів»). Його інтерактивний приклад можна знайти тут. Добре, давайте тепер подивимося на наш код:
let input = document.querySelector("#enter"); let button = document.querySelector("#enter_button"); let result_el = document.querySelector("#result "); button.onclick = () => < try < let result = eval (input.value); //пробуємо, якщо буде коректно, тоді catch не спрацює result_el.innerHTML = result; >catch (error) < console.error(error.name); result_el.innerHTML = "Ви щось не ввели, молодий чоловік
Подумайте ще раз"; //можна користувачеві пояснювати, що він не правий, якщо він припустився помилки //хоча природно користувачеві краще не давати цю можливість)) > > Якщо ви спробуєте запровадити коректний математичний вираз, то все спрацює нормально. Однак спробуйте ввести некоректний вираз, наприклад, просто рядок, тоді програма виведе користувачеві попередження.
Сподіваюся, ви прочитаєте ще статті, в яких пояснюються інші частини перехоплення помилок, такі як ця , щоб розширити своє розуміння у налагодженні програм, і вивчіть інші синтаксичні конструкції, такі як finally , а також генерацію своїх власних помилок.
На цьому все. Сподіваюся, ця стаття виявилася корисною і тепер, при налагодженні додатків, ви почуватиметеся впевненіше. Ми розібрали типові помилки від самих елементарних, які роблять новачки, що програмують на JS всього кілька днів, до техніки перехоплення помилок, які застосовують більш розвинені розробники.