From 99f74a9db9a8a1d99a18ebe49e7b17ca14fd641e Mon Sep 17 00:00:00 2001 From: Sluijsens Date: Sat, 15 Aug 2026 20:31:06 +0200 Subject: [PATCH] Break the world-knop alleen nog lokaal zichtbaar De knop was ook zichtbaar op de testomgeving (VITE_APP_ENV=test). Nu uitsluitend zichtbaar bij pnpm dev, zodat de testomgeving een productie-equivalente build draait. --- .gitea/workflows/continuous_integration.yaml | 6 ++++-- .../operations/monitoring/monitoring-setup.md | 2 +- src/components/shared/SentryTestButton.tsx | 10 +++++----- .../shared/__tests__/SentryTestButton.test.tsx | 2 +- 4 files changed, 11 insertions(+), 9 deletions(-) diff --git a/.gitea/workflows/continuous_integration.yaml b/.gitea/workflows/continuous_integration.yaml index 4fd9a88..cce4c3e 100644 --- a/.gitea/workflows/continuous_integration.yaml +++ b/.gitea/workflows/continuous_integration.yaml @@ -143,8 +143,10 @@ jobs: # als deze niet is ingesteld, wordt Sentry-logging simpelweg overgeslagen # (zie src/main.tsx) en blijft alleen console-logging actief. VITE_SENTRY_DSN: ${{ vars.VITE_SENTRY_DSN }} - # Build-time tag die bepaalt of dev/test-only UI (zoals de tijdelijke - # SentryTestButton) zichtbaar is; zie src/components/SentryTestButton.tsx. + # Build-time tag die de Sentry environment (test vs. production) bepaalt; + # zie src/main.tsx. De SentryTestButton zelf is hier los van: die is + # uitsluitend zichtbaar bij `pnpm dev`, in geen enkele build (zie + # src/components/shared/SentryTestButton.tsx). # Dit is de testomgeving-build, dus altijd gelijk aan DEPLOY_ENVIRONMENT # ('test'). Zie de build-production job hieronder voor de aparte # productie-build met VITE_APP_ENV=production. 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 eaeb7f9..520e073 100644 --- a/aidlc-docs/features/react-frontend/operations/monitoring/monitoring-setup.md +++ b/aidlc-docs/features/react-frontend/operations/monitoring/monitoring-setup.md @@ -31,7 +31,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. +- **Visibility**: only shown during local development (`pnpm dev`, via Vite's `import.meta.env.DEV`). It is hidden in every build (test and production alike), so the test environment always runs a production-equivalent build that can be tested as-is. - **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. diff --git a/src/components/shared/SentryTestButton.tsx b/src/components/shared/SentryTestButton.tsx index dabfe77..567d287 100644 --- a/src/components/shared/SentryTestButton.tsx +++ b/src/components/shared/SentryTestButton.tsx @@ -2,12 +2,12 @@ import { useEffect, useState } from 'react'; import * as Sentry from '@sentry/react'; /** - * Alleen zichtbaar tijdens lokale development (`pnpm dev`) en in de testomgeving - * (waar de build met `VITE_APP_ENV=test` wordt gebouwd, zie continuous_integration.yaml). - * In een productiebuild (VITE_APP_ENV ontbreekt of is 'production') is deze knop - * altijd verborgen, ook als iemand vergeet de variabele expliciet te zetten. + * Alleen zichtbaar tijdens lokale development (`pnpm dev`, via Vite's + * `import.meta.env.DEV`). In elke build (test én productie) is deze knop + * altijd verborgen, zodat de testomgeving een productie-equivalente build + * draait die getest kan worden. */ -const isVisible = import.meta.env.DEV || import.meta.env.VITE_APP_ENV === 'test'; +const isVisible = import.meta.env.DEV; /** Hoe lang de bevestigingsmelding zichtbaar blijft voordat hij vanzelf verdwijnt. */ const TOAST_DURATION_MS = 4000; diff --git a/src/components/shared/__tests__/SentryTestButton.test.tsx b/src/components/shared/__tests__/SentryTestButton.test.tsx index adba502..ac90aab 100644 --- a/src/components/shared/__tests__/SentryTestButton.test.tsx +++ b/src/components/shared/__tests__/SentryTestButton.test.tsx @@ -35,7 +35,7 @@ describe('SentryTestButton', () => { vi.useRealTimers(); }); - it('is visible in the current (development/test) build', () => { + it('is visible in local development', () => { render(); expect(screen.getByRole('button', { name: 'Break the world' })).toBeInTheDocument(); }); -- 2.39.5