Features

We’re excited to introduce Frontend Observability from Highlight — a growing suite of tools that let you analyze how your web app is performing.

Frontend Observability augments two key features: Web Vitals and Performance Data.

With the introduction of Frontend Observability in Highlight, Highlight users can now better monitor the performance of their web app, and react to any performance issues quickly. Web Vitals helps you track how quickly your app renders and measures the friction that your users experience on page load. Request Metrics gives you an idea of how quickly your front-end renders dynamic data throughout the lifecycle of your application, both for an individual session level or across users.

Configuration

To start recording your application's Web Vitals, there's nothing extra you need to do! We'll be recording metrics for you to view on the Web Vitals dashboard automatically!

To record metrics about your Frontend Network Requests, you'll need to configure your backend domains of interest. You can do this by visiting your Project Setting page or by adding an extra configuration setting to your H.init() call, like so:

// Only network requests to the domains listed will have their metrics recorded
// for display in dashboards or for use in metric monitors.

H.init('YOUR_PROJECT_ID', {
	networkRecording: {
		destinationDomains: ['backend.example.com'],
	},
})

With this feature, you'll immediately start tracking metrics about network requests to the listed domains from your Frontend. Visualize them from the Request Metrics dashboard and customize further to view valuable insights. You can then create Recording Network Requests and Responses to ensure your App performance metrics are kept in check, so that you can receive Slack / Email notifications as soon as a metric value goes out of the typical bounds.

Filter by

Once you click Edit on a Dashboard, you'll be able to filter the metric based on further metadata about the request. For example, you can visualize request latency for a network request based on the URL or the graphql operation.

Group by

When you add a Time Series / Bar chart to your dashboard, you can turn it into a stacked bar chart by selecting a Group by key. This will stack data based on the grouping key into the value categories. This can be particularly useful to find outlier groups of a particular metric.

Session / Error Stats

Certain metadata about your app's sessions is available by grouping on the sessions and errors metrics.

Using the group operator can allow viewing the number of sessions your app has by the browser version, for example.