feat: send test webhook (#4737)

devinat1 · web-flow · commit a5347325fbff · 2025-09-12T12:32:31.000-07:00
* feat: send test webhook

* chore: lint
diff --git a/valhalla/jawn/src/controllers/public/webhookController.ts b/valhalla/jawn/src/controllers/public/webhookController.ts
@@ -14,6 +14,7 @@ import { Result, err, ok } from "../../packages/common/result";
 import { type JawnAuthenticatedRequest } from "../../types/request";
 import crypto from "crypto";
 import { dbExecute } from "../../lib/shared/db/dbExecute";
+import { sendTestWebhook } from "../../lib/clients/webhookSender";
 
 export interface WebhookData {
   destination: string;
@@ -140,4 +141,44 @@ export class WebhookController extends Controller {
       return ok(null);
     }
   }
+
+  @Post("/{webhookId}/test")
+  public async testWebhook(
+    @Path() webhookId: string,
+    @Request() request: JawnAuthenticatedRequest
+  ): Promise<Result<{ success: boolean; message: string }, string>> {
+    // Fetch the webhook configuration
+    const webhookResult = await dbExecute<{
+      id: string;
+      destination: string;
+      config: string;
+      hmac_key: string;
+    }>(
+      `SELECT id, destination, config, hmac_key 
+       FROM webhooks 
+       WHERE id = $1 AND org_id = $2`,
+      [webhookId, request.authParams.organizationId]
+    );
+
+    if (webhookResult.error || !webhookResult.data || webhookResult.data.length === 0) {
+      this.setStatus(404);
+      return err("Webhook not found");
+    }
+
+    const webhook = webhookResult.data[0];
+    
+    // Send test webhook with mock data
+    const testResult = await sendTestWebhook(webhook);
+    
+    if (testResult.error) {
+      this.setStatus(500);
+      return err(testResult.error);
+    }
+
+    this.setStatus(200);
+    return ok({ 
+      success: true, 
+      message: testResult.data || "Test webhook sent successfully" 
+    });
+  }
 }
diff --git a/valhalla/jawn/src/lib/clients/webhookSender.ts b/valhalla/jawn/src/lib/clients/webhookSender.ts
@@ -1,7 +1,8 @@
 import { Database } from "../db/database.types";
 import { createHmac } from "crypto";
-import { PromiseGenericResult, ok } from "../../packages/common/result";
+import { PromiseGenericResult, ok, err } from "../../packages/common/result";
 import { WebhookConfig } from "../shared/types";
