Горизонтальные линии внешнего интерфейса, обработка ошибок и отладка

внешний интерфейс сервер JavaScript браузер
Горизонтальные линии внешнего интерфейса, обработка ошибок и отладка

Содержание этой главы

  • Понимание ошибок, о которых сообщают браузеры
  • обрабатывать ошибки
  • Отладка кода JavaScript

обработка ошибок

Важность обработки ошибок при разработке программ очевидна. Любое эффективное веб-приложение нуждается в комплексном наборе механизмов обработки ошибок.

оператор try-catch

try {
    // 可能会导致错误的代码
} catch (e) {
    // 在错误发生时怎么处理
}

тип ошибки

Существует много типов ошибок, которые могут возникнуть во время выполнения кода. Каждая ошибка имеет соответствующий тип ошибки, и при возникновении ошибки создается объект ошибки соответствующего типа.
ECMA-262 определяет следующие семь типов ошибок:

  • Error

  • EvalError

  • RangeError

  • SyntaxError

  • ReferenceError

  • TypeError

  • URIError

  • Ошибка типа RangeError возникает, когда значение выходит за пределы соответствующего диапазона:

try {
    let items1 = new Array(-20);
var items2 = new Array(Number.MAX_VALUE);
} catch (e) {
    console.dir(e)
}
  • В случае, когда объект не найден, возникает ReferenceError (в этом случае это приводит непосредственно к известной ошибке браузера «ожидаемый объект»). Обычно такая ошибка возникает при доступе к несуществующей переменной:
try {
    let obj = x;
} catch (e) {
    console.dir(e)
}
  • SyntaxError, этот тип ошибки возникает, когда мы передаем строку JavaScript с неправильным синтаксисом в функцию eval().
eval('a++ b')
  • Тип TypeError часто используется в JavaScript и может вызвать эту ошибку при сохранении неожиданного типа в переменной или при доступе к несуществующему методу. Однако существуют различные причины ошибки. **Наиболее распространенный случай ошибок типа — это когда параметры, переданные в функцию, не проверяются заранее, и в результате входящий тип не соответствует ожидаемому типу.
Function.prototype.toString.call('name')   // 抛出typeError
  • При использовании encodeURI() или decodeURI() и URI имеет неправильный формат, результатом будет URIError. Такого рода ошибки случаются редко, потому что две упомянутые выше функции очень отказоустойчивы.

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

try {
    // ......
} catch (e) {
    if (e instanceof TypeError) {
        // 处理类型错误
    } else if (e instanceof ReferenceError) {
        // 处理引用错误
    } else {
        // 处理其他类型的错误
    }
}

В кросс-браузерном программировании проверка типа ошибки — это самый простой способ определить, как с ней справиться; сообщение об ошибке, содержащееся в атрибуте сообщения, будет варьироваться от браузера к браузеру.

Добросовестное использование try-catch

Использование try-catch лучше всего подходит для тех ошибок, которые находятся вне нашего контроля. Предположим, вы используете функцию из большой библиотеки JavaScript, которая может непреднамеренно или непреднамеренно выдавать некоторые ошибки. Поскольку мы не можем изменить исходный код этой библиотеки, мы можем поместить вызов этой функции в оператор try-catch.

бросить ошибку

Существует также оператор throw для оператора try-catch, который используется для выдачи пользовательских ошибок в любое время.

throw new Error('Something bad happend')

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

throw new SyntaxError('I dont like your syntax');

throw new TypeError('What type of variable do you take me for?');

throw new RangeError('Sorry, you just dont have the range')

throw new EvalError('That doesnt evaluate.')

throw new URIError('Uri, is that you?');

throw new ReferenceError('You didnt cite your references properly');

событие ошибки

window.onerror = function (message, url, line) {
    // 处理错误
}

стратегия обработки ошибок

немного

распространенные типы ошибок

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

  • ошибка преобразования типа
  • неправильный тип данных
  • Ошибка связи

ошибка преобразования типа

неправильный тип данных

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

Ошибка связи

Любое взаимодействие между Javascript и сервером может привести к ошибкам.

  • Первый тип ошибки связи связан с неверным URL-адресом или отправляемыми данными. Наиболее распространенная проблема заключается в том, что данные не кодируются с помощью encodeURIComponent() перед отправкой на сервер.
        function addQueryString(url, name, value) {
            if (url.indexOf('?') === -1) {
                url += '?';
            } else {
                url += '&';
            }

            url += `&${encodeURIComponent(name)} = ${encodeURIComponent(value)}`;
            
            return url;
        }

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

Различать фатальные и нефатальные ошибки

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

  • Не влияет на основную задачу пользователя
  • Влияет только на часть страницы
  • можно восстановить
  • Повторение одной и той же операции может устранить ошибки

логировать ошибки на сервер

Распространенной практикой при разработке веб-приложений является централизованное ведение журналов ошибок, чтобы найти причину важных ошибок.

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

function logError (lev, msg) {
    let img = new Image();
    img.src = `log.php?e`
}

Функция logError() принимает два параметра:Числовое или строковое значение, указывающее серьезность и сообщение об ошибке. Объект Image используется для отправки запроса, который является очень гибким и в основном проявляется в следующих аспектах:

  • Объекты изображений поддерживаются всеми браузерами, включая те, которые не поддерживают объекты XMLHttpRequest.
  • Междоменных ограничений можно избежать.
  • Вероятность возникновения проблем в процессе записи ошибок относительно невелика. Большая часть связи Ajax обрабатывается функциями-оболочками, предоставляемыми библиотеками JavaScript.Если есть проблема с самим кодом библиотеки, и вы все еще полагаетесь на библиотеку для регистрации ошибок, вполне возможно, что сообщение об ошибке не будет зарегистрировано.

резюме

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

Вот несколько способов избежать ответов вашего браузера с ошибками JavaScript.

  • Используйте операторы try-catch там, где могут возникнуть ошибки, чтобы у вас по-прежнему была возможность реагировать на ошибки надлежащим образом.
  • Используйте обработчик событий window.onerror, который принимает все ошибки, которые не может обработать try-catch.

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

  • преобразование типов
  • Недостаточное определение типа данных
  • Ошибка в данных, отправленных на сервер или полученных с сервера
Категории