Advanced Error Handling & Logging in Next.js 16 Applications

'use client'

import { useEffect } from 'react'
import { io } from '@thecodeforge/monitoring-client'

interface ErrorBoundaryProps {
  error: Error & { digest?: string }
  reset: () => void
}

export default function DashboardError({
  error,
  reset
}: ErrorBoundaryProps) {
  useEffect(() => {
    // Log to monitoring with route context
    io.thecodeforge.monitoring.captureException(error, {
      tags: { route: '/dashboard', boundary: 'segment' },
      extra: { digest: error.digest }
    })
  }, [error])

  return (
    <div className="error-boundary">
      <h2>Dashboard unavailable</h2>
      <p>We encountered an issue loading your dashboard data.</p>
      <button onClick={reset}>Retry</button>
    </div>
  )
}

import { headers } from 'next/headers'

interface LogContext {
  correlationId: string
  route: string
  userId?: string
  timestamp: string
}

class StructuredLogger {
  private context: LogContext

  constructor(context: Partial<LogContext>) {
    this.context = {
      correlationId: context.correlationId || 'unknown',
      route: context.route || 'unknown',
      userId: context.userId,
      timestamp: new Date().toISOString()
    }
  }

  error(message: string, error: Error, meta?: Record<string, unknown>) {
    const entry = {
      level: 'error',
      message,
      ...this.context,
      error: {
        name: error.name,
        message: error.message,
        stack: error.stack,
        digest: (error as any).digest
      },
      ...meta
    }
    // Send to your log aggregation service
    console.error(JSON.stringify(entry))
  }

  warn(message: string, meta?: Record<string, unknown>) {
    console.warn(JSON.stringify({
      level: 'warn',
      message,
      ...this.context,
      ...meta
    }))
  }
}

export async function createLogger(route: string) {
  const headersList = await headers()
  return new StructuredLogger({
    correlationId: headersList.get('x-request-id') || crypto.randomUUID(),
    route
  })
}

'use server'

import { z } from 'zod'
import { createLogger } from '@/lib/io/thecodeforge/logging/logger'

const UpdateProfileSchema = z.object({
  name: z.string().min(2).max(100),
  email: z.string().email(),
  bio: z.string().max(500).optional()
})

type ActionResponse<T = void> =
  | { success: true; data: T }
  | { success: false; error: { code: string; message: string; fields?: Record<string, string> } }

export async function updateProfile(
  formData: FormData
): ActionResponse<{ userId: string }> {
  const logger = await createLogger('/actions/update-profile')

  const raw = {
    name: formData.get('name'),
    email: formData.get('email'),
    bio: formData.get('bio')
  }

  const parsed = UpdateProfileSchema.safeParse(raw)

  if (!parsed.success) {
    const fields: Record<string, string> = {}
    for (const issue of parsed.error.issues) {
      fields[issue.path[0] as string] = issue.message
    }
    return {
      success: false,
      error: { code: 'VALIDATION_FAILED', message: 'Invalid input', fields }
    }
  }

  try {
    const userId = await updateUserProfile(parsed.data)
    logger.warn('Profile updated', { userId })
    return { success: true, data: { userId } }
  } catch (error) {
    logger.error('Profile update failed', error as Error, { email: parsed.data.email })
    return {
      success: false,
      error: { code: 'INTERNAL_ERROR', message: 'Failed to update profile' }
    }
  }
}

'use client'

import { useEffect } from 'react'
import { io } from '@thecodeforge/monitoring-client'

export function ErrorInstrumentation({
  children
}: {
  children: React.ReactNode
}) {
  useEffect(() => {
    // Global uncaught exception handler
    const handleError = (event: ErrorEvent) => {
      io.thecodeforge.monitoring.captureException(event.error, {
        tags: { source: 'window.onerror' },
        extra: {
          filename: event.filename,
          lineno: event.lineno,
          colno: event.colno
        }
      })
    }

    // Global unhandled promise rejection handler
    const handleRejection = (event: PromiseRejectionEvent) => {
      io.thecodeforge.monitoring.captureException(
        event.reason instanceof Error
          ? event.reason
          : new Error(String(event.reason)),
        { tags: { source: 'unhandledrejection' } }
      )
    }

    window.addEventListener('error', handleError)
    window.addEventListener('unhandledrejection', handleRejection)

    return () => {
      window.removeEventListener('error', handleError)
      window.removeEventListener('unhandledrejection', handleRejection)
    }
  }, [])

  return <>{children}</>
}

import * as Sentry from '@sentry/nextjs'

Sentry.init({
  dsn: process.env.SENTRY_DSN,
  environment: process.env.NODE_ENV,
  tracesSampleRate: process.env.NODE_ENV === 'production' ? 0.1 : 1.0,
  replaysOnErrorSampleRate: 1.0,
  replaysSessionSampleRate: 0.05,

  beforeSend(event, hint) {
    // Filter out known non-critical errors
    const error = hint.originalException

    if (error instanceof Error) {
      // Browser extension errors
      if (error.stack?.includes('extension://')) return null
      // Network errors from ad blockers
      if (error.message.includes('Failed to fetch')) return null
    }

    // Redact sensitive data from breadcrumbs
    if (event.breadcrumbs) {
      event.breadcrumbs = event.breadcrumbs.map(bc => {
        if (bc.data?.url) {
          bc.data.url = redactUrl(bc.data.url)
        }
        return bc
      })
    }

    return event
  }
})

function redactUrl(url: string): string {
  try {
    const parsed = new URL(url)
    parsed.searchParams.forEach((_, key) => {
      if (['token', 'key', 'secret', 'password'].some(s => key.toLowerCase().includes(s))) {
        parsed.searchParams.set(key, '[REDACTED]')
      }
    })
    return parsed.toString()
  } catch {
    return url
  }
}

'use client'

import { useState } from 'react'

interface GracefulErrorProps {
  error: Error & { digest?: string }
  reset: () => void
  severity: 'transient' | 'data' | 'critical'
}

export function GracefulError({
  error,
  reset,
  severity
}: GracefulErrorProps) {
  const [retryCount, setRetryCount] = useState(0)
  const [feedback, setFeedback] = useState('')
  const maxRetries = 3

  const handleRetry = () => {
    if (retryCount >= maxRetries) return
    setRetryCount(prev => prev + 1)
    // Exponential backoff: 1s, 2s, 4s
    const delay = Math.pow(2, retryCount) * 1000
    setTimeout(reset, delay)
  }

  if (severity === 'transient') {
    return (
      <div className="error-transient">
        <p>Something went wrong. This is usually temporary.</p>
        <button
          onClick={handleRetry}
          disabled={retryCount >= maxRetries}
        >
          {retryCount >= maxRetries ? 'Max retries reached' : 'Retry'}
        </button>
      </div>
    )
  }

  return (
    <div className="error-critical">
      <h2>We hit an unexpected error</h2>
      <p>Our team has been notified. Error ID: {error.digest}</p>
      <textarea
        placeholder="What were you trying to do?"
        value={feedback}
        onChange={e => setFeedback(e.target.value)}
      />
      <button onClick={reset}>Try again</button>
      <a href="/support">Contact support</a>
    </div>
  )
}