Javascript error как исправить эту ошибку

Время на прочтение
5 мин

Количество просмотров 396K

JavaScript может быть кошмаром при отладке: некоторые ошибки, которые он выдает, могут быть очень трудны для понимания с первого взгляда, и выдаваемые номера строк также не всегда полезны. Разве не было бы полезно иметь список, глядя на который, можно понять смысл ошибок и как исправить их? Вот он!

Ниже представлен список странных ошибок в JavaScript. Разные браузеры могут выдавать разные сообщения об одинаковых ошибках, поэтому приведено несколько примеров там, где возможно.

Как читать ошибки?

Перед самим списком, давайте быстро взглянем на структуру сообщения об ошибке. Понимание структуры помогает понимать ошибки, и вы получите меньше проблем, если наткнетесь на ошибки, не представленные в этом списке.

Типичная ошибка из Chrome выглядит так:

Uncaught TypeError: undefined is not a function

Структура ошибки следующая:

  1. Uncaught TypeError: эта часть сообщения обычно не особо полезна. Uncaught значит, что ошибка не была перехвачена в catch, а TypeError — это название ошибки.
  2. undefined is not a function: это та самая часть про ошибку. В случае с сообщениями об ошибках, читать их нужно прямо буквально. Например, в этом случае, она значит то, что код попытался использовать значение undefined как функцию.

Другие webkit-браузеры, такие как Safari, выдают ошибки примерно в таком же формате, как и Chrome. Ошибки из Firefox похожи, но не всегда включают в себя первую часть, и последние версии Internet Explorer также выдают более простые ошибки, но в этом случае проще — не всегда значит лучше.

Теперь к самим ошибкам.

Uncaught TypeError: undefined is not a function

Связанные ошибки: number is not a function, object is not a function, string is not a function, 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: Invalid left-hand side in assignment

Связанные ошибки: Uncaught exception: ReferenceError: Cannot assign to ‘functionCall()’, Uncaught exception: ReferenceError: Cannot assign to ‘this’

Вызвано попыткой присвоить значение тому, чему невозможно присвоить значение.

Наиболее частый пример этой ошибки — это условие в if:

if(doSomething() = 'somevalue')

В этом примере программист случайно использовал один знак равенства вместо двух. Выражение “left-hand side in assignment” относится к левой части знака равенства, а, как можно видеть в данном примере, левая часть содержит что-то, чему нельзя присвоить значение, что и приводит к ошибке.

Как исправить ошибку: убедитесь, что вы не пытаетесь присвоить значение результату функции или ключевому слову this.

Uncaught TypeError: Converting circular structure to JSON

Связанные ошибки: Uncaught exception: TypeError: JSON.stringify: Not 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, Unable to get 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: someVal is undefined, Unable to set property ‘foo’ of undefined or null reference

Попытка записать 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 disallows reading the remote resource at some/url

Эта проблема всегда связана с использованием XMLHttpRequest.

Как исправить ошибку: убедитесь в корректности запрашиваемого URL и в том, что он удовлетворяет same-origin policy. Хороший способ найти проблемный код — посмотреть на URL в сообщении ошибки и найти его в своём коде.

InvalidStateError: An attempt was made to use an object that is not, or is no longer, usable

Связанные ошибки: InvalidStateError, DOMException code 11

Означает то, что код вызвал функцию, которую нельзя было вызывать в текущем состоянии. Обычно связано c XMLHttpRequest при попытке вызвать на нём функции до его готовности.

var xhr = new XMLHttpRequest();
xhr.setRequestHeader('Some-Header', 'val');

В данном случае вы получите ошибку потому, что функция setRequestHeader может быть вызвана только после вызова xhr.open.

Как исправить ошибку: посмотрите на код в строке, указывающей на ошибку, и убедитесь, что он вызывается в правильный момент или добавляет нужные вызовы до этого (как с xhr.open).

Заключение

JavaScript содержит в себе одни из самых бесполезных ошибок, которые я когда-либо видел, за исключением печально известной Expected T_PAAMAYIM_NEKUDOTAYIM в PHP. Большая ознакомленность с ошибками привносит больше ясности. Современные браузеры тоже помогают, так как больше не выдают абсолютно бесполезные ошибки, как это было раньше.

Какие самые непонятные ошибки вы встречали? Делитесь своими наблюдениями в комментариях.

P.S. Этот перевод можно улучшить, отправив PR здесь.

21 марта, 2023 12:17 пп
15 views
| Комментариев нет

Java

JavaScript — это язык программирования, который используется во фронтенд- и бэкенд-разработке. Однако иногда правильно расшифровать сообщение об ошибке в JavaScript бывает немного сложно. При устранении проблем в приложени очень важно понимание того, на что ссылается сообщение об ошибке. Современные браузеры поставляются со встроенными утилитами отладки, которые помогают в этом. Каждый браузер по-разному визуально выводит сообщения об ошибках. Но эти сообщения подскажут вам, что происходит с кодом JavaScript.

