Регистрация ошибок скрипта в JavaScript
В этой статье мы научимся регистрировать ошибки скрипта с помощью JavaScript. Это полезно в случае, когда скрипты из любого другого источника запускаются / выполняются на веб-сайте (например, в iframe) или когда любой из ваших зрителей использует консоль браузера, пытаясь изменить скрипт, или вы хотите отслеживать свой JS-код для ошибки, которые могут возникнуть при запуске в производство.
Подход: мы изучим 3 метода для выполнения этой задачи - все они следуют одному и тому же подходу, но по-разному реализовать подход и извлечь полезную информацию. Используйте то, что лучше всего подходит для вашего случая.
- window.addEventListener («error», // yourErrorLoggerFunction ) - прикрепляет событие ошибки к объекту окна (DOM).
- document.querySelector ('body'). onerror = // yourErrorLoggerFunction - Слушатель ошибок в теге body -> Работает как в одном источнике, так и в кросс-скриптах одного происхождения.
- Создайте элемент сценария и добавьте его к тегу body источника.
Все три метода могут быть реализованы как в одном источнике, так и в любом внешнем источнике.
Примечание. Убедитесь, что это первое действие, выполняемое браузером (в случае, если вы не уверены, что настоятельно рекомендуется использовать метод 2).
Метод 1. В этом методе мы присоединяем прослушиватель событий к нашему оконному объекту. Всякий раз, когда возникает какая-либо ошибка сценария, срабатывает прикрепленная функция errorLogger, и внутри errorLoggerFunction мы извлекаем всю полезную информацию из объекта события, который получает наша функция errorLogger.
Javascript
window.addEventListener("error", errorLog);function errorLog(event) { // Declare all variables as null // necessary in case of multiple // errors to be logged let msg = source = lineno = colno = error = time = ""; // Use prevent deafult in case you // don"t want the error to be logged // in the console / hide the error event.preventDefault(); msg = event.message; source = event.filename; lineno = event.lineno; colno = event.colno; error = event.error; time = event.time; // This time is in ms and tells us // time after which the error occured // after the page was loaded // a lot other information can be // gathered - explore the event object // After extracting all the information // from this object now log it on your // server Database} |
Найдите HTML-код (метод 1):
HTML
<!DOCTYPE html>< html lang = "en" >< head > < meta charset = "UTF-8" > < meta name = "viewport" content = "width=device-width, initial-scale=1.0" > < title >Document</ title ></ head >< body > < p style = "font-size:20px;color:rgb(219, 0, 0)" > No Errors </ p > < script > // Make Sure addEventListener is the // First thing to be Executed window.addEventListener("error", errorLog); // String to Prepare Error Paragraph let errorString = ""; const pElement = document.querySelector('p'); // This console.log creates Error console.log(a) function errorLog(event) { let msg = source = lineno = colno = error = time = ""; event.preventDefault(); msg = event.message; source = event.filename; lineno = event.lineno; colno = event.colno; error = event.error; time = event.time; errorString = `Script Error was Found< br > Message-: ${msg}< br >Source Info-: ${source} - >Source Info-: ${source} < br >Line No-: ${lineno}< br >Coloumn No-: ${colno}< br >Error Info-: ${error}< - >Time >Error Info-: ${error}< br >Time at which Error Occured-: ${time}ms after Page Load< br >< br >< br >< br >`; pElement.innerHTML = errorString; } </ script ></ body ></ html > |
Пример - МЕТОД 1
Метод 2: в этом методе мы будем использовать обработчик событий onerror.
- Шаг 1. Получите тег тела этой HTML-разметки, в зависимости от вашего случая, либо внешнюю HTML-разметку, либо разметку текущей загружаемой страницы.
- Шаг 2 - Теперь, когда у нас есть тег body в идентификаторе const, скажем, const bodyTag, мы добавим обработчик события onerror в bodyTag.
Javascript
const bodyTag = // body tag of External HTML // Markup or of your page bodyTag.onerror = errorLogger;function errorLogger(msg, url, lineNo, columnNo, error) { // Now process your Error // Information as you desire} |
Заметили ли вы разницу в функции регистратора двух вышеупомянутых методов? Обычно в случае срабатывания какого-либо события прикрепленная к нему функция получает объект события, но в этом случае (метод 2) мы получаем предварительно извлеченную информацию (для Подробная причина Обратитесь к MDN WebDocs).
Примечание. Помните о порядке получения информации об ошибках в регистраторе. Функция - Всего 5 информации - Последовательность всегда одинакова.
Найдите HTML-код (метод 2):
HTML
<!DOCTYPE html>< html lang = "en" >< head > < meta charset = "UTF-8" > < meta name = "viewport" content = "width=device-width, initial-scale=1.0" ></ head >< body onerror="errorLogger(message, source, lineno, colno, error)"> < p style="font-size:20px; color:rgb(219, 0, 0)"> </ p > < script > // You can directly set the onerror // Attribute or use below 2 lines // Get body tag of External HTML // Markup or of your current page const bodyTag = document.querySelector('body'); // bodyTag.onerror = errorLogger; let errorString = ""; const pElement = document.querySelector('p'); function errorLogger(msg, url, lineNo, colNo, error) { // Now process your Error Information // as you desire errorString += `Script Error was Found < br >Message-: ${msg}< br >URL-: ${url} < br >Line No-: ${lineNo}< br >Coloumn No-: ${colNo}< br >Error Info-: ${error}< - > >Error Info-: ${error}< br > < br >< br >< br >`; pElement.innerHTML += errorString; } </ script ></ body ></ html > |
Пример - МЕТОД 2
Метод 3: в этом методе мы прикрепим элемент сценария к веб-странице. Этот метод полезен в тех случаях, когда мы хотим, чтобы регистратор ошибок активировался в определенное время или в случаях выполнения внешнего скрипта и т. Д.
- Шаг 1. Получите основной тег страницы разметки, на которую вы нацеливаетесь.
- Шаг 2 - Подготовьте элемент скрипта и добавьте его.
Javascript
const htmlDOM = // Get the DOM of //the Target Markuplet errScr = htmlDOM.document .createElement( 'script' );errScr.type = 'text/javascript' ;errScr.innerText = `window.addEventListener( "error" , errorLog); function errorLog(event) { //process the event object}`;htmlDOM.document.querySelector ( 'body' ).append(errScr); |
Пример - МЕТОД 3
Объяснение примера - Метод 3: Как вы могли заметить, мы использовали iframe для доступа к index.html той же страницы (Same-Origin), мы поместили скрипт в parentPage для регистрации ошибок на другой веб-странице.
Предупреждение - хотя вы будете заблокированы, но остерегайтесь использования этих методов в случае ПЕРЕКРЕСТНОГО СКРИПТИРОВАНИЯ (CORS) (сценарии различного происхождения) без письменного разрешения владельца этой страницы.
Найдите HTML-код (метод 3):
HTML
<!DOCTYPE html>< html lang = "en" >< head > < meta charset = "UTF-8" > < meta name = "viewport" content = "width=device-width, initial-scale=1.0" ></ head >< body > < iframe src = "index.html" frameborder = "0" > </ iframe > < script > const htmlDOM = document .querySelector('iframe').contentDocument; let errScr = htmlDOM.createElement('script'); errScr.type = 'text/javascript'; errScr.innerText = `console.log("Script Loaded");window.addEventListener("error", errorLog);function errorLog(event){ console.log("Error can be Processed Now....Use the eventObject as used in method-1")}`; htmlDOM.querySelector('body').append(errScr); </ script ></ body ></ html > |
Важная заметка -
- Вы можете использовать как innerText, так и innerHTML для написания js-скрипта, но мы рекомендуем использовать innerText, поскольку присутствие любого HTML-объекта в скрипте может создать любую нежелательную ошибку.
- В способе 3 цель и способ ее получения могут отличаться в разных случаях. Таким образом, код, используемый при реализации этого метода, может немного отличаться, но подход останется прежним.