feat: add verbose logging for kea (#14457)

* feat: add verbose logging for kea

* Update UI snapshots for `chromium` (2)

* Update UI snapshots for `chromium` (2)

* Update UI snapshots for `chromium` (2)

* Update UI snapshots for `chromium` (2)

* Update frontend/src/initKea.ts

Co-authored-by: Thomas Obermüller <thomas.obermueller@gmail.com>

* present for discovery, but off

* run prettier

* Update UI snapshots for `chromium` (2)

* Update UI snapshots for `chromium` (2)

* Update UI snapshots for `chromium` (2)

---------

Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: Thomas Obermüller <thomas.obermueller@gmail.com>

.run/PostHog.run.xml

@@ -4,15 +4,16 @@
     <option name="INTERPRETER_OPTIONS" value="" />
     <option name="PARENT_ENVS" value="true" />
     <envs>
-      <env name="PYTHONUNBUFFERED" value="1" />
+      <env name="BILLING_SERVICE_URL" value="https://billing.dev.posthog.dev" />
       <env name="CLICKHOUSE_SECURE" value="False" />
       <env name="DATABASE_URL" value="postgres://posthog:posthog@localhost:5432/posthog" />
       <env name="DEBUG" value="1" />
       <env name="DJANGO_SETTINGS_MODULE" value="posthog.settings" />
       <env name="KAFKA_URL" value="kafka://localhost" />
+      <env name="KEA_VERBOSE_LOGGING" value="false" />
       <env name="PRINT_SQL" value="1" />
+      <env name="PYTHONUNBUFFERED" value="1" />
       <env name="SKIP_SERVICE_VERSION_REQUIREMENTS" value="1" />
-      <env name="BILLING_SERVICE_URL" value="https://billing.dev.posthog.dev" />
     </envs>
     <option name="SDK_HOME" value="$PROJECT_DIR$/env/bin/python" />
     <option name="SDK_NAME" value="Python 3.10 (posthog)" />
@@ -41,4 +42,4 @@
     <option name="customRunCommand" value="" />
     <method v="2" />
   </configuration>
-</component>
+</component>

frontend/src/globals.d.ts

@@ -7,6 +7,7 @@ declare global {
         JS_POSTHOG_HOST?: string
         JS_POSTHOG_SELF_CAPTURE?: boolean
         JS_CAPTURE_TIME_TO_SEE_DATA?: boolean
+        JS_KEA_VERBOSE_LOGGING?: boolean
         posthog?: posthog
         ESBUILD_LOAD_SCRIPT: (name) => void
         ESBUILD_LOAD_CHUNKS: (name) => void

frontend/src/initKea.ts

@@ -34,51 +34,74 @@ interface InitKeaProps {
 
 // Used in some tests to make life easier
 let errorsSilenced = false
+
 export function silenceKeaLoadersErrors(): void {
     errorsSilenced = true
 }
+
 export function resumeKeaLoadersErrors(): void {
     errorsSilenced = false
 }
 
+export const loggerPlugin: () => KeaPlugin = () => ({
+    name: 'verbose-kea-logger',
+    events: {
+        beforeReduxStore(options) {
+            options.middleware.push((store) => (next) => (action) => {
+                const response = next(action)
+                console.groupCollapsed('KEA LOGGER', action)
+                console.log(store.getState())
+                console.groupEnd()
+                return response
+            })
+        },
+    },
+})
+
 export function initKea({ routerHistory, routerLocation, beforePlugins }: InitKeaProps = {}): void {
+    const plugins = [
+        ...(beforePlugins || []),
+        localStoragePlugin,
+        windowValuesPlugin({ window: window }),
+        routerPlugin({
+            history: routerHistory,
+            location: routerLocation,
+            urlPatternOptions: {
+                // :TRICKY: We override default url segment matching characters.
+                // This list includes all characters which are not escaped by encodeURIComponent
+                segmentValueCharset: "a-zA-Z0-9-_~ %.@()!'",
+            },
+        }),
+        formsPlugin,
+        loadersPlugin({
+            onFailure({ error, reducerKey, actionKey }: { error: any; reducerKey: string; actionKey: string }) {
+                // Toast if it's a fetch error or a specific API update error
+                if (
+                    !ERROR_FILTER_WHITELIST.includes(actionKey) &&
+                    (error?.message === 'Failed to fetch' || // Likely CORS headers errors (i.e. request failing without reaching Django)
+                        (error?.status !== undefined && ![200, 201, 204].includes(error.status)))
+                ) {
+                    lemonToast.error(
+                        `${identifierToHuman(actionKey)} failed: ${
+                            error.detail || error.statusText || 'PostHog may be offline'
+                        }`
+                    )
+                }
+                if (!errorsSilenced) {
+                    console.error({ error, reducerKey, actionKey })
+                }
+                ;(window as any).Sentry?.captureException(error)
+            },
+        }),
+        subscriptionsPlugin,
+        waitForPlugin,
+    ]
+
+    if (window.JS_KEA_VERBOSE_LOGGING) {
+        plugins.push(loggerPlugin)
+    }
+
     resetContext({
-        plugins: [
-            ...(beforePlugins || []),
-            localStoragePlugin,
-            windowValuesPlugin({ window: window }),
-            routerPlugin({
-                history: routerHistory,
-                location: routerLocation,
-                urlPatternOptions: {
-                    // :TRICKY: We override default url segment matching characters.
-                    // This list includes all characters which are not escaped by encodeURIComponent
-                    segmentValueCharset: "a-zA-Z0-9-_~ %.@()!'",
-                },
-            }),
-            formsPlugin,
-            loadersPlugin({
-                onFailure({ error, reducerKey, actionKey }: { error: any; reducerKey: string; actionKey: string }) {
-                    // Toast if it's a fetch error or a specific API update error
-                    if (
-                        !ERROR_FILTER_WHITELIST.includes(actionKey) &&
-                        (error?.message === 'Failed to fetch' || // Likely CORS headers errors (i.e. request failing without reaching Django)
-                            (error?.status !== undefined && ![200, 201, 204].includes(error.status)))
-                    ) {
-                        lemonToast.error(
-                            `${identifierToHuman(actionKey)} failed: ${
-                                error.detail || error.statusText || 'PostHog may be offline'
-                            }`
-                        )
-                    }
-                    if (!errorsSilenced) {
-                        console.error({ error, reducerKey, actionKey })
-                    }
-                    ;(window as any).Sentry?.captureException(error)
-                },
-            }),
-            subscriptionsPlugin,
-            waitForPlugin,
-        ],
+        plugins: plugins,
     })
 }

posthog/settings/__init__.py

@@ -75,6 +75,9 @@ NPM_TOKEN = os.getenv("NPM_TOKEN", None)
 # Whether to capture time-to-see-data metrics
 CAPTURE_TIME_TO_SEE_DATA = get_from_env("CAPTURE_TIME_TO_SEE_DATA", False, type_cast=str_to_bool)
 
+# Whether kea should be act in verbose mode
+KEA_VERBOSE_LOGGING = get_from_env("KEA_VERBOSE_LOGGING", False, type_cast=str_to_bool)
+
 # Only written in specific scripts - do not use outside of them.
 PERSON_ON_EVENTS_OVERRIDE = get_from_env("PERSON_ON_EVENTS_OVERRIDE", optional=True, type_cast=str_to_bool)
 

posthog/templates/head.html

@@ -34,4 +34,5 @@
     // frontent JS from a CDN
     window.JS_URL = "{{ js_url|default:"" }}";
     window.JS_CAPTURE_TIME_TO_SEE_DATA = {{js_capture_time_to_see_data | yesno:"true,false"}};
+    window.JS_KEA_VERBOSE_LOGGING = {{js_kea_verbose_logging | yesno:"true,false"}};
 </script>

posthog/utils.py

@@ -333,6 +333,7 @@ def render_template(template_name: str, request: HttpRequest, context: Dict = {}
         context["js_posthog_host"] = "'https://app.posthog.com'"
 
     context["js_capture_time_to_see_data"] = settings.CAPTURE_TIME_TO_SEE_DATA
+    context["js_kea_verbose_logging"] = settings.KEA_VERBOSE_LOGGING
     context["js_url"] = get_js_url(request)
 
     posthog_app_context: Dict[str, Any] = {