From 7ae3dd0ed3629aa1c9475bac660f3202d4697a00 Mon Sep 17 00:00:00 2001
From: Vikhyath Mondreti <vikhyath@simstudio.ai>
Date: Thu, 20 Aug 2026 19:21:52 -0700
Subject: [PATCH 1/3] fix(env): put runtime config on <html> so client reads
 can't outrun it
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The inline script that assigns `window.__ENV` is rendered from the component
tree, so it lands ~13KB after the `<script async>` bootstrap tags React emits
in the preamble. `appBootstrap` calls `hydrate()` synchronously whenever
`self.__next_s` is empty — which it always is now that the script is a plain
tag rather than a `beforeInteractive` one, that queue having been the only
thing sequencing the assignment ahead of hydration. So module bodies and the
first commit could both read env before the assignment landed: the socket URL
fell back to the page origin for the life of the document, `getBaseUrl()`
threw, and every module-scope flag in `env-flags` froze on nothing.

Carry the same snapshot on `<html>`, the document's first tag, and read it in
`getEnv` when `window.__ENV` is not yet assigned. Parsing is memoized against
the raw attribute rather than against having run once, so the cache can never
serve a value the document no longer carries. `window.__ENV` stays the public
global and the preferred read, and both transports are built from one function
so they cannot drift.

Alongside: guard the read-only webhook-URL field so a base URL it cannot
resolve is a blank field rather than a dead canvas; report what the workflow
error boundary catches, which it previously swallowed entirely; and enable
PostHog's native exception capture, since error boundaries only ever see their
own subtree and chunk-load failures, rejected promises and throws from event
or socket callbacks reached nothing.
---
 .../app/_shell/providers/posthog-provider.tsx | 17 ++++
 .../sim/app/_shell/public-env-script.test.tsx | 39 ++++++++-
 apps/sim/app/_shell/public-env-script.tsx     | 57 +++++++++---
 apps/sim/app/layout.tsx                       |  4 +-
 .../w/[workflowId]/components/error/index.tsx | 51 +++++++----
 .../workflow-block/workflow-block.tsx         | 17 +++-
 .../workspace/providers/socket-provider.tsx   | 57 ++++++++++++
 apps/sim/lib/core/config/env.dom.test.ts      | 87 +++++++++++++++++++
 apps/sim/lib/core/config/env.ts               | 80 ++++++++++++++---
 apps/sim/lib/posthog/events.ts                | 28 ++++++
 packages/testing/src/mocks/env.mock.ts        |  7 ++
 11 files changed, 396 insertions(+), 48 deletions(-)
 create mode 100644 apps/sim/lib/core/config/env.dom.test.ts
