Improves Event Grid validation and debugging

Enhances subscription validation coverage by handling both standard
and header-based flows. Adds a diagnostics endpoint to inspect recent
webhook requests. Updates UI and CSS to display expanded event data,
improving troubleshooting and user experience.

Author: mbertelsen

server/src/index.ts

@@ -54,13 +54,41 @@ app.post("/api/webhook/:userPath", (req: Request, res: Response) => {
   // Event Grid sends an array of events in the body
   const events = Array.isArray(req.body) ? req.body : [req.body];
 
-  // Subscription validation event
-  const validationEvent = events.find((e: any) => e && e.eventType === 'Microsoft.EventGrid.SubscriptionValidationEvent');
+  // Save last request for diagnostics
+  try {
+    lastWebhookDiagnostics.set(userPath, { headers: req.headers, body: events });
+  } catch (err) {
+    // ignore
+  }
+
+  // Diagnostic: log aeg-event-type header when present (helps Azure debugging)
+  try {
+    const aeg = String(req.header('aeg-event-type') || '');
+    if (aeg) console.log(`aeg-event-type: ${aeg}`);
+  } catch (err) {
+    // ignore
+  }
+
+  // Azure Event Grid subscription validation can arrive in two common shapes:
+  // 1) Standard validation event: an array with eventType === 'Microsoft.EventGrid.SubscriptionValidationEvent'
+  // 2) A special header 'aeg-event-type: SubscriptionValidation' with the events array
+  // Handle both cases robustly.
+  const validationEvent = events.find((e: any) => e && (e.eventType === 'Microsoft.EventGrid.SubscriptionValidationEvent' || e.eventType === 'Microsoft.EventGridSubscriptionValidationEvent'));
   if (validationEvent) {
     const data = validationEvent.data || {};
     console.log(`EventGrid subscription validation for ${userPath}:`, data);
-    // Reply with validationResponse per Event Grid requirement
-    return res.json({ validationResponse: data.validationCode });
+    return res.status(200).json({ validationResponse: data.validationCode });
+  }
+
+  // Also handle the header-based SubscriptionValidation flow
+  const aegHeader = (req.header('aeg-event-type') || '').toString();
+  if (aegHeader === 'SubscriptionValidation' && Array.isArray(events) && events.length > 0) {
+    const maybe = events[0] as any;
+    const code = maybe && maybe.data && (maybe.data.validationCode || maybe.data.validationcode || maybe.data.ValidationCode);
+    if (code) {
+      console.log(`EventGrid header-based validation for ${userPath}:`, code);
+      return res.status(200).json({ validationResponse: code });
+    }
   }
 
   // Normal events: log and ack
@@ -96,7 +124,13 @@ app.post("/api/webhook/:userPath", (req: Request, res: Response) => {
   // Notify any SSE clients connected to this webhook path
   try {
     for (const e of events) {
-      const payload = { id: e.id, eventType: e.eventType, timestamp: e.eventTime || new Date().toISOString() };
+      const payload = {
+        id: e.id,
+        eventType: e.eventType,
+        timestamp: e.eventTime || new Date().toISOString(),
+        data: e.data,
+        raw: e,
+      };
       sendSseToPath(userPath, payload);
     }
   } catch (err) {
@@ -122,6 +156,9 @@ type EventRecord = {
 const EVENT_STORE_CAP = 200;
 const eventStore = new Map<string, EventRecord[]>();
 
+// For debugging: store last request headers and body per path
+const lastWebhookDiagnostics = new Map<string, { headers: any; body: any }>();
+
 // SSE clients per webhook path
 const sseClients = new Map<string, Set<Response>>();
 
@@ -147,6 +184,14 @@ app.get('/api/webhook/:userPath/events', (_req: Request, res: Response) => {
   return res.json({ count: list.length, events: list });
 });
 
+// Diagnostic endpoint to inspect last webhook request for a path
+app.get('/__diag/webhook/:userPath', (_req: Request, res: Response) => {
+  const userPath = _req.params.userPath;
+  const diag = lastWebhookDiagnostics.get(userPath) || null;
+  const stored = eventStore.get(userPath) || [];
+  return res.json({ lastRequest: diag, storedCount: stored.length });
+});
+
 // Server-Sent Events stream for a webhook path.
 app.get('/api/webhook/:userPath/stream', (req: Request, res: Response) => {
   const userPath = req.params.userPath;

src/components/WebhookEventsPanel.css

@@ -0,0 +1,51 @@
+.webhook-events {
+  margin-top: 16px;
+}
+.webhook-events-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 8px;
+}
+.webhook-events-status {
+  color: gray;
+}
+.webhook-events-status.live {
+  color: green;
+}
+.webhook-events-list {
+  max-height: 360px;
+  overflow: auto;
+  border: 1px solid #eee;
+  padding: 8px;
+}
+.webhook-event-item {
+  padding: 6px 8px;
+  border-bottom: 1px solid #f1f1f1;
+}
+.webhook-event-meta {
+  font-size: 12px;
+  color: #666;
+}
+.webhook-event-type {
+  font-weight: 600;
+}
+.webhook-event-pre {
+  margin-top: 8px;
+  white-space: pre-wrap;
+  background: #fafafa;
+  padding: 8px;
+  border-radius: 4px;
+}
+
+.webhook-events-ul {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.webhook-event-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}

src/components/WebhookEventsPanel.tsx

@@ -1,9 +1,13 @@
 import React from 'react';
+import './WebhookEventsPanel.css';
 
 type EventItem = {
   id?: string;
   eventType: string;
   timestamp: string;
+  data?: any;
+  raw?: any;
+  expanded?: boolean;
 };
 
 interface Props {
@@ -25,7 +29,7 @@ export const WebhookEventsPanel: React.FC<Props> = ({ userPath }) => {
         const j = await r.json();
         if (!cancelled && Array.isArray(j.events)) {
           // ensure newest-first
-          setEvents(j.events.map((e: any) => ({ id: e.id, eventType: e.eventType, timestamp: e.timestamp })));
+          setEvents(j.events.map((e: any) => ({ id: e.id, eventType: e.eventType, timestamp: e.timestamp, data: e.data, raw: e.raw })));
         }
       } catch (err) {
         console.warn('Failed to load events', err);
@@ -54,8 +58,8 @@ export const WebhookEventsPanel: React.FC<Props> = ({ userPath }) => {
       es.onmessage = (ev) => {
         try {
           const data = JSON.parse(ev.data);
-          // Prepend newest-first
-          setEvents(prev => [{ id: data.id, eventType: data.eventType, timestamp: data.timestamp }, ...prev]);
+          // Prepend newest-first, include data/raw if present
+          setEvents(prev => [{ id: data.id, eventType: data.eventType, timestamp: data.timestamp, data: data.data, raw: data.raw }, ...prev]);
         } catch (err) {
           console.warn('Invalid SSE payload', err);
         }
@@ -72,20 +76,32 @@ export const WebhookEventsPanel: React.FC<Props> = ({ userPath }) => {
   }, [userPath]);
 
   return (
-    <div style={{ marginTop: 16 }}>
-      <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 8 }}>
+    <div className="webhook-events">
+      <div className="webhook-events-header">
         <strong>Events</strong>
-        <span style={{ color: connected ? 'green' : 'gray' }}>{connected ? 'live' : 'disconnected'}</span>
+        <span className={`webhook-events-status ${connected ? 'live' : ''}`}>{connected ? 'live' : 'disconnected'}</span>
       </div>
-      <div style={{ maxHeight: 360, overflow: 'auto', border: '1px solid #eee', padding: 8 }}>
+      <div className="webhook-events-list">
         {events.length === 0 ? (
           <div>No events yet.</div>
         ) : (
-          <ul style={{ listStyle: 'none', padding: 0, margin: 0 }}>
+          <ul className="webhook-events-ul">
             {events.map((e, idx) => (
-              <li key={e.id || idx} style={{ padding: '6px 8px', borderBottom: '1px solid #f1f1f1' }}>
-                <div style={{ fontSize: 12, color: '#666' }}>{new Date(e.timestamp).toLocaleString()}</div>
-                <div style={{ fontWeight: 600 }}>{e.eventType}</div>
+              <li key={e.id || idx} className="webhook-event-item">
+                <div className="webhook-event-header">
+                  <div>
+                    <div className="webhook-event-meta">{new Date(e.timestamp).toLocaleString()}</div>
+                    <div className="webhook-event-type">{e.eventType}</div>
+                  </div>
+                  <div>
+                    <button onClick={() => {
+                      setEvents(prev => prev.map((it, i) => i === idx ? { ...it, expanded: !it.expanded } : it));
+                    }}>{e.expanded ? 'Hide' : 'Show'}</button>
+                  </div>
+                </div>
+                {e.expanded && (
+                  <pre className="webhook-event-pre">{JSON.stringify(e.raw || e.data || {}, null, 2)}</pre>
+                )}
               </li>
             ))}
           </ul>

src/components/WebhookView.css

@@ -0,0 +1,32 @@
+.webhook-view {
+  padding: 24px;
+}
+.webhook-title {
+  margin: 0 0 8px 0;
+}
+.webhook-loading {
+  color: #666;
+}
+.webhook-error {
+  color: #c92a2a;
+}
+.webhook-url-row {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  max-width: 600px;
+}
+.webhook-url-input {
+  flex: 1;
+  padding: 8px;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+}
+.webhook-copy-button {
+  padding: 8px 12px;
+  background: #0078d4;
+  color: #fff;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+}

src/components/WebhookView.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { useQuery, useMutation } from 'urql';
 import { GET_USER_PROPERTIES_QUERY, APP_SCRIPT_APPLICATION, SET_USER_PROPERTIES_MUTATION, SetUserPropertiesVariables, SetUserPropertiesData } from '../graphql/userProperties';
 import WebhookEventsPanel from './WebhookEventsPanel';
+import './WebhookView.css';
 
 export const WebhookView: React.FC = () => {
   const [result] = useQuery({
@@ -63,16 +64,16 @@ export const WebhookView: React.FC = () => {
   }, [result.fetching, result.error, webhookPath, localWebhook, setProperties]);
 
   return (
-    <div style={{ padding: 24 }}>
-      <h3>My Webhook URL</h3>
-      {result.fetching && <p>Loading...</p>}
-      {result.error && <p style={{ color: 'red' }}>Error loading properties</p>}
+    <div className="webhook-view">
+      <h3 className="webhook-title">My Webhook URL</h3>
+      {result.fetching && <p className="webhook-loading">Loading...</p>}
+      {result.error && <p className="webhook-error">Error loading properties</p>}
       {!result.fetching && !webhookPath && !localWebhook && <p>Creating webhook path...</p>}
       {url && (
-        <div style={{ display: 'flex', gap: 8, alignItems: 'center', maxWidth: 600 }}>
+        <div className="webhook-url-row">
           <label htmlFor="webhook-url" className="visually-hidden">Webhook URL</label>
-          <input id="webhook-url" readOnly value={url} style={{ flex: 1, padding: 8 }} />
-          <button onClick={() => { navigator.clipboard?.writeText(url); }} style={{ padding: '8px 12px' }}>Copy</button>
+          <input id="webhook-url" readOnly value={url} className="webhook-url-input" />
+          <button onClick={() => { navigator.clipboard?.writeText(url); }} className="webhook-copy-button">Copy</button>
         </div>
       )}