Error Tracking + Uptime Monitoring

Error Tracking + Uptime Monitoring

The Problem Without Monitoring

Without error tracking, you find out your app broke when:

• A user emails you
• Someone tweets about it
• You check it yourself

With error tracking, you find out within minutes, with a full stack trace, user context, and the exact line of code that failed.

---

Installing Sentry in Next.js

npx @sentry/wizard@latest -i nextjs

This automatically:

• Creates sentry.client.config.ts, sentry.server.config.ts, sentry.edge.config.ts
• Adds Sentry to next.config.js
• Creates src/app/global-error.tsx (error boundary)
• Uploads source maps on build

Add your DSN to environment variables:

SENTRY_DSN=https://abc123@o123.ingest.sentry.io/456
SENTRY_ORG=your-org
SENTRY_PROJECT=your-project
SENTRY_AUTH_TOKEN=sntrys_...  # for source map uploads

---

Capturing Errors with Context

Don't just let errors propagate — add context so you know what the user was doing:

import * as Sentry from '@sentry/nextjs'

async function fetchCourse(courseId: string, userId: string) {
  return Sentry.withScope(async (scope) => {
    scope.setUser({ id: userId })
    scope.setTag('courseId', courseId)
    scope.setContext('request', { courseId, userId })

    try {
      const { data, error } = await supabase
        .from('courses')
        .select('*')
        .eq('id', courseId)
        .single()

      if (error) throw error
      return data
    } catch (err) {
      Sentry.captureException(err)
      throw err
    }
  })
}

---

The global-error.tsx File

// src/app/global-error.tsx
'use client'
import * as Sentry from '@sentry/nextjs'
import { useEffect } from 'react'

export default function GlobalError({ error, reset }: {
  error: Error & { digest?: string }
  reset: () => void
}) {
  useEffect(() => {
    Sentry.captureException(error)
  }, [error])

  return (
    <html>
      <body>
        <div style={{ padding: '2rem', textAlign: 'center' }}>
          <h2>Something went wrong</h2>
          <button onClick={reset}>Try again</button>
        </div>
      </body>
    </html>
  )
}

---

Free Uptime Monitoring Options

UptimeRobot (free, industry standard):

1. Sign up at uptimerobot.com
2. Add Monitor → HTTP(s)
3. URL: https://yourapp.com/api/health (or just /)
4. Interval: every 5 minutes
5. Alert contacts: email, Slack, Discord webhook

Your health endpoint:

// src/app/api/health/route.ts
export async function GET() {
  return Response.json({ status: 'ok', timestamp: new Date().toISOString() })
}

---

Vercel Analytics

Vercel Dashboard → Your Project → Analytics:

• Core Web Vitals per route — find slow pages
• Real User Monitoring — actual user devices and connections
• Traffic — requests, bandwidth, errors by route

Enable in next.config.js:

const nextConfig = {
  experimental: {
    // Already enabled on Vercel, but explicit for clarity
  }
}

Or use the @vercel/analytics package for more detailed tracking:

npm install @vercel/analytics

// src/app/layout.tsx
import { Analytics } from '@vercel/analytics/react'

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        <Analytics />
      </body>
    </html>
  )
}