JavaScript global d'erreur de manipulation

Est-ce à vous aider à:

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

xxx();
</script>

Je ne suis pas sûr de savoir comment il gère le Flash erreurs si...

Mise à jour: il ne fonctionne pas à l'Opéra, mais je suis piratage Libellule droit maintenant, pour voir ce qu'il devient. Des suggestions à propos du piratage Libellule est venu de cette question:

Imiter La Fenêtre. onerror à l'Opéra, à l'aide de javascript

sophistiqué de gestion des erreurs

Si votre erreur de manipulation est très sophistiqué et, par conséquent, pourrait jeter une erreur elle-même, il est utile d'ajouter un drapeau indiquant si vous êtes déjà dans "errorHandling-Mode". Comme:

var appIsHandlingError = false;

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

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

Sinon, vous pourriez vous retrouver dans une boucle infinie.

Il semble que window.onerror ne donnent pas accès à toutes les erreurs possibles. Plus précisément, il ignore:

1. <img> les erreurs de chargement (réponse >= 400).
2. <script> les erreurs de chargement (réponse >= 400).
3. mondial des erreurs si vous avez beaucoup d'autres bibliothèques de votre application en manipulant window.onerror dans une manière inconnue (jquery, angular, etc.).
4. probablement de nombreux cas, je n'ai pas couru après l'exploration de cette maintenant (les iframes, de débordement de pile, etc.).

C'est là le début d'un script qui attire un grand nombre de ces erreurs, de sorte que vous pouvez ajouter plus robuste le débogage de votre application en cours de développement.

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

Il peut être utilisé comme ceci:

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

Le scénario complet a un défaut de mise en œuvre qui tente d'imprimer un semi-lisible "affichage" de la version de l'entité ou de l'erreur qu'il reçoit. Peut être utilisé pour trouver l'inspiration pour une application spécifique gestionnaire d'erreur. L'implémentation par défaut de conserve également une référence à la dernière 100 erreur entités, de sorte que vous pouvez les contrôler dans la console web, après qu'ils se produisent comme:

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

Remarque: Cela fonctionne en remplacement des méthodes sur plusieurs navigateur/native des constructeurs. Cela peut avoir des effets secondaires imprévus. Toutefois, il a été utile d'utiliser au cours du développement, de comprendre d'où des erreurs sont survenues, à envoyer des journaux à des services comme l'NewRelic ou Sentinelle au cours du développement afin que nous puissions mesurer les erreurs en cours de développement, et sur la mise en scène afin que nous puissions debug de ce qui se passe à un niveau plus profond. Il peut alors être désactivée lors de la production.

Espère que cette aide.

L'on doit préserver l'associé précédemment onerror de rappel ainsi

<script type="text/javascript">
(function() {
var errorCallback = window.onerror;
window.onerror = function () {
//handle error condition
errorCallback && errorCallback.apply(this, arguments);
};
})();
</script>

Si vous voulez méthode unifiée pour gérer à la fois les erreurs non interceptées et non gérée promesse de refus, vous pouvez avoir un coup d'oeil sur non interceptée bibliothèque.

MODIFIER

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

Il est à l'écoute de la fenêtre.unhandledrejection en plus de la fenêtre.onerror.