diff --git a/aidlc-docs/features/react-frontend/operations/monitoring/monitoring-setup.md b/aidlc-docs/features/react-frontend/operations/monitoring/monitoring-setup.md index 15bdd54..5f1c89a 100644 --- a/aidlc-docs/features/react-frontend/operations/monitoring/monitoring-setup.md +++ b/aidlc-docs/features/react-frontend/operations/monitoring/monitoring-setup.md @@ -30,6 +30,7 @@ Both the console and Sentry are now active (original Question 3 resolved as a co ### Temporary manual test tool: `SentryTestButton` - `src/components/SentryTestButton.tsx` renders a "Break the world" button, mounted globally via `RootLayout.tsx`, used to manually verify that errors, logs (`Sentry.logger.info`), and metrics (`Sentry.metrics.count`) actually arrive in Sentry end-to-end. - **Visibility**: only shown during local development (`pnpm dev`, via Vite's `import.meta.env.DEV`) and in the test environment (via the new build-time `VITE_APP_ENV` variable, set to `test` by `continuous_integration.yaml`'s `Build` step). It is hidden by default (including in any future production build) unless one of those conditions is explicitly true. +- **Visual feedback**: clicking the button immediately shows a green confirmation toast ("Test error verzonden naar Sentry ✅", `role="status"`) that auto-hides after 4 seconds, so the user gets clear confirmation that the test action fired — without this, the resulting uncaught error/blank state gave no indication anything happened. The actual log/metric/throw (`handleSentryTestErrorClick`) is fired on the next tick (`setTimeout(..., 0)`) so the toast has a chance to render/paint first. - `Sentry.logger.*` requires `enableLogs: true` in `Sentry.init()` (`src/main.tsx`) — added specifically to support this test button (and any future structured logging). - The thrown error is **intentionally uncaught**: React error boundaries do not catch errors thrown from event handlers (only render/lifecycle errors), so this relies on Sentry's own global `window.onerror` handler, exactly like the official Sentry test snippet. - This is a temporary verification tool, not a permanent feature — remove `SentryTestButton` (and its usage in `RootLayout.tsx`) once Sentry has been confirmed to receive test errors/logs/metrics end-to-end. diff --git a/src/components/SentryTestButton.tsx b/src/components/SentryTestButton.tsx index 11ca63b..dabfe77 100644 --- a/src/components/SentryTestButton.tsx +++ b/src/components/SentryTestButton.tsx @@ -1,3 +1,4 @@ +import { useEffect, useState } from 'react'; import * as Sentry from '@sentry/react'; /** @@ -8,6 +9,9 @@ import * as Sentry from '@sentry/react'; */ const isVisible = import.meta.env.DEV || import.meta.env.VITE_APP_ENV === 'test'; +/** Hoe lang de bevestigingsmelding zichtbaar blijft voordat hij vanzelf verdwijnt. */ +const TOAST_DURATION_MS = 4000; + /** * Losstaand van het component zodat dit direct (zonder DOM/React event-dispatch) * getest kan worden. React vangt fouten uit event handlers namelijk NIET op via @@ -31,17 +35,44 @@ export function handleSentryTestErrorClick(): void { * daadwerkelijk binnenkomen. */ export function SentryTestButton() { + const [showToast, setShowToast] = useState(false); + + // Verberg de melding automatisch na een paar seconden. + useEffect(() => { + if (!showToast) return; + const hideTimer = setTimeout(() => setShowToast(false), TOAST_DURATION_MS); + return () => clearTimeout(hideTimer); + }, [showToast]); + if (!isVisible) { return null; } + function onClick() { + setShowToast(true); + // De daadwerkelijke fout (met log + metric) pas na deze tick versturen, + // zodat de melding hierboven eerst kan renderen/schilderen voordat de + // onafgevangen fout verderop wordt gegooid. + setTimeout(handleSentryTestErrorClick, 0); + } + return ( - + <> + {showToast && ( +