Feedback System
In-app user feedback collection with Microsoft Teams notification delivery — manual reports plus automatic friction-signal detection.
Architecture
| Layer | Location |
|---|---|
| Route | backend/src/routes/feedback.ts |
| Service | backend/src/services/feedback/feedback-service.ts |
| Components | frontend/src/components/feedback/ |
Frontend Components
| Component | Purpose |
|---|---|
| FeedbackAgent | Orchestrates feedback UI lifecycle (trigger, form, confirmation) |
| FeedbackFab | Floating action button trigger |
| FeedbackForm | Form with category, description, screenshot option |
| FeedbackToast | Confirmation toast after submission |
| feedbackService.ts | API client for feedback submission |
| useFeedbackState.ts | Feedback UI state hook |
| detectors/ | Automatic friction detectors: useRageClickDetector, useSentryEventDetector, useSlowLoadDetector |
How It Works
- User clicks feedback trigger (accessible from any page) — or a detector fires automatically
- FeedbackForm collects:
- Category (bug, feature request, general feedback)
- Description text
- Optional screenshot
- Automatic context (current page URL, user info, browser details)
- Submission sent to
backend/src/routes/feedback.ts - Backend builds an Adaptive Card and posts it to Teams: manual reports via
TEAMS_SUPPORT_WEBHOOK_URL, auto-detected signals viaTEAMS_AUTOMATED_WEBHOOK_URL - FeedbackToast confirms submission
Screenshots are uploaded to object storage and linked from the Teams card.
Context Capture
The feedback system automatically captures contextual information with each submission:
- Current page URL
- Authenticated user identity
- Browser and device information
- Timestamp
This context helps the development team reproduce issues without requiring back-and-forth with the reporter.
Teams Integration
Feedback notifications are sent to Microsoft Teams channels via incoming (Power Automate) webhooks. Two destinations are configured: TEAMS_SUPPORT_WEBHOOK_URL for manual user reports and TEAMS_AUTOMATED_WEBHOOK_URL for auto-detected signals (rage clicks, Sentry events, slow loads). Each entry posts a formatted Adaptive Card with the submission details and context; if a webhook is not configured, the report is logged only.
Related
- Users — feedback submitter identity
- Frontend Architecture — component integration
- Backend Architecture — route handling
- Error Handling Pattern — feedback as complement to automated error tracking
- Sentry — automated error tracking (Sentry events also feed the auto-detect channel)