В этом мануале мы рассмотрим три распространенных типах ошибок JavaScript, которые возникают в среде браузера: ReferenceError, SyntaxError и TypeError. Чтобы следовать этому туториалу, вы должны иметь представление о JavaScript и консоли разработчика.

Читайте также: Использование консоли разработчика JavaScript

Примеры в этом туториале помогут вам ознакомиться с распространенными сообщениями об ошибках. Сообщения в примерах из браузера Chrome, в Firefox или Edge могут содержать немного другую информацию, но типы ошибок одинаковы для всех.

Типы ошибок JavaScript

Ошибки в JavaScript основаны на объекте Error. Это встроенный объект, который содержит информацию о типе возникшей ошибки, за которой следует сообщение с подробным описанием возможной причины. Например, вы можете столкнуться со следующей ошибкой:

VM170:1 Uncaught ReferenceError: shark is not defined
    at <anonymous>:1:1

Если разобрать это сообщение, вы узнаете, что ReferenceError — это тип обнаруженной ошибки. После двоеточия следует сообщение, которое описывает ошибку: shark is not defined. Последняя строка в этом сообщении указывает, где именно произошла ошибка в коде: 1:1.

Каждый раз, когда браузер обнаруживает ошибку, тип и сообщение об ошибке указывают на проблему. С помощью этой информации можно определить, как отладить код на основе типа ошибки и сообщения, которое вы получите.

Ошибка ReferenceError

ReferenceError возникает, когда вы пытаетесь получить доступ к переменной, которую вы еще не создали. Она также возникает, когда вы вызываете переменную до ее инициализации.

Неопределенные переменные

Например, если вы неправильно написали название переменной при выполнении console.log(), вы получите ошибку ReferenceError:

let sammy = 'A Shark dreaming of the cloud.';

console.log(sammmy);

Вывод будет следующим:

Uncaught ReferenceError: sammmy is not defined
    at <anonymous>:1:13

Переменная sammmy с тремя буквами m не существует и не определена. Чтобы исправить эту ошибку, можно обновить переменную и написать ее правильно,а затем повторно выполнить команду. Если все прошло успешно, то вы не получите сообщение об ошибке. В целом рекомендуется всегда заранее проверять код на наличие опечаток, чтобы избежать ошибок с неопределенными переменными.

Доступ к переменной до ее объявления

Также вы можете столкнуться с ошибкой при попытке получения доступа к переменной до ее объявления в коде:

function sharkName() {
    console.log(shark);

    let shark = 'sammy';
}

VM223:2 Uncaught ReferenceError: Cannot access 'shark' before initialization
    at sharkName (<anonymous>:2:17)
    at <anonymous>:1:1

В этом примере при выполнении console.log(shark) переменная shark объявлена после вызова, что приводит к ошибке. Как вы сами знаете, сначала нужно объявить переменную, а уже потом пытаться получить к ней доступ.

Примечание: из-за того, как работают объявления let и const, объявления переменных всплывают, но в предыдущем примере они не доступны, потому что находятся в так называемой “временной мертвой зоне” (Temporal Dead Zone). Чтобы избежать этого, рекомендуется объявлять переменные let и const в начале области.

Чтобы исправить эту ошибку, объявите переменную shark перед выполнением команды console.log():

function sharkName() {
    let shark = 'sammy';

    console.log(shark);
}

Ошибка ReferenceError часто связана с переменными и областью видимости. Это выходит за рамки данного мануала.

Читайте также: Переменные, области и поднятие переменных в JavaScript

Ошибка SyntaxError

Когда интерпретатор JavaScript просматривает код, он может выдать ошибку SyntaxError, если обнаружит код, который не соответствует спецификации языка. В этом случае ваш код прекратит выполнение и вы получите сообщение о синтаксической ошибке.

Отсутствует закрывающий знак

Например, когда вы пишете функцию и забываете закрыть круглую скобку, ), чтобы заключить свой код, вы получите SyntaxError с очень конкретным сообщением об отсутствующем элементе:

function sammy(animal) {
    if(animal == 'shark'){
        return `I'm cool`;
    } else {
        return `You're cool`;
    }
}

sammy('shark';

Вы получите:

Uncaught SyntaxError: missing ) after argument list

В сообщении об ошибке указывается отсутствующий символ в коде. В этом примере в вызове функции sammy отсутствует закрывающая скобка ):

. . .

sammy('shark');

Отсутствие завершающей фигурной скобки } в конце функции или квадратной ] в массиве также может привести к этой ошибке. Убедитесь, что вы правильно закрываете функции, массивы и объекты.

