Web Application Debugging with Sentry Session Replay: Comprehensive Walkthrough 🚀🚀

What Is ?? 🧐🤔

Sentry Session Replay is a feature that allows recording every user action within our application. In this article, we will explain in simple terms how Session Replay Sentry can replay user actions to help us understand and troubleshoot issues Session Replay Sentry. Let's learn how Session Replay Sentry can enhance the quality of our application! ⚡

We have discussed the steps for installing Sentry to manage error logs Configuration Sentry Golang, which include:

• Creating a Sentry account.
• Connecting the application to Sentry using an API key (Golang).
• Integrating the Sentry SDK into the application code to track and record error logs (Golang).

However, at this point, we will delve into an additional feature of Sentry known as Sentry Session Replay.

The main purpose of 😲🤔

Using Sentry Session Replay is to record and replay your sessions within the application. With this feature, you can accurately review what happened in your experience before the occurrence of an error or problematic situation. This helps you and the development team identify the causes of errors more quickly, understand your interactions with the interface, and make necessary improvements to enhance your overall experience. Session Replay Overview: Watch User Sessions to Confirm Issues and Debug Faster

Lets Start 🚦🚗

Make sure you've got the tools. The installation is a breeze, no worries. Unlike the official Sentry Setup Session Replay docs Pre-requisites(Install), which use NPM packages, we're taking a scenic route using CDN bundles Performance & Replay Bundle or Errors & Replay Bundle. Just add the Sentry loader script to your web page and you're set!

Place the CDN loader script for Errors & Replay Bundle above your page (marked with a red box).

<script
  src="https://browser.sentry-cdn.com/7.64.0/bundle.replay.min.js"
  integrity="sha384-eIBhmVs6phxABM7+IIv3ns4W+ShqowNbNrv8gOqCw8sqxfvNjsA5M9c64D5Oobcv"
  crossorigin="anonymous"
></script>

<script>
  const replay = new Sentry.Replay({
    maskAllText: false,
    blockAllMedia: true,
  });
    Sentry.init({
        dsn: "https://25a443e0b56147dd9f7552aa5ac7b14a@o450xxxxxxxxxxxx.ingest.sentry.io/4504378428096512",
            replaysSessionSampleRate: 1.0,
            replaysOnErrorSampleRate: 1.0,
        integrations: [
            replay
        ],
    });
    replay.start();
</script>   

Now, let's dissect this code a bit.🤯

const replay = new Sentry.Replay({
  maskAllText: false,
  blockAllMedia: true,
});

This part makes a new Replay class instance from Sentry.Replay() library. Two options:

• maskAllText is set to false to keep text visible.
• blockAllMedia is set to true to hide images/videos.

Sentry.init({
        dsn: "https://25a443e0b56147dd9f7552aa5ac7b14a@o450xxxxxxxxxxxx.ingest.sentry.io/4504378428096512",
            replaysSessionSampleRate: 1.0,
            replaysOnErrorSampleRate: 1.0,
        integrations: [
            replay
        ],
    });

• Set things in motion with Sentry.init(), swapping out dsn:"https://YOUR_DSN_HERE" with your unique DSN.

if u no have DSN Create a new project by clicking here Configuration Sentry Golang.

• Slide the replaysSessionSampleRate to 1.0, capturing all sessions for the record
• Adjust replaysOnErrorSampleRate to 1.0 as well, ensuring all errors have their moment.

for the complete details about replaysSessionSampleRate, replaysOnErrorSampleRate and other configurations, you can check out General Integration Configuration.

• Integrate our crafted replay object into Sentry with [replay].

const replay = new Sentry.Replay()

replay.start();

• The code replay.start(); gets the replay going. It's like hitting play to start the replay Manually Starting Replay.

We're going to do some testing. To intentionally cause an error, we need to input the function myUndefinedFunction(). This code will trigger an error because the myUndefinedFunction function hasn't been defined. The resulting error will be recorded in the Sentry Session Replay."

myUndefinedFunction() function is documented in the Sentry documentation. You can find the details at this link Pre-requisites (Set Up).

The important thing to remember is that the function

• myUndefinedFunction(); is purposely put right after replay.start();.
• This is done to intentionally trigger an error caused by the undefined myUndefinedFunction.

This careful arrangement is vital for effectively recording the error during Sentry Session Replay.

Give it a shot! 🚀🎇

Putting our earlier code to the test. Let's see the results!

During this testing phase, I'm employing a basic application that I've personally crafted. This application will serve as the platform for capturing and recording session replays using Sentry

Make sure the Loader Script and the function call to Sentry have been seamlessly integrated into your application. This provides a strong setup for running thorough tests.

• We're about to begin testing, so make sure you've already created a project in Sentry.

If you haven't, you can check out the reference Create Project Sentry Configuration Sentry Golang

• Head to the Replay tab in the Sentry menu. It's essential for the next steps.

After the author ran a series of tests, the dashboard will now look like this.

• Running ur Project Application, to run the app with the included Sentry Session Replay, just start it. This turns on Sentry replay for testing. Remember, the added myUndefinedFunction() intentionally creates an error that Sentry will record during replay.

To see the error causing myUndefinedFunction() to be undefined, open the console in the Inspect Element section. This is what will be recorded in the Sentry Session Replay.

After encountering this error, return to the Sentry Session Replay dashboard. Here, you'll be presented with a display resembling the following format, featuring various pieces of information, including:

• IP address
• Operating system in use
• Recording duration
• Number of errors
• And more.

Feel free to click on any of the IP addresses to explore its comprehensive details. Within, you'll discover compelling data including:

• Video-like recording of user interactions.
• A chronological timeline of activities visually depicted as Breadcrumbs.
• Valuable insights pinpointing the occurrence of the myUndefinedFunction() error.

Moreover, there are additional aspects that may necessitate specific configurations, potentially elaborated upon in forthcoming chapters.

DONE 🏁✨

In summary, this guide simplifies the process of setting up Sentry Session Replay. Following these steps enables you to identify concealed problems like the myUndefinedFunction() error effectively. The visualization of user interactions using videos and breadcrumbs adds significant strength to your debugging capabilities. As you dive further into Sentry session replay, you'll discover advanced configurations to elevate your error tracking proficiency. Thank you for reading and be prepared to enhance your development skills further!

References:
Sentry JavaScript Session Replay Documentation. Sentry. https://docs.sentry.io/platforms/javascript/session-replay/
Sentry JavaScript Session Replay Introduction. YouTube. https://www.youtube.com/watch?v=Zrq4kcNfAGw
Installation Guide for Sentry Session Replay. Sentry. https://docs.sentry.io/platforms/javascript/session-replay/#install
Enhance Performance with Replay Bundle. Sentry. https://docs.sentry.io/platforms/javascript/install/loader/#performance--replay-bundle
Handle Errors Using Replay Bundle. Sentry. https://docs.sentry.io/platforms/javascript/install/loader/#errors--replay-bundle
General Integration Configuration for Session Replay. Sentry. https://docs.sentry.io/platforms/javascript/session-replay/configuration/#general-integration-configuration
How to Set Up Sentry JavaScript Session Replay. Sentry. https://docs.sentry.io/platforms/javascript/session-replay/#set-up
Giphy - Animated GIFs. https://giphy.com/