chore(dev): Warn about port 8010 vs. 8000 in debug notice

PostHog · Dec 20, 2024 · d2a18d2 · d2a18d2
1 parent 1979d74
commit d2a18d2
Show file tree

Hide file tree

Showing 5 changed files with 58 additions and 19 deletions.
diff --git a/frontend/src/layout/navigation-3000/components/Navbar.tsx b/frontend/src/layout/navigation-3000/components/Navbar.tsx
@@ -112,7 +112,7 @@ export function Navbar(): JSX.Element {
                             {!systemStatusHealthy ? (
                                 <NavbarButton
                                     icon={<IconWarning />}
-                                    identifier={Scene.Settings}
+                                    identifier={Scene.SystemStatus}
                                     title="System issue!"
                                     to={urls.instanceStatus()}
                                 />

diff --git a/frontend/src/lib/components/DebugNotice.tsx b/frontend/src/lib/components/DebugNotice.tsx
@@ -1,4 +1,5 @@
-import { IconCode, IconX } from '@posthog/icons'
+import { IconCode, IconWarning, IconX } from '@posthog/icons'
+import { Link, Tooltip } from '@posthog/lemon-ui'
 import { useValues } from 'kea'
 import { IconBranch } from 'lib/lemon-ui/icons'
 import { LemonButton } from 'lib/lemon-ui/LemonButton'
@@ -63,25 +64,48 @@ export function DebugNotice(): JSX.Element | null {
                 <LemonButton
                     icon={<IconX />}
                     tooltip="Dismiss"
+                    tooltipPlacement="right"
                     size="small"
                     noPadding
                     onClick={() => setNoticeHidden(true)}
                 />
             </div>
-            <div
-                className="flex items-center gap-2 px-2 h-8 border-l-4 border-brand-red"
-                title={`Branch: ${debugInfo.branch}`}
-            >
-                <IconBranch className="text-lg" />
-                <b className="min-w-0 flex-1 truncate">{debugInfo.branch}</b>
-            </div>
-            <div
-                className="flex items-center gap-2 px-2 h-8 border-l-4 border-brand-yellow"
-                title={`Revision: ${debugInfo.revision}`}
-            >
-                <IconCode className="text-lg" />
-                <b className="min-w-0 flex-1 truncate">{debugInfo.revision}</b>
-            </div>
+            <Tooltip title="Branch" placement="right">
+                <div className="flex items-center gap-2 w-fit px-2 h-8 border-l-4 border-brand-red">
+                    <IconBranch className="text-lg" />
+                    <b className="min-w-0 flex-1 truncate">{debugInfo.branch}</b>
+                </div>
+            </Tooltip>
+            <Tooltip title="Revision" placement="right">
+                <div className="flex items-center gap-2 w-fit px-2 h-8 border-l-4 border-brand-yellow">
+                    <IconCode className="text-lg" />
+                    <b className="min-w-0 flex-1 truncate">{debugInfo.revision}</b>
+                </div>
+            </Tooltip>
+            {window.location.port !== '8010' && (
+                <Tooltip
+                    title={
+                        <>
+                            You're currently using the app over port 8000,
+                            <br />
+                            which only serves the web app, without capture (/e/).
+                            <br />
+                            Use port 8010 for full PostHog, proxied via Caddy.
+                        </>
+                    }
+                    placement="right"
+                >
+                    <div className="flex items-center gap-2 w-fit px-2 h-8 border-l-4 border-brand-key">
+                        <IconWarning className="text-lg" />
+                        <Link
+                            to={window.location.href.replace(`:${window.location.port}`, ':8010')}
+                            className="font-semibold text-default underline min-w-0 flex-1 truncate"
+                        >
+                            Click here to fix port!
+                        </Link>
+                    </div>
+                </Tooltip>
+            )}
         </div>
     )
 }
diff --git a/frontend/src/scenes/PreflightCheck/preflightLogic.tsx b/frontend/src/scenes/PreflightCheck/preflightLogic.tsx
@@ -230,7 +230,17 @@ export const preflightLogic = kea<preflightLogicType>([
                     // http://localhost:6006, but in the local dockerized setup http://host.docker.internal:6006
                     return false
                 }
-                return !!preflight && (!preflight.site_url || preflight.site_url != window.location.origin)
+                const isMismatchPresent =
+                    !!preflight && (!preflight.site_url || preflight.site_url != window.location.origin)
+                if (
+                    isMismatchPresent &&
+                    preflight.site_url === 'http://localhost:8010' &&
+                    window.location.origin === 'http://localhost:8000'
+                ) {
+                    // Local development setup using the old port - we have a warning in DebugNotice for this
+                    return false
+                }
+                return isMismatchPresent
             },
         ],
         configOptions: [

diff --git a/posthog/settings/__init__.py b/posthog/settings/__init__.py
@@ -58,7 +58,7 @@
     "disable_paid_fs": disable_paid_fs,
 }
 
-SITE_URL: str = os.getenv("SITE_URL", "http://localhost:8000").rstrip("/")
+SITE_URL: str = os.getenv("SITE_URL", "http://localhost:8010").rstrip("/")
 INSTANCE_TAG: str = os.getenv("INSTANCE_TAG", "none")
 
 if DEBUG:

diff --git a/posthog/settings/access.py b/posthog/settings/access.py
@@ -25,7 +25,12 @@
 if get_from_env("DISABLE_SECURE_SSL_REDIRECT", False, type_cast=str_to_bool):
     SECURE_SSL_REDIRECT = False
 
-CSRF_TRUSTED_ORIGINS = [os.getenv("SITE_URL", "http://localhost:8000").rstrip("/")]
+raw_site_url = os.getenv("SITE_URL")
+CSRF_TRUSTED_ORIGINS = (
+    [raw_site_url.rstrip("/")]
+    if raw_site_url
+    else ["http://localhost:8000", "http://localhost:8010"]  # 8000 is just Django, 8010 is Django + Capture via Caddy
+)
 
 # Proxy settings
 IS_BEHIND_PROXY = get_from_env("IS_BEHIND_PROXY", False, type_cast=str_to_bool)