Одинаковые имена переменных

Вы можете столкнуться с этой ошибкой, когда одно имя используется как параметр функции и внутри ее тела. Рассмотрим следующий пример:

function sammy(animal) {
    let animal = 'shark';
}

Получаем:

VM132:2 Uncaught SyntaxError: Identifier 'animal' has already been declared

Чтобы исправить эту ошибку, убедитесь, что вы используете уникальные и конкретные имена переменных внутри тела функции. Объявив новое имя переменной, например, animalType, вы устраните конфликт между параметром функции и переменной let в теле:

function sammy(animal) {
    let animalType = 'shark';
}

Если в теле функции вы собираетесь изменять параметр, не объявляйте переменную с таким же именем. Например, вы можете удалить объявление let внутри тела функции:

function sammy(animal) {
    animal = 'shark';
}

Убедитесь, что при работе с переменными внутри и вне тела функции вы даете им уникальные имена. При доступе к параметрам функции вы можете использовать их в теле без объявления переменной, например, без let.

Случайные символы

Иногда в коде встречаются опечатки: к примеру, пропущенные символы (как мы уже видели выше) или ненужные повторения символов. Посмотрите на следующий код:

let sharkCount = 0;

function sammy() {
    sharkCount+;
    console.log(sharkCount);
}

Вы получите:

Uncaught SyntaxError: Unexpected token ';'

Дополнительным элементом в этом примере является знак плюс (+) после sharkCount внутри тела функции:

. . .
function sammy() {
    sharkCount++;
    console.log(sharkCount);
}

При возникновении ошибки SyntaxError: Unexpected token проверьте код на наличие пропущенных или дополнительных операторов, таких как знак плюс (+) в примере.

Ошибка TypeError

TypeError возникает, когда значение функции или переменной имеет непредвиденный тип. 

Читайте также: Типы данных в JavaScript

Методы массивов и объекты

Одна из распространенных ошибок — использование метода массива для итерации объекта. Например, перебрать объект с помощью метода .map() нельзя, потому что он доступен только для массивов:

const sharks = {
    shark1: 'sammy',
    shark2: 'shelly',
    shark3: 'sheldon'
}

sharks.map((shark) => `Hello there ${shark}!`);

Вы получите:

Uncaught TypeError: sharks.map is not a function
    at <anonymous>:1:8

Один из вариантов исправления предыдущего примера — использовать цикл for…in, который работает с объектами:

const sharks = {
    shark1: 'sammy',
    shark2: 'shelly',
    shark3: 'sheldon'
}

for (let key in sharks) {
    console.log(`Hello there ${sharks[key]}!`);
}

Также можно преобразовать объект sharks в массив, чтобы использовать метод .map():

const sharks = ['sammy', 'shelly', 'sheldon'];

sharks.map((shark) => `Hello there ${shark}!`);

Когда вы работаете с разными массивами и объектами, методы легко перепутать. Убедитесь, что метод соответствует типу данных, с которыми вы работаете.

Правильные методы деструктуризации

Аналогично, попытка выполнить итерацию над объектом с деструктуризацией массива приведет к ошибке TypeError:

const shark = {
    name: 'sammy',
    age: 12,
    cloudPlatform: 'sammy'
}

const [name, age, cloudPlatform] = sharks;

Получаем:

VM23:7 Uncaught TypeError: sharks is not iterable
    at <anonymous>:7:26

Один из способов решить эту проблему — использовать деструктуризацию объекта, чтобы создавать новые переменные на основе ключей объекта:

const shark = {
    name: 'sammy',
    age: 12,
    cloudPlatform: 'sammy'
}

const {name, age, cloudPlatform} = shark;

console.log(name);

Получим следующий вывод:

sammy

В зависимости от того, как вы структурируете данные, — с помощью массивов или объектов, — убедитесь, что вы используете соответствующие методы для извлечения значений.

Подводим итоги

В этом туториале мы рассмотрели три распространенных типа ошибок JavaScript и некоторые связанные с ними сообщения, а также обсудили, как отладить эти проблемы. Конечно, этот краткий материал сложно назвать исчерпывающим, но вы получили представление о том, как JavaScript кооперируется с браузерами, чтобы указать на проблемы в коде.

Читайте также: 

  • Методы объектов в JavaScript
  • Методы массивов в JavaScript: методы итерации
  • Отладка JavaScript с помощью Visual Studio Code и DevTools от Google Chrome

Tags: Javascript


Download Article


Download Article

