как поймать необработанные ошибки 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 затем браузер должен подавить отображение диалогового окна предупреждения.

когда в окне.о каком событии идет речь?

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

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

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

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

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

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

• Chrome 13+
• Firefox 6.0+
• Internet Explorer 5.5+
• Opera 11.60+
• Safari 5.1+

скриншоты:

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

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

JSFiddle:

https://jsfiddle.net/nzfvm44d/

ссылки:

• Mozilla Developer Network:: window.onerror
• MSDN:: обработка и предотвращение ошибок веб-страницы Часть 2: ошибки во время выполнения
• назад к основам-JavaScript onerror Event
• DEV.Опера :: лучше обработка ошибок с помощью окна.onerror
• окно onError событие
• использование события onerror для подавления ошибок JavaScript
• так :: окна.onerror не стреляет в Firefox

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

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

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

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

EDIT

<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; 
  };