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

Run SigNoz backend locally — see Self-Host Docs

Configure environment:

bash

cp example.env .env

Key variables in .env:

bash

# Backend API endpoint (required)
VITE_FRONTEND_API_ENDPOINT="http://localhost:8080"

# Enable bundle analyzer (optional)
BUNDLE_ANALYSER="true"

Install and run:
bash
```
pnpm install
pnpm dev
```

Development

bash

pnpm dev

Opens http://localhost:3301.

Build

bash

pnpm build

Output in build/ folder.

Bundle Size Analysis

Set in .env:

bash

BUNDLE_ANALYSER="true"

Then run build:

bash

pnpm build

Opens bundle analyzer visualization automatically.

Testing

bash

# Unit tests
pnpm test

# Type checking
pnpm tsgo --noEmit

Linting

bash

# 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.