Bridging the Gap from backend to frontend with Datadog RUM | Part 1
Part 1: Datadog Real User Monitoring in Web Applications
As a Performance and DevOps engineer, I was previously more exposed to backend related technologies and architectures. I recognised a gap in my skill set: frontend development. In today’s tech landscape, a holistic understanding of both realms is invaluable. Join me on a journey as I transition from the backend to the frontend. Together, we’ll explore HTML, CSS, JavaScript, and modern frontend frameworks, demystifying responsive design, user interfaces, and user experience. This 3 part series is not just about my learning journey; it’s a resource for engineers seeking to expand their horizons. Let’s unlock new dimensions of creativity and technical mastery by embracing the frontend.
Empowering My Frontend Journey with the help of ChatGPT
I am no expert when it comes to frontend code. Thanks to innovation, spinning up a working frontend application is made possible through the use of ChatGPT. In this mini project, I have used ChatGPT to help me write simple HTML, CSS and JavaScript.
Kudos to ChatGPT! Through this, I’ve also learnt how to use ChatGPT to help with better programming practices and to write better codes.
Therefore, my aim in this project is to learn more about frontend through the implementation of Datadog RUM on a Tic-Tac-Toe web application. You can visit the simple Tic-Tac-Toe web application on https://tictactoe-jon.tiiny.site/
Part 1: Datadog Real User Monitoring in Web Applications
Part 2: Implementing Feature Flag Tracking in Datadog for deeper observability
Part 3: Shifting left to be more proactive in frontend monitoring with CI/CD integration
Why is Frontend observability important?
In the dynamic realm of tech engineering, where the heartbeat of your applications and services must be monitored with precision, observability reigns supreme. At the core of this practice lie the three pillars of observability: metrics, traces, and logs.
These pillars illuminate the inner workings of your systems, helping you diagnose issues, optimise performance, and ensure seamless user experiences.
As engineers in this fast-paced landscape, our toolkit is essential. Imagine having a “Swiss Army Knife” for observability, where you’ll likely find Prometheus, OpenTelemetry, Loki, and Grafana nestled among its versatile tools.
When it comes to frontend (browser, mobile related applications) it is also important to gain observability insights.
- To uncover how users are interacting with your application (performance related).
- To uncover how users are experiencing your application (user analytics related).
Real User Monitoring (RUM) @ Datadog
RUM @ Datadog helps you gain deeper insights to your frontend application. RUM not only gives you performance related insights, but it also gives you analytical related ones as well.
Installing Datadog RUM to your application
Depending on where your frontend is hosted (web or mobile), there will be different installation steps. Since I am hosting the Tic-Tac-Toe application (The Tic-Tac-Toe application comprises of a simple HTML, CSS and Javascript file) on web, I will be using Datadog’s Browser RUM SDK. Take a look at the different ways of set up for Datadog RUM SDK here.
Here is a summary of the 3 different methods for implementing RUM on browser. You can choose any of these method depending on your use case.
For my case, I will be going with CDN async as I would like to maintain changes on the HTML portion of the code.
- Add the generated code snippet to initialise Datadog RUM SDK to the head tag of every HTML page that you want to monitor.
Explore the RUM data on Datadog Platform
Performance Summary
- The performance summary view on Datadog is an interactive dashboard that gives a holistic view of performance related insights on your frontend application.
- This is a great view to start discovering more about Performance Metrics, Error Metrics and Deployment related Metrics.
- From here, you are able to navigate to other pre-built dashboards that you can use for deeper analysis.
Here are some example of pre-built dashboard that is available after installing Datadog’s RUM SDK.
Analytics Summary
- The RUM SDK also provides dedicated view for Analytics related information. This is useful for engineers who wants to gain user related insights.
- This view is also categorised to various sections such as Engagement, Acquisition, Demographics and Frustration Signals.
- Frustration Signals is something really interesting as you can see how Datadog’s RUM is able to measure frustrations (a.k.a user’s pain points).
Frustration is something intangible, so it is really interesting how this can be modelled as a signal to give more insights to frontend.
TL;DR. There are 3 types of frustration signals: Dead Clicks, Error Clicks, Rage Clicks. You can read more here.
- Funnel Analysis is another feature in Datadog RUM that allows you to deep dive and understand a particular user flow in your application. This let’s you monitor on specific business critical flows (for e.g. a critical payment work flow, etc.)
- In this example, I want to understand the application flow with respect to users using my Feature Flag (changing X symbol to △).
- Last but not least, when it comes to user’s interaction with your frontend. Heatmaps gives you a greater understanding on the hotspots on your frontend.
- From the colour gradient seen on the heatmaps, it seems like the strategy for many users is to occupy the centre grid. Of course, for a business critical application, this is going to give you useful business related insights to help you optimize your application.
Session Replays
- Session Replays is another useful feature that helps engineers relate the frontend metrics/logs to what the user is seeing.
- You can read more about Session Replay on the Datadog Documentation here.
- There are also many options when it comes to privacy related settings for these RUM collected data as well — here and here.
Adding more context to RUM sessions
I am already getting a lot of insights with all the data that I’ve seen with the vanilla implementation of Datadog RUM SDK. In this part, I am going to be enriching my RUM sessions with user related context. This information is going to help me to pinpoint specific users and help with identifying sessions much more easily.
For a business critical application, especially during incident management where the seconds matter. Adding this context is going to help you shave away those seconds and help you find what you require even faster.
- Since this is a demo application, and I do not really have a server-side to be storing log in information, I am going to be generating fake user context. You can take a look at this from the code above.
- To set user context, use window.DD_RUM.setUser.
- With this, we will be able to use these user context to filter down to the specific user sessions to start analysing the frontend data.
Conclusion for Part 1
There are many features that the Datadog RUM SDK provides. It is also quite amazing to see how much frontend related metrics and insights can be obtained with just the vanilla implementation of the RUM SDK. There are many ways to enrich the events collected by the RUM SDK. And part 1, we have seen how we are able to add user context to the RUM sessions that can aid in identifying sessions from a particular user.
The key features covered in Part 1 are Performance Summary (Core Web Vitals, pre-built dashboard), Analytics Summary (Funnel Analysis, Frustration Signals, Heatmaps)and Session Replay.
There are way more to explore in the Datadog RUM product. My personal favourite is how easily one could maintain context by Connecting RUM to Backend APM Traces. You could try the RUM SDK out on your frontend application and experience this yourself with Datadog’s free 14 days trial here!
In Part 2 of this series, we will be seeing how Datadog can also help you in feature flag tracking.
