feat: add GlitchTip integration and error handling - #3
Merged
ladaniprem merged 1 commit intoJun 11, 2026
Merged
Conversation
- Implemented GlitchTip tunnel route for Sentry SDK envelope requests. - Created example API route to test server-side error monitoring with GlitchTip. - Added global error handling component to capture exceptions with Sentry. - Developed a test page for sending errors to GlitchTip. - Introduced authentication guards and organization selection views for user management. - Implemented infinite scroll hook for loading more data efficiently. - Added mobile detection hook for responsive design. - Configured Sentry for client, server, and edge environments. - Established layouts for dashboard and conversations with resizable panels.
|
Caution Review failedThe pull request is closed. ℹ️ Recent review info⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Free Run ID: ⛔ Files ignored due to path filters (1)
📒 Files selected for processing (29)
📝 WalkthroughWalkthroughThis PR implements Clerk-based authentication with organization gating, integrates Sentry/GlitchTip error monitoring across server and client, adds utility hooks for infinite scroll and mobile detection, updates design tokens to Tailwind v4, and includes backend org context validation with a test tracking error. ChangesAuthentication & Organization Architecture
Error Monitoring & Sentry Integration
UI Infrastructure, Hooks, and Design Tokens
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Poem
Note 🎁 Summarized by CodeRabbit FreeYour organization is on the Free plan. CodeRabbit will generate a high-level summary and a walkthrough for each pull request. For a comprehensive line-by-line review, please upgrade your subscription to CodeRabbit Pro by visiting https://app.coderabbit.ai/login. Comment |
Contributor
There was a problem hiding this comment.
Pull request overview
This PR integrates GlitchTip (via the Sentry Next.js SDK) into the apps/web Next.js app for client/server/edge error reporting (including a tunnel route), and adds initial auth/org-guard UI plus a couple of reusable UI/layout hooks/components.
Changes:
- Add Sentry/GlitchTip SDK setup (client + server + edge), a tunnel API route, and a global error boundary to capture unhandled exceptions.
- Add auth/org selection views and guards, plus Clerk middleware logic (route protection + org selection redirect) and dashboard layout scaffolding.
- Add utility hooks (infinite scroll + mobile detection) and a resizable conversations layout.
Reviewed changes
Copilot reviewed 29 out of 30 changed files in this pull request and generated 10 comments.
Show a summary per file
| File | Description |
|---|---|
| pnpm-lock.yaml | Locks new Sentry/GlitchTip-related dependencies (and transitive deps). |
| packages/ui/src/styles/globals.css | Updates global theme tokens, fonts, and base styles for UI consistency. |
| packages/backend/convex/users.ts | Adds org presence check (but currently includes a breaking test throw). |
| apps/widget/app/layout.tsx | Aligns font CSS variable names with updated global styles. |
| apps/web/sentry.server.config.ts | Initializes Sentry/GlitchTip on the server runtime. |
| apps/web/sentry.edge.config.ts | Initializes Sentry/GlitchTip for edge runtime features. |
| apps/web/proxy.ts | Adds Clerk middleware logic for public routes + org redirect (but file naming may prevent execution). |
| apps/web/package.json | Adds @sentry/nextjs dependency. |
| apps/web/next.config.ts | Wraps Next config with withSentryConfig for source map upload support. |
| apps/web/modules/dashboard/layouts/conversations-layout.tsx | Introduces a resizable split-panel layout for conversations. |
| apps/web/modules/auth/ui/views/sign-up-view.tsx | Adds a Clerk sign-up view wrapper. |
| apps/web/modules/auth/ui/views/sign-in-view.tsx | Adds a Clerk sign-in view wrapper. |
| apps/web/modules/auth/ui/views/org-selection-view.tsx | Adds a Clerk org selection view wrapper. |
| apps/web/modules/auth/ui/layouts/auth-layout.tsx | Adds a centered auth layout wrapper used by guards/views. |
| apps/web/modules/auth/ui/components/organization-guard.tsx | Adds client-side org selection gating. |
| apps/web/modules/auth/ui/components/auth-guard.tsx | Adds client-side auth gating using Convex auth components. |
| apps/web/instrumentation.ts | Registers runtime-specific Sentry config imports (node/edge). |
| apps/web/instrumentation-client.ts | Initializes Sentry/GlitchTip on the client and configures tunneling. |
| apps/web/hooks/use-moblie.ts | Adds a mobile detection hook (filename typo). |
| apps/web/hooks/use-infinite-scroll.ts | Adds an IntersectionObserver-based infinite scroll hook. |
| apps/web/app/sentry-example-page/page.tsx | Adds a UI page to generate test events for GlitchTip. |
| apps/web/app/layout.tsx | Updates font variable names and layout formatting. |
| apps/web/app/global-error.tsx | Adds global error component capturing exceptions with Sentry. |
| apps/web/app/api/sentry-example-api/route.ts | Adds an API route that intentionally throws to test server-side reporting. |
| apps/web/app/api/glitchtip-tunnel/route.ts | Adds an envelope tunnel route to proxy SDK traffic through the app. |
| apps/web/app/(dashboard)/page.tsx | Updates dashboard page to use Clerk org switcher and simplified UI. |
| apps/web/app/(dashboard)/layout.tsx | Adds auth/org guards wrapper (currently broken due to return newline). |
| apps/web/app/(auth)/org-selection/[[...org-selection]]/page.tsx | Adds org selection route page. |
| apps/web/app/(auth)/layout.tsx | Cleans up auth layout formatting. |
| apps/web/.mcp.json | Adds MCP tooling configuration for local dev tooling. |
Files not reviewed (1)
- pnpm-lock.yaml: Language not supported
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
+5
to
+16
| const Layout = ({children}:{children: React.ReactNode}) => { | ||
| return | ||
| ( | ||
| <AuthGuard> | ||
| <OrganizationGuard> | ||
| {children} | ||
| </OrganizationGuard> | ||
| </AuthGuard> | ||
| ) | ||
| } | ||
|
|
||
| export default Layout No newline at end of file |
Comment on lines
+25
to
26
| throw new Error("Tracking Test"); | ||
| const userId = await ctx.db.insert("users", { |
Comment on lines
+3
to
+12
| const DSN = "https://02cb8f8361b24d65a90ce7749a7665a3@app.glitchtip.com/24553"; | ||
|
|
||
| /** | ||
| * GlitchTip tunnel route — proxies Sentry SDK envelope requests through | ||
| * this server to avoid ad-blockers blocking direct calls to app.glitchtip.com. | ||
| * | ||
| * Referenced in instrumentation-client.ts via `tunnel: "/api/glitchtip-tunnel"`. | ||
| */ | ||
| export async function POST(req: NextRequest) { | ||
| const dsn = new URL(DSN); |
Comment on lines
+7
to
+16
| Sentry.init({ | ||
| dsn: "https://02cb8f8361b24d65a90ce7749a7665a3@app.glitchtip.com/24553", | ||
|
|
||
|
|
||
| // Set a low sample rate in production to save disk space (1%) | ||
| tracesSampleRate: 0.01, | ||
|
|
||
| // Route events through our own API to avoid ad-blockers | ||
| tunnel: "/api/glitchtip-tunnel", | ||
| }); |
Comment on lines
+7
to
+13
| Sentry.init({ | ||
| dsn: "https://02cb8f8361b24d65a90ce7749a7665a3@app.glitchtip.com/24553", | ||
|
|
||
| // Set a low sample rate in production to save disk space (1%) | ||
| tracesSampleRate: 0.01, | ||
|
|
||
| }); |
Comment on lines
+7
to
+13
| Sentry.init({ | ||
| dsn: "https://02cb8f8361b24d65a90ce7749a7665a3@app.glitchtip.com/24553", | ||
|
|
||
| // Set a low sample rate in production to save disk space (1%) | ||
| tracesSampleRate: 0.01, | ||
|
|
||
| }); |
Comment on lines
+10
to
+15
| // A faulty API route to test GlitchTip's server-side error monitoring | ||
| export function GET() { | ||
| throw new SentryExampleAPIError( | ||
| "This error is raised on the backend called by the GlitchTip example page.", | ||
| ); | ||
| } |
Comment on lines
+13
to
+14
| export default function Page() { | ||
| const [status, setStatus] = useState<"idle" | "sent" | "error">("idle"); |
| @@ -0,0 +1,70 @@ | |||
| import * as React from "react" | |||
Comment on lines
+1
to
3
| import { NextResponse } from 'next/server'; | ||
| import { clerkMiddleware, createRouteMatcher } from '@clerk/nextjs/server' | ||
|
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary by CodeRabbit
Release Notes
New Features
Bug Fixes
Style