Files

T

SluijsensandJunie 7680feb29f Voeg Sentry-foutregistratie toe als gekozen logging-bestemming

Co-authored-by: Junie <junie@jetbrains.com>

2026-07-25 13:15:18 +02:00

4.4 KiB

Raw Blame History

Monitoring Setup Instructions

Concrete setup steps for the approaches chosen in monitoring-plan.md: Logging and Dashboards (no Alerting).

Logging

What to log

Uncaught JavaScript errors / exceptions (the app already has an ErrorBoundary component from Code Generation — this is the natural hook point).
Broken/failed navigation (e.g. an unexpected router error).
No user PII, form input, or sensitive data should ever be logged — this is a public marketing site, but keep this discipline regardless.

Destination — decided: Sentry free tier + console

Both the console and Sentry are now active (original Question 3 resolved as a combination):

Console (always on)

Errors already surface via console.error inside ErrorBoundary.componentDidCatch — unchanged, zero cost, useful for local/manual debugging.

Sentry free tier (implemented)

@sentry/react is a dependency; src/main.tsx calls Sentry.init({ dsn: import.meta.env.VITE_SENTRY_DSN }) at startup, but only when a DSN is present — if not configured, Sentry is silently skipped and only console-logging remains active (safe default, no crash on missing config).
ErrorBoundary.componentDidCatch calls Sentry.captureException(error, { extra: { componentStack: info.componentStack } }) in addition to console.error.
The DSN is injected at build time via Vite's import.meta.env.VITE_SENTRY_DSN (typed in src/vite-env.d.ts). It is not a secret (Sentry DSNs are safe to expose client-side), so it is passed as a Gitea Actions repository variable (vars.VITE_SENTRY_DSN, not a secret) to the Build step in continuous_integration.yaml.
Manual follow-up required: create a free Sentry project (https://sentry.io) for this app, copy its DSN, and set it as the VITE_SENTRY_DSN repository variable in Gitea (Repository Settings → Actions → Variables). Until that variable is set, the build still succeeds and the site still works — Sentry reporting simply stays inactive.
Free tier limits (error volume, retention) are typically sufficient for a low-traffic marketing site.

Log level strategy: only errors are logged (no verbose/info-level client logging) — this is a static site with no meaningful "business events" beyond page views, which are covered by analytics (see Dashboards below), not logging.

Dashboards

Website analytics

Pick one (all have generous free tiers suitable for a small marketing site):

Option	Notes
Plausible / Umami	Privacy-friendly, lightweight, no cookie banner typically required; self-hosted or low-cost hosted tier
Google Analytics (GA4) / Search Console	Free, widely known, but heavier script and involves third-party data sharing (cookie/consent implications)

Setup (once a tool is picked):

Create an account/site entry with the chosen provider and obtain the tracking snippet or <script> tag.
Add the snippet to index.html (or load it conditionally in src/main.tsx) — this is a documentation/config task, not something the current codebase needs restructuring for.
Key metrics to surface: unique visitors, page views per route (Home, Packages, etc. — see frontend-components.md), and referral sources.

Uptime dashboard

Pick one:

Option	Notes
UptimeRobot	Free tier: up to 50 monitors, 5-minute check interval, optional e-mail notification on downtime (opportunistic, not a designed alerting feature per `monitoring-plan.md`)
Better Uptime	Free tier available; similar capability, nicer public status page option