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

Derive the webhook URL only when a sub-block actually displays one, drop the
unscoped persisted block selection, and report boundary errors to PostHog.

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) {

apps/sim/stores/panel/editor/store.ts

@@ -74,7 +74,13 @@ export const usePanelEditorSearchStore = create<PanelEditorSearchState>()((set)
 
 /**
  * Editor panel store.
- * Persisted to preserve selection across navigations/refreshes.
+ *
+ * Only the connections height is persisted. `currentBlockId` is derived from the
+ * canvas selection by `syncPanelWithSelection`, and that selection is not itself
+ * persisted, so storing the id durably made the panel contradict its own source
+ * of truth: a reload restored a block in the panel that nothing on the canvas was
+ * selecting. Worse, the store has no workflow scope, so an id selected in one
+ * workflow was restored into every other one and survived until the next click.
  */
 export const usePanelEditorStore = create<PanelEditorState>()(
   persist(
@@ -128,8 +134,27 @@ export const usePanelEditorStore = create<PanelEditorState>()(
     }),
     {
       name: 'panel-editor-state',
+      version: 1,
+      /**
+       * v0 persisted `currentBlockId`. Dropping it from `partialize` alone is not
+       * enough — `persist` merges whatever is already in storage back into the
+       * store on rehydrate, so an id written before this change would keep being
+       * restored. Rebuilding the entry from the one field that is still persisted
+       * discards it for anyone already carrying one.
+       */
+      migrate: (persisted) => {
+        const source =
+          persisted !== null && typeof persisted === 'object'
+            ? (persisted as Record<string, unknown>)
+            : {}
+        return {
+          connectionsHeight:
+            typeof source.connectionsHeight === 'number'
+              ? source.connectionsHeight
+              : EDITOR_CONNECTIONS_HEIGHT.DEFAULT,
+        }
+      },
       partialize: (state) => ({
-        currentBlockId: state.currentBlockId,
         connectionsHeight: state.connectionsHeight,
       }),
       onRehydrateStorage: () => (state) => {