Highlight.io: Open Source Application Monitoring for Developers
Success in today’s digital markets depends on providing a simple and seamless user experience. But even the best-written and tested applications can have issues, and it can be difficult to determine the root cause so that those issues can be resolved. Observability has become a requirement, but it can be difficult to relate the various types of data that can be collected from an application into a cohesive tool that can trace an interaction from the button click in a web browser through to the downstream log.
This is the goal of Highlight.io, a powerful, open source application monitoring tool built for modern developers. The project does this by pairing session replay — a technology that allows developers to play back user interactions and client-side logs — with more traditional error monitoring and logging tooling.
What Is Highlight.io?
Highlight.io is a tool that helps developers debug and monitor their web applications in a more cohesive manner than with traditional monitoring tooling. Given the recent popularity of “full-stack” application patterns (NextJS, Remix, etc.), the authors of the project built a monitoring platform that uses these properties to give developers a “full-stack” view of their entire web application, enabling teams to debug faster and with more detail than ever before.
When fully integrated, Highlight.io gives engineers the ability to trace an error from a button click all the way to a downstream log. Their three main offerings are:
- Session replay
- Error monitoring
- Logging
Below is an animation of what the “cohesion” between these three offerings looks like:
What Sets Highlight Apart?
Unlike other open source monitoring tooling that only gives engineers a “bird’s-eye” view of health metrics and resource usage, Highlight.io focuses on giving teams a holistic view of how a user is affected by an issue. Considering the increased expectation of user experience in today’s web applications, the authors of the project have successfully carved out a niche among today’s developers.
On the technical end, because Highlight employs session replay to capture the nuances of user journeys, engineers can have access to all interactions leading up to any identified issues — which makes it easier to debug user issues, or to understand a customer’s needs with respect to a bug.
Highlight also uses OpenTelemetry for all of their SDKs, which is an open source project that facilitates real-time telemetry data capture. This allows the project to be extensible so that engineers can use their existing monitoring instrumentation to connect to Highlight.
Session Replay as a Monitoring Tool
Session replay is technology initially developed to help marketing teams gain insights into user behavior on static websites. By analyzing these usage patterns, marketers were able to optimize calls to action and other important features to improve engagement and conversion rates.
Highlight.io, however, has found a different use case for session replay. The project is using this technology to give engineers visibility into more dynamic web applications, helping engineers uncover the reasons issues happen and tying this data to traditional logging and exceptions tooling.
How Does Session Replay Work?
Session replay uses the MutationObserver API to capture and record changes made to the browser UI (also known as the document object model or DOM). The MutationObserver allows developers to listen for modifications to the DOM and react accordingly. Here is a JavaScript example that will instrument the API to record changes to a particular target.
By setting up a MutationObserver to observe the desired DOM elements, any changes, such as element additions, deletions or attribute modifications, can be detected and then sent to a server to be replayed after the fact.
This is exactly how Highlight.io works, and under the hood, the Highlight team uses an open source project called Rrweb as an abstraction on top of the MutationObserver APIs. Given that the Highlight project is open source, you can find their usage of Rrweb in the recording logic on GitHub.
OpenTelemetry: A Simple, Extensible Suite of SDKs
For its server-side SDKs, Highlight uses OpenTelemetry (OTEL), an open source project that provides a framework and specification for capturing telemetry data (metrics, traces and logs). Given that OTEL has been widely adopted among developers, engineers can connect their existing monitoring instrumentation to Highlight rather than instrumenting a brand new SDK from scratch. And if engineers don’t have an existing OTEL setup, they always have the option of using Highlight’s SDKs. Below is an example of what Highlight’s instrumentation for Golang (or Go) looks like.
Under the hood, for example, the SDK uses the agreed-upon OTEL specification for reporting errors. Overall, Highlight’s integration of OpenTelemetry reflects a forward-thinking approach to building an extensible monitoring solution, allowing developers to “eject” into a pure OTEL setup, or alternately, to use the Highlight SDKs for a great developer experience.
How Can Developers Get Started with Highlight.io?
The next time you come across an important customer support issue or a hard-to-reproduce bug, Highlight.io can help you step into the shoes of your users and trace an issue from a button click all the way to a downstream error log.
To get started, developers simply install the SDK. Once installation is complete, Highlight records user sessions, errors and logs as they come through the platform. Here’s an example of what instrumentation looks like for session replay and error monitoring in a NextJS application.
Taken from the NextJS docs.
Session Replay Is the Next Evolution in Issue Resolution
Troubleshooting web applications, especially those with high volumes of user traffic, used to be difficult. Highlight.io simplifies this process by making it easy to identify which user actions are causing problems, and which can shorten the time to recreate the issue and thus reduce the time to resolution. Highlight’s open source nature (and its integration with OpenTelemetry) means that developers have a many options when customizing the monitoring tool to their specific needs.
