2016-04-09 4 views
11

Ich habe ein Blog seit über 10 Jahren & Ich möchte ein Stück von Javascript auf, das kaputte Links fängt. Ich benutzte:Catching net :: ERR_NAME_NOT_RESOLVED für die Beseitigung von schlechten img Links

function trackError(e) { 
    var ie = window.event || {}; 
    var errMsg = e.message || ie.errorMessage || "404 error on " + window.location; 
    var errSrc = (e.filename || ie.errorUrl) + ': ' + (e.lineno || ie.errorLine); 
    mailme([errMsg, errSrc]); 
} 

// Triggering an error in the console: 
// You have to use something like setTimeout(function() { notThere(); }, 0); 
window.addEventListener('error', trackError, true); 

Aber das ist nicht den Fehler auf eine nützliche Weise zu fangen. Was war gebrochen, auf welcher Leitung usw.

Error loading an image

JSON.stringify der Fehlerobjekt Ergebnisse nur in "{"isTrusted":true}", die nutzlos ist. Mir ist in Chrome aufgefallen, dass es e.path gibt, aber nicht in Firefox. Gibt es einen Weg in Javascript, um nützliche Informationen über kaputte Bildlinks zu protokollieren oder muss ich Bugs in Browser-Engines ablegen?

+0

Wann/wo versuchen Sie die Informationen innerhalb der defekte Links abzurufen? Zum Beispiel, sind sie "" -Tags, oder machst du etwas Ajax? –

+0

img tag https://natalian.org/2004/09/29/london/ – hendry

Antwort

4

https://developer.mozilla.org/en/docs/Web/API/GlobalEventHandlers/onerror:

Wenn eine Ressource (wie ein <img> oder <script>) nicht geladen werden, wird ein Fehlerereignisschnittstelle Ereignis unter Verwendung am Element abgefeuert wird, die die Last eingeleitet wird, und die onerror () Handler auf dem Element wird aufgerufen. Diese Fehlerereignisse sprudeln nicht bis zum Fenster, aber (zumindest in Firefox) kann mit einem einzigen Capturing window.addEventListener behandelt werden.

(Hervorhebungen von mir.)

es einfach So könnte ein Problem sein, was für Firefox es sagt, es ist für Chrome nicht das gleiche.

+0

So funktioniert es nur in Firefox, aber nicht Chrome? – hendry

+0

Es klingt für mich so, als ob Firefox es auf diese Weise implementiert hätte, selbst wenn es der Spezifikation widerspricht (wenn diese Ereignisse nicht nach Spezifikation aufblähen, sollten Sie sie nicht im Fenster abfangen können.) – CBroe

+0

Der 'true' Parameter Die Übergabe an 'addEventListener' überschreibt die Ereignisausbreitung. Es bedeutet im Wesentlichen "erlaube nichts unter mir, dieses Ereignis zu erfassen." Siehe: [https: //developer.mozilla.org/en-US/docs/Web/API/Eventtarget/addEventListener] (https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener) –

7

Es funktioniert. Es wird nicht verhindern, dass der Fehler in Chrome in Ihrer Konsole angezeigt wird, aber es funktioniert. Belästigen Sie nicht die Tatsache, dass Sie immer noch den Fehler in Chrome sehen. Ihr Code wird ausgeführt und Sie können Ihre mailme Funktion schreiben und es wird ausgeführt. Ich verwendete die folgenden Test:

index.html

<html> 
<head> 
    <script src="./app.js"></script> 
</head> 
<body> 
    <img src="http://pictures.natalian.org/screenies/2004/sep/29/13:23:00/"> 
</body> 
</html> 

app.js

var mailme = function() { 
    console.log('Caught!'); 
} 

window.addEventListener('error', function(e) { 
    var ie = window.event || {}; 
    var errMsg = e.message || ie.errorMessage || "404 error on " + window.location; 
    var errSrc = (e.filename || ie.errorUrl) + ': ' + (e.lineno || ie.errorLine); 
    mailme([errMsg, errSrc]); 
}, true); 

Ausgang (Chrom)

Ausgang (Firefox)

+2

Entscheidend ist, dass in beiden Browsern nichts über den Fehler angezeigt wird. Das ist wirklich das Problem, denke ich. – hendry

+1

Eigentlich habe ich es in Chrome getestet (von 'console.log (Argumente)') und das Fehlerereignis enthält nicht nur den Fehlercode, sondern auch den Pfad zu dem Element, das den Fehler verursacht hat und die URL, die es verursacht hat. –

+0

Ist es möglich, dass die anfängliche Anforderung des Inhalts vom Server wegen fehlendem Zugriff vor dem ersten Handshake abgelehnt wird? Sie könnten versuchen, Ihrer web.config Standort-Tags hinzuzufügen, um allen Benutzern ein bestimmtes Verzeichnis wie ~/Content/images zu ermöglichen. –

Verwandte Themen