Merge branch 'master' into chore/ruff-upgrade

.env.example

@@ -0,0 +1 @@
+MAPLIBRE_STYLE_URL=https://api.example.com/style.json?key=mykey

docker-compose.base.yml

@@ -89,6 +89,18 @@ services:
         command: ./bin/start-backend & ./bin/start-frontend
         restart: on-failure
 
+    capture:
+        image: ghcr.io/posthog/capture:main
+        restart: on-failure
+        environment:
+            ADDRESS: '0.0.0.0:3000'
+            KAFKA_TOPIC: 'events_plugin_ingestion'
+            KAFKA_HOSTS: 'kafka:9092'
+            REDIS_URL: 'redis://redis:6379/'
+        depends_on:
+            - redis
+            - kafka
+
     plugins:
         command: ./bin/plugin-server --no-restart-loop
         restart: on-failure

docker-compose.dev-full.yml

@@ -89,6 +89,15 @@ services:
         environment:
             - DEBUG=1
 
+    capture:
+        extends:
+            file: docker-compose.base.yml
+            service: capture
+        ports:
+            - 3000:3000
+        environment:
+            - DEBUG=1
+
     plugins:
         extends:
             file: docker-compose.base.yml

docker-compose.dev.yml

@@ -72,6 +72,17 @@ services:
             - '1080:1080'
             - '1025:1025'
 
+    # Optional capture
+    capture:
+        profiles: ['capture-rs']
+        extends:
+            file: docker-compose.base.yml
+            service: capture
+        ports:
+            - 3000:3000
+        environment:
+            - DEBUG=1
+
     # Temporal containers
     elasticsearch:
         extends:

frontend/src/globals.d.ts

@@ -6,6 +6,7 @@ declare global {
         JS_POSTHOG_API_KEY?: string
         JS_POSTHOG_HOST?: string
         JS_POSTHOG_SELF_CAPTURE?: boolean
+        JS_MAPLIBRE_STYLE_URL?: string
         JS_CAPTURE_TIME_TO_SEE_DATA?: boolean
         JS_KEA_VERBOSE_LOGGING?: boolean
         posthog?: posthog

frontend/src/lib/components/Errors/ErrorDisplay.tsx

@@ -2,8 +2,8 @@ import { EventType, RecordingEventType } from '~/types'
 import { LemonTag } from 'lib/lemon-ui/LemonTag/LemonTag'
 import { IconFlag } from 'lib/lemon-ui/icons'
 import clsx from 'clsx'
-import posthog from 'posthog-js'
 import { Link } from 'lib/lemon-ui/Link'
+import posthog from 'posthog-js'
 
 interface StackFrame {
     filename: string
@@ -43,7 +43,7 @@ function StackTrace({ rawTrace }: { rawTrace: string }): JSX.Element | null {
         )
     } catch (e: any) {
         //very meta
-        posthog.captureException(e, { tag: 'error-display-stack-trace' })
+        posthog.capture('Cannot parse stack trace in Exception event', { tag: 'error-display-stack-trace', e })
         return <LemonTag type={'caution'}>Error parsing stack trace</LemonTag>
     }
 }

frontend/src/lib/components/Map/Map.stories.tsx

@@ -0,0 +1,31 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { Marker } from 'maplibre-gl'
+
+import { Map, MapComponent } from './Map'
+
+const meta: Meta<typeof Map> = {
+    title: 'Components/Map',
+    component: Map,
+    tags: ['autodocs'],
+}
+type Story = StoryObj<typeof Map>
+
+const coordinates: [number, number] = [0.119167, 52.205276]
+
+export const Unavailable: Story = {}
+
+export const Basic: Story = {
+    render: (args) => (
+        <MapComponent
+            mapLibreStyleUrl="" // TODO: set this value for the publish storybook and visual regression tests
+            {...args}
+        />
+    ),
+    args: {
+        center: coordinates,
+        markers: [new Marker({ color: 'var(--primary)' }).setLngLat(coordinates)],
+        className: 'h-60',
+    },
+}
+
+export default meta

frontend/src/lib/components/Map/Map.tsx

