Highlight.io

An open-source full-stack monitoring platform that combines session replay, error monitoring, logs, and distributed tracing in one unified view. When a user hits an error, you see their session replay, the JavaScript stack trace, backend logs, and the distributed trace — all correlated and linked together.

What is Highlight.io?

Highlight.io is a Y Combinator-backed open-source project that takes a "full-stack first" approach to monitoring. The core insight: when debugging a user-reported bug, developers need to answer "what exactly happened?" — which requires both the frontend session (what did the user click?) and the backend trace (which service failed and why?). Highlight links both via trace context propagation, so a single click takes you from session replay to the failing backend span.

Unlike Sentry (error-first) or LogRocket (session-replay-first), Highlight treats all four signals equally: session replay, errors, logs, and traces are all first-class citizens linked to the same user session. The platform is fully open-source (Apache 2.0) and self-hostable on your own infrastructure with zero data leaving your environment.

Installation

# Install Highlight.io SDK
npm install @highlight-run/node @highlight-run/next
# or React
npm install highlight.run

# Python
pip install highlight-io

# Go
go get github.com/highlight/highlight/sdk/highlight-go

React / Next.js Setup

// React / Next.js setup
import { H } from 'highlight.run';
import { ErrorBoundary } from '@highlight-run/react';

H.init('', {
  environment: 'production',
  version: '1.0.0',
  networkRecording: {
    enabled: true,
    recordHeadersAndBody: true,
    urlBlocklist: ['/api/auth', '/api/token'],
  },
  tracingOrigins: ['api.myapp.com'],
});

// Wrap your app
export default function App({ Component, pageProps }) {
  return (
    
      
    
  );
}

// Identify users (attach session to user)
H.identify('[email protected]', {
  id: 'user-123',
  name: 'Jane Doe',
  plan: 'pro',
});

// Custom events and metrics
H.track('Checkout Completed', { total: 89.99, currency: 'USD' });
H.metrics([{ name: 'LCP', value: 1200, tags: [{ name: 'page', value: '/checkout' }] }]);

Node.js Backend

// Node.js backend — errors + logs + tracing
import { H } from '@highlight-run/node';

H.init({ projectID: '' });

// Express error handler
app.use(H.Handlers.errorHandler());

// Manual error capture
try {
  await processPayment(order);
} catch (error) {
  H.consumeError(error, '[email protected]', { orderId: order.id });
  throw error;
}

// Console logs are captured automatically when SDK is initialized
// Or use H.log() for structured logs
H.log('Payment processed', 'info', { amount: 99.99, userId: 'u-123' });

Self-Hosted Setup

# Self-hosted Highlight.io (Docker Compose)
git clone https://github.com/highlight/highlight
cd highlight/docker
docker compose up

# Access:
# - Highlight UI:   http://localhost:3000
# - Backend API:    http://localhost:8082
# - OpenTelemetry:  http://localhost:4318  (OTLP HTTP)

# Configure SDK to use self-hosted backend
H.init('', {
  backendUrl: 'https://highlight.internal.yourcompany.com',
  otlpEndpoint: 'https://otel.internal.yourcompany.com',
});