Highlight.io

intermediate

Full-stack monitoring with session replay, error tracking, and logging.

Overview

Highlight.io is a comprehensive full-stack monitoring platform that provides session replay, error tracking, and logging capabilities for modern web applications. Founded to address the gap between frontend user experience monitoring and backend observability, Highlight.io captures detailed user sessions including DOM interactions, network requests, console logs, and user clicks, while correlating this frontend data with backend errors and logs. The platform offers both cloud and self-hosted deployment options, making it particularly valuable for teams requiring data sovereignty or custom deployment scenarios. This Docker configuration deploys the complete Highlight.io stack including the web dashboard, GraphQL API server, and all necessary backend services for processing session replays and telemetry data. The setup exposes both the user-facing dashboard on port 3000 and the GraphQL API on port 8082, enabling teams to view recorded sessions, analyze errors, and integrate with external tools through the API. Highlight.io processes session recordings in real-time, stores them efficiently, and provides powerful search and filtering capabilities to quickly identify problematic user journeys. Development teams building React, Vue, Angular, or vanilla JavaScript applications will find this stack particularly valuable when they need to understand user behavior beyond traditional analytics. The combination of frontend session replay with backend error correlation makes it ideal for debugging complex issues that span multiple system layers, especially for SaaS applications, e-commerce platforms, and any web application where user experience directly impacts business metrics.

Key Features

Complete session replay recording including mouse movements, clicks, scrolls, and form interactions with privacy controls
Real-time error tracking with stack traces, user context, and automatic error grouping and deduplication
Distributed tracing correlation between frontend user sessions and backend API calls and database queries
Advanced filtering and search capabilities across sessions, errors, and logs using custom attributes and metadata
GraphQL API for programmatic access to session data, error reports, and integration with existing workflows
Privacy-focused recording with automatic PII masking, element blocking, and GDPR compliance features
Performance monitoring with Core Web Vitals tracking, resource timing, and network request analysis
Multi-environment support with project-based organization and team collaboration features

Common Use Cases

1SaaS product teams investigating user-reported bugs by watching exact session replays with full context
2E-commerce platforms analyzing checkout abandonment by reviewing failed purchase attempt recordings
3Development teams debugging complex frontend issues that only occur in specific user environments or workflows
4Customer support teams providing faster resolution by viewing user sessions leading up to support ticket creation
5Product managers understanding user behavior patterns and feature adoption through aggregated session analysis
6QA teams validating bug fixes by comparing session recordings before and after deployments
7DevOps teams correlating frontend user impact with backend service degradations during incident response

Prerequisites

Docker Engine 20.10+ and Docker Compose V2 for container orchestration and networking support
Minimum 4GB RAM allocated to Docker as Highlight.io processes video-like session recordings and stores telemetry data
Available ports 3000 and 8082 on the host system for dashboard access and GraphQL API communication
Understanding of JavaScript SDK integration for instrumenting frontend applications with session recording
Basic knowledge of GraphQL for API integrations and custom dashboard development
Familiarity with privacy regulations like GDPR if deploying in regulated environments requiring data masking

For development & testing. Review security settings, change default credentials, and test thoroughly before production use. See Terms

docker-compose.yml

1services: 
2  highlight: 
3    image: highlight/highlight:latest
4    container_name: highlight
5    restart: unless-stopped
6    environment: 
7      REACT_APP_PRIVATE_GRAPH_URI: http://localhost:8082/private
8      REACT_APP_PUBLIC_GRAPH_URI: http://localhost:8082/public
9    ports: 
10      - "3000:3000"
11      - "8082:8082"
12    networks: 
13      - highlight-network
14
15networks: 
16  highlight-network: 
17    driver: bridge

.env Template

.env

1# Highlight.io configuration

Usage Notes

1Docs: https://www.highlight.io/docs
2Dashboard at http://localhost:3000 - session replays, errors, logs
3GraphQL API at http://localhost:8082 for integrations
4Install SDK in frontend to capture session replays
5Backend SDKs for error tracking and logging
6Correlate frontend sessions with backend logs and errors

Quick Start

terminal

1# 1. Create the compose file
2cat > docker-compose.yml << 'EOF'
3services:
4  highlight:
5    image: highlight/highlight:latest
6    container_name: highlight
7    restart: unless-stopped
8    environment:
9      REACT_APP_PRIVATE_GRAPH_URI: http://localhost:8082/private
10      REACT_APP_PUBLIC_GRAPH_URI: http://localhost:8082/public
11    ports:
12      - "3000:3000"
13      - "8082:8082"
14    networks:
15      - highlight-network
16
17networks:
18  highlight-network:
19    driver: bridge
20EOF
21
22# 2. Create the .env file
23cat > .env << 'EOF'
24# Highlight.io configuration
25EOF
26
27# 3. Start the services
28docker compose up -d
29
30# 4. View logs
31docker compose logs -f

One-Liner

Run this command to download and set up the recipe in one step:

terminal

1curl -fsSL https://docker.recipes/api/recipes/highlight/run | bash

Troubleshooting

Dashboard shows 'GraphQL endpoint unreachable' error: Verify both containers are running and check that REACT_APP_PRIVATE_GRAPH_URI points to the correct internal network address
Session recordings not appearing in dashboard: Ensure frontend SDK is properly configured with the correct project ID and API endpoint URL matching your deployment
High memory usage during session processing: Increase Docker memory limits to 6GB+ and consider implementing session retention policies to manage storage
CORS errors when accessing GraphQL API: Configure proper CORS headers in Highlight.io settings and verify the PUBLIC_GRAPH_URI matches your external access URL
Container fails to start with port binding errors: Check that ports 3000 and 8082 are not already in use by other applications or change the external port mappings
Sessions missing backend correlation data: Verify backend SDKs are installed and configured with matching project credentials and proper trace correlation headers

Community Notes

Loading notes...

Download Recipe Kit

Get all files in a ready-to-deploy package

Includes docker-compose.yml, .env template, README, and license

Components

highlight

Related Recipes

Ad Space

Shortcuts: C CopyF FavoriteD Download