Freigeben über

Absturzanalysetool

  • Artikel

Verwenden Sie das Absturzanalysetool , um Abstürze Ihrer Web-App in der Produktion zu analysieren und schnell zu diagnostizieren. Im Tool "Absturzanalyse " können Sie eine JavaScript-Stapelüberwachung eingeben, die Sie in der Produktion gesammelt haben, und dann Ihre Quellzuordnungen anwenden, um die Stapelüberwachung zu entminieren, sodass Sie schneller debuggen können. Mit dem Absturzanalysetool können Sie eine minimierte JavaScript-Stapelüberwachung durchführen und schnell rückwärts arbeiten, um zu ermitteln, welche Codezeilen den Fehler verursacht haben.

Das Absturzanalysetool

Wenn eine Web-App abstürzt oder unerwartet hängt, kann dies zu Datenverlusten und einer schlechten Erfahrung für Ihre Benutzer führen. Das Sammeln von Informationen über die Abstürze, die Ihre Benutzer erleben, ist hilfreich, um die Grundursache der Abstürze zu diagnostizieren und zu beheben. Code, der in der Produktion ausgeführt wird, wird jedoch häufig minimiert, was dazu führt, dass die JavaScript-Stapelablaufverfolgungen, die bei Abstürzen protokolliert werden, ebenfalls minimiert werden. Mit dem Absturzanalysetool können Sie minimierte Stapelablaufverfolgungen, die in der Produktion gesammelt wurden, dem ursprünglichen Quellcode zuordnen, sodass Sie die Grundursache der Abstürze schnell identifizieren können.

Hier sehen Sie ein Beispiel für eine minimierte Stapelüberwachung, die Sie möglicherweise in Ihrer Web-App in der Produktion erfassen:

