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.
- 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.
- 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.
- 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.
- 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.
The default privacy setting masks everything by replacing all text with an *. If you need to customize what content or user input is captured, you have options to mask, block, or ignore specific classes and attributes of content or user input.
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!
3. Watch replays to understand how users interact with the page and identify areas for improvement. Perhaps a lack of guest checkout is causing cart abandonment as the users are not interested in creating an account.
Based on these observations, you can make data-driven decisions to optimize the user experience and reduce friction points in the checkout flow.
Contextualize customer support
Session Replay also provides context to customer support teams to resolve issues efficiently:
- Search by the specific user to identify their specific session within Session Replay.
2. Playback the recording to see exactly what the user was doing that led to the error.
With a clear understanding of the problem, the agent can now directly assist the customer. They can explain why the error occurred, offer a solution or escalate the issue to the development team if it's a website bug. This eliminates the need for back-and-forth communication and gets the customer back on track
Conclusion
New Relic Session Replay empowers you to see your application through the user's eyes. In this blog, we've walked you through the setup process and shown you how to actively debug frontend issues, optimize user flow and contextualize customer support using session replay. By proactively identifying pain points and optimizing user journey, you can create a web experience that keeps your users happy and coming back for more.
Get started with Session Replay today and unlock the secrets to a better web experience!
Nächste Schritte
Sind Sie bereit fürs Debugging? Sehen Sie selbst, was New Relic Session Replay alles kann. Registrieren Sie sich gleich heute und nutzen Sie das ganze Potenzial unseres neuen Tools auch für Ihre Anwendung. Und das Beste daran? Es ist kostenlos!
Die in diesem Blog geäußerten Ansichten sind die des Autors und spiegeln nicht unbedingt die Ansichten von New Relic wider. Alle vom Autor angebotenen Lösungen sind umgebungsspezifisch und nicht Teil der kommerziellen Lösungen oder des Supports von New Relic. Bitte besuchen Sie uns exklusiv im Explorers Hub (discuss.newrelic.com) für Fragen und Unterstützung zu diesem Blogbeitrag. Dieser Blog kann Links zu Inhalten auf Websites Dritter enthalten. Durch die Bereitstellung solcher Links übernimmt, garantiert, genehmigt oder billigt New Relic die auf diesen Websites verfügbaren Informationen, Ansichten oder Produkte nicht.
