VS Code Extension

The Unhook VS Code extension provides seamless webhook monitoring and debugging directly within your development environment, eliminating the need to switch between your editor and external tools.

Overview

The VS Code extension enables you to:

View webhook events in real-time within VS Code
Inspect webhook payloads and responses
Replay webhook events for testing
Debug webhook issues without leaving your editor
Collaborate with team members on webhook development

Installation

Install the extension from the VS Code marketplace:

Open VS Code
Go to Extensions (Ctrl+Shift+X / Cmd+Shift+X)
Search for “Unhook”
Click Install

Or install directly from the command line:

code --install-extension unhook.unhook-vscode

Quick Start

Sign in to Unhook:
- Open the Command Palette (Ctrl+Shift+P / Cmd+Shift+P)
- Run “Unhook: Sign In”
- Follow the authentication flow
View webhook events:
- Open the Unhook sidebar (Unhook icon in the activity bar)
- See real-time webhook events as they arrive
Inspect and replay events:
- Click on any webhook event to view details
- Use the “Replay Event” button to resend the webhook

Features

Real-time Webhook Monitoring

Monitor webhook events as they happen without leaving your editor:

Live Event Feed

See webhook events in real-time as they arrive from providers

Event Details

Inspect headers, payloads, and response data for each event

Status Tracking

Track success/failure status and response times

Provider Filtering

Filter events by provider (Stripe, GitHub, Clerk, etc.)

Webhook Event Inspection

Dive deep into webhook data with comprehensive inspection tools:

{
  "event": {
    "id": "evt_1234567890",
    "provider": "stripe",
    "type": "payment_intent.succeeded",
    "timestamp": "2024-01-15T10:30:00.000Z",
    "status": "success"
  },
  "request": {
    "method": "POST",
    "url": "https://unhook.sh/wh_stripe_prod",
    "headers": {
      "content-type": "application/json",
      "stripe-signature": "..."
    },
    "body": {
      "id": "pi_123",
      "object": "payment_intent",
      "amount": 1000,
      "currency": "usd"
    }
  },
  "response": {
    "status": 200,
    "headers": {...},
    "body": {...},
    "duration": 245
  }
}

Event Replay

Test your webhook handlers by replaying events:

Select an event from the sidebar
Click “Replay Event” button
Monitor the response in real-time
Debug any issues with your webhook handler

Team Collaboration

Work seamlessly with your team on webhook development:

Shared webhook URLs: Use the same webhook URL across your team
Real-time updates: See when team members are active
Event sharing: Share specific events with team members for debugging

Configuration

Workspace Configuration

Create an unhook.yaml file in your project root:

webhookUrl: "https://unhook.sh/your-org/your-webhook-name"
server:
  apiUrl: "https://app.unhook.sh"
destination:
  - name: "local"
    url: "http://localhost:3000/api/webhooks"
delivery:
  - destination: "local"

VS Code Settings

Configure the extension through VS Code settings:

{
  "unhook.configFilePath": "./unhook.yaml",
  "unhook.autoRefresh": true,
  "unhook.refreshInterval": 5000,
  "unhook.showNotifications": true
}

Environment Variables

Set configuration via environment variables:

# API configuration
NEXT_PUBLIC_API_URL=https://app.unhook.sh
NEXT_PUBLIC_WEBHOOK_BASE_URL=https://unhook.sh

# Authentication
UNHOOK_API_KEY=your_api_key

Usage Guide

Viewing Webhook Events

Open the Unhook sidebar (click the Unhook icon in the activity bar)
Browse events in the event list
Click on an event to view details
Use filters to find specific events

Inspecting Event Details

When you click on a webhook event, you’ll see:

Event Information

Event ID, provider, type, and timestamp
Success/failure status and response time

Request Details

HTTP method and URL
Headers and request body
Provider-specific metadata

Response Information

HTTP status code
Response headers and body
Processing duration

Replaying Events

Select an event from the sidebar
Click “Replay Event” in the event details
Monitor the replay in real-time
Check your application logs for the replayed event

Debugging Failed Events

When webhooks fail, the extension helps you debug:

Check Response Status

Review Error Messages

Verify Headers

Test Locally

Integration Examples

Stripe Webhooks

# unhook.yaml
webhookUrl: "https://unhook.sh/your-org/your-stripe-webhook"
destination:
  - name: "stripe-handler"
    url: "http://localhost:3000/api/webhooks/stripe"
delivery:
  - destination: "stripe-handler"

Monitor Stripe payment events in real-time and replay them for testing.

GitHub Webhooks

# unhook.yaml
webhookUrl: "https://unhook.sh/your-org/your-github-webhook"
destination:
  - name: "github-handler"
    url: "http://localhost:3000/api/webhooks/github"
delivery:
  - destination: "github-handler"

Track repository events like pushes, pull requests, and issues.

Clerk Authentication

# unhook.yaml
webhookUrl: "https://unhook.sh/your-org/your-clerk-webhook"
destination:
  - name: "auth-handler"
    url: "http://localhost:3000/api/webhooks/clerk"
delivery:
  - destination: "auth-handler"

Monitor user authentication events and session changes.

Advanced Features

Custom Event Filtering

Filter events by various criteria:

Provider: Filter by Stripe, GitHub, Clerk, etc.
Status: Show only successful or failed events
Time range: Filter by recent events
Event type: Filter by specific event types

Event Export

Export webhook events for analysis:

Select events in the sidebar
Right-click and choose “Export Events”
Choose format (JSON, CSV)
Download the exported file

Performance Monitoring

Track webhook performance metrics:

Response times: Monitor how fast your endpoints respond
Success rates: Track webhook delivery success
Error patterns: Identify common failure causes

Troubleshooting

Common Issues

Extension Not Loading

No Events Showing

Authentication Issues

Replay Not Working

Debug Mode

Enable debug mode for detailed logging:

Open Command Palette (Ctrl+Shift+P / Cmd+Shift+P)
Run “Developer: Toggle Developer Tools”
Check the Console tab for extension logs

Best Practices

Keep the sidebar open: Monitor webhooks while coding
Use event replay: Test your handlers with real data
Filter events: Focus on relevant events for your development
Export for analysis: Save important events for later review
Collaborate with team: Share events for debugging sessions

Keyboard Shortcuts

Action	Windows/Linux	macOS
Open Unhook sidebar	`Ctrl+Shift+U`	`Cmd+Shift+U`
Refresh events	`Ctrl+R`	`Cmd+R`
Replay selected event	`Ctrl+Shift+R`	`Cmd+Shift+R`
Export events	`Ctrl+Shift+E`	`Cmd+Shift+E`

Next Steps

CLI Tool - Command line webhook testing
Team Collaboration - Work with your team
Provider Integrations - Connect with services
MCP Integration - AI-powered webhook debugging

Get Started

Reference

Solutions

Development

​VS Code Extension

​Overview

​Installation

​Quick Start

​Features

​Real-time Webhook Monitoring

Live Event Feed

Event Details

Status Tracking

Provider Filtering

​Webhook Event Inspection

​Event Replay

​Team Collaboration

​Configuration

​Workspace Configuration

​VS Code Settings

​Environment Variables

​Usage Guide

​Viewing Webhook Events

​Inspecting Event Details

​Replaying Events

​Debugging Failed Events

​Integration Examples

​Stripe Webhooks

​GitHub Webhooks

​Clerk Authentication

​Advanced Features

​Custom Event Filtering

​Event Export

​Performance Monitoring

​Troubleshooting

​Common Issues

​Debug Mode

​Best Practices

​Keyboard Shortcuts

​Next Steps