If you’re seeing an error that says “a JavaScript error occurred in the main process” or “a fatal JavaScript error occurred” when trying to open or install Discord, there are several potential fixes. While these fixes are designed to resolve this error on Discord, they should work to resolve similar errors in other apps, including Microsoft Teams. We’ll show you how to troubleshoot JavaScript errors for Discord, Microsoft Teams, and other Windows 10 apps.

  1. Image titled Fix a Javascript Error in Windows 10 Step 1

    1

    Open your antivirus or antimalware software. If you’re unable to install Discord or another app on your PC because of a JavaScript error, such as “a JavaScript error occurred in the main process,” your antivirus software may be blocking the installer. You can fix this by adding an exclusion for the installer.

    • If you’re using Windows Security, which comes for free with Windows, type security into the search bar and then click Windows Security.
    • The remaining steps will cover unblocking an installer with Windows Security, but your antivirus suite may have different menu options.
  2. Image titled Fix a Javascript Error in Windows 10 Step 2

    2

    Go to the Virus and threat protection area. This gives you a general overview of your antivirus settings.

    Advertisement

  3. Image titled Fix a Javascript Error in Windows 10 Step 3

    3

    Click Manage settings. This opens the settings for your antivirus protection.

  4. Image titled Fix a Javascript Error in Windows 10 Step 4

    4

    Add an exclusion for the Discord installer. If you’re using Windows Security, click Add an exclusion, select File, and then open your download folder and select DiscordSetup.exe (or the name of the installer you’re trying to run).

  5. Image titled Fix a Javascript Error in Windows 10 Step 5

    5

    Run the installer again. Once you’ve allowed the installer to run, you should resolve JavaScript errors that occur during installation.

  6. Advertisement

  1. Image titled Fix a Javascript Error in Windows 10 Step 6

    1

    Close Discord (or the app you’re trying to fix). If you get a JavaScript error when trying to launch or install Discord or another app, the application data may be corrupt. If the app is running right now, you’ll want to close it so you can properly delete and reinstall it. Make sure it’s not minimized to your taskbar.

    • To be sure it’s closed, press Control + Alt + Delete and click Task Manager. If you see a that the app is running, click to select it, and then click End Task.[1]
    • Even if you’ve only tried installing the app and were not successful, you should still use this method before you try to install again.
  2. Image titled Fix a Javascript Error in Windows 10 Step 7

    2

    Press Win+S. This activates the Windows search bar.

  3. Image titled Fix a Javascript Error in Windows 10 Step 8

    3

    Type %appdata% and press Enter. This opens a File Explorer window to your application data.

  4. Image titled Fix a Javascript Error in Windows 10 Step 9

    4

    Permanently delete the folder for the app you’re trying to fix. For example, if you’re trying to fix Discord, you’ll want to delete the “Discord” folder. Here’s how:

    • Click the folder once to select it. Don’t open the folder—just select it for now.
    • Hold down the Shift key as you press Delete.
    • Click Yes.
  5. Image titled Fix a Javascript Error in Windows 10 Step 10

    5

    Press Win+S. This activates the Windows search bar again.

  6. Image titled Fix a Javascript Error in Windows 10 Step 11

    6

    Type %LocalAppData% and press Enter. This opens a File Explorer window to your local app data.

  7. Image titled Fix a Javascript Error in Windows 10 Step 12

    7

    Permanently delete the app’s folder here as well. Just hold down the Shift key as you press Delete, and then confirm deletion.

    • If you don’t see this folder, just skip this step.
  8. Image titled Fix a Javascript Error in Windows 10 Step 13

    8

    Uninstall Discord (or the app in question) from your PC. Here’s how:

    • Open the Windows menu and click the Settings gear.
    • Go to Apps > Apps & features.
    • Select the app and click Uninstall. If you don’t see the app here, just move to the next step.
    • Click Uninstall to confirm.
  9. Image titled Fix a Javascript Error in Windows 10 Step 14

    9

    Reinstall the app. If you’re reinstalling Discord, you can download the installer from https://discord.com/download. Once downloaded, double-click the installer and follow the on-screen instructions—this should fix just about all installation errors.

  10. Advertisement

  1. Image titled Fix a Javascript Error in Windows 10 Step 15

    1

    Open your Windows Settings

    Windows Settings

    . If you’re getting an error that says “a JavaScript error occurred in the main process” when trying to install Microsoft Teams, this may indicate a problem with the C++ libraries installed on your PC.[2]

    • While this method is known to work for Teams, it may also resolve the same issue in other apps.
  2. Image titled Fix a Javascript Error in Windows 10 Step 16

    2

    Click Apps. This opens the Settings panel to the Apps list.

  3. Image titled Fix a Javascript Error in Windows 10 Step 17

    3

    Click Apps & Features. This option is in the left panel.[3]

  4. Image titled Fix a Javascript Error in Windows 10 Step 18

    4

    Click the latest version of Microsoft Visual C++. You’ll probably see several instances of Visual ++ here—you’ll want to click the one that has the most recent date.

  5. Image titled Fix a Javascript Error in Windows 10 Step 19

    5

    Click Change or Advanced options. You should see one of these two options here.

  6. Image titled Fix a Javascript Error in Windows 10 Step 20

    6

    Click Repair. This performs a few repair steps to the C++ libraries.

    • If prompted, enter your administrator password to confirm.
  7. Image titled Fix a Javascript Error in Windows 10 Step 21

    7

    Try running the installer again. This should resolve most JavaScript installation errors with Microsoft Teams on Windows 10.

  8. Advertisement

  1. Image titled Fix a Javascript Error in Windows 10 Step 22

    1

    Close Discord (or the app you’re trying to fix). If you get a JavaScript error when trying to start Discord or another app, certain processes may be failing because they need more permissions. If the app is running right now, you’ll want to close it. Make sure it’s not minimized to your taskbar.

    • To be sure it’s closed, press Control + Alt + Delete and click Task Manager. If you see a process for the app running, click to select it, and then click End Task.
  2. Image titled Fix a Javascript Error in Windows 10 Step 23

    2

    Right-click the Discord icon on your desktop or in the Windows menu. A menu will expand.

  3. Image titled Fix a Javascript Error in Windows 10 Step 24

    3

    Click Open file location. If you don’t see this option, you may have to click More first. This takes you to the app’s install location.

  4. Image titled Fix a Javascript Error in Windows 10 Step 25

    4

    Double-click the latest version of Discord. If you’ve run a few Discord updates, you may have several folders beginning with app- and ending with a number. Double-click the one with the most recent version number.

    • If you’re trying to fix a different app, you’ll usually see that app right here in the folder you’ve opened. If not, look around for a file with the app’s name—it may end with “.exe.”
  5. Image titled Fix a Javascript Error in Windows 10 Step 26

    5

    Right-click the app and select Properties. Properties for the selected app will appear.

  6. Image titled Fix a Javascript Error in Windows 10 Step 27

    6

    Click the Compatibility tab. It’s at the top of the window.

  7. Image titled Fix a Javascript Error in Windows 10 Step 28

    7

    Check the box next to “Run this program as an administrator.” This gives the app permission to everything on your PC, which may clear up issues caused by access rights.

  8. Image titled Fix a Javascript Error in Windows 10 Step 29

    8

    Click OK. This saves your changes.

  9. Image titled Fix a Javascript Error in Windows 10 Step 30

    9

    Start Discord or your preferred app normally. Now that you’ve set the app to run as an administrator, starting it by double-clicking its icon on your desktop or in the Windows menu will run it with elevated privileges.

  10. Advertisement