@@ -0,0 +1,64 @@
+import { useEffect, useRef } from 'react'
+import { Map as RawMap, Marker } from 'maplibre-gl'
+import useResizeObserver from 'use-resize-observer'
+
+import 'maplibre-gl/dist/maplibre-gl.css'
+
+/** Latitude and longtitude in degrees (+lat is east, -lat is west, +lon is south, -lon is north). */
+export interface MapProps {
+    /** Coordinates to center the map on by default. */
+    center: [number, number]
+    /** Markers to show. */
+    markers?: Marker[]
+    /** Map container class names. */
+    className?: string
+    /** The map's MapLibre style. This must be a JSON object conforming to the schema described in the MapLibre Style Specification, or a URL to such JSON. */
+    mapLibreStyleUrl: string
+}
+
+export function Map({ className, ...rest }: Omit<MapProps, 'mapLibreStyleUrl'>): JSX.Element {
+    if (!window.JS_MAPLIBRE_STYLE_URL) {
+        return (
+            <div className={`w-full h-full flex flex-col items-center justify-center text-muted p-3 ${className}`}>
+                <h1>Map unavailable</h1>
+                <p>
+                    The <code>MAPLIBRE_STYLE_URL</code> setting is not defined. Please configure this setting with a
+                    valid MapLibre Style URL to display maps.
+                </p>
+            </div>
+        )
+    }
+
+    return <MapComponent mapLibreStyleUrl={window.JS_MAPLIBRE_STYLE_URL} className={className} {...rest} />
+}
+
+export function MapComponent({ center, markers, className, mapLibreStyleUrl }: MapProps): JSX.Element {
+    const mapContainer = useRef<HTMLDivElement>(null)
+    const map = useRef<RawMap | null>(null)
+
+    useEffect(() => {
+        map.current = new RawMap({
+            container: mapContainer.current as HTMLElement,
+            style: mapLibreStyleUrl,
+            center,
+            zoom: 4,
+            maxZoom: 10,
+        })
+        if (markers) {
+            for (const marker of markers) {
+                marker.addTo(map.current)
+            }
+        }
+    }, [])
+
+    useResizeObserver({
+        ref: mapContainer,
+        onResize: () => {
+            if (map.current) {
+                map.current.resize()
+            }
+        },
+    })
+
+    return <div ref={mapContainer} className={className} />
+}

frontend/src/lib/constants.tsx

@@ -167,6 +167,7 @@ export const FEATURE_FLAGS = {
     PERSONS_HOGQL_QUERY: 'persons-hogql-query', // owner: @mariusandra
     NOTEBOOK_CANVASES: 'notebook-canvases', // owner: #team-monitoring
     SESSION_RECORDING_SAMPLING: 'session-recording-sampling', // owner: #team-monitoring
+    PERSON_FEED_CANVAS: 'person-feed-canvas', // owner: #project-canvas
 } as const
 export type FeatureFlagKey = (typeof FEATURE_FLAGS)[keyof typeof FEATURE_FLAGS]
 

frontend/src/lib/lemon-ui/LemonCalendarRange/LemonCalendarRangeInline.tsx

