Da Daten das Wichtigste sind, sammeln, analysieren und klassifizieren wir Daten 10 JavaScript-Fehler wichtiger. Dies gibt Benutzern einen guten Überblick anstelle eines großen, überwältigenden Speicherauszugs, wie Sie ihn in einer Protokolldatei sehen würden.
Wir konzentrieren uns auf die Fehler, die Sie und Ihre Benutzer am wahrscheinlichsten betreffen. Dazu klassifizieren wir die Fehler nach der Anzahl der Projekte, bei denen sie in verschiedenen Unternehmen auftreten. Wenn wir nur die Gesamtzahl der Fehler betrachten, können Kunden mit hohem Volumen den Datensatz mit Fehlern überfüllen, die für die meisten Leser nicht relevant sind.
Hier sind die Top 10 JavaScript-Fehler
Jeder Fehler wurde gekürzt, um das Lesen zu erleichtern. Lassen Sie uns in jeden von ihnen eintauchen, um herauszufinden, was ihn verursachen kann und wie er vermieden werden kann.
Nicht erkannter Fehlertyp: Eigenschaft kann nicht gelesen werden
Wenn Sie ein JavaScript-Entwickler sind, haben Sie diesen Fehler wahrscheinlich häufiger gesehen, als Sie zugeben möchten. Dies geschieht in Chrome, wenn Sie eine Eigenschaft lesen oder eine Methode für ein undefiniertes Objekt aufrufen. Sie können es sehr einfach in der Chrome-Entwicklungskonsole testen.
Dies kann aus vielen Gründen auftreten, häufig tritt jedoch eine falsche Statusinitialisierung beim Rendern von UI-Komponenten auf.
TypeError: 'undefined' ist kein Objekt
Dies ist ein Fehler, der in Safari auftritt, wenn Sie eine Eigenschaft lesen oder eine Methode für ein undefiniertes Objekt aufrufen. Sie können es sehr einfach in der Safari-Entwicklungskonsole testen. Dies ist im Wesentlichen der gleiche Fehler wie der vorherige für Chrome, Safari verwendet jedoch eine andere Fehlermeldung.
FEHLERTYP: null ist kein Objekt
Dies ist ein Fehler, der in Safari auftritt, wenn Sie eine Eigenschaft lesen oder eine Methode für ein Nullobjekt aufrufen. Sie können es sehr einfach in der Safari-Entwicklungskonsole testen.
Interessanterweise sind in JavaScript null und undefined nicht identisch, weshalb zwei verschiedene Fehlermeldungen angezeigt werden. Undefiniert ist im Allgemeinen eine Variable, die nicht zugewiesen wurde, während null bedeutet, dass der Wert leer ist.
Ein Weg, wie dieser Fehler in einem Beispiel aus der Praxis auftreten kann, besteht darin, dass Sie versuchen, ein DOM-Element in Ihrem JavaScript zu verwenden, bevor das Element geladen wird. Dies liegt daran, dass die DOM-API für leere Objektreferenzen null zurückgibt.
Jeder JS-Code, der ausgeführt wird und sich mit DOM-Elementen befasst, muss ausgeführt werden, nachdem die DOM-Elemente erstellt wurden. Der JS-Code wird wie im HTML angegeben von oben nach unten interpretiert. Wenn sich also vor den DOM-Elementen ein Tag befindet, wird der JS-Code im Skript-Tag ausgeführt, wenn der Browser die HTML-Seite analysiert. Diese Fehlermeldung wird angezeigt, wenn die DOM-Elemente vor dem Laden des Skripts nicht erstellt wurden.
(unbekannt): Skriptfehler
Der Skriptfehler tritt auf, wenn ein nicht erkannter JavaScript-Fehler unter Verstoß gegen die Ursprungsrichtlinie die Domänengrenzen überschreitet. Wenn Sie beispielsweise Ihren JavaScript-Code auf einem CDN hosten, werden alle nicht erkannten Fehler (Fehler, die zum Fehlerbehandler aufsteigen) window.onerror, anstatt darin gefangen zu sein try-catch) Es wird einfach als "Skriptfehler" gemeldet, anstatt nützliche Informationen zu enthalten. Dies ist eine Browsersicherheitsmaßnahme, mit der verhindert werden soll, dass Daten durch Domänen übertragen werden, die sonst nicht kommunizieren könnten.
TypeError: Objekt unterstützt keine Eigenschaft
Dies ist ein Fehler, der im IE auftritt, wenn eine undefinierte Methode aufgerufen wird. Sie können es in der IE Developer Console testen.
Dies entspricht dem Fehler "TypeError: 'undefined' ist keine Funktion" in Chrome. Ja, verschiedene Browser können unterschiedliche Fehlermeldungen für denselben logischen Fehler haben.
Dies ist ein häufiges Problem für IE in Webanwendungen, die JavaScript-Namensabstände verwenden. Wenn dies der Fall ist, besteht das Problem von 99.9% darin, dass der IE nicht in der Lage ist, Methoden innerhalb des aktuellen Namespace mit diesem Schlüsselwort zu binden. Zum Beispiel, wenn Sie den JS Rollbar-Namespace mit isAwesome haben.
TypeError: 'undefined' ist keine Funktion
Dies ist ein Fehler, der in Chrome auftritt, wenn eine undefinierte Funktion aufgerufen wird. Sie können es in der Chrome-Entwicklungskonsole und der Mozilla Firefox-Entwicklungskonsole testen.
Da JavaScript-Codierungstechniken und Entwurfsmuster im Laufe der Jahre immer ausgefeilter wurden, hat die Verbreitung von selbstreferenzierenden Bereichen innerhalb von Rückrufen und Schließungen entsprechend zugenommen, was eine ziemlich häufige Ursache für diese oder jene Verwirrung ist.
Nicht gefangener RangeError
Dies ist ein Fehler, der in Chrome unter verschiedenen Umständen auftritt. Eine ist, wenn eine rekursive Funktion aufgerufen wird, die nicht beendet wird. Sie können es in der Chrome-Entwicklungskonsole testen.
Dies kann auch auftreten, wenn ein Wert an eine Funktion übergeben wird, die außerhalb des Bereichs liegt. Viele Funktionen akzeptieren nur einen bestimmten Zahlenbereich für ihre Eingabewerte. Zum Beispiel, Number.toExponential (Ziffern) y Number.toFixed (Ziffern) Akzeptieren Sie Ziffern von 0 bis 100 und Number.toPrecision (Ziffern) Akzeptieren Sie Ziffern von 1 bis 100.
TypeError: Eigenschaft 'Länge' kann nicht gelesen werden
Dies ist ein Fehler, der in Chrome aufgrund der Leselängeneigenschaft einer undefinierten Variablen auftritt. Sie können es in der Chrome-Entwicklungskonsole testen.
Normalerweise befindet sich die definierte Länge in einem Array. Dieser Fehler kann jedoch auftreten, wenn das Array nicht initialisiert ist oder wenn der Variablenname in einem anderen Kontext ausgeblendet ist. Lassen Sie uns diesen Fehler anhand des folgenden Beispiels verstehen.
Nicht erfasster TypeError: Eigenschaft kann nicht festgelegt werden
Wenn wir versuchen, auf eine undefinierte Variable zuzugreifen, wird immer undefiniert zurückgegeben, und wir können keine Eigenschaft von undefiniert abrufen oder festlegen. In diesem Fall gibt eine Anwendung "Uncaught TypeError kann die Eigenschaft undefined nicht festlegen" aus.
ReferenceError: Ereignis ist nicht definiert
Dieser Fehler tritt auf, wenn versucht wird, auf eine Variable zuzugreifen, die nicht definiert ist oder außerhalb des aktuellen Bereichs liegt. Sie können es sehr einfach im Chrome-Browser testen.
Wenn bei Verwendung des Ereignisbehandlungssystems dieser Fehler auftritt, müssen Sie das als Parameter übergebene Ereignisobjekt verwenden. Ältere Browser wie IE bieten ein globales Variablenereignis an, und Chrome hängt die Ereignisvariable automatisch an den Handler an. Firefox fügt es nicht automatisch hinzu. Bibliotheken wie jQuery versuchen, dieses Verhalten zu normalisieren. Es wird jedoch empfohlen, die an die Ereignishandlerfunktion übergebene Funktion zu verwenden.
Fazit
Es stellt sich heraus, dass viele davon null oder undefinierte Fehler sind. Ein gutes statisches Typprüfsystem wie Typoskript Es kann Ihnen helfen, sie zu vermeiden, wenn Sie die strikte Compileroption verwenden. Es kann Sie warnen, wenn ein Typ erwartet, aber nicht definiert wird. Auch ohne Typoskript, Es ist nützlich, Schutzklauseln zu verwenden, um zu überprüfen, ob Objekte undefiniert sind, bevor Sie sie verwenden.
Wir hoffen, dass Sie etwas Neues gelernt haben und Fehler in Zukunft vermeiden können oder dass dieser Leitfaden Ihnen bei der Lösung eines Kopfkratzers geholfen hat. Selbst mit Best Practices treten jedoch unerwartete Fehler in der Produktion auf. Es ist wichtig, die Fehler, die Benutzer betreffen, sichtbar zu machen und über gute Tools zu verfügen, um sie schnell zu beheben.