Add New Question

  • Question

    Why am I getting a Javascript error with WordPress?

    Luigi Oppido

    Luigi Oppido is the Owner and Operator of Pleasure Point Computers in Santa Cruz, California. Luigi has over 25 years of experience in general computer repair, data recovery, virus removal, and upgrades. He is also the host of the Computer Man Show! broadcasted on KSQD covering central California for over two years.

    Luigi Oppido

    Computer & Tech Specialist

    Expert Answer

    Check the website on other devices, like another computer or a tablet. If the same error shows up, there’s an issue with the code that needs to be looked at. It also helps to make sure that Java is up-to-date on your computer, since a lot of people don’t even update Java anymore (since it’s updated with the operating system).

Ask a Question

200 characters left

Include your email address to get a message when this question is answered.

Submit

Advertisement

About This Article

Article SummaryX

1. Unblock the installer in your antivirus software.
2. Try deleting the app’s folders in AppData and LocalAppData and then reinstalling.
3. Repair the latest version of Microsoft Visual C++ in Apps & Features.
4. Run the app as an administrator.

Did this summary help you?

Thanks to all authors for creating a page that has been read 35,133 times.

Is this article up to date?

Существует ряд причин, по которым код JavaScript может вызывать ошибки, например:

  • Проблема с сетевым подключением;
  • Пользователь мог ввести неверное значение в поля формы;
  • Ссылка на объекты или функции, которые не существуют;
  • Неправильные данные отправляются или принимаются с веб-сервера;
  • Служба, к которой приложение должно получить доступ, может быть временно недоступна.

Эти типы ошибок известны как ошибки времени выполнения (runtime errors), поскольку они возникают во время выполнения скрипта. Профессиональное приложение должно иметь возможность корректно обрабатывать такие ошибки во время выполнения. Обычно это означает понятное информирование пользователя о возникшей проблеме.

Оператор try…catch

JavaScript предоставляет оператор try-catch, чтобы перехватывать ошибки времени выполнения и корректно их обработать.

Любой код, который может вызвать ошибку, должен быть помещен в блок оператора try, а код для обработки ошибки помещен в блок catch, как показано здесь:

try {
    // Код, который может вызвать ошибку
} catch(error) {
    // Действие, которое нужно выполнить при возникновении ошибки
}

Если ошибка возникает в любой точке блока try, выполнение кода немедленно переносится из блока try в блок catch. Если в блоке try ошибки не возникает, блок catch будет проигнорирован, и программа продолжит выполнение после оператора try-catch.

Следующий пример демонстрирует, как работает оператор try-catch:

try {
    var greet = "Hi, there!";
    document.write(greet);
    
    // Попытка получить доступ к несуществующей переменной
    document.write(welcome);
    
    // Если произошла ошибка, следующая строка не будет выполнена
    alert("All statements are executed successfully.");
} catch(error) {
    // Обработка ошибки
  alert("Caught error: " + error.message);
}
 
// Продолжаем исполнение кода
document.write("<p>Hello World!</p>");

Приведенный выше скрипт генерирует ошибку, которая отображается в диалоговом окне с предупреждением, а не выводится в консоль браузера. Кроме того, программа не остановилась внезапно, даже если произошла ошибка.

Также обратите внимание, что за ключевым словом catch указывается идентификатор в скобках. Этот идентификатор действует как параметр функции. При возникновении ошибки интерпретатор JavaScript генерирует объект, содержащий сведения о нем. Этот объект ошибки затем передается в качестве аргумента для обработки.

Оператор try-catch является механизмом обработки исключений. Исключением является сигнал, который указывает, что во время выполнения программы возникли какие-то исключительные условия или ошибки. Термины «исключение» и «ошибка» часто используются взаимозаменяемо.

Оператор try…catch…finally

Оператор try-catch также может содержать предложение finally. Код внутри блока finally всегда будет выполняться независимо от того, произошла ошибка в блоке try или нет.

В следующем примере всегда отображается общее время, затраченное на выполнение кода.

// Присвоение значения, возвращаемого диалоговым окном
var num = prompt("Enter a positive integer between 0 to 100");

// Запоминание времени начала исполнения
var start = Date.now();

try {
    if(num > 0 && num <= 100) {
        alert(Math.pow(num, num)); // the base to the exponent power
    } else {
        throw new Error("An invalid value is entered!");
    }
} catch(e) {
    alert(e.message);
} finally {
    // Отображение времени, необходимого для выполнения кода
    alert("Execution took: " + (Date.now() - start) + "ms");
}

Вызов ошибок с помощью оператора throw

До сих пор мы видели ошибки, которые автоматически генерируются парсером JavaScript. Тем не менее, также можно вызвать ошибку вручную с помощью оператора throw.

Общий синтаксис оператора throw: throw expression;

Выражение expression может быть объектом или значением любого типа данных. Однако лучше использовать объекты, желательно со свойствами name и message. Встроенный в JavaScript конструктор Error() предоставляет удобный способ создания объекта ошибки. Давайте посмотрим на некоторые примеры:

throw 123;
throw "Missing values!";
throw true;
throw { name: "InvalidParameter", message: "Parameter is not a number!" };
throw new Error("Something went wrong!");

Если вы используете встроенные в JavaScript функции конструктора ошибок (например, Error(), TypeError() и т. д.) для создания объектов ошибок, тогда свойство name совпадает с именем конструктора, а message равно аргументу функции конструктора.

Теперь мы собираемся создать функцию squareRoot(), чтобы найти квадратный корень числа. Это можно сделать просто с помощью встроенной в JavaScript функции Math.sqrt(), но проблема здесь в том, что она возвращает NaN для отрицательных чисел, не давая никаких подсказок о том, что пошло не так.

Мы собираемся исправить эту проблему, показывая пользователю ошибку, если указано отрицательное число.

function squareRoot(number) {
    // Выдает ошибку, если число отрицательное
    if(number < 0) {
        throw new Error("Sorry, can't calculate square root of a negative number.");
    } else {
        return Math.sqrt(number);
    }
}
    
try {
    squareRoot(16);
    squareRoot(625);
    squareRoot(-9);
    squareRoot(100);
    
    // Если выдается ошибка, следующая строка не будет выполнена
    alert("All calculations are performed successfully.");
} catch(e) {
    // Обработка ошибки
    alert(e.message);
}

Теоретически можно вычислить квадратный корень из отрицательного числа, используя мнимое число i, где i2 = -1. Следовательно, квадратный корень из -4 равен 2i, квадратный корень из -9 равен 3i и так далее. Но мнимые числа не поддерживаются в JavaScript.

Типы ошибок

Объект Error является базовым типом всех ошибок и имеет два основных свойства: name, указывающее тип ошибки и свойство message, которое содержит сообщение, описывающее ошибку более подробно. Любая выданная ошибка будет экземпляром объекта Error.

