$docker.recipes

Highlight.io

intermediate

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

[i]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

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

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

[$]docker-compose.yml

[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

[i]Usage Notes

  1. [1]Docs: https://www.highlight.io/docs
  2. [2]Dashboard at http://localhost:3000 - session replays, errors, logs
  3. [3]GraphQL API at http://localhost:8082 for integrations
  4. [4]Install SDK in frontend to capture session replays
  5. [5]Backend SDKs for error tracking and logging
  6. [6]Correlate 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...
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

## Tags

#highlight#session-replay#error-tracking#apm#frontend

## Category

Monitoring & Observability

## Related