diff --git a/.github/ISSUE_TEMPLATE/bug_report.yml b/.github/ISSUE_TEMPLATE/bug_report.yml index c28dd5faa8038..e55577185cc30 100644 --- a/.github/ISSUE_TEMPLATE/bug_report.yml +++ b/.github/ISSUE_TEMPLATE/bug_report.yml @@ -1,21 +1,20 @@ - name: Bug report description: Something not working as expected? Let us look into it. -labels: ["bug"] +labels: ['bug'] body: - - type: textarea - id: bug-description - attributes: - label: Bug Description - value: "## Bug description\n\n*Please describe.*\n*If this affects the front-end, screenshots would be of great help.*\n\n*If you are on PostHog Cloud it would be really valuable if you can share any links where the problem occurs. This speeds up our ability to troubleshoot tremendously.*\n\n## How to reproduce\n\n1. \n2.\n3. \n\n## Additional context\n\n" - - - type: textarea - id: debug-info - attributes: - label: Debug info - value: "- [ ] PostHog Cloud, Debug information: [please copy/paste from https://us.posthog.com/settings/project-details#variables]\n- [ ] PostHog Hobby self-hosted with `docker compose`, version/commit: [please provide]\n- [ ] PostHog self-hosted with Kubernetes (deprecated, see [`Sunsetting Kubernetes support`](https://posthog.com/blog/sunsetting-helm-support-posthog)), version/commit: [please provide]\n" - render: shell - - - type: markdown - attributes: - value: "#### *Thank you* for your bug report – we love squashing them!" + - type: textarea + id: bug-description + attributes: + label: Bug Description + value: "## Bug description\n\n*Please describe.*\n*If this affects the front-end, screenshots would be of great help.*\n\n*If you are on PostHog Cloud it would be really valuable if you can share any links where the problem occurs. This speeds up our ability to troubleshoot tremendously.*\n\n## How to reproduce\n\n1. \n2.\n3. \n\n## Additional context\n\n" + + - type: textarea + id: debug-info + attributes: + label: Debug info + value: "- [ ] PostHog Cloud, Debug information: [please copy/paste from https://us.posthog.com/settings/project-details#variables]\n- [ ] PostHog Hobby self-hosted with `docker compose`, version/commit: [please provide]\n- [ ] PostHog self-hosted with Kubernetes (deprecated, see [`Sunsetting Kubernetes support`](https://posthog.com/blog/sunsetting-helm-support-posthog)), version/commit: [please provide]\n" + render: shell + + - type: markdown + attributes: + value: '#### *Thank you* for your bug report – we love squashing them!' diff --git a/.github/ISSUE_TEMPLATE/feature_request.yml b/.github/ISSUE_TEMPLATE/feature_request.yml index f46666c1f3e8e..5bcacc4be27d6 100644 --- a/.github/ISSUE_TEMPLATE/feature_request.yml +++ b/.github/ISSUE_TEMPLATE/feature_request.yml @@ -1,21 +1,22 @@ name: Feature request -description: "Suggest a feature for PostHog" -labels: ["enhancement, feature"] +description: 'Suggest a feature for PostHog' +labels: ['enhancement, feature'] body: - - type: textarea - id: feature_request - attributes: - label: Feature request - value: "## Is your feature request related to a problem?\n\n*Please describe.*\n\n## Describe the solution you'd like\n\n\n## Describe alternatives you've considered\n\n\n## Additional context\n\n\n - - " - - type: textarea - id: debug-info - attributes: - label: Debug info - value: "- [ ] PostHog Cloud, Debug information: [please copy/paste from https://us.posthog.com/settings/project-details#variables]\n- [ ] PostHog Hobby self-hosted with `docker compose`, version/commit: [please provide]\n- [ ] PostHog self-hosted with Kubernetes (deprecated, see [`Sunsetting Kubernetes support`](https://posthog.com/blog/sunsetting-helm-support-posthog)), version/commit: [please provide]\n" - render: shell - - - type: markdown - attributes: - value: "#### *Thank you* for your bug report – we love squashing them!" + - type: textarea + id: feature_request + attributes: + label: Feature request + value: + "## Is your feature request related to a problem?\n\n*Please describe.*\n\n## Describe the solution you'd like\n\n\n## Describe alternatives you've considered\n\n\n## Additional context\n\n\n + + " + - type: textarea + id: debug-info + attributes: + label: Debug info + value: "- [ ] PostHog Cloud, Debug information: [please copy/paste from https://us.posthog.com/settings/project-details#variables]\n- [ ] PostHog Hobby self-hosted with `docker compose`, version/commit: [please provide]\n- [ ] PostHog self-hosted with Kubernetes (deprecated, see [`Sunsetting Kubernetes support`](https://posthog.com/blog/sunsetting-helm-support-posthog)), version/commit: [please provide]\n" + render: shell + + - type: markdown + attributes: + value: '#### *Thank you* for your bug report – we love squashing them!' diff --git a/frontend/__snapshots__/scenes-other-toolbar--actions--light.png b/frontend/__snapshots__/scenes-other-toolbar--actions--light.png index 1fb68e53203d4..07e36a5f5a118 100644 Binary files a/frontend/__snapshots__/scenes-other-toolbar--actions--light.png and b/frontend/__snapshots__/scenes-other-toolbar--actions--light.png differ diff --git a/frontend/__snapshots__/scenes-other-toolbar--actions-dark--dark.png b/frontend/__snapshots__/scenes-other-toolbar--actions-dark--dark.png index 2f90e951dc806..52d9e853064bd 100644 Binary files a/frontend/__snapshots__/scenes-other-toolbar--actions-dark--dark.png and b/frontend/__snapshots__/scenes-other-toolbar--actions-dark--dark.png differ diff --git a/frontend/__snapshots__/scenes-other-toolbar--default--dark.png b/frontend/__snapshots__/scenes-other-toolbar--default--dark.png index cb0b19df4b817..edf4bd017591f 100644 Binary files a/frontend/__snapshots__/scenes-other-toolbar--default--dark.png and b/frontend/__snapshots__/scenes-other-toolbar--default--dark.png differ diff --git a/frontend/__snapshots__/scenes-other-toolbar--default--light.png b/frontend/__snapshots__/scenes-other-toolbar--default--light.png index f06bdae7892eb..f38e1335c11dc 100644 Binary files a/frontend/__snapshots__/scenes-other-toolbar--default--light.png and b/frontend/__snapshots__/scenes-other-toolbar--default--light.png differ diff --git a/frontend/__snapshots__/scenes-other-toolbar--default-dark--dark.png b/frontend/__snapshots__/scenes-other-toolbar--default-dark--dark.png index 1dec86e1971c6..4accebb9adc2d 100644 Binary files a/frontend/__snapshots__/scenes-other-toolbar--default-dark--dark.png and b/frontend/__snapshots__/scenes-other-toolbar--default-dark--dark.png differ diff --git a/frontend/__snapshots__/scenes-other-toolbar--default-dark--light.png b/frontend/__snapshots__/scenes-other-toolbar--default-dark--light.png index 6c9a1bcd739a3..4875a816823c1 100644 Binary files a/frontend/__snapshots__/scenes-other-toolbar--default-dark--light.png and b/frontend/__snapshots__/scenes-other-toolbar--default-dark--light.png differ diff --git a/frontend/__snapshots__/scenes-other-toolbar--events-debugger--dark.png b/frontend/__snapshots__/scenes-other-toolbar--events-debugger--dark.png new file mode 100644 index 0000000000000..1c1ff9986edcd Binary files /dev/null and b/frontend/__snapshots__/scenes-other-toolbar--events-debugger--dark.png differ diff --git a/frontend/__snapshots__/scenes-other-toolbar--events-debugger--light.png b/frontend/__snapshots__/scenes-other-toolbar--events-debugger--light.png new file mode 100644 index 0000000000000..20c57dda22fb3 Binary files /dev/null and b/frontend/__snapshots__/scenes-other-toolbar--events-debugger--light.png differ diff --git a/frontend/__snapshots__/scenes-other-toolbar--events-debugger-dark--dark.png b/frontend/__snapshots__/scenes-other-toolbar--events-debugger-dark--dark.png new file mode 100644 index 0000000000000..6ce4e1d634f05 Binary files /dev/null and b/frontend/__snapshots__/scenes-other-toolbar--events-debugger-dark--dark.png differ diff --git a/frontend/__snapshots__/scenes-other-toolbar--events-debugger-dark--light.png b/frontend/__snapshots__/scenes-other-toolbar--events-debugger-dark--light.png new file mode 100644 index 0000000000000..d145281228a70 Binary files /dev/null and b/frontend/__snapshots__/scenes-other-toolbar--events-debugger-dark--light.png differ diff --git a/frontend/__snapshots__/scenes-other-toolbar--events-debugger-empty--dark.png b/frontend/__snapshots__/scenes-other-toolbar--events-debugger-empty--dark.png new file mode 100644 index 0000000000000..1c1ff9986edcd Binary files /dev/null and b/frontend/__snapshots__/scenes-other-toolbar--events-debugger-empty--dark.png differ diff --git a/frontend/__snapshots__/scenes-other-toolbar--events-debugger-empty--light.png b/frontend/__snapshots__/scenes-other-toolbar--events-debugger-empty--light.png new file mode 100644 index 0000000000000..20c57dda22fb3 Binary files /dev/null and b/frontend/__snapshots__/scenes-other-toolbar--events-debugger-empty--light.png differ diff --git a/frontend/__snapshots__/scenes-other-toolbar--events-debugger-empty-dark--dark.png b/frontend/__snapshots__/scenes-other-toolbar--events-debugger-empty-dark--dark.png new file mode 100644 index 0000000000000..6ce4e1d634f05 Binary files /dev/null and b/frontend/__snapshots__/scenes-other-toolbar--events-debugger-empty-dark--dark.png differ diff --git a/frontend/__snapshots__/scenes-other-toolbar--events-debugger-empty-dark--light.png b/frontend/__snapshots__/scenes-other-toolbar--events-debugger-empty-dark--light.png new file mode 100644 index 0000000000000..d145281228a70 Binary files /dev/null and b/frontend/__snapshots__/scenes-other-toolbar--events-debugger-empty-dark--light.png differ diff --git a/frontend/__snapshots__/scenes-other-toolbar--feature-flags--light.png b/frontend/__snapshots__/scenes-other-toolbar--feature-flags--light.png index 0d6d153d2ecb9..a993d1895a5c0 100644 Binary files a/frontend/__snapshots__/scenes-other-toolbar--feature-flags--light.png and b/frontend/__snapshots__/scenes-other-toolbar--feature-flags--light.png differ diff --git a/frontend/__snapshots__/scenes-other-toolbar--feature-flags-dark--dark.png b/frontend/__snapshots__/scenes-other-toolbar--feature-flags-dark--dark.png index 54d4b5df28c69..27f03e5866262 100644 Binary files a/frontend/__snapshots__/scenes-other-toolbar--feature-flags-dark--dark.png and b/frontend/__snapshots__/scenes-other-toolbar--feature-flags-dark--dark.png differ diff --git a/frontend/__snapshots__/scenes-other-toolbar--heatmap--light.png b/frontend/__snapshots__/scenes-other-toolbar--heatmap--light.png index f19ddfa738b17..72c8963740f72 100644 Binary files a/frontend/__snapshots__/scenes-other-toolbar--heatmap--light.png and b/frontend/__snapshots__/scenes-other-toolbar--heatmap--light.png differ diff --git a/frontend/__snapshots__/scenes-other-toolbar--inspect--dark.png b/frontend/__snapshots__/scenes-other-toolbar--inspect--dark.png index 13bc32974827e..2e1383a200aaa 100644 Binary files a/frontend/__snapshots__/scenes-other-toolbar--inspect--dark.png and b/frontend/__snapshots__/scenes-other-toolbar--inspect--dark.png differ diff --git a/frontend/__snapshots__/scenes-other-toolbar--inspect--light.png b/frontend/__snapshots__/scenes-other-toolbar--inspect--light.png index 7b99c1b5e3b4d..8e24c0684604f 100644 Binary files a/frontend/__snapshots__/scenes-other-toolbar--inspect--light.png and b/frontend/__snapshots__/scenes-other-toolbar--inspect--light.png differ diff --git a/frontend/__snapshots__/scenes-other-toolbar--inspect-dark--dark.png b/frontend/__snapshots__/scenes-other-toolbar--inspect-dark--dark.png index 4ae22abd74895..55a9405f083b2 100644 Binary files a/frontend/__snapshots__/scenes-other-toolbar--inspect-dark--dark.png and b/frontend/__snapshots__/scenes-other-toolbar--inspect-dark--dark.png differ diff --git a/frontend/__snapshots__/scenes-other-toolbar--inspect-dark--light.png b/frontend/__snapshots__/scenes-other-toolbar--inspect-dark--light.png index 34d247319f1c9..f94857d34f2a3 100644 Binary files a/frontend/__snapshots__/scenes-other-toolbar--inspect-dark--light.png and b/frontend/__snapshots__/scenes-other-toolbar--inspect-dark--light.png differ diff --git a/frontend/src/lib/components/AnimatedCollapsible.tsx b/frontend/src/lib/components/AnimatedCollapsible.tsx index 108f265b3107b..e4d182c7e4c57 100644 --- a/frontend/src/lib/components/AnimatedCollapsible.tsx +++ b/frontend/src/lib/components/AnimatedCollapsible.tsx @@ -9,7 +9,7 @@ export function AnimatedCollapsible({ }): JSX.Element { const collapsibleSectionRef = useRef(null) - const [height, setHeight] = useState() + const [height, setHeight] = useState(collapsed ? 0 : undefined) useEffect(() => { if (!collapsed) { diff --git a/frontend/src/toolbar/Toolbar.stories.tsx b/frontend/src/toolbar/Toolbar.stories.tsx index 9b5e82d1db4f4..93947f5cfb4c8 100644 --- a/frontend/src/toolbar/Toolbar.stories.tsx +++ b/frontend/src/toolbar/Toolbar.stories.tsx @@ -131,6 +131,10 @@ export const FeatureFlags = (): JSX.Element => { return } +export const EventsDebuggerEmpty = (): JSX.Element => { + return +} + // Dark theme export const DefaultDark = (): JSX.Element => { return @@ -155,3 +159,7 @@ export const ActionsDark = (): JSX.Element => { export const FeatureFlagsDark = (): JSX.Element => { return } + +export const EventsDebuggerEmptyDark = (): JSX.Element => { + return +} diff --git a/frontend/src/toolbar/bar/Toolbar.scss b/frontend/src/toolbar/bar/Toolbar.scss index ec98167332fbd..2f2daae32fec1 100644 --- a/frontend/src/toolbar/bar/Toolbar.scss +++ b/frontend/src/toolbar/bar/Toolbar.scss @@ -111,7 +111,7 @@ justify-content: space-between; // fixed width so that animations work when changing width - width: 15.2rem; + width: 18.2rem; overflow: hidden; color: var(--text-3000); background-color: var(--bg-3000); diff --git a/frontend/src/toolbar/bar/Toolbar.tsx b/frontend/src/toolbar/bar/Toolbar.tsx index 8ed031f904d86..f86cd490a3223 100644 --- a/frontend/src/toolbar/bar/Toolbar.tsx +++ b/frontend/src/toolbar/bar/Toolbar.tsx @@ -4,6 +4,7 @@ import { IconBolt, IconCursorClick, IconDay, + IconLive, IconLogomark, IconNight, IconQuestion, @@ -20,6 +21,7 @@ import { useEffect, useRef } from 'react' import { ActionsToolbarMenu } from '~/toolbar/actions/ActionsToolbarMenu' import { toolbarLogic } from '~/toolbar/bar/toolbarLogic' +import { EventDebugMenu } from '~/toolbar/debug/EventDebugMenu' import { FlagsToolbarMenu } from '~/toolbar/flags/FlagsToolbarMenu' import { HeatmapToolbarMenu } from '~/toolbar/stats/HeatmapToolbarMenu' import { toolbarConfigLogic } from '~/toolbar/toolbarConfigLogic' @@ -98,6 +100,8 @@ export function ToolbarInfoMenu(): JSX.Element | null { ) : visibleMenu === 'hedgehog' ? ( + ) : visibleMenu === 'debugger' ? ( + ) : null useEffect(() => { @@ -204,6 +208,9 @@ export function Toolbar(): JSX.Element { + + + ) : ( diff --git a/frontend/src/toolbar/bar/toolbarLogic.ts b/frontend/src/toolbar/bar/toolbarLogic.ts index 7b01c978dcd92..678a7529e532d 100644 --- a/frontend/src/toolbar/bar/toolbarLogic.ts +++ b/frontend/src/toolbar/bar/toolbarLogic.ts @@ -12,7 +12,7 @@ import type { toolbarLogicType } from './toolbarLogicType' const MARGIN = 2 -export type MenuState = 'none' | 'heatmap' | 'actions' | 'flags' | 'inspect' | 'hedgehog' +export type MenuState = 'none' | 'heatmap' | 'actions' | 'flags' | 'inspect' | 'hedgehog' | 'debugger' export const toolbarLogic = kea([ path(['toolbar', 'bar', 'toolbarLogic']), diff --git a/frontend/src/toolbar/debug/EventDebugMenu.tsx b/frontend/src/toolbar/debug/EventDebugMenu.tsx new file mode 100644 index 0000000000000..2346c769f4bbe --- /dev/null +++ b/frontend/src/toolbar/debug/EventDebugMenu.tsx @@ -0,0 +1,74 @@ +import clsx from 'clsx' +import { useActions, useValues } from 'kea' +import { AnimatedCollapsible } from 'lib/components/AnimatedCollapsible' +import { TZLabel } from 'lib/components/TZLabel' +import { LemonSwitch } from 'lib/lemon-ui/LemonSwitch' +import { SimpleKeyValueList } from 'scenes/session-recordings/player/inspector/components/SimpleKeyValueList' + +import { eventDebugMenuLogic } from '~/toolbar/debug/eventDebugMenuLogic' + +import { ToolbarMenu } from '../bar/ToolbarMenu' + +export const EventDebugMenu = (): JSX.Element => { + const { filteredEvents, isCollapsedEventRow, expandedEvent, showRecordingSnapshots, snapshotCount, eventCount } = + useValues(eventDebugMenuLogic) + const { markExpanded, setShowRecordingSnapshots } = useActions(eventDebugMenuLogic) + + return ( + + +
+
+ Seen {snapshotCount} events. + Seen {eventCount} recording snapshots. +
+
+ setShowRecordingSnapshots(c)} + label="Show recording snapshot events" + /> +
+
+ + +
+ {filteredEvents.length ? ( + filteredEvents.map((e, i) => { + return ( +
{ + expandedEvent === e.uuid ? markExpanded(null) : markExpanded(e.uuid || null) + }} + > +
+
{e.event}
+
+ +
+
+ +
+ +
+ +
+ ) + }) + ) : ( +
+ Interact with your page and then come back to the toolbar to see what events were generated. +
+ )} +
+ + + View events from this page as they are sent to PostHog. + + + ) +} diff --git a/frontend/src/toolbar/debug/eventDebugMenuLogic.ts b/frontend/src/toolbar/debug/eventDebugMenuLogic.ts new file mode 100644 index 0000000000000..1b490687c3ad2 --- /dev/null +++ b/frontend/src/toolbar/debug/eventDebugMenuLogic.ts @@ -0,0 +1,78 @@ +import { actions, afterMount, connect, kea, path, reducers, selectors } from 'kea' +import { uuid } from 'lib/utils' +import { permanentlyMount } from 'lib/utils/kea-logic-builders' + +import { toolbarConfigLogic } from '~/toolbar/toolbarConfigLogic' +import { EventType } from '~/types' + +import type { eventDebugMenuLogicType } from './eventDebugMenuLogicType' + +export const eventDebugMenuLogic = kea([ + path(['toolbar', 'debug', 'eventDebugMenuLogic']), + connect(() => ({ + values: [toolbarConfigLogic, ['posthog']], + })), + actions({ + addEvent: (event: EventType) => ({ event }), + markExpanded: (id: string | null) => ({ id }), + setShowRecordingSnapshots: (show: boolean) => ({ show }), + }), + reducers({ + events: [ + [] as EventType[], + { + addEvent: (state, { event }) => { + if (event.uuid) { + event.uuid = uuid() + } + return [event, ...state] + }, + }, + ], + expandedEvent: [ + null as string | null, + { + markExpanded: (_, { id }) => id, + }, + ], + showRecordingSnapshots: [ + false, + { + setShowRecordingSnapshots: (_, { show }) => show, + }, + ], + }), + selectors({ + isCollapsedEventRow: [ + (s) => [s.expandedEvent], + (expandedEvent) => { + return (eventId: string | null): boolean => { + return eventId !== expandedEvent + } + }, + ], + snapshotCount: [(s) => [s.events], (events) => events.filter((e) => e.event !== '$snapshot').length], + eventCount: [(s) => [s.events], (events) => events.filter((e) => e.event === '$snapshot').length], + filteredEvents: [ + (s) => [s.showRecordingSnapshots, s.events], + (showRecordingSnapshots, events) => { + return events.filter((e) => { + if (showRecordingSnapshots) { + return true + } else { + return e.event !== '$snapshot' + } + }) + }, + ], + }), + afterMount(({ values, actions }) => { + values.posthog?.on('eventCaptured', (e) => { + if (!e.uuid) { + e.uuid = uuid() + } + actions.addEvent(e) + }) + }), + permanentlyMount(), +])