Welcome to Highlight
Getting Started
Overview
Backend / Server
Client / Frontend
Fullstack Frameworks
Tips
Content-Security-Policy
Local Development
Monkey Patches
Performance Impact
Proxying Highlight
Session Search Deep Linking
Troubleshooting
Upgrading Highlight
Session Replay
Console Messages
HTML iframe Recording
Identifying Users
Live Mode
Network DevTools
Privacy
Rage Clicks
Recording Network Requests and Responses
Session Sharing
Session Shortcut
Tracking Events
Versioning Sessions
Error Monitoring
Grouping Errors
Sourcemaps
Versioning Errors
Product Features
Alerts
Analytics
Canvas
Comments
Environments
Frontend Observability
Keyboard Shortcuts
Performance Data
Segments
Session Search
Team Management
User Feedback
Web Vitals
WebGL
Integrations
Amplitude Integration
Clearbit Integration
Electron Integration
Front Plugin
Intercom Integration
Linear Integration
Mixpanel Integration
React.js Integration
Segment Integration
Sentry Integration
Slack Integration
Vercel Integration
highlight.run Changelog
5.0.0
5.0.1
5.1.0
5.1.1
5.1.2
5.1.3
5.1.4
5.1.5
Menu
Docs / Product Features / Frontend Observability

Frontend Observability

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'], }, })
Copy

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.

Use the group or filter tag operators

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