How to vibe codeSentry

Prerequisites

• Node.jsfree

  Runtime environment for the Next.js frontend and ingestion API server.

• GitHubfree

  Source control hosting and deployment trigger for Vercel.

AI coding tools

• Claude Code

  Best-in-class terminal agent for scaffolding multi-file Next.js ingestion pipelines and background workers.

• Cursor

  Ideal editor for iteratively designing error lists, stack trace viewers, and timeline charts.

Build guide

1. 01Project Scaffolding & Database Schema

   Initialize the Next.js application with Tailwind CSS, set up database connections via Drizzle ORM on Neon, and define schema tables for projects, issues, events, tags, and performance spans.

   Scrape together a new Next.js project using TypeScript and Tailwind CSS. Initialize Drizzle ORM configured for a Neon serverless PostgreSQL connection. Create database tables for 'projects' (id, name, dsn_key, created_at), 'issues' (id, project_id, title, culprit, level, status, first_seen, last_seen, event_count), 'events' (id, issue_id, project_id, timestamp, platform, release, stack_trace jsonb, request_data jsonb, user_context jsonb), and 'spans' (id, project_id, trace_id, parent_span_id, operation, description, start_timestamp, end_timestamp). Ensure proper foreign keys, indexes on project_id and issue_id, and provide migration scripts.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

2. 02Authentication & Project Management Dashboard

   Configure better-auth for secure user authentication and build the main dashboard allowing developers to create projects, generate unique DSN keys, and view project overview metrics.

   Integrate better-auth into the Next.js application supporting email/password sign-in. Build an authenticated dashboard layout where users can create new monitoring projects, view their generated DSN keys (e.g., https://<key>@domain/api/ingest/<id>), and see a list of connected projects. Include client-side state management and server actions for project creation.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

3. 03Ingestion API & Event Deduplication Engine

   Build a high-performance ingestion endpoint that accepts incoming error payloads from SDKs, validates DSN keys, computes error fingerprints, and groups incoming exceptions into consolidated issues.

   Create a public Next.js API route at POST /api/ingest/[dsnKey] that acts as the error ingestion pipeline. The endpoint must validate the dsnKey against the projects table, parse incoming JSON payloads containing exception messages, stack traces, tags, and request context. Implement a fingerprinting hashing algorithm combining the exception type and top stack frame filename/function to either create a new issue or update an existing open issue's event_count and last_seen timestamp, storing the raw event record in Neon.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

4. 04Custom Client SDK & Test Application

   Develop a lightweight client-side JavaScript SDK that captures window.onerror and unhandledrejection events and dispatches them asynchronously to your ingestion API.

   Build a lightweight TypeScript client SDK package/module that initializes with an endpoint DSN. The SDK must hook into window.onerror and window.onunhandledrejection, extract error messages, file locations, line numbers, and user agent strings, and batch-send them via navigator.sendBeacon or fetch to the ingestion endpoint. Create a simple test harness page that throws deliberate runtime errors to verify end-to-end capture.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

5. 05Issue Detail Viewer & Stack Trace Formatter

   Build the detailed issue view page displaying formatted stack traces, breadcrumbs, affected release tags, user metadata, and status management controls.

   Build a comprehensive issue details page in the Next.js dashboard. Fetch a specific issue and its associated event list by ID. Render a clean, syntax-highlighted stack trace viewer with collapsible frames, file paths, and line numbers. Include sidebar widgets showing user context, browser/OS tags, release versions, and action buttons to resolve, ignore, or delete the issue.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

6. 06Performance Tracing & Spans Explorer

   Implement tracing capture capabilities and build a waterfall UI to visualize transaction spans, database queries, and request latency.

   Extend the ingestion API to accept performance transaction payloads containing spans with start and end timestamps. Add a 'Performance' tab to the project dashboard featuring a table of recent transactions and a interactive waterfall chart component that visualizes span durations, HTTP requests, and nested child operations chronologically.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

7. 07Alerting & Polish

   Add email notification triggers via Resend when new critical issues occur and polish the user interface with dark mode styling and real-time polling.

   Integrate Resend into the ingestion pipeline so that when a new issue with level 'error' or 'fatal' is created, an email alert is dispatched to the project owner with the exception summary and a direct link to the dashboard. Polish the UI with Tailwind CSS to match Sentry's dark developer aesthetic, add loading skeletons, and implement polling or SWR revalidation on the issue list.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

Cost vs paying for Sentry