Web Application Debugging with Sentry Session Replay: Comprehensive Walkthrough 🚀🚀
Tags: webdev, programming, beginners, javascript
Published: 2023-08-26 06:50:00

## 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](https://docs.sentry.io/platforms/javascript/session-replay/) [Sentry](https://sentry.io/welcome/). Let's learn how Session Replay Sentry can enhance the quality of our application! ⚡
<img width="100%" style="width:100%" src="https://media.giphy.com/media/YByNQrx0V4Gzv9CBSk/giphy.gif">

We have discussed the steps for installing Sentry to manage **error logs** [Configuration Sentry Golang](https://dev.to/suharyadi2112/test-1k25), 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](https://www.youtube.com/watch?v=Zrq4kcNfAGw)

## 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)](https://docs.sentry.io/platforms/javascript/session-replay/#install), which use NPM packages, we're taking a scenic route using CDN bundles [Performance & Replay Bundle](https://docs.sentry.io/platforms/javascript/install/loader/#performance--replay-bundle) or [Errors & Replay Bundle](https://docs.sentry.io/platforms/javascript/install/loader/#errors--replay-bundle). Just add the Sentry loader script to your web page and you're set!

![Errors & Replay Bundle](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oql3gxsrilcwnln8xr0a.png)

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

![Screenshot Code Script Loader and Instance Sentry](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/17qfuq2h3y3j5tqbtpi1.png)

```javascript
<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.🤯

```javascript
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 <u>text visible</u>.
-  **blockAllMedia** is set to `true` to hide <u>images/videos</u>.

```javascript
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](https://dev.to/suharyadi2112/test-1k25).

- 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](https://docs.sentry.io/platforms/javascript/session-replay/configuration/#general-integration-configuration).

- Integrate our crafted replay object into Sentry with `[replay]`.

> const replay = new Sentry.Replay()

```javascript
replay.start();
```
- The code `replay.start();` gets the replay going. It's like hitting **play** to start the **replay** [Manually Starting Replay](https://docs.sentry.io/platforms/javascript/session-replay/understanding-sessions/#manually-starting-replay).

<img width="100%" style="width:100%" src="https://media.giphy.com/media/aWNByu8u6sati/giphy.gif">

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)](https://docs.sentry.io/platforms/javascript/session-replay/#set-up).

![Screenshot Function Error](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p35osuqksinwobh79iyt.png)

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**.

![Screenshot Position myUndefinedFunction](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/caegxjowssloznqyshq0.png)

## 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](https://docs.sentry.io/product/sentry-basics/integrate-frontend/create-new-project/#create-a-project) [Configuration Sentry Golang](https://dev.to/suharyadi2112/test-1k25)

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

![Screenshot Dashboard Sentry session Replay](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f6fu7zdbvyk7huwkwuyp.png)

> <u>After the author ran a series of tests</u>, the dashboard will now look like this.
> ![Screenshot Dashboard Sentry session Replay](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y7bgwinbet9m7tv145p6.png)

- 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**.

![Screenshot Aplication Running](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d4u4wkhlm9ywzr4ymbdj.png)

> 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.

![Screenshot dasboard sentry session replay](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z9o724an13ya5tr6mryu.png)

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.

![Screenshot detail session replay](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vdulvgv0sd0y3z91py84.png)

<img width="100%" style="width:100%" src="https://media.giphy.com/media/xUPJPFex8frrbZFkKA/giphy.gif">

## 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/