Глобальная обработка ошибок JavaScript

Я хотел бы поймать каждую неопределенную ошибку функции. Есть ли глобальный механизм обработки ошибок в JavaScript? Прецедент-это перехват вызовов функций из flash, которые не определены.

10 ответов


помогает ли это вам:

<script type="text/javascript">
window.onerror = function() {
    alert("Error caught");
};

xxx();
</script>

Я не уверен, как он обрабатывает ошибки Flash...

Update: он не работает в Opera, но я взламываю Dragonfly прямо сейчас, чтобы увидеть, что он получает. Предложение о взломе Dragonfly пришло из этого вопроса:

Окне Мнемосхемы. onerror в Opera с использованием javascript


как поймать необработанные ошибки Javascript

присвоить window.onerror событие для обработчика событий, например:

<script type="text/javascript">
window.onerror = function(msg, url, line, col, error) {
   // Note that col & error are new to the HTML 5 spec and may not be 
   // supported in every browser.  It worked for me in Chrome.
   var extra = !col ? '' : '\ncolumn: ' + col;
   extra += !error ? '' : '\nerror: ' + error;

   // You can view the information in an alert to see things working like this:
   alert("Error: " + msg + "\nurl: " + url + "\nline: " + line + extra);

   // TODO: Report this error via ajax so you can keep track
   //       of what pages have JS issues

   var suppressErrorAlert = true;
   // If you return true, then error alerts (like in older versions of 
   // Internet Explorer) will be suppressed.
   return suppressErrorAlert;
};
</script>

как прокомментировал в коде, если возвращаемое значение window.onerror и true затем браузер должен подавить отображение диалогового окна предупреждения.

когда в окне.метод onerror события?

в двух словах, событие возникает, когда либо 1.) есть непойманное исключение или 2.) происходит ошибка времени компиляции.

непойманные исключения

  • бросить "некоторые сообщения"
  • call_something_undefined ();
  • cross_origin_iframe.contentWindow.document;, исключение безопасности

