signoz/frontend

SigNoz Frontend

React-based web interface for SigNoz, the open-source observability platform.

Tech Stack

• Framework: React 18 + TypeScript
• Build: Vite
• State: React Query, Zustand, Redux Toolkit (legacy)
• Styling: CSS Modules, Ant Design (legacy)
• Charts: uPlot
• Testing: Jest

Local Development Setup

1. Run SigNoz backend locally — see Self-Host Docs

2. Configure environment:

   cp example.env .env
   

   Key variables in .env:

   # Backend API endpoint (required)
   VITE_FRONTEND_API_ENDPOINT="http://localhost:8080"
   
   # Enable bundle analyzer (optional)
   BUNDLE_ANALYSER="true"
   

3. Install and run:

   pnpm install
   pnpm dev
   

Development

pnpm dev

Opens http://localhost:3301.

Build

pnpm build

Output in build/ folder.

Bundle Size Analysis

Set in .env:

BUNDLE_ANALYSER="true"

Then run build:

pnpm build

Opens bundle analyzer visualization automatically.

Testing

# Unit tests
pnpm test

# Type checking
pnpm tsgo --noEmit

Linting

# Run all linters (oxlint + stylelint)
pnpm lint

Project Structure

src/
├── api/          # API clients and react-query hooks
├── components/   # Shared UI components
├── container/    # Page-level containers
├── hooks/        # Custom React hooks
├── pages/        # Route pages
├── providers/    # React context providers
├── store/        # Redux store
└── types/        # TypeScript definitions

Contributing

See CONTRIBUTING.md in the root repo.

Questions? Join our Slack community.