yindo/posthog
1
0
Fork 0
mirror of https://github.com/BillyOutlast/posthog.git synced 2026-02-04 03:01:23 +01:00
Code Issues Packages Projects Releases Wiki Activity

fix: support new changed state in app state logging (#39231)

Browse Source 
Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com>
This commit is contained in:
Paul D'Ambra
2025-10-07 15:56:10 +01:00
committed by GitHub
parent 33f290daca
commit 6831cbdf5c
13 changed files with 114 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
frontend/__snapshots__/components-playerinspector-itemconsole--app-state-item--dark.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 16 KiB

After

Width:  |  Height:  |  Size: 26 KiB

BIN
frontend/__snapshots__/components-playerinspector-itemconsole--app-state-item--light.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 17 KiB

After

Width:  |  Height:  |  Size: 26 KiB

BIN
frontend/__snapshots__/components-playerinspector-itemconsole--mixed-format-app-state-item--dark.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 21 KiB

BIN
frontend/__snapshots__/components-playerinspector-itemconsole--mixed-format-app-state-item--light.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 21 KiB

BIN
frontend/__snapshots__/components-playerinspector-itemconsole--og-format-app-state-item--dark.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 16 KiB

BIN
frontend/__snapshots__/components-playerinspector-itemconsole--og-format-app-state-item--light.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 17 KiB

6
frontend/src/initKea.ts
View File

@@ -142,7 +142,11 @@ export function initKea({
}
}
// To enable logging, run localStorage.setItem("ph-kea-debug", true) in the console
if (window.JS_KEA_VERBOSE_LOGGING || ('localStorage' in window && window.localStorage.getItem('ph-kea-debug'))) {
// to explicitly disable the logging, run localStorage.setItem("ph-kea-debug", false)
const localStorageLoggingFlag = 'localStorage' in window && window.localStorage.getItem('ph-kea-debug')
const localStorageDisablesLogging = localStorageLoggingFlag === 'false'
const localStorageEnablesLogging = localStorageLoggingFlag === 'true'
if (!localStorageDisablesLogging && (localStorageEnablesLogging || window.JS_KEA_VERBOSE_LOGGING)) {
plugins.push(
posthogKeaLogger({
logger: sessionRecordingLoggerForPostHogInstance(window.posthog),

2
frontend/src/lib/lemon-ui/icons/categories.ts
View File

@@ -322,7 +322,7 @@ export const TEAMS_AND_COMPANIES = {
'Feature Success': ['IconFlask', 'IconTestTube', 'IconMultivariateTesting', 'IconSplitTesting', 'IconBalance'],
Pipeline: ['IconWebhooks', 'IconDecisionTree'],
'Product OS': ['IconNotebook', 'IconHogQL', 'IconDashboard', 'IconSupport'],
Logos: ['IconLogomark', 'IconGithub', 'IconLinear'],
Logos: ['IconLogomark', 'IconGithub', 'IconLinear', 'IconRedux'],
ErrorTracking: ['IconIssue'],
LLMAnalytics: ['IconLlmAnalytics', 'IconLlmPromptEvaluation', 'IconLlmPromptManagement'],
}

39
frontend/src/scenes/session-recordings/player/inspector/components/ItemAppState.stories.tsx
View File

@@ -42,6 +42,24 @@ const BasicTemplate: StoryFn<typeof ItemAppState> = (props: Partial<ItemAppState
export const AppStateItem: Story = BasicTemplate.bind({})
AppStateItem.args = {
item: {
timestamp: dayjs('2019-01-30'),
timeInRecording: 123,
search: 'some text',
type: 'app-state',
action: 'USER_LOGGED_IN',
stateEvent: {
prevState: { user: null, nestedJson: { a: 1, b: { c: 2 } } },
payload: { user: { id: 1, name: 'John Doe' }, nestedJson: { a: 1, b: { c: 3 } } },
changedState: { user: { id: 1, name: 'John Doe' }, nestedJson: { b: { c: 3 } } },
},
key: 'id',
},
}
/** keep support for these until Oct 2026 */
export const OGFormatAppStateItem: Story = BasicTemplate.bind({})
OGFormatAppStateItem.args = {
item: {
timestamp: dayjs('2019-01-30'),
timeInRecording: 123,
@@ -56,3 +74,24 @@ AppStateItem.args = {
key: 'id',
},
}
/** keep support for these until Oct 2026
* mixed format is "impossible" in practice, but this is just to ensure backwards compatibility
* */
export const MixedFormatAppStateItem: Story = BasicTemplate.bind({})
MixedFormatAppStateItem.args = {
item: {
timestamp: dayjs('2019-01-30'),
timeInRecording: 123,
search: 'some text',
type: 'app-state',
action: 'USER_LOGGED_IN',
stateEvent: {
prevState: { user: null },
payload: { user: { id: 1, name: 'John Doe' } },
nextState: { user: { id: 1, name: 'John Doe' } },
changedState: { user: { id: 1, name: 'John Doe' } },
},
key: 'id',
},
}

19
frontend/src/scenes/session-recordings/player/inspector/components/ItemConsoleLog.tsx
View File

@@ -77,18 +77,19 @@ export function ItemAppState({ item }: ItemAppStateProps): JSX.Element {
}
export function ItemAppStateDetail({ item }: ItemAppStateProps): JSX.Element {
const stateData = Object.fromEntries(
Object.entries({
'prev state': item.stateEvent?.prevState,
'action payload': item.stateEvent?.payload,
'next state': item.stateEvent?.nextState,
'changed state': item.stateEvent?.changedState,
}).filter(([, value]) => value !== undefined)
)
return (
<div className="w-full font-light" data-attr="item-app-state">
<div className="px-2 py-1 text-xs border-t flex flex-col gap-2">
<SimpleKeyValueList
item={{
'prev state': item.stateEvent?.prevState,
'action payload': item.stateEvent?.payload,
'next state': item.stateEvent?.nextState,
}}
header={<strong>{item.action}</strong>}
sortItems={false}
/>
<SimpleKeyValueList item={stateData} header={<strong>{item.action}</strong>} sortItems={false} />
</div>
</div>
)

3
frontend/src/scenes/session-recordings/player/inspector/components/PlayerInspectorListItem.tsx
View File

@@ -17,6 +17,7 @@ import {
IconGear,
IconLeave,
IconLogomark,
IconRedux,
IconTerminal,
} from '@posthog/icons'
import { LemonButton, LemonDivider } from '@posthog/lemon-ui'
@@ -55,7 +56,7 @@ const typeToIconAndDescription = {
tooltip: 'Console log',
},
'app-state': {
Icon: IconTerminal,
Icon: IconRedux,
tooltip: 'State log',
},
network: {

2
package.json
View File

@@ -66,7 +66,7 @@
"overrides": {
"playwright": "1.45.0",
"typescript": "5.2.2",
"@posthog/icons": "0.30.0"
"@posthog/icons": "0.33.0"
},
"patchedDependencies": {
"heatmap.js@2.0.5": "patches/heatmap.js@2.0.5.patch",

112
pnpm-lock.yaml generated
View File

@@ -7,7 +7,7 @@ settings:
overrides:
playwright: 1.45.0
typescript: 5.2.2
'@posthog/icons': 0.30.0
'@posthog/icons': 0.33.0
patchedDependencies:
chartjs-plugin-crosshair@2.0.0:
@@ -445,8 +445,8 @@ importers:
specifier: workspace:*
version: link:../common/hogvm/typescript
'@posthog/icons':
specifier: 0.30.0
version: 0.30.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
specifier: 0.33.0
version: 0.33.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
'@posthog/plugin-scaffold':
specifier: ^1.4.4
version: 1.4.4
@@ -1561,8 +1561,8 @@ importers:
products/actions:
dependencies:
'@posthog/icons':
specifier: 0.30.0
version: 0.30.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
specifier: 0.33.0
version: 0.33.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
'@storybook/react':
specifier: '*'
version: 7.6.4(encoding@0.1.13)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)
@@ -1597,8 +1597,8 @@ importers:
products/cohorts:
dependencies:
'@posthog/icons':
specifier: 0.30.0
version: 0.30.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
specifier: 0.33.0
version: 0.33.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
'@types/react':
specifier: '*'
version: 17.0.52
@@ -1624,8 +1624,8 @@ importers:
products/customer_analytics:
dependencies:
'@posthog/icons':
specifier: 0.30.0
version: 0.30.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
specifier: 0.33.0
version: 0.33.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
'@types/react':
specifier: '*'
version: 17.0.52
@@ -1651,8 +1651,8 @@ importers:
products/dashboards:
dependencies:
'@posthog/icons':
specifier: 0.30.0
version: 0.30.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
specifier: 0.33.0
version: 0.33.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
'@types/react':
specifier: '*'
version: 17.0.52
@@ -1678,8 +1678,8 @@ importers:
products/early_access_features:
dependencies:
'@posthog/icons':
specifier: 0.30.0
version: 0.30.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
specifier: 0.33.0
version: 0.33.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
'@storybook/react':
specifier: '*'
version: 7.6.4(encoding@0.1.13)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)
@@ -1708,8 +1708,8 @@ importers:
products/endpoints:
dependencies:
'@posthog/icons':
specifier: 0.30.0
version: 0.30.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
specifier: 0.33.0
version: 0.33.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
'@types/react':
specifier: '*'
version: 17.0.52
@@ -1747,8 +1747,8 @@ importers:
specifier: '*'
version: 3.2.1(react@18.2.0)
'@posthog/icons':
specifier: 0.30.0
version: 0.30.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
specifier: 0.33.0
version: 0.33.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
'@storybook/addon-actions':
specifier: '*'
version: 7.6.4
@@ -1816,8 +1816,8 @@ importers:
products/experiments:
dependencies:
'@posthog/icons':
specifier: 0.30.0
version: 0.30.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
specifier: 0.33.0
version: 0.33.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
'@types/react':
specifier: '*'
version: 17.0.52
@@ -1843,8 +1843,8 @@ importers:
products/feature_flags:
dependencies:
'@posthog/icons':
specifier: 0.30.0
version: 0.30.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
specifier: 0.33.0
version: 0.33.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
'@types/react':
specifier: '*'
version: 17.0.52
@@ -1870,8 +1870,8 @@ importers:
products/games:
dependencies:
'@posthog/icons':
specifier: 0.30.0
version: 0.30.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
specifier: 0.33.0
version: 0.33.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
'@types/react':
specifier: '*'
version: 17.0.52
@@ -1897,8 +1897,8 @@ importers:
products/groups:
dependencies:
'@posthog/icons':
specifier: 0.30.0
version: 0.30.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
specifier: 0.33.0
version: 0.33.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
'@types/react':
specifier: '*'
version: 17.0.52
@@ -1924,8 +1924,8 @@ importers:
products/links:
dependencies:
'@posthog/icons':
specifier: 0.30.0
version: 0.30.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
specifier: 0.33.0
version: 0.33.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
'@storybook/react':
specifier: '*'
version: 7.6.4(encoding@0.1.13)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)
@@ -1957,8 +1957,8 @@ importers:
products/llm_analytics:
dependencies:
'@posthog/icons':
specifier: 0.30.0
version: 0.30.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
specifier: 0.33.0
version: 0.33.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
'@storybook/react':
specifier: '*'
version: 7.6.4(encoding@0.1.13)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)
@@ -2012,8 +2012,8 @@ importers:
products/logs:
dependencies:
'@posthog/icons':
specifier: 0.30.0
version: 0.30.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
specifier: 0.33.0
version: 0.33.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
'@posthog/products-error-tracking':
specifier: workspace:*
version: link:../error_tracking
@@ -2069,8 +2069,8 @@ importers:
products/managed_migrations:
dependencies:
'@posthog/icons':
specifier: 0.30.0
version: 0.30.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
specifier: 0.33.0
version: 0.33.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
'@posthog/lemon-ui':
specifier: '*'
version: 0.0.0(antd@5.26.0(date-fns@2.29.3)(luxon@3.5.0)(moment@2.29.4)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(kea-router@3.4.1(kea@3.1.7(react@18.2.0)))(kea@3.1.7(react@18.2.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
@@ -2096,8 +2096,8 @@ importers:
products/messaging:
dependencies:
'@posthog/icons':
specifier: 0.30.0
version: 0.30.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
specifier: 0.33.0
version: 0.33.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
'@types/react':
specifier: '*'
version: 17.0.52
@@ -2144,8 +2144,8 @@ importers:
products/notebooks:
dependencies:
'@posthog/icons':
specifier: 0.30.0
version: 0.30.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
specifier: 0.33.0
version: 0.33.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
'@types/react':
specifier: '*'
version: 17.0.52
@@ -2171,8 +2171,8 @@ importers:
products/persons:
dependencies:
'@posthog/icons':
specifier: 0.30.0
version: 0.30.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
specifier: 0.33.0
version: 0.33.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
'@types/react':
specifier: '*'
version: 17.0.52
@@ -2198,8 +2198,8 @@ importers:
products/product_analytics:
dependencies:
'@posthog/icons':
specifier: 0.30.0
version: 0.30.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
specifier: 0.33.0
version: 0.33.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
'@types/react':
specifier: '*'
version: 17.0.52
@@ -2225,8 +2225,8 @@ importers:
products/replay:
dependencies:
'@posthog/icons':
specifier: 0.30.0
version: 0.30.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
specifier: 0.33.0
version: 0.33.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
'@types/react':
specifier: '*'
version: 17.0.52
@@ -2252,8 +2252,8 @@ importers:
products/revenue_analytics:
dependencies:
'@posthog/icons':
specifier: 0.30.0
version: 0.30.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
specifier: 0.33.0
version: 0.33.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
'@storybook/react':
specifier: '*'
version: 7.6.4(encoding@0.1.13)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)
@@ -2282,8 +2282,8 @@ importers:
products/surveys:
dependencies:
'@posthog/icons':
specifier: 0.30.0
version: 0.30.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
specifier: 0.33.0
version: 0.33.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
'@types/react':
specifier: '*'
version: 17.0.52
@@ -2321,8 +2321,8 @@ importers:
specifier: '*'
version: 3.2.1(react@18.2.0)
'@posthog/icons':
specifier: 0.30.0
version: 0.30.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
specifier: 0.33.0
version: 0.33.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
'@storybook/react':
specifier: '*'
version: 7.6.4(encoding@0.1.13)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.2.2)
@@ -2361,8 +2361,8 @@ importers:
products/user_interviews:
dependencies:
'@posthog/icons':
specifier: 0.30.0
version: 0.30.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
specifier: 0.33.0
version: 0.33.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
'@types/react':
specifier: '*'
version: 17.0.52
@@ -2388,8 +2388,8 @@ importers:
products/web_analytics:
dependencies:
'@posthog/icons':
specifier: 0.30.0
version: 0.30.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
specifier: 0.33.0
version: 0.33.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
'@types/react':
specifier: '*'
version: 17.0.52
@@ -5766,8 +5766,8 @@ packages:
'@posthog/core@1.2.2':
resolution: {integrity: sha512-f16Ozx6LIigRG+HsJdt+7kgSxZTHeX5f1JlCGKI1lXcvlZgfsCR338FuMI2QRYXGl+jg/vYFzGOTQBxl90lnBg==}
'@posthog/icons@0.30.0':
resolution: {integrity: sha512-V3QBSLwcEeSitNetafrGYqzXG2uWXzoNAc0z6yvQ7UBMPx/DFOxTfRoIaRb1m6GnAhXzR8fbprhJDmqKZB2D6w==}
'@posthog/icons@0.33.0':
resolution: {integrity: sha512-zH3yRdG7kvJ1UCReOz4o/l2A915Xbcq3+SS+OevJ6I9BdV2i2sRyLStnAm4LFqxfqT8hBMpP9G6I1Or9p2bdvw==}
peerDependencies:
react: '>=16.14.0'
react-dom: '>=16.14.0'
@@ -23619,7 +23619,7 @@ snapshots:
'@posthog/core@1.2.2': {}
'@posthog/icons@0.30.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
'@posthog/icons@0.33.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
dependencies:
react: 18.2.0
react-dom: 18.2.0(react@18.2.0)