feat: dashboard analytics for webhooks

Author: arcoraven

apps/dashboard/src/@/api/analytics.ts

@@ -24,9 +24,7 @@ async function fetchAnalytics(
   input: string | URL,
   init?: RequestInit,
 ): Promise<Response> {
-  // const token = await getAuthToken();
-  // DEBUG
-  const token = 'eyJhbGciOiJFUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiIweDAxNjc1N2REZjJBYjZhOTk4YTQ3MjlBODBhMDkxMzA4ZDkwNTlFMTciLCJzdWIiOiIweGE1Qjg0OTJEODIyM0QyNTVkQjI3OUM3YzNlYmRBMzRCZTVlQzlEODUiLCJhdWQiOiJ0aGlyZHdlYi5jb20iLCJleHAiOjE3NTA4NjU2NzQsIm5iZiI6MTc1MDYwNTg3MiwiaWF0IjoxNzUwNjA2NDc0LCJqdGkiOiIzNmNjOGExYjBhYWY5ODA4ZWEyMjIyOTc4MzI5NDEwMzlkNDA2OTE0ZTJhN2U3YTQxYmM4ZDc1MWJiOTAzODk4IiwiY3R4Ijp7fX0.MHgzZGE4ZGUyM2M1Y2U2ZGExNWY0MTM4OGM3YjFjM2ZhNWNjODlkMDM3M2Q0ZjJkZDg0NGNmZWM1OTJlNTY4MDY3NGY2MmJkNWY1ZWIxMWIyYWRkNmRkN2Q3NmFlNWJjNTgxNWYzNTYwNDk3NzVkYjNiZGJlNTVjNDQyNDFjMTYzZTFi';
+  const token = await getAuthToken();
   if (!token) {
     throw new Error("You are not authorized to perform this action");
   }

apps/dashboard/src/@/api/webhooks.ts

@@ -4,26 +4,26 @@ import "server-only";
 import { NEXT_PUBLIC_THIRDWEB_API_HOST } from "@/constants/public-envs";
 import { getAuthToken } from "./auth-token";
 
-    export type WebhookConfig = {
-        id: string;
-        description: string | null;
-        createdAt: Date;
-        updatedAt: Date;
-        deletedAt: Date | null;
-        teamId: string;
-        projectId: string;
-        destinationUrl: string;
-        pausedAt: Date | null;
-        webhookSecret: string;
-    }
+export type WebhookConfig = {
+  id: string;
+  description: string | null;
+  createdAt: Date;
+  updatedAt: Date;
+  deletedAt: Date | null;
+  teamId: string;
+  projectId: string;
+  destinationUrl: string;
+  pausedAt: Date | null;
+  webhookSecret: string;
+};
 
 export async function getWebhookConfigs(
   teamIdOrSlug: string,
   projectIdOrSlug: string,
-): Promise< {data: WebhookConfig[] } |  {error: string}> {
+): Promise<{ data: WebhookConfig[] } | { error: string }> {
   const token = await getAuthToken();
   if (!token) {
-    return { error: "Unauthorized." }
+    return { error: "Unauthorized." };
   }
 
   const res = await fetch(
@@ -35,14 +35,15 @@ export async function getWebhookConfigs(
     },
   );
   try {
-    const json = (await res.json()) as { data: WebhookConfig[],
-        error: { message: string};
-     };
-     if (json.error) {
-        return { error: json.error.message }
-     }
-     return { data: json.data }
-  } catch (e) {
-    return { error: "Failed to fetch webhooks." }
+    const json = (await res.json()) as {
+      data: WebhookConfig[];
+      error: { message: string };
+    };
+    if (json.error) {
+      return { error: json.error.message };
+    }
+    return { data: json.data };
+  } catch {
+    return { error: "Failed to fetch webhooks." };
   }
 }

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/analytics/analytics-page.tsx

@@ -1,5 +1,6 @@
 import { subHours } from "date-fns";
 import { AlertTriangleIcon, ClockIcon } from "lucide-react";
+import { toast } from "sonner";
 import {
   getWebhookLatency,
   getWebhookRequests,
@@ -12,9 +13,7 @@ import {
   type Range,
 } from "@/components/analytics/date-range-selector";
 import { RangeSelector } from "@/components/analytics/range-selector";
-import { ThirdwebBarChart } from "@/components/blocks/charts/bar-chart";
-import { Card, CardContent } from "@/components/ui/card";
-import type { ChartConfig } from "@/components/ui/chart";
+import { StatCard } from "@/components/analytics/stat";
 import type {
   WebhookLatencyStats,
   WebhookRequestStats,
@@ -23,16 +22,12 @@ import type {
 import { LatencyChart } from "./latency-chart";
 import { StatusCodesChart } from "./status-codes-chart";
 import { WebhookSelector } from "./webhook-selector";
-import { toast } from "sonner";
-import { StatCard } from "@/components/analytics/stat";
-
-
 
 type WebhookAnalyticsProps = {
   interval: "day" | "week";
   range: Range;
   selectedWebhookId: string | null;
-  webhooks: WebhookConfig[];
+  webhooksConfigs: WebhookConfig[];
   requestStats: WebhookRequestStats[];
   latencyStats: WebhookLatencyStats[];
   summaryStats: WebhookSummaryStats[];
@@ -42,91 +37,67 @@ function WebhookAnalytics({
   interval,
   range,
   selectedWebhookId,
-  webhooks,
+  webhooksConfigs,
   requestStats,
   latencyStats,
   summaryStats,
 }: WebhookAnalyticsProps) {
-
   // Calculate overview metrics for the last 24 hours
-  const last24HoursSummary = summaryStats.find(
-    (s) => s.webhookId === selectedWebhookId,
-  );
-  const errorRate = 100 - (last24HoursSummary?.successRate || 0);
-  const avgLatency = last24HoursSummary?.avgLatencyMs || 0;
+  const errorRate = 100 - (summaryStats[0]?.successRate || 0);
+  const avgLatency = summaryStats[0]?.avgLatencyMs || 0;
 
-  // Transform request data for combined chart
+  // Transform request data for combined chart.
   const allRequestsData = requestStats
-    .filter(
-      (stat) => !selectedWebhookId || stat.webhookId === selectedWebhookId,
-    )
     .reduce((acc, stat) => {
+      const statusCode = stat.httpStatusCode.toString();
       const existingEntry = acc.find((entry) => entry.time === stat.date);
       if (existingEntry) {
-        existingEntry.totalRequests += stat.totalRequests;
-        existingEntry[stat.httpStatusCode.toString()] =
-          (existingEntry[stat.httpStatusCode.toString()] || 0) +
-          stat.totalRequests;
+        existingEntry[statusCode] =
+          (existingEntry[statusCode] || 0) + stat.totalRequests;
       } else {
         acc.push({
-          time: stat.date, // Changed from 'date' to 'time'
-          totalRequests: stat.totalRequests,
-          [stat.httpStatusCode.toString()]: stat.totalRequests,
+          time: stat.date,
+          [statusCode]: stat.totalRequests,
         });
       }
       return acc;
     }, [] as any[])
     .sort((a, b) => new Date(a.time).getTime() - new Date(b.time).getTime());
 
-  // Transform latency data for line chart
+  // Transform latency data for line chart.
   const latencyData = latencyStats
-    .filter(
-      (stat) => !selectedWebhookId || stat.webhookId === selectedWebhookId,
-    )
-    .map((stat) => ({
-      p50LatencyMs: stat.p50LatencyMs, // Changed from 'date' to 'time'
-      p90LatencyMs: stat.p90LatencyMs,
-      p99LatencyMs: stat.p99LatencyMs,
-      time: stat.date,
-    }))
+    .map((stat) => ({ ...stat, time: stat.date }))
     .sort((a, b) => new Date(a.time).getTime() - new Date(b.time).getTime());
 
   return (
     <div className="flex flex-col gap-6">
-      {/* Webhook Selector */}
       <WebhookSelector
         selectedWebhookId={selectedWebhookId}
-        webhooks={webhooks}
+        webhooks={webhooksConfigs}
       />
 
-      {/* Overview Cards */}
       <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
         <StatCard
+          formatter={(value) => `${value.toFixed(2)}%`}
           icon={AlertTriangleIcon}
           isPending={false}
           label="Error Rate (24h)"
           value={errorRate}
-          formatter={(value) => `${value.toFixed(2)}%`}
         />
-         <StatCard
+        <StatCard
+          formatter={(value) => `${value.toFixed(0)}ms`}
           icon={ClockIcon}
           isPending={false}
           label="P50 Latency (24h)"
           value={avgLatency}
-          formatter={(value) => `${value.toFixed(0)}ms`}
         />
       </div>
 
       <RangeSelector interval={interval} range={range} />
 
       <div className="flex flex-col gap-4 lg:gap-6">
-        {selectedWebhookId && (
-          <StatusCodesChart data={allRequestsData} isPending={false} />
-        )}
-
-        {selectedWebhookId && (
-          <LatencyChart data={latencyData} isPending={false} />
-        )}
+        <StatusCodesChart data={allRequestsData} isPending={false} />
+        <LatencyChart data={latencyData} isPending={false} />
       </div>
     </div>
   );
@@ -146,80 +117,53 @@ export async function AnalyticsPageContent({
 }) {
   // Parse search params for filters
   const selectedWebhookId = searchParams?.webhookId as string | undefined;
-  const interval = (searchParams?.interval as "day" | "week") || DEFAULT_INTERVAL;
+  const interval =
+    (searchParams?.interval as "day" | "week") || DEFAULT_INTERVAL;
   const range = DEFAULT_RANGE; // Could be enhanced to parse from search params
 
-  // Fetch webhooks
-  const webhooksResponse = await getWebhookConfigs(teamSlug, project.id);
-  if ("error" in webhooksResponse) {
-    toast.error(webhooksResponse.error);
+  // Get webhook configs.
+  const webhooksConfigsResponse = await getWebhookConfigs(teamSlug, project.id);
+  if ("error" in webhooksConfigsResponse) {
+    toast.error(webhooksConfigsResponse.error);
     return null;
   }
 
-  const webhooks: WebhookConfig[] =
-    webhooksResponse.data.length > 0
-      ? webhooksResponse.data
-      : [
-          {
-            id: "8582b449-551e-429f-99c4-5359f253dce1",
-            description: "Webhook 2",
-            createdAt: new Date(),
-            updatedAt: new Date(),
-            deletedAt: null,
-            teamId: 'team_clmb33q9w00gn1x0u2ri8z0k0',
-            projectId: 'prj_cm6ibyah500bgxag5q7d79fps',
-            destinationUrl: "https://example.com/webhook2",
-            pausedAt: null,
-            webhookSecret: "secret",
-          },
-        ];
-
-  // Fetch analytics data
+  // Get webhook analytics.
   const [requestStats, latencyStats, summaryStats] = await Promise.all([
     getWebhookRequests({
-      teamId: 'team_clmb33q9w00gn1x0u2ri8z0k0',
-      projectId: 'prj_cm6ibyah500bgxag5q7d79fps',
-      // teamId: project.teamId,
-      // projectId: project.id,
+      teamId: project.teamId,
+      projectId: project.id,
       from: range.from,
-      to: range.to,
       period: interval,
+      to: range.to,
       webhookId: selectedWebhookId || undefined,
     }).catch(() => []),
     getWebhookLatency({
-      teamId: 'team_clmb33q9w00gn1x0u2ri8z0k0',
-      projectId: 'prj_cm6ibyah500bgxag5q7d79fps',
-      // teamId: project.teamId,
-      // projectId: project.id,
+      teamId: project.teamId,
+      projectId: project.id,
       from: range.from,
-      to: range.to,
       period: interval,
+      to: range.to,
       webhookId: selectedWebhookId || undefined,
     }).catch(() => []),
     getWebhookSummary({
-      teamId: 'team_clmb33q9w00gn1x0u2ri8z0k0',
-      projectId: 'prj_cm6ibyah500bgxag5q7d79fps',
-      // teamId: project.teamId,
-      // projectId: project.id,
+      teamId: project.teamId,
+      projectId: project.id,
       from: subHours(new Date(), 24),
       to: new Date(),
       webhookId: selectedWebhookId || undefined,
     }).catch(() => []),
   ]);
 
-  console.log("requestStats", requestStats);
-  console.log("latencyStats", latencyStats);
-  console.log("summaryStats", summaryStats);
-
   return (
     <WebhookAnalytics
       interval={interval}
+      latencyStats={latencyStats}
       range={range}
-      selectedWebhookId={selectedWebhookId || null}
-      webhooks={webhooks}
       requestStats={requestStats}
-      latencyStats={latencyStats}
+      selectedWebhookId={selectedWebhookId || null}
       summaryStats={summaryStats}
+      webhooksConfigs={webhooksConfigsResponse.data}
     />
   );
 }

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/analytics/status-codes-chart.tsx

@@ -32,9 +32,9 @@ export function StatusCodesChart({ data, isPending }: StatusCodesChartProps) {
         title: "Status Codes",
       }}
       hideLabel={false}
+      isPending={isPending}
       showLegend={true}
       variant="stacked"
-      isPending={isPending}
     />
   );
-}
+}

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/analytics/webhook-selector.tsx

@@ -24,7 +24,7 @@ export function WebhookSelector({
 
   return (
     <div className="flex flex-col gap-2">
-      <label className="text-sm font-medium">Webhook Filter</label>
+      <div className="text-sm font-medium">Webhook Filter</div>
       <Select
         onValueChange={(value) => {
           const params = new URLSearchParams(searchParams);

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/layout.tsx

@@ -25,7 +25,7 @@ export default async function WebhooksLayout(props: {
         links={[
           {
             exactMatch: true,
-            name: "Overview",
+            name: "Analytics",
             path: `/team/${params.team_slug}/${params.project_slug}/webhooks`,
           },
           {

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/page.tsx

@@ -27,15 +27,15 @@ export default async function WebhooksPage({
 
   return (
     <div>
-      <h2 className="mb-0.5 font-semibold text-xl tracking-tight">Overview</h2>
+      <h2 className="mb-0.5 font-semibold text-xl tracking-tight">Analytics</h2>
       <p className="text-muted-foreground text-sm">
         Review your webhooks usage and errors.
       </p>
       <div className="h-6" />
       <AnalyticsPageContent
         project={project}
-        teamSlug={resolvedParams.team_slug}
         searchParams={resolvedSearchParams}
+        teamSlug={resolvedParams.team_slug}
       />
     </div>
   );