+import { randomUUID } from "crypto";
 
 export type WebhookPayload = {
   payload: {
@@ -168,3 +169,173 @@ export async function sendToWebhook(
 
   return ok(`Successfully sent to webhook`);
 }
+
+// Generate mock data for testing webhooks
+function generateMockWebhookData(): WebhookData {
+  const requestId = randomUUID();
+  const timestamp = Math.floor(Date.now() / 1000);
+  
+  // Mock OpenAI chat completion request
+  const requestBody = {
+    model: "gpt-4o",
+    messages: [
+      {
+        role: "user",
+        content: "test message"
+      }
+    ]
+  };
+
+  // Mock OpenAI chat completion response
+  const responseBody = {
+    id: `chatcmpl-${randomUUID().substring(0, 29)}`,
+    object: "chat.completion",
+    created: timestamp,
+    model: "gpt-4o-2024-08-06",
+    choices: [
+      {
+        index: 0,
+        message: {
+          role: "assistant",
+          content: "Hey! Not much, just here to help you out. What's up with you?",
+          refusal: null,
+          annotations: []
+        },
+        logprobs: null,
+        finish_reason: "stop"
+      }
+    ],
+    usage: {
+      prompt_tokens: 13,
+      completion_tokens: 17,
+      total_tokens: 30,
+      prompt_tokens_details: {
+        cached_tokens: 0,
+        audio_tokens: 0
+      },
+      completion_tokens_details: {
+        reasoning_tokens: 0,
+        audio_tokens: 0,
+        accepted_prediction_tokens: 0,
+        rejected_prediction_tokens: 0
+      }
+    },
+    service_tier: "default",
+    system_fingerprint: `fp_${randomUUID().substring(0, 14)}`
+  };
+
+  // Generate mock S3 URL with AWS signature
+  const s3Url = `https://s3.us-west-2.amazonaws.com/request-response-storage/organizations/${randomUUID()}/requests/${requestId}/request_response_body?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=MOCKAWSCREDENTIAL%2F${new Date().toISOString().split('T')[0].replace(/-/g, '')}%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=${new Date().toISOString().replace(/[:-]/g, '').split('.')[0]}Z&X-Amz-Expires=86400&X-Amz-Security-Token=MockSecurityToken&X-Amz-Signature=mocksignature123456789&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject`;
+
+  return {
+    request_id: requestId,
+    request_body: JSON.stringify(requestBody),
+    response_body: JSON.stringify(responseBody),
+    request_response_url: s3Url,
+    model: "gpt-4o-2024-08-06",
+    provider: "OPENAI",
+    metadata: {
+      cost: 0.00020250000000000002,
+      promptTokens: 13,
+      completionTokens: 17,
+      totalTokens: 30,
+      latencyMs: 930
+    }
+  };
+}
+
+// Test webhook sender without delay
+export async function sendTestWebhook(
+  webhook: {
+    id: string;
+    destination: string;
+    config: string | any;
+    hmac_key: string;
+  }
+): PromiseGenericResult<string> {
+  try {
+    const hmacKey = webhook.hmac_key ?? "";
+    let config: WebhookConfig;
+    
+    // Handle both string and object configs (database might return either)
+    if (typeof webhook.config === 'string') {
+      try {
+        config = (JSON.parse(webhook.config) as WebhookConfig) || {};
+      } catch (parseError) {
+        return err(`Failed to parse webhook config: ${parseError instanceof Error ? parseError.message : 'Invalid JSON'}`);
+      }
+    } else {
+      config = (webhook.config as WebhookConfig) || {};
+    }
+    
+    const includeData = config.includeData !== false;
+
+    if (
+      !webhook.destination ||
+      typeof webhook.destination !== "string" ||
+      !webhook.destination.startsWith("https://")
+    ) {
+      return err(`Invalid destination URL. Must start with https://`);
+    }
+
+    // Generate mock data
+    const mockData = generateMockWebhookData();
+    
+    // Create webhook payload based on includeData setting
+    const webHookPayloadObj: WebhookData = {
+      request_id: mockData.request_id,
+      request_body: mockData.request_body,
+      response_body: mockData.response_body,
+    };
+
+    // Add additional data if includeData is true
+    if (includeData) {
+      webHookPayloadObj.request_response_url = mockData.request_response_url;
+      webHookPayloadObj.model = mockData.model;
+      webHookPayloadObj.provider = mockData.provider;
+      webHookPayloadObj.metadata = mockData.metadata;
+    }
+
+    const webHookPayload = JSON.stringify(webHookPayloadObj);
+
+    // Generate HMAC signature
+    const hmac = createHmac("sha256", hmacKey);
+    hmac.update(webHookPayload);
+    const hash = hmac.digest("hex");
+
+    // Set a shorter timeout for test webhooks (10 seconds)
+    const controller = new AbortController();
+    const timeoutId = setTimeout(() => controller.abort(), 10 * 1000);
+
+    try {
+      const response = await fetch(webhook.destination, {
+        method: "POST",
+        body: webHookPayload,
+        headers: {
+          "Content-Type": "application/json",
+          "Helicone-Signature": hash,
+        },
+        signal: controller.signal,
+      });
+
+      if (!response.ok) {
+        throw new Error(
+          `Webhook test failed with status ${response.status}: ${response.statusText}`
+        );
+      }
+    } finally {
+      clearTimeout(timeoutId);
+    }
+  } catch (error: unknown) {
+    if (error instanceof Error && error.name === "AbortError") {
+      return err("Test webhook request timed out after 10 seconds");
+    }
+    return err(
+      `Test webhook failed: ${
+        error instanceof Error ? error.message : String(error)
+      }`
+    );
+  }
+
+  return ok(`Test webhook sent successfully`);
+}
diff --git a/web/components/templates/webhooks/webhooksPage.tsx b/web/components/templates/webhooks/webhooksPage.tsx
@@ -3,6 +3,7 @@ import {
   EyeIcon,
   EyeSlashIcon,
   PlusIcon,
+  BeakerIcon,
 } from "@heroicons/react/24/outline";
 import { useMutation, useQuery } from "@tanstack/react-query";
 import { useEffect, useState } from "react";
@@ -45,6 +46,7 @@ const WebhooksPage = (props: WebhooksPageProps) => {
     undefined,
   );
   const [showChangelogBanner, setShowChangelogBanner] = useState(true);
+  const [testingWebhook, setTestingWebhook] = useState<string | null>(null);
 
   const [visibleHmacKeys, setVisibleHmacKeys] = useState<
     Record<string, boolean>
@@ -149,6 +151,33 @@ const WebhooksPage = (props: WebhooksPageProps) => {
     },
   });
 
+  const testWebhook = useMutation({
+    mutationFn: async (id: string) => {
+      const jawn = getJawnClient(org?.currentOrg?.id);
+      return jawn.POST(`/v1/webhooks/{webhookId}/test`, {
+        params: {
+          path: {
+            webhookId: id,
+          },
+        },
+      });
+    },
+    onSuccess: (data) => {
+      const response = data as any;
+      if (response?.data?.success) {
+        setNotification("Test webhook sent successfully!", "success");
+      } else {
+        setNotification(response?.data?.message || "Test webhook sent", "info");
+      }
+    },
+    onError: (error: Error) => {
+      setNotification(`Test failed: ${error.message}`, "error");
+    },
+    onSettled: () => {
+      setTestingWebhook(null);
+    },
+  });
+
   const handleAddWebhook = () => {
     setAddWebhookOpen(true);
   };
@@ -377,16 +406,39 @@ const WebhooksPage = (props: WebhooksPageProps) => {
                     </div>
                   </TableCell>
                   <TableCell>
-                    <Button
-                      variant="destructive"
-                      size="sm"
-                      className="ml-2 text-white"
-                      onClick={() => {
-                        deleteWebhook.mutate(webhook.id);
-                      }}
-                    >
-                      Delete
-                    </Button>
+                    <div className="flex gap-2">
+                      <Button
+                        variant="outline"
+                        size="sm"
+                        onClick={() => {
+                          setTestingWebhook(webhook.id);
+                          testWebhook.mutate(webhook.id);
+                        }}
+                        disabled={testingWebhook === webhook.id}
+                      >
+                        {testingWebhook === webhook.id ? (
+                          <>
+                            <div className="h-4 w-4 animate-spin rounded-full border-2 border-current border-t-transparent" />
+                            <span className="ml-1">Testing...</span>
+                          </>
+                        ) : (
+                          <>
+                            <BeakerIcon className="mr-1 h-4 w-4" />
+                            Test
+                          </>
+                        )}
+                      </Button>
+                      <Button
+                        variant="destructive"
+                        size="sm"
+                        className="text-white"
+                        onClick={() => {
+                          deleteWebhook.mutate(webhook.id);
+                        }}
+                      >
+                        Delete
+                      </Button>
+                    </div>
                   </TableCell>
                 </TableRow>
               ))}
