Mit New Relic Session Replay Frontend-Probleme in Echtzeit debuggen

Das Diagnostizieren von Fehlern im Frontend hat Ähnlichkeiten mit einem Logikrätsel: Jeder Mausklick, jede Benutzerinteraktion kann einen wichtigen Hinweis geben. Wäre es nicht toll, wenn Sie Ihre Detektivarbeit ganz immersiv durchführen könnten? Vorhang auf für New Relic Session Replay, das Tool, das Sie direkt in die User Experience versetzt und Ihnen erlaubt, Probleme in Echtzeit zu beobachten und zu sezieren. Es ist weit mehr als nur ein Debugging-Tool: Jetzt können Sie sich die User Journey aus der ersten Reihe ansehen. So kann das Tool beim Frontend-Troubleshooting zu Ihrem wichtigsten Verbündeten werden. 

Dieser Blogpost befasst sich mit folgenden Themen:

• Was ist Session Replay?
• Session Replay einrichten
• Benutzersitzungen ansehen
• Frontend-Probleme finden und beheben

Gute Gründe für Session Replay

Um ein Problem effektiv zu diagnostizieren und die User Experience zu optimieren, kommt es auf die richtige Perspektive an. Herkömmliche Debugging-Tools bieten Metriken, Logs und Datendiagramme. Das ist alles sehr wichtig, aber wir erhalten damit nur einen sehr groben Überblick. Manchmal ist es notwendig, sich einen Vorgang direkt aus der Nähe und Schritt für Schritt anzusehen, um herauszufinden, was schiefläuft.

Visueller Kontext 

Zahlen und Logs verschaffen uns begrenzte Einblicke. Session Replay liefert den nötigen visuellen Kontext dazu. Wenn wir die Benutzerinteraktion in Echtzeit mitverfolgen, sehen wir auch, wo jemand bei der Eingabe zögert oder auf eine Reaktion warten muss und wo das Nutzungserlebnis durch Fehler in der App gestört wird. Dieses direkte, visuelle Feedback kann uns oft mehr sagen, als wenn wir stapelweise Logs durchforsten.

Benutzerorientiertes Debugging

Session Replay hilft Entwickler:innen, vom systemzentrischen Debugging zum benutzerorientierten Troubleshooting überzugehen. Damit sind sie näher an der User Experience und können dafür sorgen, dass die von ihnen entwickelten Apps nicht nur einwandfrei funktionieren, sondern auch angenehm zu benutzen sind.

Schnellere Problemlösung

Jede Sekunde zählt beim Debugging. Durch die Wiedergabe der Benutzersitzungen lassen sich Probleme rasch identifizieren und reproduzieren, was die Fehlerbehebung beschleunigt. Kein Hin und Her mehr mit QA-Teams, Schluss mit vagem Benutzerfeedback als einzigem Anhaltspunkt. Sie sehen das Problem direkt aus der Benutzerperspektive und können es sogleich angehen.

Umfassende Einblicke

Session Replay zeigt nicht nur die Probleme auf, es liefert auch Einblicke in das Benutzerverhalten. Und das wiederum kann zu einer proaktiveren Problembehandlung und sogar zu generellen Verbesserungen am UI-/UX-Design führen. Die Benutzer:innen werden es Ihnen danken.

New Relic Session Replay ist also nicht nur ein weiteres Debugging-Tool. Es gibt Ihnen die Möglichkeit, Frontend-Probleme ganz anders anzugehen. Kundenzentrierter. Ganzheitlicher. Und das wiederum führt zu effektiven Lösungen, die mit den Benutzer:innen im Fokus entwickelt werden.

Session Replay einrichten

Um Ihre Anwendung mit Session Replay zu debuggen, müssen Sie das Tool zunächst einrichten.

1. Instrumentieren Sie als Erstes Ihre Anwendung mit dem New Relic Browser-Agent. Dieser Agent erfasst wichtige Frontend-Daten, die von Session Replay benötigt werden.
2. Gehen Sie dann zu New Relic und klicken Sie im seitlichen Menü auf Browser. Hier finden Sie die Liste Ihrer instrumentierten Anwendungen. Wählen Sie die Anwendung aus, für die Sie Session Replay einrichten möchten.
3. Klicken Sie auf Application settings und vergewissern Sie sich, dass unter Browser settings die Option Session tracking aktiviert ist. Dieses Feature versieht Ihre Browserdaten mit wertvollen Sitzungsattributen. Prüfen Sie auch, ob die Option Session replay darunter aktiviert ist, damit New Relic Benutzersitzungen aufzeichnen und wiedergeben kann.
4. Konfigurieren Sie als Nächstes Ihre Sitzungsparameter. Geben Sie unter Session sample size ein, welchen Prozentsatz an Benutzersitzungen Sie aufzeichnen möchten. Unter Sample rate of sessions with errors können Sie (ebenfalls als Prozentsatz) angeben, wie viele Sitzungen mit Fehlern Sie erfassen möchten.