ошибка компиляции

  • <script>{</script>
  • <script>for(;)</script>
  • <script>"oops</script>
  • setTimeout("{", 10);, он попытается скомпилировать первый аргумент как сценарий

окно поддержки браузеров.метод onerror

  • Chrome 13+
  • Firefox 6.0+
  • Internet Explorer 5.5+
  • Опера 11.60+
  • Safari 5.1+

скриншоты:

пример кода onerror выше в действии после добавления этого в тест страница:

<script type="text/javascript">
call_something_undefined();
</script>

Javascript alert showing error information detailed by the window.onerror event

JSFiddle:

https://jsfiddle.net/nzfvm44d/

ссылки:


сложная обработка ошибок

Если ваша обработка ошибок очень сложна и поэтому может вызвать ошибку, полезно добавить флаг, указывающий, находитесь ли вы уже в режиме "errorHandling". Вот так:

var appIsHandlingError = false;

window.onerror = function() {
    if (!appIsHandlingError) {
        appIsHandlingError = true;
        handleError();
    }
};

function handleError() {
    // graceful error handling
    // if successful: appIsHandlingError = false;
}

В противном случае вы можете оказаться в бесконечном цикле.


попробовать Atatus который обеспечивает расширенное отслеживание ошибок и реальный мониторинг пользователей для современных веб-приложений.

https://www.atatus.com/

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

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

современные Chrome и Opera полностью поддерживают спецификацию проекта HTML 5 для ErrorEvent и window.onerror. В обоих браузерах вы может либо использовать window.onerror, или привязать к событию 'ошибка' правильно:

// Only Chrome & Opera pass the error object.
window.onerror = function (message, file, line, col, error) {
    console.log(message, "from", error.stack);
    // You can send data to your server
    // sendError(data);
};
// Only Chrome & Opera have an error attribute on the event.
window.addEventListener("error", function (e) {
    console.log(e.error.message, "from", e.error.stack);
    // You can send data to your server
    // sendError(data);
})

к сожалению Firefox, Safari и IE все еще вокруг, и мы должны поддерживать их тоже. Поскольку stacktrace недоступен в window.onerror мы должны сделать немного больше работы.

оказывается, единственное, что мы можем сделать, чтобы получить stacktraces от ошибок, это обернуть весь наш код в try{ }catch(e){ } блок, а затем посмотреть e.stack. Мы можем сделать процесс несколько проще с помощью функции под названием пленка, которая принимает функцию и возвращает новую функцию с хорошей обработкой ошибок.

function wrap(func) {
    // Ensure we only wrap the function once.
    if (!func._wrapped) {
        func._wrapped = function () {
            try{
                func.apply(this, arguments);
            } catch(e) {
                console.log(e.message, "from", e.stack);
                // You can send data to your server
                // sendError(data);
                throw e;
            }
        }
    }
    return func._wrapped;
};

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

путем изменения глобального определения addEventListener так что он автоматически обертывает обратный вызов, который мы можем автоматически вставить try{ }catch(e){ } вокруг самого кода. Это позволяет существующему коду продолжать работать, но добавляет высокое качество отслеживание исключений.

var addEventListener = window.EventTarget.prototype.addEventListener;
window.EventTarget.prototype.addEventListener = function (event, callback, bubble) {
    addEventListener.call(this, event, wrap(callback), bubble);
}

мы также должны убедиться, что removeEventListener продолжает работать. На данный момент это не будет, потому что аргумент addEventListener изменяется. Опять же, нам нужно только исправить это на


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

  1. <img> ошибки загрузки (ответ >= 400).
  2. <script> ошибки загрузки (ответ >= 400).
  3. глобальные ошибки, если у вас есть много других библиотек в свое приложение и манипулирования window.onerror неизвестным способом (jquery, angular и т. д.).
  4. вероятно, многие случаи, с которыми я не сталкивался после изучения этого сейчас (iframes, Stack overflow, так далее.).

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

(function(){

/**
 * Capture error data for debugging in web console.
 */

var captures = [];

/**
 * Wait until `window.onload`, so any external scripts
 * you might load have a chance to set their own error handlers,
 * which we don't want to override.
 */

window.addEventListener('load', onload);

/**
 * Custom global function to standardize 
 * window.onerror so it works like you'd think.
 *
 * @see http://www.quirksmode.org/dom/events/error.html
 */

window.onanyerror = window.onanyerror || onanyerrorx;

/**
 * Hook up all error handlers after window loads.
 */

function onload() {
  handleGlobal();
  handleXMLHttp();
  handleImage();
  handleScript();
  handleEvents();
}

/**
 * Handle global window events.
 */

function handleGlobal() {
  var onerrorx = window.onerror;
  window.addEventListener('error', onerror);

  function onerror(msg, url, line, col, error) {
    window.onanyerror.apply(this, arguments);
    if (onerrorx) return onerrorx.apply(null, arguments);
  }
}

/**
 * Handle ajax request errors.
 */

function handleXMLHttp() {
  var sendx = XMLHttpRequest.prototype.send;
  window.XMLHttpRequest.prototype.send = function(){
    handleAsync(this);
    return sendx.apply(this, arguments);
  };
}

/**
 * Handle image errors.
 */

function handleImage() {
  var ImageOriginal = window.Image;
  window.Image = ImageOverride;

  /**
   * New `Image` constructor. Might cause some problems,
   * but not sure yet. This is at least a start, and works on chrome.
   */

  function ImageOverride() {
    var img = new ImageOriginal;
    onnext(function(){ handleAsync(img); });
    return img;
  }
}

/**
 * Handle script errors.
 */

function handleScript() {
  var HTMLScriptElementOriginal = window.HTMLScriptElement;
  window.HTMLScriptElement = HTMLScriptElementOverride;

  /**
   * New `HTMLScriptElement` constructor.
   *
   * Allows us to globally override onload.
   * Not ideal to override stuff, but it helps with debugging.
   */

  function HTMLScriptElementOverride() {
    var script = new HTMLScriptElement;
    onnext(function(){ handleAsync(script); });
    return script;
  }
}

/**
 * Handle errors in events.
 *
 * @see http://stackoverflow.com/questions/951791/javascript-global-error-handling/31750604#31750604
 */

function handleEvents() {
  var addEventListenerx = window.EventTarget.prototype.addEventListener;
  window.EventTarget.prototype.addEventListener = addEventListener;
  var removeEventListenerx = window.EventTarget.prototype.removeEventListener;
  window.EventTarget.prototype.removeEventListener = removeEventListener;

  function addEventListener(event, handler, bubble) {
    var handlerx = wrap(handler);
    return addEventListenerx.call(this, event, handlerx, bubble);
  }

  function removeEventListener(event, handler, bubble) {
    handler = handler._witherror || handler;
    removeEventListenerx.call(this, event, handler, bubble);
  }

  function wrap(fn) {
    fn._witherror = witherror;

    function witherror() {
      try {
        fn.apply(this, arguments);
      } catch(e) {
        window.onanyerror.apply(this, e);
        throw e;
      }
    }
    return fn;
  }
}

/**
 * Handle image/ajax request errors generically.
 */

function handleAsync(obj) {
  var onerrorx = obj.onerror;
  obj.onerror = onerror;
  var onabortx = obj.onabort;
  obj.onabort = onabort;
  var onloadx = obj.onload;
  obj.onload = onload;

  /**
   * Handle `onerror`.
   */

  function onerror(error) {
    window.onanyerror.call(this, error);
    if (onerrorx) return onerrorx.apply(this, arguments);
  };

  /**
   * Handle `onabort`.
   */

  function onabort(error) {
    window.onanyerror.call(this, error);
    if (onabortx) return onabortx.apply(this, arguments);
  };

  /**
   * Handle `onload`.
   *
   * For images, you can get a 403 response error,
   * but this isn't triggered as a global on error.
   * This sort of standardizes it.
   *
   * "there is no way to get the HTTP status from a 
   * request made by an img tag in JavaScript."
   * @see http://stackoverflow.com/questions/8108636/how-to-get-http-status-code-of-img-tags/8108646#8108646
   */

  function onload(request) {
    if (request.status && request.status >= 400) {
      window.onanyerror.call(this, request);
    }
    if (onloadx) return onloadx.apply(this, arguments);
  }
}

/**
 * Generic error handler.
 *
 * This shows the basic implementation, 
 * which you could override in your app.
 */

function onanyerrorx(entity) {
  var display = entity;

  // ajax request
  if (entity instanceof XMLHttpRequest) {
    // 400: http://example.com/image.png
    display = entity.status + ' ' + entity.responseURL;
  } else if (entity instanceof Event) {
    // global window events, or image events
    var target = entity.currentTarget;
    display = target;
  } else {
    // not sure if there are others
  }

  capture(entity);
  console.log('[onanyerror]', display, entity);
}

/**
 * Capture stuff for debugging purposes.
 *
 * Keep them in memory so you can reference them
 * in the chrome debugger as `onanyerror0` up to `onanyerror99`.
 */

function capture(entity) {
  captures.push(entity);
  if (captures.length > 100) captures.unshift();

  // keep the last ones around
  var i = captures.length;
  while (--i) {
    var x = captures[i];
    window['onanyerror' + i] = x;
  }
}

/**
 * Wait til next code execution cycle as fast as possible.
 */

function onnext(fn) {
  setTimeout(fn, 0);
}

})();

его можно использовать следующим образом:

window.onanyerror = function(entity){
  console.log('some error', entity);
};

полный сценарий имеет реализацию по умолчанию, которая пытается распечатать полу-читаемый "дисплей" версии объекта/ошибки, которые он получает. Может использоваться для вдохновения для обработчика ошибок конкретного приложения. Реализация по умолчанию также сохраняет ссылка на последние 100 объектов ошибок, поэтому вы можете проверить их в веб-консоли после их возникновения, например:

window.onanyerror0
window.onanyerror1
...
window.onanyerror99

Примечание: это работает путем переопределения методов на нескольких браузерах / собственных конструкторах. Это может иметь непредвиденные побочные эффекты. Тем не менее, было полезно использовать во время разработки, чтобы выяснить, где происходят ошибки, отправлять журналы в службы, такие как NewRelic или Sentry во время разработки, чтобы мы могли измерять ошибки во время разработки, и на этапе, чтобы мы могли отлаживать то, что происходит на более глубоком уровне. Затем его можно отключить в процессе производства.

надеюсь, что это помогает.


// display error messages for a page, but never more than 3 errors
window.onerror = function(msg, url, line) {
if (onerror.num++ < onerror.max) {
alert("ERROR: " + msg + "\n" + url + ":" + line);
return true;
}
}
onerror.max = 3;
onerror.num = 0;

следует также сохранить ранее связанный обратный вызов onerror

<script type="text/javascript">

(function() {
    var errorCallback = window.onerror;
    window.onerror = function () {
        // handle error condition
        errorCallback && errorCallback.apply(this, arguments);
    };
})();

</script>

Я бы рекомендовал дать Trackjs попробовать.

Это Регистрация ошибок в качестве службы.

Это удивительно просто настроить. Просто добавьте одну строку

есть и другие услуги, такие как постовой (который является открытым исходным кодом, если вы можете разместить свой собственный сервер), но он не делает то, что делает Trackjs. Trackjs записывает пользователя взаимодействие между их браузером и вашим веб-сервером, чтобы вы могли отслеживать шаги пользователя, которые привели к ошибке, в отличие от ссылки на номер файла и строки (и, возможно, трассировки стека).


Если вы хотите унифицированный способ обработки как необработанных ошибок, так и необработанных отклонений обещаний, вы можете посмотреть на непойманные библиотека.

редактировать

<script type="text/javascript" src=".../uncaught/lib/index.js"></script>

<script type="text/javascript">
    uncaught.start();
    uncaught.addListener(function (error) {
        console.log('Uncaught error or rejection: ', error.message);
    });
</script>

Он слушает окно.unhandledrejection В дополнение к окну.метод onerror.


вы слушаете событие onerror, назначая функцию window.метод onerror:

 window.onerror = function (msg, url, lineNo, columnNo, error) {
        var string = msg.toLowerCase();
        var substring = "script error";
        if (string.indexOf(substring) > -1){
            alert('Script Error: See Browser Console for Detail');
        } else {
            alert(msg, url, lineNo, columnNo, error);
        }   
      return false; 
  };