@@ -33,6 +33,7 @@ export function LemonCalendarRangeInline({
     // How many months fit on the screen, capped between 1..2
     function getMonthCount(): number {
         const width =
+            // eslint-disable-next-line valid-typeof
             typeof window === undefined ? WIDTH_OF_ONE_CALENDAR_MONTH * CALENDARS_IF_NO_WINDOW : window.innerWidth
         return Math.min(Math.max(1, Math.floor(width / WIDTH_OF_ONE_CALENDAR_MONTH)), 2)
     }

frontend/src/lib/lemon-ui/LemonMenu/LemonMenu.tsx

@@ -98,7 +98,7 @@ export function LemonMenu({
     )
 
     const _onVisibilityChange = useCallback(
-        (visible) => {
+        (visible: boolean) => {
             onVisibilityChange?.(visible)
             if (visible && activeItemIndex && activeItemIndex > -1) {
                 // Scroll the active item into view once the menu is open (i.e. in the next tick)
@@ -256,7 +256,7 @@ const LemonMenuItemButton: FunctionComponent<LemonMenuItemButtonProps & React.Re
                     size={size}
                     {...buttonProps}
                 >
-                    {label}
+                    {label as string | JSX.Element}
                     {keyboardShortcut && (
                         <div className="-mr-0.5 inline-flex grow justify-end">
                             {/* Show the keyboard shortcut on the right */}

frontend/src/lib/lemon-ui/LemonSelect/LemonSelect.tsx

@@ -93,7 +93,7 @@ export interface LemonSelectPropsNonClearable<T> extends LemonSelectPropsBase<T>
 
 export type LemonSelectProps<T> = LemonSelectPropsClearable<T> | LemonSelectPropsNonClearable<T>
 
-export function LemonSelect<T>({
+export function LemonSelect<T extends string | number | boolean | null>({
     value = null,
     onChange,
     onSelect,

frontend/src/lib/lemon-ui/LemonTable/TableRow.tsx

@@ -132,6 +132,8 @@ function TableRowRaw<T extends Record<string, any>>({
 // of a class indicating that scrollability to `table` caused the component to lag due to unneded rerendering of rows.
 export const TableRow = React.memo(TableRowRaw) as typeof TableRowRaw
 
-function isTableCellRepresentation(contents: React.ReactNode): contents is TableCellRepresentation {
+function isTableCellRepresentation(
+    contents: React.ReactNode | TableCellRepresentation
+): contents is TableCellRepresentation {
     return !!contents && typeof contents === 'object' && !React.isValidElement(contents)
 }

frontend/src/lib/lemon-ui/hooks.ts

@@ -6,7 +6,7 @@ import { useLayoutEffect, useRef, useState } from 'react'
  * @private
  */
 export function useSliderPositioning<C extends HTMLElement, S extends HTMLElement>(
-    currentValue: string | number | null | undefined,
+    currentValue: React.Key | null | undefined,
     transitionMs: number
 ): {
     containerRef: React.RefObject<C>

frontend/src/lib/lemon-ui/icons/icons.tsx

@@ -2472,3 +2472,25 @@ export function IconNotebook(props: LemonIconProps): JSX.Element {
         </LemonIconBase>
     )
 }
+
+export function IconCode(props: LemonIconProps): JSX.Element {
+    return (
+        <LemonIconBase {...props}>
+            <path
+                d="M9.4 16.6L4.8 12l4.6-4.6L8 6l-6 6 6 6 1.4-1.4zm5.2 0l4.6-4.6-4.6-4.6L16 6l6 6-6 6-1.4-1.4z"
+                fill="currentColor"
+            />
+        </LemonIconBase>
+    )
+}
+
+export function IconAdsClick(props: LemonIconProps): JSX.Element {
+    return (
+        <LemonIconBase {...props}>
+            <path
+                d="M11.71,17.99C8.53,17.84,6,15.22,6,12c0-3.31,2.69-6,6-6c3.22,0,5.84,2.53,5.99,5.71l-2.1-0.63C15.48,9.31,13.89,8,12,8 c-2.21,0-4,1.79-4,4c0,1.89,1.31,3.48,3.08,3.89L11.71,17.99z M22,12c0,0.3-0.01,0.6-0.04,0.9l-1.97-0.59C20,12.21,20,12.1,20,12 c0-4.42-3.58-8-8-8s-8,3.58-8,8s3.58,8,8,8c0.1,0,0.21,0,0.31-0.01l0.59,1.97C12.6,21.99,12.3,22,12,22C6.48,22,2,17.52,2,12 C2,6.48,6.48,2,12,2S22,6.48,22,12z M18.23,16.26L22,15l-10-3l3,10l1.26-3.77l4.27,4.27l1.98-1.98L18.23,16.26z"
+                fill="currentColor"
+            />
+        </LemonIconBase>
+    )
+}

frontend/src/scenes/billing/BillingLimitInput.tsx

@@ -25,12 +25,14 @@ export const BillingLimitInput = ({ product }: { product: BillingProductV2Type }
         if (value === undefined) {
             return actuallyUpdateLimit()
         }
-        const productAndAddonTiers: BillingV2TierType[][] = [
-            product.tiers,
-            ...product.addons
-                ?.filter((addon: BillingProductV2AddonType) => addon.subscribed)
-                ?.map((addon: BillingProductV2AddonType) => addon.tiers),
-        ].filter(Boolean) as BillingV2TierType[][]
+
+        const addonTiers = product.addons
+            ?.filter((addon: BillingProductV2AddonType) => addon.subscribed)
+            ?.map((addon: BillingProductV2AddonType) => addon.tiers)
+
+        const productAndAddonTiers: BillingV2TierType[][] = [product.tiers, ...addonTiers].filter(
+            Boolean
+        ) as BillingV2TierType[][]
 
         const newAmountAsUsage = product.tiers
             ? convertAmountToUsage(`${value}`, productAndAddonTiers, billing?.discount_percent)

frontend/src/scenes/billing/billingProductLogic.ts

@@ -101,12 +101,12 @@ export const billingProductLogic = kea<billingProductLogicType>([
             (billing, product, isEditingBillingLimit, billingLimitInput, customLimitUsd) => {
                 // cast the product as a product, not an addon, to avoid TS errors. This is fine since we're just getting the tiers.
                 product = product as BillingProductV2Type
-                const productAndAddonTiers: BillingV2TierType[][] = [
-                    product.tiers,
-                    ...product.addons
-                        ?.filter((addon: BillingProductV2AddonType) => addon.subscribed)
-                        ?.map((addon: BillingProductV2AddonType) => addon.tiers),
-                ].filter(Boolean) as BillingV2TierType[][]
+                const addonTiers = product.addons
+                    ?.filter((addon: BillingProductV2AddonType) => addon.subscribed)
+                    ?.map((addon: BillingProductV2AddonType) => addon.tiers)
+                const productAndAddonTiers: BillingV2TierType[][] = [product.tiers, ...addonTiers].filter(
+                    Boolean
+                ) as BillingV2TierType[][]
                 return product.tiers
                     ? isEditingBillingLimit
                         ? convertAmountToUsage(`${billingLimitInput}`, productAndAddonTiers, billing?.discount_percent)

frontend/src/scenes/experiments/experimentLogic.tsx

@@ -802,7 +802,7 @@ export const experimentLogic = kea<experimentLogicType>([
                         let index = -1
                         if (insightType === InsightType.FUNNELS) {
                             // Funnel Insight is displayed in order of decreasing count
-                            index = ([...experimentResults?.insight] as FunnelStep[][])
+                            index = ([...experimentResults.insight] as FunnelStep[][])
                                 .sort((a, b) => b[0]?.count - a[0]?.count)
                                 .findIndex(
                                     (variantFunnel: FunnelStep[]) => variantFunnel[0]?.breakdown_value?.[0] === variant

frontend/src/scenes/feature-flags/featureFlagLogic.ts

@@ -266,7 +266,10 @@ export const featureFlagLogic = kea<featureFlagLogicType>([
                     if (!state) {
                         return state
                     }
-                    const groups = [...state?.filters.groups, { properties: [], rollout_percentage: 0, variant: null }]
+                    const groups = [
+                        ...(state?.filters?.groups || []),
+                        { properties: [], rollout_percentage: 0, variant: null },
+                    ]
                     return { ...state, filters: { ...state.filters, groups } }
                 },
                 addRollbackCondition: (state) => {
@@ -291,7 +294,7 @@ export const featureFlagLogic = kea<featureFlagLogicType>([
                         return state
                     }
 
-                    const groups = [...state?.filters.groups]
+                    const groups = [...(state?.filters?.groups || [])]
                     if (newRolloutPercentage !== undefined) {
                         groups[index] = { ...groups[index], rollout_percentage: newRolloutPercentage }
                     }

frontend/src/scenes/notebooks/Marks/NotebookMarkLink.tsx

@@ -59,5 +59,10 @@ export const NotebookMarkLink = Mark.create({
 })
 
 const isPostHogLink = (href: string): boolean => {
-    return new URL(href, window.location.origin).origin === window.location.origin
+    try {
+        const url = new URL(href, window.location.origin)
+        return url.origin === window.location.origin
+    } catch {
+        return false
+    }
 }