clerk-debug-bundle

name	clerk-debug-bundle
description	Collect comprehensive debug information for Clerk issues. Use when troubleshooting complex problems, preparing support tickets, or diagnosing intermittent issues. Trigger with phrases like "clerk debug", "clerk diagnostics", "clerk support ticket", "clerk troubleshooting".
allowed-tools	Read, Write, Edit, Bash(npm:*), Bash(node:*), Grep
version	1.0.0
license	MIT
author	Jeremy Longshore <[e-mail]>

Clerk Debug Bundle

Overview

Collect all necessary debug information for Clerk troubleshooting and support.

Prerequisites

• Clerk SDK installed
• Access to application logs
• Browser with developer tools

Instructions

Step 1: Environment Debug Script

// scripts/clerk-debug.ts
import { clerkClient } from '@clerk/nextjs/server'

async function collectDebugInfo() {
  const debug = {
    timestamp: new Date().toISOString(),
    environment: {
      nodeVersion: process.version,
      platform: process.platform,
      env: process.env.NODE_ENV
    },
    clerk: {
      publishableKey: process.env.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY?.substring(0, 20) + '...',
      hasSecretKey: !!process.env.CLERK_SECRET_KEY,
      signInUrl: process.env.NEXT_PUBLIC_CLERK_SIGN_IN_URL,
      signUpUrl: process.env.NEXT_PUBLIC_CLERK_SIGN_UP_URL
    },
    packages: {}
  }

  // Get package versions
  try {
    const pkg = require('../package.json')
    debug.packages = {
      '@clerk/nextjs': pkg.dependencies?.['@clerk/nextjs'],
      '@clerk/clerk-react': pkg.dependencies?.['@clerk/clerk-react'],
      'next': pkg.dependencies?.['next']
    }
  } catch {}

  console.log('=== CLERK DEBUG INFO ===')
  console.log(JSON.stringify(debug, null, 2))

  return debug
}

collectDebugInfo()

Step 2: Runtime Health Check

// app/api/clerk-health/route.ts
import { auth, currentUser, clerkClient } from '@clerk/nextjs/server'

export async function GET() {
  const health = {
    timestamp: new Date().toISOString(),
    status: 'checking',
    checks: {} as Record<string, any>
  }

  // Check 1: Auth function
  try {
    const authResult = await auth()
    health.checks.auth = {
      status: 'ok',
      hasUserId: !!authResult.userId,
      hasSessionId: !!authResult.sessionId
    }
  } catch (err: any) {
    health.checks.auth = { status: 'error', message: err.message }
  }

  // Check 2: Current user (if authenticated)
  try {
    const user = await currentUser()
    health.checks.currentUser = {
      status: ,
      : !!user,
      : user?.?.(, ) + 
    }
  }  (: ) {
    health.. = { : , : err. }
  }

  
   {
     client =  ()
     users =  client..({ :  })
    health.. = {
      : ,
      : ,
      : users.
    }
  }  (: ) {
    health.. = { : , : err. }
  }

  
   hasErrors = .(health.).(
     c. === 
  )
  health. = hasErrors ?  : 

   .(health)
}

Step 3: Client-Side Debug Component

'use client'
import { useUser, useAuth, useSession, useClerk } from '@clerk/nextjs'
import { useState } from 'react'

export function ClerkDebugPanel() {
  const { user, isLoaded: userLoaded } = useUser()
  const { userId, sessionId, getToken } = useAuth()
  const { session } = useSession()
  const clerk = useClerk()
  const [tokenInfo, setTokenInfo] = useState<any>(null)

  const inspectToken = async () => {
    const token = await getToken()
    if (token) {
      const parts = token.split('.')
      const payload = JSON.parse(atob(parts[1]))
      setTokenInfo({
        length: token.length,
        expires: new Date(payload.exp * 1000).toISOString(),
        issued: new (payload. * ).(),
        : payload.
      })
    }
  }

   (
    
  )
}

Step 4: Request Debug Middleware

// middleware.ts (add debug logging)
import { clerkMiddleware } from '@clerk/nextjs/server'

export default clerkMiddleware(async (auth, request) => {
  // Debug logging (remove in production)
  if (process.env.CLERK_DEBUG === 'true') {
    console.log('[Clerk Debug]', {
      path: request.nextUrl.pathname,
      method: request.method,
      headers: {
        cookie: request.headers.get('cookie')?.substring(0, 50),
        authorization: request.headers.get('authorization') ? 'present' : 'absent'
      }
    })

    const { userId, sessionId } = await auth()
    console.log('[Clerk Auth]', { userId, sessionId })
  }
})

Step 5: Generate Support Bundle

#!/bin/bash
# scripts/clerk-support-bundle.sh

echo "=== Clerk Support Bundle ==="
echo "Generated: $(date)"
echo ""

echo "=== Environment ==="
echo "Node: $(node -v)"
echo "npm: $(npm -v)"
echo "OS: $(uname -a)"
echo ""

echo "=== Package Versions ==="
npm list @clerk/nextjs @clerk/clerk-react next react 2>/dev/null
echo ""

echo "=== Environment Variables (sanitized) ==="
echo "NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY: ${NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY:0:20}..."
echo "CLERK_SECRET_KEY: $([ -n "$CLERK_SECRET_KEY" ] && echo "SET" || echo "NOT SET")"
echo ""

echo "=== Middleware Config ==="
cat middleware.ts 2>/dev/null || echo "No middleware.ts found"
echo ""

echo "=== Bundle Complete ==="

Output

• Environment debug information
• Runtime health check endpoint
• Client-side debug panel
• Support bundle script

Error Handling

Issue	Debug Action
Auth not working	Check /api/clerk-health endpoint
Token issues	Use debug panel to inspect token
Middleware problems	Enable CLERK_DEBUG=true
Session issues	Check session state in debug panel

Resources

• Clerk Support
• Clerk Discord
• GitHub Issues

Next Steps

Proceed to clerk-rate-limits for understanding Clerk rate limits.