🕵️‍♂️ Webhook Inspector

Uma ferramenta poderosa para capturar, inspecionar e debugar requisições de webhook em tempo real

📋 Índice

• 🎯 Sobre o Projeto
• ✨ Funcionalidades
• 🛠 Tecnologias
• 🏗 Arquitetura
• 🚀 Instalação
• ⚙️ Configuração
• 🎮 Uso
• 📚 Documentação da API
• 📊 Banco de Dados

🎯 Sobre o Projeto

O Webhook Inspector é uma ferramenta poderosa projetada para ajudar desenvolvedores a testar, depurar e monitorar webhooks em tempo real. Com uma interface intuitiva e recursos avançados, você pode facilmente capturar, inspecionar e gerenciar todas as requisições webhook em um único lugar.

✨ Funcionalidades

• Captura em Tempo Real: Visualize as requisições webhook assim que elas chegam
• Interface Amigável: Painel intuitivo para monitorar e filtrar requisições
• Detalhes Completos: Acesse todos os detalhes da requisição, incluindo cabeçalhos, corpo e parâmetros
• Pesquisa Avançada: Filtre requisições por método, status, conteúdo e muito mais
• IA Integrada: Análise inteligente de webhooks usando IA para extrair insights e padrões
• Suporte a Múltiplos Modelos: Integração com a plataforma de IA da Google através do Vercel AI SDK
• Documentação Automática: Documentação da API gerada automaticamente com Swagger e Scalar
• Pronto para Produção: Fácil implantação com Docker e configuração simplificada

🛠 Tecnologias

🚀 Backend

Categoria	Tecnologias
Runtime
Linguagem
Framework
Banco de Dados
ORM
Validação
IA	+
Documentação	+

🌐 Frontend

Categoria	Tecnologias
Framework
Roteamento
Estilização
Gerenciamento de Estado
UI
Ícones

🛠 Ferramentas e Utilitários

Categoria	Ferramentas
Gerenciador de Pacotes
Containerização	+
Formatação
Controle de Versão

🏗 Arquitetura

Visão Geral

graph TD
    A[Cliente] -->|Envia Webhook| B[API Webhook Inspector]
    B -->|Armazena| C[(PostgreSQL)]
    B -->|Responde| A
    D[Painel Web] -->|Consulta| B
    B -->|Fornece Dados| D

Loading

🔄 Fluxo de Dados

sequenceDiagram
    participant C as Cliente
    participant W as Webhook Inspector
    participant D as Banco de Dados
    
    C->>W: Envia requisição webhook
    W->>D: Armazena requisição
    D-->>W: Confirmação
    W-->>C: Resposta HTTP
    
    loop Monitoramento
        W->>D: Consulta requisições
        D-->>W: Retorna dados
    end

Loading

💾 Banco de Dados

Schema do Banco

erDiagram
    WEBHOOKS {
        string id PK
        string method
        string pathname
        string ip
        integer statusCode
        string contentType
        integer contentLength
        jsonb queryParams
        jsonb headers
        text body
        timestamp createdAt
    }

Loading

🚀 Instalação

📋 Pré-requisitos

• Node.js 20+ (recomendado LTS)
• pnpm 8+
• Docker e Docker Compose
• Git

🔧 Instalação Passo a Passo

1. Clone o repositório

   git clone https://github.com/andersonkaiti/webhook-inspector.git
   cd webhook-inspector

2. Instale as dependências

   pnpm install

3. Configure as variáveis de ambiente

   cd api
   cp .env.example .env

4. Inicie o banco de dados

   cd api
   docker-compose up -d

5. Execute as migrações

   pnpm db:migrate

⚙️ Configuração

🔐 Variáveis de Ambiente

Edite o arquivo .env na pasta api com as seguintes configurações:

# Aplicação
NODE_ENV=development
PORT=3333

# Banco de Dados
DATABASE_URL=postgresql://docker:docker@localhost:5432/webhooks

# Segurança (gerar com: node -e "console.log(require('crypto').randomBytes(32).toString('hex'))")
# APP_SECRET=

# Logs
LOG_LEVEL=info

🎮 Uso

🚀 Desenvolvimento

Backend

1. Inicie o servidor de desenvolvimento

   cd api
   pnpm dev

2. Acesse as ferramentas do backend

   • API: http://localhost:3333
   • Documentação: http://localhost:3333/docs
   • Drizzle Studio: http://localhost:8080 (após executar pnpm db:studio)

Frontend

1. Em um novo terminal, inicie o frontend

   cd web
   pnpm dev

2. Acesse o painel web

   • Aplicação Web: http://localhost:5173

🏭 Produção

1. Compile o projeto

   cd api
   pnpm build

2. Inicie o servidor

   pnpm start

📚 Documentação

API

A API do Webhook Inspector possui documentação interativa completa disponível em http://localhost:3333/docs quando o servidor estiver em execução.

Frontend

O frontend é uma aplicação React moderna que consome a API do Webhook Inspector. A aplicação oferece uma interface intuitiva para visualizar e gerenciar os webhooks recebidos.

• Tecnologias Principais:
  • React 19 com Hooks
  • TypeScript 5.0+
  • TanStack Router para roteamento
  • TailwindCSS para estilização
  • Radix UI para componentes acessíveis
  • TanStack Query para gerenciamento de estado e cache
  • Lucide para ícones

Integração com IA

O Webhook Inspector utiliza a Vercel AI SDK em conjunto com a API da Google para fornecer recursos avançados de processamento de linguagem natural. Esta integração permite:

• Análise Inteligente: Processamento avançado do conteúdo dos webhooks para extrair informações estruturadas
• Geração de Respostas: Capacidade de gerar respostas automáticas baseadas no conteúdo dos webhooks recebidos
• Classificação: Categorização automática de webhooks para melhor organização
• Extração de Dados: Identificação e extração de informações específicas de payloads de webhook

A integração é feita através do @ai-sdk/google que fornece acesso aos modelos de IA da Google, permitindo uma experiência poderosa e escalável para processamento de linguagem natural.

📖 Visão Geral da Documentação

A documentação interativa inclui:

• Lista completa de todos os endpoints disponíveis
• Esquemas de requisição e resposta
• Exemplos de uso para cada endpoint
• Teste direto dos endpoints através da interface do navegador
• Descrições detalhadas de parâmetros e códigos de status

🔍 Acessando a Documentação

1. Inicie o servidor de desenvolvimento:

   pnpm dev

2. Acesse http://localhost:3333/docs no seu navegador