Uncaught Error: test error
    at https://microsoftedge.github.io/Demos/devtools-crash-analyzer/app/prod.bundle.js:1:1344
    at t.render (https://microsoftedge.github.io/Demos/devtools-crash-analyzer/app/prod.bundle.js:1:1368)
    at https://microsoftedge.github.io/Demos/devtools-crash-analyzer/app/prod.bundle.js:1:2278
    at Array.map (<anonymous>)
    at t.render (https://microsoftedge.github.io/Demos/devtools-crash-analyzer/app/prod.bundle.js:1:2252)
    at new t (https://microsoftedge.github.io/Demos/devtools-crash-analyzer/app/prod.bundle.js:1:2063)
    at https://microsoftedge.github.io/Demos/devtools-crash-analyzer/app/prod.bundle.js:1:2857
    at https://microsoftedge.github.io/Demos/devtools-crash-analyzer/app/prod.bundle.js:1:2896

Variablen- und Funktionsnamen werden häufig gekürzt, wie die oben genannte Variable t . Skript-URLs verweisen häufig auf eine erstellte einzeilige Bündeldatei, wie die prod.bundle.js datei oben.

Im Vergleich dazu sehen Sie hier ein Beispiel für eine nicht minimierte Stapelüberwachung mit ursprünglichen Variablen- und Funktionsnamen sowie ursprünglichen Quelldateinamen und Zeilennummern:

Uncaught Error: test error
    at shorten (util.ts:9:9)
    at processUIString (util.ts:2:10)
    at todoMarkupBuilder (todo.ts:35:41)
    at Todo.render (todo.ts:24:12)
    at app.ts:36:39
    at Array.map (<anonymous>)
    at App.render (app.ts:36:22)
    at new App (app.ts:29:10)
    at index.ts:9:13
    at index.ts:9:33

Es gibt zwei Schritte, um minimierte Produktionsstapelablaufverfolgungen im Absturzanalysetool zu analysieren:

  1. Zunächst sammeln Sie speziell formatierte Stapelablaufverfolgungen aus Ihrer Web-App in der Produktion.

    Es gibt viele Möglichkeiten, Stapelablaufverfolgungen von den Browsern zu sammeln, die Ihre Benutzer verwenden. Der Abschnitt Sammeln von Stapelablaufverfolgungen in der Produktion unten enthält Beispiele und Empfehlungen. Außerdem wird erläutert, wie die Stapelablaufverfolgungen so formatiert werden, dass sie im Absturzanalysetool analysiert werden können.

  2. Als Nächstes analysieren Sie die Stapelablaufverfolgungen im Absturzanalysetool .

    Im Abschnitt Analysieren von Stapelablaufverfolgungen im Absturzanalysetool unten wird erläutert, wie Sie zuerst Quellzuordnungen in DevTools zugänglich machen und dann das Absturzanalysetool verwenden, um die Stapelablaufverfolgungen zu analysieren.

Sammeln von Stapelablaufverfolgungen in der Produktion

Das Absturzanalysetool erfasst keine Stapelablaufverfolgungen für Sie. Sie müssen zunächst Stapelablaufverfolgungen aus Ihrer Web-App mithilfe der Tools und Dienste sammeln, die Ihnen zur Verfügung stehen. Hier sind einige Möglichkeiten zum Sammeln von Stapelablaufverfolgungen in der Produktion:

  • Es wird empfohlen, ein Telemetriesystem wie Azure Monitor Application Insights zu verwenden, das Informationen zu nicht behandelten Fehlern aus Ihrem JavaScript-Code erfassen kann.

  • Sie können auch JavaScript-Code schreiben, um nicht behandelte Fehler in Ihrer Web-App zu erfassen. Das folgende Beispiel zeigt, wie Sie den window.onerror Ereignishandler verwenden, um nicht behandelte Fehler in einer Web-App zu erfassen:

    window.onerror = function (message, source, line, column, error) {
  // Get the stack trace from the error object.
  const stackTrace = error.stack;

  // Send the stack trace to your telemetry system.
  // Code not shown.
};

Formatieren der Stapelablaufverfolgungen für das Absturzanalysetool

Das Sammeln von Stapelablaufverfolgungen in der Produktion reicht nicht aus. Das Absturzanalysetool benötigt Stapelablaufverfolgungen, um einen Abschnitt namens Quellmodule einzuschließen.

Hier sehen Sie ein Beispiel für eine Stapelablaufverfolgung, die den Abschnitt Quellmodule enthält:

Uncaught Error: test error
    at https://microsoftedge.github.io/Demos/devtools-crash-analyzer/app/prod.bundle.js:1:1344
    at t.render (https://microsoftedge.github.io/Demos/devtools-crash-analyzer/app/prod.bundle.js:1:1368)
    at https://microsoftedge.github.io/Demos/devtools-crash-analyzer/app/prod.bundle.js:1:2278
    at Array.map (<anonymous>)
    at t.render (https://microsoftedge.github.io/Demos/devtools-crash-analyzer/app/prod.bundle.js:1:2252)
    at new t (https://microsoftedge.github.io/Demos/devtools-crash-analyzer/app/prod.bundle.js:1:2063)
    at https://microsoftedge.github.io/Demos/devtools-crash-analyzer/app/prod.bundle.js:1:2857
    at https://microsoftedge.github.io/Demos/devtools-crash-analyzer/app/prod.bundle.js:1:2896

Source modules:
    https://microsoftedge.github.io/Demos/devtools-crash-analyzer/app/prod.bundle.js 8b544e37b35d920a39d0e10f70fddc29b25d0db362741f3071eff86cef8613e9

Der Abschnitt Quellmodule enthält die URLs der JavaScript-Dateien, die an der Stapelüberwachung beteiligt sind, sowie einen Hash des Inhalts jeder Datei. Der Hash ist eine 64-stellige Zeichenfolge von Hexadezimalzeichen, die dem SHA-256-Hash des ausgeführten Skripts entspricht. Dies ist ein Byte-for-Byte-Hash des Inhalts für jede JavaScript-Datei. Die URLs und Hashes ermöglichen es dem Absturzanalysetool , später die Quellzuordnungen abzurufen, die zum Aufheben der Stapelüberwachung verwendet wurden.

Verwenden Sie zum Hinzufügen des Abschnitts Quellmodule zu Ihren Fehlerstapelablaufverfolgungen die Edge DevTools Crash Analyzer Support-Bibliothek in Ihrer Web-App wie folgt:

  1. Fügen Sie die Edge DevTools Crash Analyzer Support-Bibliothek in Ihrem Projekt hinzu, indem Sie npm verwenden:

    npm install @microsoft/edge-devtools-crash-analyzer-support

  2. Importieren Sie die Bibliothek in Ihren JavaScript-Code, und rufen Sie dann die Funktion auf installErrorStackModuleAnnotations :

    import { installErrorStackModuleAnnotations } from '@microsoft/edge-devtools-crash-analyzer-support';

installErrorStackModuleAnnotations(Error);

Analysieren von Stapelablaufverfolgungen im Absturzanalysetool

Das Absturzanalysetool in DevTools entmindert die speziell formatierten Stapelablaufverfolgungen, die Sie von Benutzern in der Produktion gesammelt haben. Wenn Ihre Quellzuordnungen auch den ursprünglichen Quellcode enthalten, zeigt ihnen das Absturzanalysetool die ursprünglichen Dateinamen und Funktionsnamen an, aus denen die Stapelüberwachung besteht.

Barrierefreie Quellzuordnungen in DevTools

Das Absturzanalysetool verwendet die Informationen des Quellmoduls , die sich in der Stapelablaufverfolgung befinden, um die Quellzuordnungen abzurufen, die den Skriptdateien in der Stapelüberwachung entsprechen. Dies bedeutet, dass Sie zuerst Ihre Quellzuordnungen in DevTools zugänglich machen müssen.

Das Absturzanalysetool funktioniert am besten, wenn Ihre Quellzuordnungen mithilfe des Azure Artifacts-Symbolservers sicher gespeichert werden. Dies liegt daran, dass DevTools bei bedarfsgesteuert Quellzuordnungen vom Azure Artifacts-Symbolserver abrufen kann, wenn Sie Ihren Fehler analysieren. Weitere Informationen finden Sie unter Sicheres Debuggen von Originalcode durch Veröffentlichen von Quellzuordnungen auf dem Azure Artifacts-Symbolserver.

Wenn Sie azure Artifacts Symbol Server nicht verwenden, können Sie weiterhin das Absturzanalysetool verwenden, indem Sie sicherstellen, dass die Quellzuordnungen, die der Stapelüberwachung entsprechen, für DevTools zugänglich sind. Wenn Sie z. B. zuvor Quellzuordnungen mithilfe des //# sourceMappingURL= Kommentars geladen haben, speichert DevTools die Quellzuordnungen zur späteren Wiederverwendung zwischen. Weitere Informationen finden Sie unter Quellzuordnungen in DevTools unter Zuordnen des verarbeiteten Codes zu Ihrem ursprünglichen Quellcode zum Debuggen.

DevTools speichert keine Quellzuordnungen zwischen, wenn der Domänenname lautet localhost. Wenn Sie also nicht den Azure Artifacts-Symbolserver verwenden, funktioniert das Absturzanalysetool nur für Stapelüberwachungen, die aus Produktionsumgebungen und nicht aus lokalen Entwicklungsumgebungen gesammelt werden, die die localhost Domäne verwenden.

Öffnen des Absturzanalysetools

Das Absturzanalysetool ist ein Tool für die Schnellansicht. Standardmäßig wird sie im Bereich Schnellansicht geöffnet, sodass Sie es zusammen mit den anderen Tools verwenden können, die in der Aktivitätsleiste geöffnet sind.

Über das Menü "Weitere Tools"

So öffnen Sie das Absturzanalysetool über das DevTools-Menü Weitere Tools :

  1. Wählen Sie in Microsoft Edge Einstellungen und mehr (Edgesymbol> "Einstellungen und mehr") Weitere Tools>Entwicklertools öffnen (STRG+UMSCHALT+I (Windows, Linux) oder BEFEHL+WAHL+I (macOS)). DevTools wird geöffnet.

  2. Drücken Sie in DevTools ESC , um die Symbolleiste "Schnellansicht" unten zu öffnen (falls noch nicht geöffnet). Klicken Sie auf der Symbolleiste der Schnellansicht auf die Schaltfläche Weitere Tools (Symbol und wählen Sie dann Absturzanalyse aus.

Über das Befehlsmenü

So öffnen Sie das Absturzanalysetool über das Befehlsmenü:

  1. Wählen Sie in Microsoft Edge Einstellungen und mehr (Edgesymbol> "Einstellungen und mehr") Weitere Tools>Entwicklertools öffnen (STRG+UMSCHALT+I (Windows, Linux) oder BEFEHL+WAHL+I (macOS)). DevTools wird geöffnet.

  2. Klicken Sie in DevTools auf die Schaltfläche DevTools anpassen und steuern (Das Symbol und wählen Sie dann Befehl ausführen aus. Wenn DevTools den Fokus hat, drücken Sie STRG+UMSCHALT+P (Windows, Linux) oder BEFEHL+UMSCHALT+P (macOS). Das Befehlsmenü wird geöffnet.

  3. Beginnen Sie mit der Eingabe der Absturzanalyse, und wählen Sie dann den Befehl Absturzanalyse [Schnellansicht] anzeigen aus. Das Tool "Absturzanalyse" wird im Bereich "Schnellansicht " geöffnet.

Eingeben einer Stapelüberwachung im Absturzanalysetool

Wenn Sie das Absturzanalysetool testen möchten, aber keine Stapelüberwachung zu analysieren haben, führen Sie die folgenden Schritte aus, um eine Beispielstapelüberwachung zu erfassen:

  1. Öffnen Sie in Microsoft Edge die Demo des DevTools-Absturzanalysetools in einem neuen Fenster oder einer neuen Registerkarte.

  2. Klicken Sie zum Öffnen von DevTools mit der rechten Maustaste auf die Webseite, und wählen Sie dann Untersuchen aus. Oder drücken Sie STRG+UMSCHALT+I (Windows, Linux) oder BEFEHL+WAHL+I (macOS). DevTools wird geöffnet.

  3. Klicken Sie in DevTools auf der Aktivitätsleiste auf Konsole (Konsolensymbol). Das Konsolentool wird geöffnet.

  4. Wählen Sie die Fehlerstapelüberwachung aus, die im Konsolentool angezeigt wird, und kopieren Sie sie.

So verwenden Sie das Absturzanalysetool in DevTools:

  1. Öffnen Sie das Absturzanalysetool von DevTools, wie oben unter Öffnen des Absturzanalysetools beschrieben.

  2. Geben Sie ihre speziell formatierte Stapelüberwachung im linken Bereich des Absturzanalysetools ein:

    Das Absturzanalysetool mit der erweiterten Aufrufliste, die im linken Bereich eingefügt wurde

  3. Klicken Sie im Absturzanalysetool auf die Schaltfläche Analysieren (Das Symbol 'Analysieren'), oder drücken Sie STRG+EINGABETASTE.

    Im rechten Bereich werden die ursprünglichen Dateinamen und Funktionsnamen angezeigt, aus denen die Stapelüberwachung besteht:

    Verwenden des Absturzanalysetools zum Debuggen einer nicht schwerwiegenden JavaScript-Ausnahme

    Dadurch werden die Quellzuordnungen geladen, die den Quellmodulen entsprechen, und es wird versucht, alle Stapelframes zu entfernen, für die JavaScript- oder TypeScript-Quellinhalt in der Quellzuordnung enthalten war.

  4. Wenn der Quellcode in Ihren Quellzuordnungen für einen Frame verfügbar ist, klicken Sie auf den Frame, um den Quellcode anzuzeigen.

    Der ursprüngliche Quellcode wird im Tool Quellen angezeigt, und die betreffende Zeile ist hervorgehoben:

    Nicht minimierte Codedatei und Codezeile, auf die zugegriffen wird, indem Sie auf der Registerkarte

  5. Um die nicht minimierte Stapelüberwachung zu kopieren, klicken Sie auf der Symbolleiste der Registerkarte Absturzanalyse auf die Schaltfläche Nicht minimierte Stapelüberwachung kopieren (Symbol Nicht minimierte Stapelüberwachung kopieren). Dadurch wird die vollständige, nicht minimierte Stapelüberwachung als Stapelablaufverfolgung im herkömmlichen Stapelablaufverfolgungsformat erzeugt und in die Zwischenablage kopiert, mit Ausnahme von Informationen, die ihrem ursprünglichen Code entsprechen, einschließlich Funktionsnamen, Quelldateinamen sowie Zeilen- und Spaltennummern:

Uncaught Error: test error
    at shorten (webpack://devtools-crash-analyzer/src/util.ts:9:9)
    at processUIString (webpack://devtools-crash-analyzer/src/util.ts:2:10)
    at anonymous callback to [computed property].todos.map (webpack://devtools-crash-analyzer/src/app.ts:36:39)
    at Array.map (<anonymous>)
    at anonymous callback to [computed property].todos.map (webpack://devtools-crash-analyzer/src/app.ts:36:22)
    at constructor for App (webpack://devtools-crash-analyzer/src/app.ts:29:10)
    at [Global code: "webpack://devtools-crash-analyzer/src/index.ts"] (webpack://devtools-crash-analyzer/src/index.ts:9:13)
    at (anonymous function) (https://microsoftedge.github.io/Demos/devtools-crash-analyzer/app/prod.bundle.js:2:2897)

Features der Benutzeroberfläche

Das Absturzanalysetool verfügt über die folgenden Benutzeroberflächenfeatures:

Ui-Element Beschreibung
Linker Bereich Die zu analysierende Stapelüberwachung.
Rechter Bereich Zeigt die ursprünglichen Dateinamen und Funktionsnamen an, aus denen die Stapelüberwachung besteht.
Schaltfläche "Neue Analyse Erstellt einen neuen leeren linken Bereich, um eine neue Stapelüberwachung einzufügen.
Schaltfläche "Analysieren Erstellt eine neue Analyse im rechten Bereich basierend auf der Stapelüberwachung im linken Bereich.
Dropdownliste "Analysen Zeigt die Liste der Analysen an.
Schaltfläche "Diese Analyse entfernen Entfernt die vorliegende Analyse.
Schaltfläche "Nicht minimierte Stapelablaufverfolgung kopieren Erzeugt und kopiert die vollständige, nicht minimierte Stapelüberwachung als Stapelüberwachung im herkömmlichen Stapelablaufverfolgungsformat, mit Ausnahme von Informationen, die ihrem ursprünglichen Code entsprechen, einschließlich Funktionsnamen, Quelldateinamen sowie Zeilen- und Spaltennummern.
Schaltfläche "Symbolservereinstellungen öffnen Anzeigen oder Ändern der Einstellungen des Azure Artifacts-Symbolservers
Die Schaltfläche "Verwenden Öffnet den vorliegenden Artikel.

Feedback bereitstellen

Hinterlassen Sie Feedback im MicrosoftEdge-/ DevTools-Feedbackrepository, und teilen Sie uns mit, was gut funktioniert, was nicht und was Sie für solche Features wünschen.

Weitere Informationen

Externe Links: