fix(workflow): stop the editor panel crashing the whole workflow route

Derive the webhook URL only when a sub-block actually displays one, and report
boundary errors to PostHog so the next crash arrives with a stack.

Author: waleedlatif1

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/error/index.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { Component, type ReactNode, useEffect } from 'react'
+import { Component, type ErrorInfo, type ReactNode, useEffect } from 'react'
 import { Button } from '@sim/emcn'
 import { RefreshCw } from '@sim/emcn/icons'
 import { createLogger } from '@sim/logger'
@@ -12,6 +12,36 @@ import { readCollapsedCookie } from '@/stores/sidebar/store'
 
 const logger = createLogger('ErrorBoundary')
 
+/**
+ * Reports a boundary error to PostHog.
+ *
+ * Nothing else in the app ships client exceptions anywhere, so a crash on this
+ * route survives only in the console of whoever hit it — which is why the same
+ * "Something went wrong" report has had to be diagnosed from screenshots. The
+ * env snapshot travels with the event because the failures seen so far read an
+ * empty `NEXT_PUBLIC_APP_URL`, and whether `window.__ENV` was populated at all
+ * separates a missing deployment value from a document that never ran the
+ * assignment.
+ *
+ * `posthog-js` is imported lazily so the editor route keeps the code-splitting
+ * the provider sets up, and only pays for the import on the error path.
+ */
+function reportBoundaryError(error: Error, context: Record<string, unknown>): void {
+  if (typeof window === 'undefined') return
+
+  void import('posthog-js')
+    .then(({ default: posthog }) => {
+      if (!posthog.__loaded) return
+      posthog.captureException(error, {
+        ...context,
+        pathname: window.location.pathname,
+        public_env_present: window.__ENV !== undefined,
+        app_url_present: Boolean(window.__ENV?.NEXT_PUBLIC_APP_URL),
+      })
+    })
+    .catch(() => {})
+}
+
 /**
  * Shared Error UI Component
  */
@@ -90,6 +120,11 @@ export class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundarySt
     return { hasError: true, error }
   }
 
+  public componentDidCatch(error: Error, info: ErrorInfo): void {
+    logger.error('Workflow boundary error:', { error, componentStack: info.componentStack })
+    reportBoundaryError(error, { component_stack: info.componentStack })
+  }
+
   public render() {
     if (this.state.hasError) {
       return this.props.fallback || <ErrorUI />
@@ -111,6 +146,7 @@ interface NextErrorProps {
 export function NextError({ error, reset }: NextErrorProps) {
   useEffect(() => {
     logger.error('Workflow error:', { error })
+    reportBoundaryError(error, { digest: error.digest })
   }, [error])
 
   return <ErrorUI onReset={reset} />

apps/sim/hooks/use-webhook-management.ts

@@ -100,13 +100,24 @@ export function useWebhookManagement({
     useCallback((state) => state.getValue(blockId, 'triggerPath') as string | null, [blockId])
   )
 
+  /**
+   * Derived only when the caller actually renders the URL. `getBaseUrl()` throws
+   * when `NEXT_PUBLIC_APP_URL` is unset, and `sub-block.tsx` mounts this hook for
+   * every sub-block in the editor panel — deriving the URL unconditionally turns
+   * a missing deployment value into a render throw for fields that never display
+   * one, taking down the whole editor instead of the single webhook field.
+   * Consumers already gate their reads on `useWebhookUrl`.
+   */
   const webhookUrl = useMemo(() => {
+    if (!useWebhookUrl) {
+      return ''
+    }
     const baseUrl = getBaseUrl()
     if (!webhookPath) {
       return `${baseUrl}/api/webhooks/trigger/${blockId}`
     }
     return `${baseUrl}/api/webhooks/trigger/${webhookPath}`
-  }, [webhookPath, blockId])
+  }, [useWebhookUrl, webhookPath, blockId])
 
   useEffect(() => {
     if (triggerId && !isPreview) {