mirror of
https://github.com/SigNoz/signoz.git
synced 2026-08-05 20:50:45 +01:00
06dd0ed3d3
Some checks failed
build-staging / prepare (push) Has been cancelled
build-staging / js-build (push) Has been cancelled
build-staging / go-build (push) Has been cancelled
build-staging / staging (push) Has been cancelled
cacheci / tests (push) Has been cancelled
Release Drafter / update_release_draft (push) Has been cancelled
* feat(alert-channels): add google chat channel type, defaults and url validation Prefills the title and description templates verbatim from the backend's DefaultGoogleChatReceiverConfig, and extracts the slack templates into SlackInitialConfig so the form can restore them when the type changes. * feat(alert-channels): add google chat option and form fields * feat(alert-channels): wire google chat create, edit and test calls * test(alert-channels): cover the google chat channel form * fix(googlechat): use standard markdown in default templates for cardsV2
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:
cp example.env .envKey variables in
.env:# Backend API endpoint (required) VITE_FRONTEND_API_ENDPOINT="http://localhost:8080" # Enable bundle analyzer (optional) BUNDLE_ANALYSER="true" -
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.