feat: use array as error tracking fingerprints

frontend/src/lib/api.ts

@@ -3,7 +3,7 @@ import { encodeParams } from 'kea-router'
 import { ActivityLogProps } from 'lib/components/ActivityLog/ActivityLog'
 import { ActivityLogItem } from 'lib/components/ActivityLog/humanizeActivity'
 import { apiStatusLogic } from 'lib/logic/apiStatusLogic'
-import { objectClean, toParams } from 'lib/utils'
+import { base64Encode, objectClean, toParams } from 'lib/utils'
 import posthog from 'posthog-js'
 import { SavedSessionRecordingPlaylistsResult } from 'scenes/session-recordings/saved-playlists/savedSessionRecordingPlaylistsLogic'
 
@@ -670,7 +670,8 @@ class ApiRequest {
     }
 
     public errorTrackingGroup(fingerprint: ErrorTrackingGroup['fingerprint'], teamId?: TeamType['id']): ApiRequest {
-        return this.errorTracking(teamId).addPathComponent(fingerprint)
+        const stringifiedFingerprint = base64Encode(JSON.stringify(fingerprint))
+        return this.errorTracking(teamId).addPathComponent(stringifiedFingerprint)
     }
 
     public errorTrackingMerge(fingerprint: ErrorTrackingGroup['fingerprint']): ApiRequest {

frontend/src/queries/schema.json

@@ -3384,7 +3384,10 @@
                     "type": ["string", "null"]
                 },
                 "fingerprint": {
-                    "type": "string"
+                    "items": {
+                        "type": "string"
+                    },
+                    "type": "array"
                 },
                 "first_seen": {
                     "format": "date-time",
@@ -3396,7 +3399,10 @@
                 },
                 "merged_fingerprints": {
                     "items": {
-                        "type": "string"
+                        "items": {
+                            "type": "string"
+                        },
+                        "type": "array"
                     },
                     "type": "array"
                 },
