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

ee/billing/test/test_quota_limiting.py

@@ -77,7 +77,7 @@ def test_quota_limiting_feature_flag_enabled(self, patch_feature_enabled, patch_
             org_id,
             "quota limiting suspended",
             properties={"current_usage": 109},
-            groups={"instance": "http://localhost:8000", "organization": org_id},
+            groups={"instance": "http://localhost:8010", "organization": org_id},
         )
         # Feature flag is enabled so they won't be limited.
         assert quota_limited_orgs["events"] == {}
@@ -222,7 +222,7 @@ def test_billing_rate_limit(self, patch_capture) -> None:
                     "quota_limited_recordings": 1612137599,
                     "quota_limited_rows_synced": None,
                 },
-                groups={"instance": "http://localhost:8000", "organization": org_id},
+                groups={"instance": "http://localhost:8010", "organization": org_id},
             )
 
             assert self.redis_client.zrange(f"@posthog/quota-limits/events", 0, -1) == [

ee/tasks/test/subscriptions/test_slack_subscriptions.py

@@ -68,12 +68,12 @@ def test_subscription_delivery(self, MockSlackIntegration: MagicMock) -> None:
                     {
                         "type": "button",
                         "text": {"type": "plain_text", "text": "View in PostHog"},
-                        "url": "http://localhost:8000/insights/123456?utm_source=posthog&utm_campaign=subscription_report&utm_medium=slack",
+                        "url": "http://localhost:8010/insights/123456?utm_source=posthog&utm_campaign=subscription_report&utm_medium=slack",
                     },
                     {
                         "type": "button",
                         "text": {"type": "plain_text", "text": "Manage Subscription"},
-                        "url": f"http://localhost:8000/insights/123456/subscriptions/{self.subscription.id}?utm_source=posthog&utm_campaign=subscription_report&utm_medium=slack",
+                        "url": f"http://localhost:8010/insights/123456/subscriptions/{self.subscription.id}?utm_source=posthog&utm_campaign=subscription_report&utm_medium=slack",
                     },
                 ],
             },
@@ -141,12 +141,12 @@ def test_subscription_dashboard_delivery(self, MockSlackIntegration: MagicMock)
                     {
                         "type": "button",
                         "text": {"type": "plain_text", "text": "View in PostHog"},
-                        "url": f"http://localhost:8000/dashboard/{self.dashboard.id}?utm_source=posthog&utm_campaign=subscription_report&utm_medium=slack",
+                        "url": f"http://localhost:8010/dashboard/{self.dashboard.id}?utm_source=posthog&utm_campaign=subscription_report&utm_medium=slack",
                     },
                     {
                         "type": "button",
                         "text": {"type": "plain_text", "text": "Manage Subscription"},
-                        "url": f"http://localhost:8000/dashboard/{self.dashboard.id}/subscriptions/{self.subscription.id}?utm_source=posthog&utm_campaign=subscription_report&utm_medium=slack",
+                        "url": f"http://localhost:8010/dashboard/{self.dashboard.id}/subscriptions/{self.subscription.id}?utm_source=posthog&utm_campaign=subscription_report&utm_medium=slack",
                     },
                 ],
             },
@@ -181,7 +181,7 @@ def test_subscription_dashboard_delivery(self, MockSlackIntegration: MagicMock)
                 "type": "section",
                 "text": {
                     "type": "mrkdwn",
-                    "text": f"Showing 3 of 10 Insights. <http://localhost:8000/dashboard/{self.dashboard.id}?utm_source=posthog&utm_campaign=subscription_report&utm_medium=slack|View the rest in PostHog>",
+                    "text": f"Showing 3 of 10 Insights. <http://localhost:8010/dashboard/{self.dashboard.id}?utm_source=posthog&utm_campaign=subscription_report&utm_medium=slack|View the rest in PostHog>",
                 },
             }
         ]

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()}
                                 />

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

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: [

posthog/models/test/test_user_model.py

@@ -40,7 +40,7 @@ def test_analytics_metadata(self):
                     "has_social_auth": False,
                     "social_providers": [],
                     "strapi_id": None,
-                    "instance_url": "http://localhost:8000",
+                    "instance_url": "http://localhost:8010",
                     "instance_tag": "none",
                     "is_email_verified": None,
                     "has_seen_product_intro_for": None,
@@ -76,7 +76,7 @@ def test_analytics_metadata(self):
                     "has_social_auth": False,
                     "social_providers": [],
                     "strapi_id": None,
-                    "instance_url": "http://localhost:8000",
+                    "instance_url": "http://localhost:8010",
                     "instance_tag": "none",
                     "is_email_verified": None,
                     "has_seen_product_intro_for": None,

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:

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)

posthog/tasks/test/test_periodic_digest.py

@@ -126,7 +126,7 @@ def test_periodic_digest_report(self, mock_capture: MagicMock) -> None:
             "plugins_installed": {},
             "product": "open source",
             "realm": "hosted-clickhouse",
-            "site_url": "http://localhost:8000",
+            "site_url": "http://localhost:8010",
             "table_sizes": ANY,
             "clickhouse_version": ANY,
             "deployment_infrastructure": "unknown",
@@ -240,7 +240,7 @@ def test_periodic_digest_report_custom_dates(self, mock_capture: MagicMock) -> N
             "plugins_installed": {},
             "product": "open source",
             "realm": "hosted-clickhouse",
-            "site_url": "http://localhost:8000",
+            "site_url": "http://localhost:8010",
             "table_sizes": ANY,
             "clickhouse_version": ANY,
             "deployment_infrastructure": "unknown",

posthog/tasks/test/test_plugin_server.py

@@ -25,7 +25,7 @@ def test_tracks_events_regardless(self, mock_report_action: MagicMock, MockEmail
             "hog function state changed",
             {
                 "hog_function_id": str(hog_function.id),
-                "hog_function_url": f"http://localhost:8000/project/{hog_function.team.id}/pipeline/destinations/hog-{str(hog_function.id)}",
+                "hog_function_url": f"http://localhost:8010/project/{hog_function.team.id}/pipeline/destinations/hog-{str(hog_function.id)}",
                 "state": 1,
             },
         )

posthog/tasks/test/test_usage_report.py

@@ -1591,7 +1591,7 @@ def test_send_usage_cloud(self, mock_post: MagicMock, mock_client: MagicMock) ->
                 "organization usage report",
                 {**full_report_as_dict, "scope": "user"},
                 groups={
-                    "instance": "http://localhost:8000",
+                    "instance": "http://localhost:8010",
                     "organization": str(self.organization.id),
                 },
                 timestamp=None,
@@ -1703,7 +1703,7 @@ def test_capture_report_transforms_team_id_to_org_id(self, mock_client: MagicMoc
             self.user.distinct_id,
             "test event",
             {**report, "scope": "user"},
-            groups={"instance": "http://localhost:8000", "organization": str(self.organization.id)},
+            groups={"instance": "http://localhost:8010", "organization": str(self.organization.id)},
             timestamp=None,
         )
 
@@ -1722,7 +1722,7 @@ def test_capture_report_transforms_team_id_to_org_id(self, mock_client: MagicMoc
             self.user.distinct_id,
             "test event",
             {**report, "scope": "user"},
-            groups={"instance": "http://localhost:8000", "organization": str(self.organization.id)},
+            groups={"instance": "http://localhost:8010", "organization": str(self.organization.id)},
             timestamp=None,
         )