Существует несколько различных типов ошибок, которые могут возникнуть во время выполнения программы JavaScript, например RangeError, ReferenceError, SyntaxError, TypeError, и URIError.

В следующем разделе описывается каждый из этих типов ошибок более подробно:

RangeError

RangeError генерируется, когда вы используете число, выходящее за пределы допустимых значений. Например, создание массива с отрицательной длиной вызовет RangeError.

var num = 12.735;
num.toFixed(200); // выдает ошибку диапазона (допустимый диапазон от 0 до 100)

var array = new Array(-1); // выдает ошибку диапазона

ReferenceError

Ошибка ReferenceError обычно выдается, когда вы пытаетесь сослаться на переменную или объект, которые не существуют, или получить к ним доступ. В следующем примере показано, как происходит ошибка ReferenceError.

var firstName = "Harry";
console.log(firstname); // выдает ошибку ссылки (имена переменных чувствительны к регистру)

undefinedObj.getValues(); // выдает ошибку ссылки

nonexistentArray.length; // выдает ошибку ссылки

SyntaxError

SyntaxError генерируется, если в вашем коде JavaScript есть какие-либо синтаксические проблемы. Например, если закрывающая скобка отсутствует, циклы не структурированы должным образом и т. д.

var array = ["a", "b", "c"];
document.write(array.slice(2); // выдает синтаксическую ошибку (отсутствует скобка)

alert("Hello World!'); // выдает синтаксическую ошибку (несоответствие кавычек)

TypeError

Ошибка TypeError возникает, когда значение не относится к ожидаемому типу. Например, вызов метода строки для числа, вызов метода массива для строки и т. д.

var num = 123;
num.toLowerCase(); /* выдает ошибку (поскольку toLowerCase() является строковым методом, число не может быть преобразовано в нижний регистр) */

var greet = "Hello World!"
greet.join() // выдает ошибку (так как join() является методом массива)

URIError

URIError генерируется, когда вы указали недопустимый URI (расшифровывается как Uniform Resource Identifier) для функций, связанных с URI, таких как encodeURI() или decodeURI(), как показано здесь:

var a = "%E6%A2%B";
decodeURI(a);  // выдает ошибку URI

var b = "uD800";
encodeURI(b);   // выдает ошибку URI

Существует еще один тип ошибки EvalError, который генерируется при возникновении ошибки во время выполнения кода с помощью функции eval(). Хотя эта ошибка больше не генерируется JavaScript, этот объект все еще остается для обратной совместимости.

Конкретный тип ошибки также может быть выдан вручную с использованием соответствующего конструктора и оператора throw. Например, чтобы сгенерировать ошибку TypeError, вы можете использовать конструктор TypeError(), например:

var num = prompt("Please enter a number");

try {
    if(num != "" && num !== null && isFinite(+num)) {
        alert(Math.exp(num));
    } else {
        throw new TypeError("You have not entered a number.");
    }
} catch(e) {
    alert(e.name);
    alert(e.message);
    alert(e.stack); // нестандартное свойство
}

Объект Error также поддерживает некоторые нестандартные свойства. Одним из наиболее широко используемых таких свойств является: stack trace, который возвращает трассировку стека для этой ошибки. Вы можете использовать его в целях отладки, но не используйте его на рабочих сайтах.

Как исправить распространенные ошибки JavaScript

Ошибки в JavaScript достаточно сложно отслеживать и исправлять. У каждой ошибки есть свое название. Это помогает с определением проблемы и ее исправлением. Необработанные ошибки отображаются в веб-консоли браузера или выводе Node.js приложения. Рассмотрим типы распространенных ошибок в JavaScript, причины возникновения и как их исправить. По каждому типу показаны примеры, чтобы улучшить ваше понимание ошибки и действий для исправления.

Нет единого стандарта именований ошибок в разных браузерах. Для статьи взяты имена ошибок из браузера Google Chrome.

TypeError: Cannot read property “x” of “y”

Пример TypeError: Cannot read property “x” of “y”

Эта ошибка возникает, когда мы вызываем метод или читаем свойство на undefined или null значениях.

В браузере Safari эти ошибки названы по-другому:

  • ‘undefined’ is not an object
  • ‘null’ is not an object

В браузере Mozilla Firefox:

  • TypeError: “x” is undefined
  • TypeError: “x” is null

Примеры ошибок

  • Вызов функции на undefined:
let foo;
foo.read(); // TypeError: Cannot read property 'read' of undefined
  • Чтение свойства на null:
foo = null;
foo.total; // TypeError: Cannot read property 'total of null

Исправление ошибки

Есть несколько вариантов исправления в зависимости от контекста проблемы.

  • Задать значение переменной или свойству объекта перед его использованием.
let foo = {
total: 5
};

let total = foo.total; // 5

  • Проверять, что переменная определена, перед ее использованием.
if (typeof foo !== 'undefined' && typeof foo.total !== 'undefined') {
let total = foo.total;
}

TypeError: “x” is not a function

Пример TypeError: “x” is not a function

Ошибка происходит, когда мы пытаемся вызвать неопределенную функцию.

Примеры ошибок

Есть несколько вариантов исправления в зависимости от причин ошибки:

  • Функция не определена.
let x = {};

x.read(); // TypeError: x.read is not a function

В этом примере определим функцию read().

let x = {
read: function() {
return 2;
}
};

x.read(); // 2

  • В месте вызова или объявлении функции есть опечатка в имени функции.
let a = {
sam: function(a, b) {
return a + b;
}
}

a.sum(1, 1); // TypeError: a.sum is not a function

После исправления опечатки в имени функции sum().

let a = {
sum: function(a, b) {
return a + b;
}
}

a.sum(1, 1); // 2

TypeError: Cannot set property “x” of undefined

Пример TypeError: Cannot set property “x” of undefined

Эта ошибка возникает, когда мы пытаемся записать в свойство undefined значения.

let test;

test.value = 0; // Uncaught TypeError: Cannot set property 'value' of undefined

Решением в данном примере будет инициализация переменной test новым объектом так:

let test = {};

test.value = 0;

Или вот так:

let test = {
value: 0
};

ReferenceError: “x” is not defined

Пример TypeError: ReferenceError: “x” is not defined

Эта ошибка возникает в нескольких случаях.

Переменная не объявлена

text.trim(); // Uncaught ReferenceError: text is not defined

Переменная text не объявлена. Для использования строкового метода trim() переменную text нужно объявить и инициализировать строкой.

let text = " Test ";

text.trim(); // "Test"

Нет доступа к переменной в текущей области видимости

function test() {
let a = 0;
}

console.log(a); // Uncaught ReferenceError: a is not defined

Переменную a нужно сделать доступной для использования там, где происходит ошибка.

let a = 0;

function test() {
a = 1;
}

console.log(a); // 0
test();
console.log(a); // 1

RangeError: Maximum call stack size exceeded

Эта ошибка возникает в случае вызова бесконечной рекурсивной функции. У такой функции нет выхода из нее или он не применяется.

function countDown(fromNumber) {
console.log(fromNumber);

countDown(fromNumber - 1); // RangeError: Maximum call stack size exceeded
}

countDown(10);

Чтобы исправить эту ошибку в рекурсивную функцию countDown() нам нужно добавить условие для выхода из рекурсии.

function countDown(fromNumber) {
console.log(fromNumber);

let nextNumber = fromNumber - 1;

if (nextNumber > 0) {
countDown(nextNumber);
}
}

countDown(10);

RangeError: precision is out of range

Пример RangeError: precision is out of range

Ошибка происходит когда число, выходящее за пределы допустимого диапазона, было передано в функции toExponential(), toFixed(), или toPrecision().

let num = 4.777777;
num.toExponential(-2); // RangeError: toExponential() argument must be between 0 and 100

num = 4.8888;
num.toFixed(105); // RangeError: toFixed() digits argument must be between 0 and 100

num = 4.1234;
num.toPrecision(0); // RangeError: toPrecision() argument must be between 1 and 100

Чтобы исправить, будем использовать допустимые значения.

let num = 4.777777;
num.toExponential(4); // 2.5556e+0

num = 4.8888;
num.toFixed(2); // 3.00

num = 4.1234;
num.toPrecision(1); // 4

RangeError: invalid array length

Пример RangeError: invalid array length

Эта ошибка возникает, если мы задаем массиву недопустимый размер: негативный или больше 232.

new Array(-10); // RangeError: Invalid array length

let a = [];
a.length = a.length - 5; // RangeError: Invalid array length

Для решения данной ошибки нам нужно использовать допустимую длину массива.

new Array(10); // [empty × 10]

Полезные ссылки

JavaScript ссылки на ошибки

Ниже, вы найдёте список ошибок, которые возвращает JavaScript. Эти ошибки могут быть полезны при отладке, но неполадки не всегда сразу понятны. Страницы ниже предлагают дополнительную информацию об этих ошибках. Каждая ошибка это Объект на основании Error object, и имеет имя (name) и сообщение (message).

Mozilla

https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Errors

Резюме

Надеюсь вы узнали что-то новое для себя. И сможете определять причину ошибок в JavaScript и способ их исправления. Эти ошибки могут возникать в рабочих проектах и лучше заранее иметь представление о них.

Спасибо, что прочитали. Буду вам очень признателен если поделитесь этой статьей!

Опубликовано 21 апреля 2021 г.

Добавить комментарий