@@ -3449,7 +3455,10 @@
                     "type": "boolean"
                 },
                 "fingerprint": {
-                    "type": "string"
+                    "items": {
+                        "type": "string"
+                    },
+                    "type": "array"
                 },
                 "kind": {
                     "const": "ErrorTrackingQuery",

frontend/src/queries/schema.ts

@@ -1315,7 +1315,7 @@ export type CachedSessionAttributionExplorerQueryResponse = CachedQueryResponse<
 
 export interface ErrorTrackingQuery extends DataNode<ErrorTrackingQueryResponse> {
     kind: NodeKind.ErrorTrackingQuery
-    fingerprint?: string
+    fingerprint?: string[]
     select?: HogQLExpression[]
     eventColumns?: string[]
     order?: 'last_seen' | 'first_seen' | 'occurrences' | 'users' | 'sessions'
@@ -1327,9 +1327,9 @@ export interface ErrorTrackingQuery extends DataNode<ErrorTrackingQueryResponse>
 }
 
 export interface ErrorTrackingGroup {
-    fingerprint: string
+    fingerprint: string[]
     exception_type: string | null
-    merged_fingerprints: string[]
+    merged_fingerprints: string[][]
     occurrences: number
     sessions: number
     users: number

frontend/src/scenes/error-tracking/ErrorTracking.stories.tsx

@@ -1,5 +1,6 @@
 import { Meta } from '@storybook/react'
 import { router } from 'kea-router'
+import { base64Encode } from 'lib/utils'
 import { useEffect } from 'react'
 import { App } from 'scenes/App'
 import { urls } from 'scenes/urls'
@@ -39,7 +40,8 @@ export function ListPage(): JSX.Element {
 
 export function GroupPage(): JSX.Element {
     useEffect(() => {
-        router.actions.push(urls.errorTrackingGroup('TypeError'))
+        const stringifiedFingerprint = base64Encode(JSON.stringify(['TypeError']))
+        router.actions.push(urls.errorTrackingGroup(stringifiedFingerprint))
     }, [])
     return <App />
 }

frontend/src/scenes/error-tracking/ErrorTrackingGroupScene.tsx

@@ -2,6 +2,7 @@ import './ErrorTracking.scss'
 
 import { LemonDivider, LemonTabs } from '@posthog/lemon-ui'
 import { useActions, useValues } from 'kea'
+import { base64Decode } from 'lib/utils'
 import { SceneExport } from 'scenes/sceneTypes'
 
 import ErrorTrackingFilters from './ErrorTrackingFilters'
@@ -12,8 +13,8 @@ import { OverviewTab } from './groups/OverviewTab'
 export const scene: SceneExport = {
     component: ErrorTrackingGroupScene,
     logic: errorTrackingGroupSceneLogic,
-    paramsToProps: ({ params: { id: fingerprint } }): (typeof errorTrackingGroupSceneLogic)['props'] => ({
-        fingerprint,
+    paramsToProps: ({ params: { fingerprint } }): (typeof errorTrackingGroupSceneLogic)['props'] => ({
+        fingerprint: JSON.parse(base64Decode(decodeURIComponent(fingerprint))),
     }),
 }
 

frontend/src/scenes/error-tracking/ErrorTrackingScene.tsx

@@ -6,6 +6,7 @@ import { BindLogic, useActions, useValues } from 'kea'
 import { FeedbackNotice } from 'lib/components/FeedbackNotice'
 import { MemberSelect } from 'lib/components/MemberSelect'
 import { LemonTableLink } from 'lib/lemon-ui/LemonTable/LemonTableLink'
+import { base64Encode } from 'lib/utils'
 import { SceneExport } from 'scenes/sceneTypes'
 import { urls } from 'scenes/urls'
 
@@ -26,7 +27,7 @@ export const scene: SceneExport = {
 }
 
 export function ErrorTrackingScene(): JSX.Element {
-    const { query, selectedRows } = useValues(errorTrackingSceneLogic)
+    const { query, selectedRowIndexes } = useValues(errorTrackingSceneLogic)
 
     const insightProps: InsightLogicProps = {
         dashboardItemId: 'new-ErrorTrackingQuery',
@@ -52,29 +53,29 @@ export function ErrorTrackingScene(): JSX.Element {
             <FeedbackNotice text="Error tracking is in closed alpha. Thanks for taking part! We'd love to hear what you think." />
             <ErrorTrackingFilters.FilterGroup />
             <LemonDivider className="mt-2" />
-            {selectedRows.length === 0 ? <ErrorTrackingFilters.Options /> : <ErrorTrackingActions />}
+            {selectedRowIndexes.length === 0 ? <ErrorTrackingFilters.Options /> : <ErrorTrackingActions />}
             <Query query={query} context={context} />
         </BindLogic>
     )
 }
 
 const ErrorTrackingActions = (): JSX.Element => {
-    const { selectedRows } = useValues(errorTrackingSceneLogic)
-    const { setSelectedRows } = useActions(errorTrackingSceneLogic)
+    const { selectedRowIndexes } = useValues(errorTrackingSceneLogic)
+    const { setSelectedRowIndexes } = useActions(errorTrackingSceneLogic)
     const { mergeGroups } = useActions(errorTrackingDataNodeLogic)
 
     return (
         <div className="sticky top-[var(--breadcrumbs-height-compact)] z-20 py-2 bg-bg-3000 flex space-x-1">
-            <LemonButton type="secondary" size="small" onClick={() => setSelectedRows([])}>
+            <LemonButton type="secondary" size="small" onClick={() => setSelectedRowIndexes([])}>
                 Unselect all
             </LemonButton>
-            {selectedRows.length > 1 && (
+            {selectedRowIndexes.length > 1 && (
                 <LemonButton
                     type="secondary"
                     size="small"
                     onClick={() => {
-                        mergeGroups(selectedRows)
-                        setSelectedRows([])
+                        mergeGroups(selectedRowIndexes)
+                        setSelectedRowIndexes([])
                     }}
                 >
                     Merge
@@ -106,28 +107,27 @@ const CustomVolumeColumnHeader: QueryContextColumnTitleComponent = ({ columnName
 }
 
 const CustomGroupTitleColumn: QueryContextColumnComponent = (props) => {
-    const { selectedRows } = useValues(errorTrackingSceneLogic)
-    const { setSelectedRows } = useActions(errorTrackingSceneLogic)
+    const { selectedRowIndexes } = useValues(errorTrackingSceneLogic)
+    const { setSelectedRowIndexes } = useActions(errorTrackingSceneLogic)
 
+    const rowIndex = props.recordIndex
     const record = props.record as ErrorTrackingGroup
 
-    const checked = selectedRows.includes(record.fingerprint)
+    const checked = selectedRowIndexes.includes(props.recordIndex)
 
     return (
         <div className="flex items-start space-x-1.5 group">
             <LemonCheckbox
                 className={clsx('pt-1 group-hover:visible', !checked && 'invisible')}
                 checked={checked}
-                onChange={(checked) => {
-                    setSelectedRows(
-                        checked
-                            ? [...selectedRows, record.fingerprint]
-                            : selectedRows.filter((r) => r != record.fingerprint)
+                onChange={(newValue) => {
+                    setSelectedRowIndexes(
+                        newValue ? [...selectedRowIndexes, rowIndex] : selectedRowIndexes.filter((id) => id != rowIndex)
                     )
                 }}
             />
             <LemonTableLink
-                title={record.exception_type || record.fingerprint}
+                title={record.exception_type || 'Unknown Type'}
                 description={
                     <div className="space-y-1">
                         <div className="line-clamp-1">{record.description}</div>
@@ -139,7 +139,7 @@ const CustomGroupTitleColumn: QueryContextColumnComponent = (props) => {
                     </div>
                 }
                 className="flex-1"
-                to={urls.errorTrackingGroup(record.fingerprint)}
+                to={urls.errorTrackingGroup(base64Encode(JSON.stringify(record.fingerprint)))}
             />
         </div>
     )

frontend/src/scenes/error-tracking/errorTrackingDataNodeLogic.tsx

@@ -22,18 +22,18 @@ export const errorTrackingDataNodeLogic = kea<errorTrackingDataNodeLogicType>([
     })),
 
     actions({
-        mergeGroups: (fingerprints: string[]) => ({ fingerprints }),
+        mergeGroups: (indexes: number[]) => ({ indexes }),
         assignGroup: (recordIndex: number, assigneeId: number | null) => ({
             recordIndex,
             assigneeId,
         }),
     }),
 
     listeners(({ values, actions }) => ({
-        mergeGroups: async ({ fingerprints }) => {
+        mergeGroups: async ({ indexes }) => {
             const results = values.response?.results as ErrorTrackingGroup[]
 
-            const groups = results.filter((g) => fingerprints.includes(g.fingerprint))
+            const groups = results.filter((_, id) => indexes.includes(id))
             const primaryGroup = groups.shift()
 
             if (primaryGroup && groups.length > 0) {
@@ -45,7 +45,7 @@ export const errorTrackingDataNodeLogic = kea<errorTrackingDataNodeLogicType>([
                     ...values.response,
                     results: results
                         // remove merged groups
-                        .filter((group) => !mergingFingerprints.includes(group.fingerprint))
+                        .filter((_, id) => !indexes.includes(id))
                         .map((group) =>
                             // replace primary group
                             mergedGroup.fingerprint === group.fingerprint ? mergedGroup : group
@@ -58,7 +58,7 @@ export const errorTrackingDataNodeLogic = kea<errorTrackingDataNodeLogicType>([
             const response = values.response
             if (response) {
                 const params = { assignee: assigneeId }
-                const results = values.response?.results as ErrorTrackingGroup[]
+                const results = response.results as ErrorTrackingGroup[]
                 const group = { ...results[recordIndex], ...params }
                 results.splice(recordIndex, 1, group)
                 // optimistically update local results

frontend/src/scenes/error-tracking/errorTrackingGroupSceneLogic.ts

@@ -13,7 +13,7 @@ import { errorTrackingLogic } from './errorTrackingLogic'
 import { errorTrackingGroupQuery } from './queries'
 
 export interface ErrorTrackingGroupSceneLogicProps {
-    fingerprint: string
+    fingerprint: string[]
 }
 
 export enum ErrorGroupTab {
@@ -78,17 +78,18 @@ export const errorTrackingGroupSceneLogic = kea<errorTrackingGroupSceneLogicType
 
     selectors({
         breadcrumbs: [
-            (_, p) => [p.fingerprint],
-            (fingerprint): Breadcrumb[] => {
+            (s) => [s.group],
+            (group): Breadcrumb[] => {
+                const exceptionType = group?.exception_type || 'Unknown Type'
                 return [
                     {
                         key: Scene.ErrorTracking,
                         name: 'Error tracking',
                         path: urls.errorTracking(),
                     },
                     {
-                        key: [Scene.ErrorTrackingGroup, fingerprint],
-                        name: fingerprint,
+                        key: [Scene.ErrorTrackingGroup, exceptionType],
+                        name: exceptionType,
                     },
                 ]
             },

frontend/src/scenes/error-tracking/errorTrackingSceneLogic.ts

@@ -16,7 +16,7 @@ export const errorTrackingSceneLogic = kea<errorTrackingSceneLogicType>([
 
     actions({
         setOrder: (order: ErrorTrackingQuery['order']) => ({ order }),
-        setSelectedRows: (selectedRows: string[]) => ({ selectedRows }),
+        setSelectedRowIndexes: (ids: number[]) => ({ ids }),
     }),
     reducers({
         order: [
@@ -26,10 +26,10 @@ export const errorTrackingSceneLogic = kea<errorTrackingSceneLogicType>([
                 setOrder: (_, { order }) => order,
             },
         ],
-        selectedRows: [
-            [] as string[],
+        selectedRowIndexes: [
+            [] as number[],
             {
-                setSelectedRows: (_, { selectedRows }) => selectedRows,
+                setSelectedRowIndexes: (_, { ids }) => ids,
             },
         ],
     }),
@@ -49,6 +49,6 @@ export const errorTrackingSceneLogic = kea<errorTrackingSceneLogicType>([
     }),
 
     subscriptions(({ actions }) => ({
-        query: () => actions.setSelectedRows([]),
+        query: () => actions.setSelectedRowIndexes([]),
     })),
 ])

frontend/src/scenes/error-tracking/queries.ts

@@ -113,7 +113,7 @@ export const errorTrackingGroupQuery = ({
     filterTestAccounts,
     filterGroup,
 }: {
-    fingerprint: string
+    fingerprint: string[]
     dateRange: DateRange
     filterTestAccounts: boolean
     filterGroup: UniversalFiltersGroup