Create Sentry Vercel Logger

Quickly set up Sentry + Vercel logging with GitHub integration for Next.js projects.

Usage

npx create-sentry-vercel-logger
# or
npm create sentry-vercel-logger@latest

What it does

This package automatically configures your Next.js application with:

• Sentry Integration: Complete error tracking setup for client, server, and edge runtimes
• Universal Logger: Centralized logging utility that works across your entire application
• Error Boundaries: Global error handling with custom error pages
• GitHub Actions: Automated Vercel log monitoring workflow
• Environment Setup: Proper .env file configuration with security best practices

Features

🚨 Error Tracking

• Client-side error capture with session replay
• Server-side error logging for API routes
• Edge runtime error handling
• Performance monitoring integration

📝 Universal Logging

• Structured logging with context
• Automatic breadcrumb creation
• API request/response logging
• Performance transaction tracking

🔧 Easy Setup

• Interactive CLI wizard
• Automatic dependency installation
• Configuration file generation
• Environment variable setup

⚙️ GitHub Integration

• Automated Vercel log monitoring
• Error alerting workflows
• Performance metrics tracking

Prerequisites

• Next.js project (App Router or Pages Router)
• Sentry account and project
• Node.js 14+

Configuration Options

During setup, you'll be prompted for:

• Sentry DSN: Your Sentry project's Data Source Name
• Vercel Credentials: API token and project ID (optional)
• Features: Select which components to install
• GitHub Actions: Choose whether to set up automated monitoring

File Structure

After installation, your project will include:

your-nextjs-project/
├── sentry.client.config.ts    # Client-side Sentry config
├── sentry.server.config.ts    # Server-side Sentry config
├── instrumentation.ts         # Next.js instrumentation
├── next.config.js            # Updated with Sentry integration
├── app/
│   └── error.tsx             # Global error boundary
├── lib/
│   └── logger.ts             # Universal logging utility
├── .github/workflows/
│   └── vercel-logs-monitor.yml
├── .env.local                # Environment variables
└── .env.example              # Environment template

Environment Variables

The following environment variables will be configured:

# Required
NEXT_PUBLIC_SENTRY_DSN=your_sentry_dsn

# Optional (for GitHub Actions)
VERCEL_TOKEN=your_vercel_token
VERCEL_PROJECT_ID=your_project_id

Usage Examples

Using the Logger

import { logger } from '@/lib/logger';

// Basic logging
logger.info('User logged in', { userId: '123' });
logger.warn('API rate limit approaching', { remaining: 5 });
logger.error('Database connection failed', error);

// API route logging
export async function POST(request: Request) {
  try {
    // Your API logic
  } catch (error) {
    logger.apiError(request, error, { additional: 'context' });
    return NextResponse.json({ error: 'Internal error' }, { status: 500 });
  }
}

// Performance tracking
const transaction = logger.startTransaction('checkout-process', 'navigation');
// ... your code
transaction.finish();

Manual Sentry Usage

import * as Sentry from '@sentry/nextjs';

// Capture custom events
Sentry.captureMessage('Custom event occurred');

// Add user context
Sentry.setUser({ id: '123', email: '[email protected]' });

// Add custom tags
Sentry.setTag('feature', 'checkout');

Development

To test this package locally:

1. Clone the repository
2. Run npm install
3. Create a test Next.js project
4. Run node /path/to/create-sentry-vercel-logger/index.js from your test project

Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Test with a real Next.js project
5. Submit a pull request

License

MIT

Support

• Sentry Next.js Documentation
• Vercel Documentation
• Next.js Documentation