till/managarten
1
0
Fork 0
mirror of https://github.com/Memo-2023/mana-monorepo.git synced 2026-05-14 20:21:09 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

feat(error-tracking): add browser error tracking to all 19 SvelteKit web apps

Browse source 
Add @sentry/browser integration via shared-error-tracking/browser export
and hooks.client.ts in every web app for client-side error reporting to GlitchTip.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Till JS 2026-03-22 19:16:21 +01:00
parent a4e41ee1ed
commit 7cad4073d4
40 changed files with 443 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

69
docs/ERROR_TRACKING.md
View file

@ -32,6 +32,8 @@ Self-hosted, open-source error tracking for all ManaCore apps using [GlitchTip](
## Project DSNs
### Backend DSNs
| App | Project ID | DSN |
|-----|-----------|-----|
| Calendar | 1 | `https://7dcf6e8648a04b85b2cb275921c059d5@glitchtip.mana.how/1` |
@ -43,6 +45,14 @@ Self-hosted, open-source error tracking for all ManaCore apps using [GlitchTip](
| Clock | 7 | `https://4d5ea890-019d-4a98-8e98-34bc3e374e0a@glitchtip.mana.how/7` |
| Zitare | 8 | `https://53b87191-3d86-4628-a8c7-cb97b3f69e06@glitchtip.mana.how/8` |
### Frontend DSNs
Frontend projects need to be created separately in GlitchTip so that browser errors are tracked in their own project (separate from backend errors).
To create frontend projects, use the Django shell command in the [Administration](#server-access) section with `platform="javascript"` and name them `{app}-web` (e.g., `calendar-web`).
Then set `PUBLIC_GLITCHTIP_DSN` in the web app's Docker environment.
## Integration
### Backend (NestJS)
@ -91,18 +101,56 @@ NestJS-specific (`@manacore/shared-error-tracking/nestjs`):
| `SentryExceptionFilter` | Global exception filter (captures 5xx only) |
| `setUserFromRequest(req)` | Set user context from JWT request |
### Web Apps (SvelteKit) - Future
### Web Apps (SvelteKit)
All 19 SvelteKit web apps have frontend error tracking via `hooks.client.ts`:
```typescript
// src/hooks.client.ts
import { initErrorTracking } from '@manacore/shared-error-tracking';
import { initErrorTracking, handleSvelteError } from '@manacore/shared-error-tracking/browser';
import type { HandleClientError } from '@sveltejs/kit';
initErrorTracking({
serviceName: 'calendar-web',
dsn: import.meta.env.PUBLIC_GLITCHTIP_DSN,
serviceName: 'calendar-web',
dsn: (window as any).__PUBLIC_GLITCHTIP_DSN__,
environment: import.meta.env.MODE,
});
export const handleError: HandleClientError = ({ error }) => {
handleSvelteError(error);
};
```
The DSN is injected at runtime via `hooks.server.ts` (same pattern as auth URL and backend URL):
```typescript
// In hooks.server.ts
const PUBLIC_GLITCHTIP_DSN = process.env.PUBLIC_GLITCHTIP_DSN || '';
// Injected into HTML as window.__PUBLIC_GLITCHTIP_DSN__
```
**What gets captured:**
- Unhandled JavaScript exceptions
- Unhandled promise rejections
- SvelteKit rendering errors (via `handleError` hook)
- Network errors, failed API calls
**Environment variable:**
```env
PUBLIC_GLITCHTIP_DSN=https://<key>@glitchtip.mana.how/<project-id>
```
Browser-specific exports (`@manacore/shared-error-tracking/browser`):
| Function | Purpose |
|----------|---------|
| `initErrorTracking(options)` | Initialize browser Sentry SDK |
| `handleSvelteError(error)` | Capture SvelteKit client errors |
| `captureException(error, context)` | Capture an error manually |
| `captureMessage(message, level)` | Capture a message |
| `setUser({ id, email })` | Set user context |
| `setTag(key, value)` | Set extra context tags |
## Docker Setup
In `docker-compose.macmini.yml`:
@ -160,13 +208,24 @@ print(f"DSN: https://{key.public_key}@glitchtip.mana.how/{proj.id}")
### Adding a New App
1. Create project in GlitchTip (via UI or Django shell)
**Backend:**
1. Create project in GlitchTip (via UI or Django shell, `platform="node"`)
2. Copy DSN
3. Add `@manacore/shared-error-tracking` to backend package.json
4. Create `src/instrument.ts`
5. Import `./instrument` as first line in `src/main.ts`
6. Set `GLITCHTIP_DSN` env variable
**Frontend (SvelteKit):**
1. Create project in GlitchTip (`platform="javascript"`, name: `{app}-web`)
2. Copy DSN
3. Create `src/hooks.client.ts` (see [Web Apps section](#web-apps-sveltekit))
4. Add `window.__PUBLIC_GLITCHTIP_DSN__` injection in `hooks.server.ts`
5. Add `https://glitchtip.mana.how` to CSP `connect-src` (if CSP is configured)
6. Set `PUBLIC_GLITCHTIP_DSN` env variable in Docker
## Monitoring
- GlitchTip Dashboard: https://glitchtip.mana.how