5.    Nachdem Sie die Grundeinstellungen vorgenommen haben, aktualisieren Sie nun das Code-Snippet für den Browser-Agent in Ihrer Anwendung. Damit wird sichergestellt, dass der Agent Ihre Konfigurationen korrekt erfasst.

6.    Sobald nach einer kurzen Zeit Benutzersitzungen aufgezeichnet werden, kehren Sie zu New Relic zurück. Die Daten aus diesen Sitzungen stehen Ihnen jetzt zur Verfügung, sodass Sie sich jede Interaktion genau ansehen können.

Frontend-Probleme mithilfe von Session Replay debuggen

Mit Session Replay können Sie sich jetzt jede Benutzerinteraktion selbst ansehen und sicherstellen, dass jeder Mausklick, jedes Scrollen, jede Interaktion auf Ihrer Plattform ohne Frust vonstattengeht. Sehen wir uns das nun live und in Farbe an!

1.    Melden Sie sich bei New Relic an und wählen Sie Ihre instrumentierte Anwendung aus. Klicken Sie dann auf Session replay. Sie sehen jetzt eine Liste aller aufgezeichneten Sitzungen.

2.    Klicken Sie in der Liste auf eine beliebige Sitzung, um die Wiedergabe zu starten. Ihnen werden die Benutzerinteraktionen gezeigt und potenzielle Probleme werden hervorgehoben.

3.    Mit den Wiedergabeschaltflächen können Sie die Sitzung anhalten sowie zurück- oder vorspulen. Alternativ bewegen Sie den Schieberegler direkt auf bestimmte Punkte in der Sitzung.

4.    Achten Sie während der Wiedergabe auf eventuelle Fehler oder Anomalien bei den Benutzerinteraktionen – beispielsweise offensichtliche Funktionsstörungen oder Elemente, die nicht auf eine Benutzereingabe reagieren. 

5.    Während der Wiedergabe sehen Sie außerdem einen Bereich, in dem Konsolenlogs aufgeführt werden. Diese Logs erfassen jede Benutzeraktion und jedes Event. Gleichen Sie die Fehler in der Sitzung mit diesen Logs ab, um weitere Informationen zu erhalten.

6.    Wenn Sie sich ausschließlich auf fehlerbehaftete Interaktionen konzentrieren möchten, können Sie bestimmte Fehler mit dem Fehlerfilter ganz oben isolieren. Sie sehen dann die wichtigsten Details: Fehlertyp, Beschreibung und Zeitverlauf.

Der Fehler „Unhandled Promise Rejection“ deutet beispielsweise oft darauf hin, dass eine Webanfrage fehlgeschlagen ist.

7.    Anhand der Erkenntnisse aus der Sitzungswiedergabe und den Konsolenlogs können Sie jetzt die Codebase Ihrer Anwendung durchgehen. Gehen Sie direkt zu den Abschnitten, die die Fehler ausgelöst haben, und nehmen Sie die entsprechenden Korrekturen vor.

Sehen Sie sich danach noch ein paar weitere Sitzungen an, um sicherzustellen, dass die Probleme wirklich behoben sind. Dieser Zyklus aus wiederholter Prüfung und Korrektur sorgt für ein gleichbleibend angenehmes Benutzererlebnis.

Fazit

New Relic Session Replay ist ein leistungsstarkes Tool, das Ihnen tiefe Einblicke in die Benutzerinteraktionen in Ihrer Anwendung liefert. In diesem Blog haben wir Sie Schritt für Schritt durch den Set-up-Vorgang geführt und erläutert, wie Sie Frontend-Probleme aktiv mithilfe der Sitzungsaufzeichnungen debuggen können. So lassen sich Schwachpunkte proaktiv identifizieren und aus dem Weg räumen. Damit Ihre Anwendung noch benutzerfreundlicher wird. Und Ihre Benutzer:innen werden sich darüber freuen!