diff --git a/apps/sim/app/_shell/providers/posthog-provider.tsx b/apps/sim/app/_shell/providers/posthog-provider.tsx
index 17e3f8c040b..d7c0152476f 100644
--- a/apps/sim/app/_shell/providers/posthog-provider.tsx
+++ b/apps/sim/app/_shell/providers/posthog-provider.tsx
@@ -35,6 +35,23 @@ export function PostHogProvider({ children }: { children: React.ReactNode }) {
             capture_performance: false,
             capture_dead_clicks: false,
             enable_heatmaps: false,
+            /**
+             * PostHog's own error tracking, wired to `window.onerror` and
+             * `unhandledrejection`. This is the app-wide net: React error
+             * boundaries only see errors thrown inside the tree they wrap, and
+             * a failed chunk load, a rejected promise, or anything thrown from
+             * an event handler or socket callback reaches none of them.
+             *
+             * `capture_console_errors` stays off. It is not error reporting —
+             * it captures every `console.error`, which here means React's
+             * hydration and dev warnings (the ones `HydrationErrorHandler`
+             * already filters out as noise) drowning the real exceptions.
+             */
+            capture_exceptions: {
+              capture_unhandled_errors: true,
+              capture_unhandled_rejections: true,
+              capture_console_errors: false,
+            },
             disable_session_recording: true,
             session_recording: {
               maskAllInputs: false,
diff --git a/apps/sim/app/_shell/public-env-script.test.tsx b/apps/sim/app/_shell/public-env-script.test.tsx
index 7eb6aadf3ec..efe90cb73d1 100644
--- a/apps/sim/app/_shell/public-env-script.test.tsx
+++ b/apps/sim/app/_shell/public-env-script.test.tsx
@@ -2,8 +2,11 @@
  * @vitest-environment node
  */
 import { renderToStaticMarkup } from 'react-dom/server'
-import { describe, expect, it } from 'vitest'
-import { PublicEnvScript } from '@/app/_shell/public-env-script'
+import { describe, expect, it, vi } from 'vitest'
+import { PUBLIC_ENV_ATTRIBUTE } from '@/lib/core/config/env'
+import { PublicEnvScript, publicEnvHtmlAttributes } from '@/app/_shell/public-env-script'
+
+vi.unmock('@/lib/core/config/env')
 
 /**
  * Guards the one property that matters: the emitted tag assigns `window.__ENV`
@@ -32,3 +35,35 @@ describe('PublicEnvScript', () => {
     expect(keys.every((key) => /^NEXT_PUBLIC_/i.test(key))).toBe(true)
   })
 })
+
+/**
+ * The script above is rendered from the component tree, so it lands at the end
+ * of `<head>` - after the bootstrap chunks that can already be executing. These
+ * attributes go on `<html>`, the document's first tag, which is what makes the
+ * same values readable by code that runs in that gap.
+ */
+describe('publicEnvHtmlAttributes', () => {
+  it('carries the public env under the attribute getEnv reads', () => {
+    const attributes = publicEnvHtmlAttributes()
+
+    expect(Object.keys(attributes)).toEqual([PUBLIC_ENV_ATTRIBUTE])
+    expect(() => JSON.parse(attributes[PUBLIC_ENV_ATTRIBUTE])).not.toThrow()
+  })
+
+  it('exposes only NEXT_PUBLIC_ variables', () => {
+    const values = JSON.parse(publicEnvHtmlAttributes()[PUBLIC_ENV_ATTRIBUTE])
+
+    expect(Object.keys(values).every((key) => /^NEXT_PUBLIC_/i.test(key))).toBe(true)
+  })
+
+  /**
+   * Two transports for one snapshot only stays safe while they agree; a reader
+   * that resolved different values depending on which one it happened to hit
+   * would be worse than the race this replaces.
+   */
+  it('carries exactly what the script assigns', () => {
+    const values = JSON.parse(publicEnvHtmlAttributes()[PUBLIC_ENV_ATTRIBUTE])
+
+    expect(values).toEqual(PublicEnvScript().props.env)
+  })
+})
diff --git a/apps/sim/app/_shell/public-env-script.tsx b/apps/sim/app/_shell/public-env-script.tsx
index b2ff7b0f58e..a1a97765c7a 100644
--- a/apps/sim/app/_shell/public-env-script.tsx
+++ b/apps/sim/app/_shell/public-env-script.tsx
@@ -1,19 +1,48 @@
 import { EnvScript } from 'next-runtime-env'
+import { PUBLIC_ENV_ATTRIBUTE } from '@/lib/core/config/env'
+
+/**
+ * Every `NEXT_PUBLIC_*` value currently in `process.env`. Filter matches
+ * `next-runtime-env`'s own `getPublicEnv()` exactly.
+ */
+function readPublicEnv(): Record<string, string | undefined> {
+  return Object.fromEntries(
+    Object.entries(process.env).filter(([key]) => /^NEXT_PUBLIC_/i.test(key))
+  )
+}
 
 /**
  * `NEXT_PUBLIC_*` values, captured once when this module is first loaded - i.e.
  * at server start on the hosted deployment, where a build's env never changes
- * between requests. Filter matches `next-runtime-env`'s own `getPublicEnv()`
- * exactly.
+ * between requests (`bootstrap.ts` awaits the runtime secret before importing
+ * the server, so `process.env` is complete before any module evaluates).
  *
  * These are deliberately NOT the values Next inlines into the client bundle:
  * the image is built with placeholder `NEXT_PUBLIC_*` values and the real ones
- * are supplied to the container at start, so `window.__ENV` is the only source
- * of truth in the browser.
+ * are supplied to the container at start, so the browser has no compiled-in
+ * copy to fall back on.
+ */
+const HOSTED_PUBLIC_ENV = readPublicEnv()
+
+/**
+ * Props to spread onto the `<html>` element so the public env is readable by any
+ * client code that can run at all.
+ *
+ * The script below is rendered from the component tree and therefore lands at
+ * the end of `<head>`, well after the `<script async>` bootstrap tags React
+ * emits in the preamble — see {@link PUBLIC_ENV_ATTRIBUTE} for the full ordering
+ * argument and why that gap is reachable. `<html>` is the document's first tag,
+ * so its attributes are parsed before any script exists to read them.
+ *
+ * Read fresh rather than from {@link HOSTED_PUBLIC_ENV} so the one helper serves
+ * both deployment modes: self-hosted images re-inject env per deploy without a
+ * rebuild, and `next-runtime-env`'s script reads `process.env` per request for
+ * exactly that reason. On hosted the two reads are the same values, because
+ * nothing mutates `process.env` after boot.
  */
-const HOSTED_PUBLIC_ENV = Object.fromEntries(
-  Object.entries(process.env).filter(([key]) => /^NEXT_PUBLIC_/i.test(key))
-)
+export function publicEnvHtmlAttributes(): Record<string, string> {
+  return { [PUBLIC_ENV_ATTRIBUTE]: JSON.stringify(readPublicEnv()) }
+}
 
 /**
  * Static equivalent of `next-runtime-env`'s `<PublicEnvScript>` for the hosted
@@ -35,13 +64,13 @@ const HOSTED_PUBLIC_ENV = Object.fromEntries(
  * `window.__ENV` stays undefined for the entire lifetime of the document -
  * every `getEnv` read empty, until a reload happens to win the race.
  *
- * A plain `<script>` assigns unconditionally when the parser reaches it. When
- * it is reached before the bootstrap chunk runs it lands strictly earlier than
- * the queue drain would have; when it is not, the value still arrives a few
- * milliseconds late instead of never. There is no supported way to place an
- * inline script ahead of the framework's own bootstrap tags - React emits those
- * in the preamble, before any content from the component tree - so the goal is
- * to make losing that race harmless rather than to try to win it.
+ * A plain `<script>` assigns unconditionally when the parser reaches it, so a
+ * lost race costs milliseconds instead of the session. It does not make the
+ * assignment win the race, though: draining that queue was also the only thing
+ * sequencing the assignment ahead of `hydrate()`, and with the queue empty
+ * `appBootstrap` hydrates synchronously. {@link publicEnvHtmlAttributes} is what
+ * closes the remaining window - this tag stays because `window.__ENV` is the
+ * documented global, and it is what `getEnv` reads first.
  */
 export function PublicEnvScript() {
   return <EnvScript env={HOSTED_PUBLIC_ENV} disableNextScript />
diff --git a/apps/sim/app/layout.tsx b/apps/sim/app/layout.tsx
index aaa0b96fb16..6a338b43a47 100644
--- a/apps/sim/app/layout.tsx
+++ b/apps/sim/app/layout.tsx
@@ -19,7 +19,7 @@ import { QueryProvider } from '@/app/_shell/providers/query-provider'
 import { SessionProvider } from '@/app/_shell/providers/session-provider'
 import { ThemeProvider } from '@/app/_shell/providers/theme-provider'
 import { TooltipProvider } from '@/app/_shell/providers/tooltip-provider'
-import { PublicEnvScript } from '@/app/_shell/public-env-script'
+import { PublicEnvScript, publicEnvHtmlAttributes } from '@/app/_shell/public-env-script'
 import { season } from '@/app/_styles/fonts/season/season'
 
 export const viewport: Viewport = {
@@ -40,7 +40,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
   const themeCSS = generateThemeCSS()
 
   return (
-    <html lang='en' suppressHydrationWarning>
+    <html lang='en' suppressHydrationWarning {...publicEnvHtmlAttributes()}>
       <head>
         {isReactScanEnabled && (
           <Script
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/error/index.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/error/index.tsx
index 5e5802eef4a..747f1cde0a4 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/error/index.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/error/index.tsx
@@ -1,10 +1,12 @@
 'use client'
 
-import { Component, type ReactNode, useEffect } from 'react'
+import { Component, type ErrorInfo, type ReactNode } from 'react'
 import { Button } from '@sim/emcn'
 import { RefreshCw } from '@sim/emcn/icons'
 import { createLogger } from '@sim/logger'
+import { truncate } from '@sim/utils/string'
 import { ReactFlowProvider } from 'reactflow'
+import { captureClientEvent } from '@/lib/posthog/client'
 import { Panel } from '@/app/workspace/[workspaceId]/w/[workflowId]/components'
 import { usePreventZoom } from '@/app/workspace/[workspaceId]/w/[workflowId]/hooks'
 import { Sidebar } from '@/app/workspace/[workspaceId]/w/components/sidebar/sidebar'
@@ -12,6 +14,9 @@ import { readCollapsedCookie } from '@/stores/sidebar/store'
 
 const logger = createLogger('ErrorBoundary')
 
+/** Keeps a runaway stack out of the event payload without losing the top frames. */
+const MAX_REPORTED_COMPONENT_STACK = 2000
+
 /**
  * Shared Error UI Component
  */
@@ -90,6 +95,33 @@ export class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundarySt
     return { hasError: true, error }
   }
 
+  /**
+   * Reports what was caught. This boundary latches for the life of the document
+   * and its fallback names nothing, so without this the only trace of a canvas
+   * crash is React's own console output on whichever machine happened to hit it
+   * — leaving an intermittent failure with no evidence to diagnose from.
+   * `error.name` is carried separately from the message because it is what
+   * separates the failure classes from each other.
+   */
+  public componentDidCatch(error: Error, errorInfo: ErrorInfo) {
+    const componentStack = errorInfo.componentStack ?? undefined
+
+    logger.error('Workflow canvas crashed', {
+      name: error.name,
+      message: error.message,
+      stack: error.stack,
+      componentStack,
+    })
+
+    captureClientEvent('workflow_canvas_crashed', {
+      error_name: error.name,
+      error_message: error.message,
+      component_stack: componentStack
+        ? truncate(componentStack, MAX_REPORTED_COMPONENT_STACK)
+        : undefined,
+    })
+  }
+
   public render() {
     if (this.state.hasError) {
       return this.props.fallback || <ErrorUI />
@@ -98,20 +130,3 @@ export class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundarySt
     return this.props.children
   }
 }
-
-/**
- * Next.js Error Page Component
- * Renders when a workflow-specific error occurs
- */
-interface NextErrorProps {
-  error: Error & { digest?: string }
-  reset: () => void
-}
-
-export function NextError({ error, reset }: NextErrorProps) {
-  useEffect(() => {
-    logger.error('Workflow error:', { error })
-  }, [error])
-
-  return <ErrorUI onReset={reset} />
-}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/workflow-block.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/workflow-block.tsx
index bc9714ea200..8b506c38d7d 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/workflow-block.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/workflow-block.tsx
@@ -16,6 +16,7 @@ import {
   TypeNumber,
   Wrench,
 } from '@sim/emcn/icons'
+import { createLogger } from '@sim/logger'
 import {
   BLOCK_DIMENSIONS,
   CanvasSentenceView,
@@ -119,6 +120,8 @@ import { useWorkflowStore } from '@/stores/workflows/workflow/store'
 import { formatParameterLabel } from '@/tools/params'
 import { TRIGGER_REGISTRY } from '@/triggers/registry'
 
+const logger = createLogger('WorkflowBlock')
+
 /** Stable empty object to avoid creating new references */
 const EMPTY_SUBBLOCK_VALUES = {} as Record<string, any>
 
@@ -500,7 +503,19 @@ const SubBlockRow = memo(function SubBlockRow({
     if (!subBlock?.id?.startsWith('webhookUrlDisplay') || !blockId) {
       return null
     }
-    const baseUrl = getBaseUrl()
+    /* `getBaseUrl` throws by design when no application base URL is configured,
+       and this runs during render — so an unguarded call takes the entire editor
+       down through the canvas error boundary over one read-only field. A URL this
+       card cannot resolve is a blank field, never a dead canvas. */
+    let baseUrl: string
+    try {
+      baseUrl = getBaseUrl()
+    } catch (error) {
+      logger.warn('Cannot render the webhook URL: no application base URL is configured', {
+        error,
+      })
+      return null
+    }
     const triggerPath = allSubBlockValues?.triggerPath?.value as string | undefined
     return triggerPath
       ? `${baseUrl}/api/webhooks/trigger/${triggerPath}`
diff --git a/apps/sim/app/workspace/providers/socket-provider.tsx b/apps/sim/app/workspace/providers/socket-provider.tsx
index b71ed1cdc32..3ee61dbd7f9 100644
--- a/apps/sim/app/workspace/providers/socket-provider.tsx
+++ b/apps/sim/app/workspace/providers/socket-provider.tsx
@@ -30,7 +30,9 @@ import { backoffWithJitter } from '@sim/utils/retry'
 import { useQueryClient } from '@tanstack/react-query'
 import { useParams } from 'next/navigation'
 import type { Socket } from 'socket.io-client'
+import { getEnv } from '@/lib/core/config/env'
 import { getSocketUrl } from '@/lib/core/utils/urls'
+import { captureClientEvent } from '@/lib/posthog/client'
 import {
   type SocketJoinCommand,
   SocketJoinController,
@@ -54,6 +56,14 @@ const logger = createLogger('SocketContext')
 
 const TAB_SESSION_ID_KEY = 'sim_tab_session_id'
 
+/**
+ * Consecutive connect failures before the realtime connection is reported as
+ * failing. Three attempts at the 1s base delay lands around the same few seconds
+ * as the "Reconnecting…" toast, so the event marks a real outage rather than the
+ * sub-second transport hiccups that recover on the first retry.
+ */
+const CONNECT_FAILURES_BEFORE_REPORT = 3
+
 /** Bounded auto-retry budget for auth-class connect failures before going terminal. */
 const MAX_AUTH_RETRY_ATTEMPTS = 5
 const AUTH_RETRY_BASE_MS = 1000
@@ -174,6 +184,8 @@ export function SocketProvider({ children, user }: SocketProviderProps) {
   const authRetryAttemptsRef = useRef(0)
   const authRetryTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null)
   const sessionRejectedRef = useRef(false)
+  const connectFailureCountRef = useRef(0)
+  const connectFailureReportedRef = useRef(false)
   const queryClient = useQueryClient()
 
   const params = useParams()
@@ -375,6 +387,15 @@ export function SocketProvider({ children, user }: SocketProviderProps) {
       try {
         const { io } = await import('socket.io-client')
         const socketUrl = getSocketUrl()
+        /* Origin only: enough to tell a misresolved host from a down service,
+           without putting a path or query into an analytics payload. `new URL`
+           rather than `URL.parse`, which is unavailable on Safari below 18. */
+        let socketOrigin = 'unparseable'
+        try {
+          socketOrigin = new URL(socketUrl).origin
+        } catch {
+          /* Reported as-is; an unparseable socket URL is itself the finding. */
+        }
 
         logger.info('Attempting to connect to Socket.IO server', {
           url: socketUrl,
@@ -409,11 +430,45 @@ export function SocketProvider({ children, user }: SocketProviderProps) {
           },
         })
 
+        /**
+         * Reports a realtime connection that is not coming back.
+         *
+         * A socket that never connects raises no exception anywhere — every
+         * failure path here is handled, so error tracking sees nothing and the
+         * only user-visible trace is a "Reconnecting…" toast. Socket.IO then
+         * retries the same URL forever, so the failure is both permanent and
+         * silent. This is the one signal that distinguishes "the realtime
+         * service is down" from "this client resolved the wrong URL", which is
+         * why the origin is reported alongside the reason.
+         *
+         * Fires at most once per socket instance, at the point the toast
+         * appears, rather than once per retry.
+         */
+        const reportPersistentConnectFailure = (reason: string) => {
+          connectFailureCountRef.current += 1
+          if (
+            connectFailureReportedRef.current ||
+            connectFailureCountRef.current < CONNECT_FAILURES_BEFORE_REPORT
+          ) {
+            return
+          }
+          connectFailureReportedRef.current = true
+
+          captureClientEvent('realtime_connection_failing', {
+            socket_origin: socketOrigin,
+            expected_socket_origin_configured: Boolean(getEnv('NEXT_PUBLIC_SOCKET_URL')?.trim()),
+            attempts: connectFailureCountRef.current,
+            reason,
+          })
+        }
+
         socketInstance.on('connect', () => {
           setIsConnected(true)
           setIsConnecting(false)
           setIsReconnecting(false)
           authRetryAttemptsRef.current = 0
+          connectFailureCountRef.current = 0
+          connectFailureReportedRef.current = false
           clearAuthRetryTimeout()
           setCurrentSocketId(socketInstance.id ?? null)
           logger.info('Socket connected successfully', {
@@ -451,6 +506,7 @@ export function SocketProvider({ children, user }: SocketProviderProps) {
               message: error.message,
             })
             setIsReconnecting(true)
+            reportPersistentConnectFailure(error.message)
             return
           }
 
@@ -522,6 +578,7 @@ export function SocketProvider({ children, user }: SocketProviderProps) {
           logger.warn('Socket reconnection attempt failed, will retry', {
             message: error.message,
           })
+          reportPersistentConnectFailure(error.message)
         })
 
         socketInstance.io.on('reconnect_failed', () => {
diff --git a/apps/sim/lib/core/config/env.dom.test.ts b/apps/sim/lib/core/config/env.dom.test.ts
new file mode 100644
index 00000000000..10ea779c055
--- /dev/null
+++ b/apps/sim/lib/core/config/env.dom.test.ts
@@ -0,0 +1,87 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { getEnv, PUBLIC_ENV_ATTRIBUTE } from '@/lib/core/config/env'
+
+vi.unmock('@/lib/core/config/env')
+
+/**
+ * A key no deployment defines, so these assertions describe the resolution order
+ * itself rather than whatever `process.env` happens to hold. `getEnv`'s last
+ * fallback is `process.env`, which is populated in a Node test run but all but
+ * empty in the browser bundle - reusing a real key here would pass or fail on
+ * whether a local `.env` is present.
+ */
+const TEST_KEY = 'NEXT_PUBLIC_SIM_ENV_RESOLUTION_FIXTURE'
+
+/**
+ * Covers the browser resolution order for `NEXT_PUBLIC_*`.
+ *
+ * The `<html>` attribute exists because `window.__ENV` is assigned by a script
+ * ~13KB into the document while Next's bootstrap chunks sit in the preamble and
+ * `appBootstrap` hydrates synchronously once `self.__next_s` is empty. Client
+ * code can therefore read env before that assignment lands; the attribute is
+ * parsed before any script can run, so it always has.
+ */
+describe('getEnv', () => {
+  afterEach(() => {
+    document.documentElement.removeAttribute(PUBLIC_ENV_ATTRIBUTE)
+    window.__ENV = undefined as unknown as typeof window.__ENV
+  })
+
+  it('resolves from the <html> attribute while window.__ENV is still unassigned', () => {
+    document.documentElement.setAttribute(
+      PUBLIC_ENV_ATTRIBUTE,
+      JSON.stringify({ [TEST_KEY]: 'https://attribute.example' })
+    )
+
+    expect(window.__ENV).toBeUndefined()
+    expect(getEnv(TEST_KEY)).toBe('https://attribute.example')
+  })
+
+  it('prefers window.__ENV once assigned, so a runtime override still wins', () => {
+    document.documentElement.setAttribute(
+      PUBLIC_ENV_ATTRIBUTE,
+      JSON.stringify({ [TEST_KEY]: 'https://attribute.example' })
+    )
+    window.__ENV = { [TEST_KEY]: 'https://global.example' }
+
+    expect(getEnv(TEST_KEY)).toBe('https://global.example')
+  })
+
+  it('falls through to the attribute for keys window.__ENV does not carry', () => {
+    document.documentElement.setAttribute(
+      PUBLIC_ENV_ATTRIBUTE,
+      JSON.stringify({ [TEST_KEY]: 'https://attribute.example' })
+    )
+    window.__ENV = { NEXT_PUBLIC_SOMETHING_ELSE: 'https://global.example' }
+
+    expect(getEnv(TEST_KEY)).toBe('https://attribute.example')
+  })
+
+  it('re-reads when the attribute changes rather than serving a stale parse', () => {
+    document.documentElement.setAttribute(
+      PUBLIC_ENV_ATTRIBUTE,
+      JSON.stringify({ [TEST_KEY]: 'https://first.example' })
+    )
+    expect(getEnv(TEST_KEY)).toBe('https://first.example')
+
+    document.documentElement.setAttribute(
+      PUBLIC_ENV_ATTRIBUTE,
+      JSON.stringify({ [TEST_KEY]: 'https://second.example' })
+    )
+    expect(getEnv(TEST_KEY)).toBe('https://second.example')
+  })
+
+  it('treats a malformed attribute as absent instead of throwing', () => {
+    document.documentElement.setAttribute(PUBLIC_ENV_ATTRIBUTE, '{not json')
+
+    expect(() => getEnv(TEST_KEY)).not.toThrow()
+    expect(getEnv(TEST_KEY)).toBeUndefined()
+  })
+
+  it('returns undefined when no source carries the key', () => {
+    expect(getEnv(TEST_KEY)).toBeUndefined()
+  })
+})
diff --git a/apps/sim/lib/core/config/env.ts b/apps/sim/lib/core/config/env.ts
index 8ca857023bf..2dbf8ab149f 100644
--- a/apps/sim/lib/core/config/env.ts
+++ b/apps/sim/lib/core/config/env.ts
@@ -10,30 +10,88 @@ import {
 import { createEnv } from '@t3-oss/env-nextjs'
 import { z } from 'zod'
 
+/**
+ * Attribute on the `<html>` element carrying the same `NEXT_PUBLIC_*` snapshot
+ * `<PublicEnvScript>` assigns to `window.__ENV`.
+ *
+ * That script is rendered from the component tree, so it lands at the end of
+ * `<head>` — measured at ~13 KB after the `<script async>` bootstrap tags React
+ * emits in the preamble. An `async` script runs the moment its fetch resolves,
+ * and Next's `appBootstrap` calls `hydrate()` **synchronously** when
+ * `self.__next_s` is empty, which it always is here: `disableNextScript` emits a
+ * plain inline tag rather than a `beforeInteractive` one, and that queue was the
+ * only thing that used to order the assignment ahead of hydration. So on a warm
+ * cache both module bodies and the first commit can run before the parser has
+ * reached the assignment.
+ *
+ * An attribute has no such ordering problem. `<html>` is the first tag in the
+ * document — ~490 bytes ahead of the first bootstrap script — so
+ * `document.documentElement` already carries this value by the time *any*
+ * script, framework or application, is able to execute. This is the race-free
+ * transport; `window.__ENV` stays the public global and the preferred read.
+ */
+export const PUBLIC_ENV_ATTRIBUTE = 'data-public-env'
+
+let cachedEnvAttribute: string | null = null
+let cachedEnvAttributeValues: Record<string, string> | null = null
+
+/**
+ * `NEXT_PUBLIC_*` values read off {@link PUBLIC_ENV_ATTRIBUTE}. Only consulted
+ * when `window.__ENV` has not been assigned yet, which is a window of
+ * milliseconds — but one that module bodies and the first commit both land in.
+ *
+ * The parse is memoized against the raw attribute, not against having run once,
+ * so the cache can never serve a value the document no longer carries. Each call
+ * costs one `getAttribute` and a string compare, and only until `window.__ENV`
+ * exists — after that {@link getEnv} short-circuits before reaching here.
+ */
+function readDocumentPublicEnv(): Record<string, string> | null {
+  if (typeof document === 'undefined') return null
+
+  const serialized = document.documentElement?.getAttribute(PUBLIC_ENV_ATTRIBUTE)
+  if (!serialized) return null
+  if (serialized === cachedEnvAttribute) return cachedEnvAttributeValues
+
+  cachedEnvAttribute = serialized
+  cachedEnvAttributeValues = null
+
+  try {
+    const parsed: unknown = JSON.parse(serialized)
+    if (parsed && typeof parsed === 'object' && !Array.isArray(parsed)) {
+      cachedEnvAttributeValues = parsed as Record<string, string>
+    }
+  } catch {
+    /* A malformed attribute must not take the page down; fall through to the other sources. */
+  }
+
+  return cachedEnvAttributeValues
+}
+
 /**
  * Reads NEXT_PUBLIC_* env vars in both client and server contexts.
- * Client reads `window.__ENV` (populated by `<PublicEnvScript>`); server reads `process.env`.
+ * Server reads `process.env`. The client prefers `window.__ENV` (assigned by
+ * `<PublicEnvScript>`), falling back to {@link PUBLIC_ENV_ATTRIBUTE} for reads
+ * that happen before the parser reaches that script — see the attribute's own
+ * docs for why that window exists.
+ *
  * We do not use next-runtime-env's `env()` helper because it calls `unstable_noStore()`,
  * which Next 16.2+ rejects outside a request scope.
  */
 const getEnv = (variable: string): string | undefined => {
   if (typeof window === 'undefined') return process.env[variable]
-  return window.__ENV?.[variable] ?? process.env[variable]
+  return window.__ENV?.[variable] ?? readDocumentPublicEnv()?.[variable] ?? process.env[variable]
 }
 
 /**
  * Whether `window.__ENV` was still unset when this module first evaluated in the
  * browser. Always `false` on the server.
  *
- * Module bodies run inside the framework bootstrap, which an `async` chunk can
- * start before the parser has reached the inline assignment at the end of
- * `<head>`. Reads made during render are unaffected: nothing renders until the
- * RSC payload arrives, and that streams from `<body>` — after the assignment.
- * Module-scope reads have no such ordering, and the values they derive
- * (`isHosted` and the other flags in `env-flags`) stay frozen for the session.
- *
- * Reported once per load so the rate is measurable rather than assumed; it is
- * what decides whether those flags need to become lazy.
+ * This is the rate at which the ordering race described on
+ * {@link PUBLIC_ENV_ATTRIBUTE} is lost. It is no longer a correctness signal —
+ * {@link getEnv} resolves the same values off the `<html>` attribute in that
+ * window — but it stays reported so the race remains measurable rather than
+ * assumed, and so a regression that removes the attribute is visible as reads
+ * starting to fail again rather than as silence.
  */
 export const publicEnvMissingAtModuleInit =
   typeof window !== 'undefined' && window.__ENV === undefined
diff --git a/apps/sim/lib/posthog/events.ts b/apps/sim/lib/posthog/events.ts
index 95bc945e30c..85da54723a7 100644
--- a/apps/sim/lib/posthog/events.ts
+++ b/apps/sim/lib/posthog/events.ts
@@ -761,6 +761,34 @@ export interface PostHogEventMap {
     workspace_id: string
   }
 
+  /**
+   * The workflow editor's error boundary caught a render or effect error and
+   * replaced the canvas with its fallback. `error_name` is what distinguishes
+   * the failure classes (`ChunkLoadError`, `TypeError`, a thrown config error),
+   * so it is the property to break down on.
+   */
+  workflow_canvas_crashed: {
+    error_name: string
+    error_message: string
+    component_stack?: string
+  }
+
+  /**
+   * The realtime socket has failed to connect enough times in a row to count as
+   * an outage rather than a hiccup. Emitted at most once per socket instance.
+   *
+   * A socket that cannot connect throws nothing, so exception capture never sees
+   * it. `socket_origin` separates the two causes that look identical to the
+   * user: the realtime service being unreachable, and this client resolving the
+   * wrong host — the latter shows up as an origin equal to the app's own.
+   */
+  realtime_connection_failing: {
+    socket_origin: string
+    expected_socket_origin_configured: boolean
+    attempts: number
+    reason: string
+  }
+
   /** A stored credential's plaintext secret was deliberately retrieved via the token API. */
   credential_used: {
     credential_type:
diff --git a/packages/testing/src/mocks/env.mock.ts b/packages/testing/src/mocks/env.mock.ts
index d4b5a274483..13ede7a5d41 100644
--- a/packages/testing/src/mocks/env.mock.ts
+++ b/packages/testing/src/mocks/env.mock.ts
@@ -201,4 +201,11 @@ export const envMock = {
   isFalsy: isFalsyImpl,
   envBoolean: envBooleanImpl,
   envNumber: envNumberImpl,
+  /**
+   * Mirrors `PUBLIC_ENV_ATTRIBUTE` in `apps/sim/lib/core/config/env.ts`. The
+   * literal is repeated rather than imported because packages never import from
+   * `apps/*`; keep the two in step if the attribute is ever renamed.
+   */
+  PUBLIC_ENV_ATTRIBUTE: 'data-public-env',
+  publicEnvMissingAtModuleInit: false,
 }

From 99fee82f027fc865f3e3d4e8b50077683fcb7f9d Mon Sep 17 00:00:00 2001
From: Vikhyath Mondreti <vikhyath@simstudio.ai>
Date: Thu, 20 Aug 2026 21:49:20 -0700
Subject: [PATCH 2/3] fix(realtime): count each failed connect attempt once
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

`manager.reconnect()` calls `open()`, whose error path emits `error` — which
the socket re-emits as `connect_error` — and then emits `reconnect_error`
itself. A failed reconnect therefore reached both handlers and advanced the
counter twice, so the outage report tripped on the second real attempt while
claiming three.

Count in `connect_error` alone: it is the only handler that fires exactly once
for both the initial failure and every retry. `reconnect_error` keeps its log
line and states why it deliberately does not count.
---
 apps/sim/app/workspace/providers/socket-provider.tsx | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/apps/sim/app/workspace/providers/socket-provider.tsx b/apps/sim/app/workspace/providers/socket-provider.tsx
index 3ee61dbd7f9..e5587df0437 100644
--- a/apps/sim/app/workspace/providers/socket-provider.tsx
+++ b/apps/sim/app/workspace/providers/socket-provider.tsx
@@ -443,6 +443,13 @@ export function SocketProvider({ children, user }: SocketProviderProps) {
          *
          * Fires at most once per socket instance, at the point the toast
          * appears, rather than once per retry.
+         *
+         * Called from `connect_error` and nowhere else. That is the only handler
+         * that sees exactly one event per attempt: a failed *reconnect* also
+         * emits the manager's `reconnect_error` (`manager.reconnect()` calls
+         * `open()`, whose error path emits `error` — which the socket re-emits as
+         * `connect_error` — and then emits `reconnect_error` itself), so counting
+         * in both would advance twice per try and trip the threshold early.
          */
         const reportPersistentConnectFailure = (reason: string) => {
           connectFailureCountRef.current += 1
@@ -574,11 +581,12 @@ export function SocketProvider({ children, user }: SocketProviderProps) {
           logger.info('Socket reconnection attempt', { attemptNumber })
         })
 
+        /* Deliberately does not count toward the outage report — the socket's
+           own `connect_error` already fired for this same attempt. */
         socketInstance.io.on('reconnect_error', (error: Error) => {
           logger.warn('Socket reconnection attempt failed, will retry', {
             message: error.message,
           })
-          reportPersistentConnectFailure(error.message)
         })
 
         socketInstance.io.on('reconnect_failed', () => {

From 9e7772e5dfe0240b627b57efae979c1115236cf2 Mon Sep 17 00:00:00 2001
From: Vikhyath Mondreti <vikhyath@simstudio.ai>
Date: Thu, 20 Aug 2026 21:57:35 -0700
Subject: [PATCH 3/3] fix(workflow): let an unresolvable webhook URL fail
 loudly
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Reverts the guard added earlier in this PR. A blank row titled "Webhook URL"
is a worse outcome than a crash: it explains nothing, and the value is one a
user copies into a third-party provider, so any substitute — a guessed page
origin, an empty string — is a URL that provider accepts and then never
delivers to.

The read can no longer come back empty from the hydration race this PR fixes,
so reaching it at all means the deployment has no application base URL, which
breaks webhook registration and callbacks regardless. The error boundary now
reports what it caught, so the throw names its own cause instead of surfacing
as an unexplained fallback.
---
 .../workflow-block/workflow-block.tsx         | 23 ++++++-------------
 1 file changed, 7 insertions(+), 16 deletions(-)

diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/workflow-block.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/workflow-block.tsx
index 8b506c38d7d..bcda9aeb776 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/workflow-block.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/workflow-block.tsx
@@ -16,7 +16,6 @@ import {
   TypeNumber,
   Wrench,
 } from '@sim/emcn/icons'
-import { createLogger } from '@sim/logger'
 import {
   BLOCK_DIMENSIONS,
   CanvasSentenceView,
@@ -120,8 +119,6 @@ import { useWorkflowStore } from '@/stores/workflows/workflow/store'
 import { formatParameterLabel } from '@/tools/params'
 import { TRIGGER_REGISTRY } from '@/triggers/registry'
 
-const logger = createLogger('WorkflowBlock')
-
 /** Stable empty object to avoid creating new references */
 const EMPTY_SUBBLOCK_VALUES = {} as Record<string, any>
 
@@ -503,19 +500,13 @@ const SubBlockRow = memo(function SubBlockRow({
     if (!subBlock?.id?.startsWith('webhookUrlDisplay') || !blockId) {
       return null
     }
-    /* `getBaseUrl` throws by design when no application base URL is configured,
-       and this runs during render — so an unguarded call takes the entire editor
-       down through the canvas error boundary over one read-only field. A URL this
-       card cannot resolve is a blank field, never a dead canvas. */
-    let baseUrl: string
-    try {
-      baseUrl = getBaseUrl()
-    } catch (error) {
-      logger.warn('Cannot render the webhook URL: no application base URL is configured', {
-        error,
-      })
-      return null
-    }
+    /* Deliberately unguarded. `getBaseUrl` throws when no application base URL is
+       configured, and that is the right outcome here: this value gets copied into
+       a third-party provider, so a guessed origin would hand the user a URL that
+       provider accepts and then never delivers to, and a blank row explains
+       nothing. The error boundary reports what it caught, so the throw names its
+       own cause. */
+    const baseUrl = getBaseUrl()
     const triggerPath = allSubBlockValues?.triggerPath?.value as string | undefined
     return triggerPath
       ? `${baseUrl}/api/webhooks/trigger/${triggerPath}`
