Monitoring digital user experiences is a critical part of an observability solution. Understanding the reason for a poor visitor experience on your website or analyzing the health and performance of your website can help fix issues quickly so that they don’t impact a significant user base. That is why we have integrated Browser Tracing into our solution. Browser Tracing can be considered as a part of Real User Monitoring. With Browser Tracing, you can automatically correlate frontend and backend microservices. Let’s see how to set it up and how you can use it for monitoring your environments.

Setting Up

Setting up browser tracing takes only a few lines of code.

First, install Epsagon:

npm install @epsagon/react

And import the tracer

import epsagon from '@epsagon/react'


epsagon.init({

  token: 'epsagon-token',

  appName: 'app-name-stage',

})

For adding custom tags and additional custom tags, check out the documentation.

Using Browser Tracing

Once the setup is done, you can go to the Traces section and filter for resource_type = browser.

Figure 1: Searching for browser traces

Clicking on a trace will take you to the graph view of the trace.

Figure 2: Graph view of browser tracing

Here you can see how your frontend interacts with your backend and the latencies between the microservices. Just beside the graph view, you can see the details about your browser.

 

Figure 3: Details about the browser

Here you can see the details such as the browser type and the application that the browser is associated with, among other things.

Clicking on the timeline view enables you to see the duration of each microservice.

 

Figure 4: Timeline view

This would help you to identify performance and latency issues within your application.

You can also create alerts and create dashboards for errors seen because of the frontend microservices.

 

Figure 5: Creating alerts

 

Figure 6: Creating dashboards to monitor browser errors

 

Benefits of Browser Tracing

 

Automatic frontend-backend correlation: Users can reduce troubleshooting time by seeing the entire flow of user requests. Users don’t have to spend time manually correlating different components. Epsagon also automatically captures relevant tags, payloads, and exceptions.

Monitor frontend KPIs: Users can visualize frontend KPIs in dashboards such as load time, error rate, endpoint throughput, page impression throughput, and more. They can react to production issues by getting alert notifications to their preferred communication platform: Slack, PageDuty, OpsGenie, and more.

 

Conclusion

With the addition of Browser Tracing, Epsagon is the only tool that automatically correlates frontend page events and calls made from them to backend services. Due to this, users can avoid manual logging of data and reduce MTTD/R. 

You can check out browser tracing live in action in our demo environment. Feel free to reach out to us to see how you can integrate Browser Tracing into your environment.

 

Read More:

Troubleshooting Performance Issues with Epsagon

Monitor Kubernetes and Serverless Environments with Epsagon