David/N8N-DASHBOARD
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
No description
3 commits 1 branch 0 tags 26 MiB
TypeScript 68.5%
HTML 22.9%
JavaScript 3.8%
CSS 2.9%
Dockerfile 1.9%
Find a file
David cd1a922976 Redesign dashboard as command center + capture error_message in poller 
Dashboard:
- Dark theme by default (zinc-950 background, high-contrast status colors)
- Layout: sticky header with live status, hero HealthBanner, FailuresPanel,
  AnomaliesPanel, 2-col grid (Workflows + Activity), StatsStrip footer
- Auto-detected anomalies: stale active workflows, 100% fail rate, stuck running
- Click any failure/activity row → links to n8n execution view (VITE_N8N_URL)
- VITE_N8N_URL env var threaded through Dockerfile + compose

Poller (poller.n8n.json):
- Fetch n8n Executions: includeData false → true (now includes execution data)
- Create/Update Execution Record: extract error_message from data.resultData.error
  using a safe IIFE that JSON.parses the data field

Also:
- Added vite-env.d.ts so VITE_* env vars are typed
- docker-compose.yml: VITE_N8N_URL added to build args
- .env.example: documented VITE_N8N_URL at root and dashboard level
2026-08-23 19:11:29 +02:00
dashboard Redesign dashboard as command center + capture error_message in poller 2026-08-23 19:11:29 +02:00
.env.example Redesign dashboard as command center + capture error_message in poller 2026-08-23 19:11:29 +02:00
.gitignore Initial commit: n8n workflow monitor dashboard 2026-08-23 15:47:51 +02:00
docker-compose.yml Redesign dashboard as command center + capture error_message in poller 2026-08-23 19:11:29 +02:00
pocketbase_schema.json Initial commit: n8n workflow monitor dashboard 2026-08-23 15:47:51 +02:00
poller.n8n.json Redesign dashboard as command center + capture error_message in poller 2026-08-23 19:11:29 +02:00
README.md Initial commit: n8n workflow monitor dashboard 2026-08-23 15:47:51 +02:00

README.md

n8n Workflow Monitor

Read-only dashboard: n8n → PocketBase → shadcn-style React dashboard.

What's in here

  • n8n Monitoring Dashboard - Poller — already created in your n8n instance (draft, not yet activated). Polls /api/v1/workflows and /api/v1/executions every 5 minutes and upserts into PocketBase.
  • pocketbase_schema.json — importable PocketBase collections (workflows, executions).
  • dashboard/ — the React + Tailwind + shadcn-style dashboard, reads from PocketBase with realtime updates.

Setup

1. PocketBase

  1. In your PocketBase Admin UI, go to Settings → Import collections and upload pocketbase_schema.json. This creates workflows and executions with public read access and admin-only write access.
  2. Create an API token / auth for a superuser (or an app-level API key) the poller workflow can use to write — the poller authenticates with a plain Bearer token in the PocketBase Admin credential (see below).

2. n8n poller workflow

The workflow is already created: n8n Monitoring Dashboard - Poller (in your personal project). Before activating it:

  1. Create credential "n8n API Key" (type: HTTP Header Auth) — header X-N8N-API-KEY, value: an n8n API key from Settings → API.
  2. Create credential "PocketBase Admin" (type: HTTP Header Auth) — header Authorization, value: Bearer <your PocketBase superuser token>.
  3. Every HTTP node in the workflow uses https://pocketbase.apphub.co.za as a guessed placeholder base URL — find/replace with your real PocketBase URL if different.
  4. Activate the workflow.

3. Dashboard

cd dashboard
npm install

Edit src/lib/pocketbase.ts and set POCKETBASE_URL to your real PocketBase instance.

npm run dev

Open the printed local URL. For production, npm run build and serve the dist/ folder (e.g. behind the same reverse proxy/Cloudflare Tunnel setup you use for your other self-hosted tools).

Notes

  • The dashboard is read-only — it only ever calls PocketBase's list/realtime endpoints, never n8n directly, and never writes.
  • All writes to PocketBase happen from the poller workflow only, authenticated as admin — the dashboard's PocketBase access can stay on the public read rules set in the schema.
  • Realtime: the dashboard subscribes to PocketBase's realtime feed, so it updates within moments of the poller's next 5-minute sync — no page refresh needed.