This repository showcases how to use OpenFeature and OpenTelemetry SDK in a React frontend application to send feature flag data to Dynatrace, where you can observe and monitor the changes in real-time.
A demonstration of OpenFeature integration with React, showing different feature flag providers and their connection to the Dynatrace platform for observability and monitoring.
The application sends feature flag change events to Dynatrace, allowing you to monitor and observe flag state changes in real-time through the Dynatrace Logs interface.
This project demonstrates three different OpenFeature providers:
- Static In-Memory Provider - Feature flags stored in memory
- Static JSON Provider - Feature flags loaded from a static JSON file
- Flagd Provider - Feature flags served from a flagd instance running in Docker which can be toggled with a button click
src/components/- React components for each providersrc/openFeature/- Custom providers and hooksflagd-provider/- Docker configuration for flagdproxy/- Local proxy server for development
-
Create environment configuration:
Create a
.envfile in the root directory with your Dynatrace credentials:VITE_DYNATRACE_ENDPOINT=https://your-environment-id.live.dynatrace.com/api/v2/logs/ingest VITE_DYNATRACE_API_TOKEN=your-dynatrace-api-token
-
Install dependencies:
npm install
-
Start the flagd provider:
cd flagd-provider docker-compose up -d -
Run the development server with proxy:
npm run dev:full
- Complete OpenFeature integration
- Complete OpenTelemetry integration
- Connect to Dynatrace platform
- Replace placeholder UI with a more polished one
- React 19.1.1
- OpenFeature React SDK 1.0.1
- OpenFeature Flagd Web Provider 0.7.3
- Flagd 0.12.9 (Docker)
- OpenTelemetry SDK 2.0.1
- TypeScript 5.8.3
- Vite 7.1.4
- Node.js + Express 4.21.2 (Proxy Server - handles CORS and forwards logs to Dynatrace)
- Chakra UI 3.0 (UI Component Library)
