Feedback System
In-app user feedback collection with Microsoft Teams notification delivery.
Architecture
| Layer | Location |
|---|---|
| Route | backend/src/routes/feedback.ts |
| Components | frontend/src/components/feedback/ (7 files) |
Frontend Components
| Component | Purpose |
|---|---|
| FeedbackAgent | Orchestrates feedback UI lifecycle (trigger, form, confirmation) |
| FeedbackForm | Form with category, description, screenshot option |
| FeedbackToast | Confirmation toast after submission |
| feedbackService.ts | API client for feedback submission |
How It Works
- User clicks feedback trigger (accessible from any page)
- 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 forwards to Microsoft Teams via
TEAMS_UPDATES_WEBHOOK_URL - FeedbackToast confirms submission
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 a Microsoft Teams channel via an incoming webhook. The TEAMS_UPDATES_WEBHOOK_URL environment variable configures the destination. Each feedback entry creates a formatted Teams message card with the submission details and context.
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 (feedback covers user-reported issues)