-
{source}
- {resolved_name ? (
-
-
in
-
{resolved_name}
+ const panels = displayFrames.map(
+ ({ raw_id, source, line, column, resolved_name, lang, resolved, resolve_failure }, index) => {
+ const record = stackFrameRecords[raw_id]
+ return {
+ key: index,
+ header: (
+
+
+
{source}
+ {resolved_name ? (
+
+ in
+ {resolved_name}
+
+ ) : null}
+ {line ? (
+
+ @
+
+ {line}
+ {column && `:${column}`}
+
+
+ ) : null}
- ) : null}
- {line ? (
-
- @
-
- {line}
- {column && `:${column}`}
-
-
- ) : null}
-
- ),
- content: frameContext ?
: null,
- className: 'p-0',
+ {!resolved && (
+
+
+ Unresolved
+
+
+ )}
+
+ ),
+ content:
+ record && record.context ? (
+
+ ) : null,
+ className: 'p-0',
+ }
}
- })
+ )
return
}
diff --git a/frontend/src/lib/components/Errors/stackFrameLogic.ts b/frontend/src/lib/components/Errors/stackFrameLogic.ts
index 66d7ef0698bf9..12f7419384a38 100644
--- a/frontend/src/lib/components/Errors/stackFrameLogic.ts
+++ b/frontend/src/lib/components/Errors/stackFrameLogic.ts
@@ -1,23 +1,40 @@
-import { kea, path } from 'kea'
+import { actions, kea, path } from 'kea'
import { loaders } from 'kea-loaders'
import api from 'lib/api'
import type { stackFrameLogicType } from './stackFrameLogicType'
-import { ErrorTrackingStackFrame, ErrorTrackingStackFrameContext } from './types'
+import { ErrorTrackingStackFrame, ErrorTrackingStackFrameRecord, ErrorTrackingSymbolSet } from './types'
+
+export type KeyedStackFrameRecords = Record
+
+function mapStackFrameRecords(
+ newRecords: ErrorTrackingStackFrameRecord[],
+ initialRecords: KeyedStackFrameRecords
+): KeyedStackFrameRecords {
+ return newRecords.reduce((frames, record) => ({ ...frames, [record.raw_id]: record }), initialRecords)
+}
export const stackFrameLogic = kea([
path(['components', 'Errors', 'stackFrameLogic']),
+
+ actions({
+ loadFromRawIds: (rawIds: ErrorTrackingStackFrame['raw_id'][]) => ({ rawIds }),
+ loadForSymbolSet: (symbolSetId: ErrorTrackingSymbolSet['id']) => ({ symbolSetId }),
+ }),
+
loaders(({ values }) => ({
- frameContexts: [
- {} as Record,
+ stackFrameRecords: [
+ {} as KeyedStackFrameRecords,
{
- loadFrameContexts: async ({ frames }: { frames: ErrorTrackingStackFrame[] }) => {
- const loadedFrameIds = Object.keys(values.frameContexts)
- const ids = frames
- .filter(({ raw_id }) => !loadedFrameIds.includes(raw_id))
- .map(({ raw_id }) => raw_id)
- const response = await api.errorTracking.fetchStackFrames(ids)
- return { ...values.frameContexts, ...response }
+ loadFromRawIds: async ({ rawIds }) => {
+ const loadedRawIds = Object.keys(values.stackFrameRecords)
+ rawIds = rawIds.filter((rawId) => !loadedRawIds.includes(rawId))
+ const response = await api.errorTracking.stackFrames(rawIds)
+ return mapStackFrameRecords(response, values.stackFrameRecords)
+ },
+ loadForSymbolSet: async ({ symbolSetId }) => {
+ const response = await api.errorTracking.symbolSetStackFrames(symbolSetId)
+ return mapStackFrameRecords(response, values.stackFrameRecords)
},
},
],
diff --git a/frontend/src/lib/components/Errors/types.ts b/frontend/src/lib/components/Errors/types.ts
index 9a2cf59a662a3..3442e81884eb8 100644
--- a/frontend/src/lib/components/Errors/types.ts
+++ b/frontend/src/lib/components/Errors/types.ts
@@ -18,10 +18,10 @@ export interface ErrorTrackingStackFrameRecord {
id: string
raw_id: string
created_at: string
- symbol_set: string
resolved: boolean
context: ErrorTrackingStackFrameContext | null
contents: ErrorTrackingStackFrame // For now, while we're not 100% on content structure
+ symbol_set_ref: ErrorTrackingSymbolSet['ref']
}
export type ErrorTrackingStackFrameContext = {
diff --git a/frontend/src/scenes/appScenes.ts b/frontend/src/scenes/appScenes.ts
index 4a8e63759e124..911ade4320076 100644
--- a/frontend/src/scenes/appScenes.ts
+++ b/frontend/src/scenes/appScenes.ts
@@ -34,6 +34,7 @@ export const appScenes: Record any> = {
[Scene.EarlyAccessFeatures]: () => import('./early-access-features/EarlyAccessFeatures'),
[Scene.EarlyAccessFeature]: () => import('./early-access-features/EarlyAccessFeature'),
[Scene.ErrorTracking]: () => import('./error-tracking/ErrorTrackingScene'),
+ [Scene.ErrorTrackingConfiguration]: () => import('./error-tracking/ErrorTrackingConfigurationScene'),
[Scene.ErrorTrackingGroup]: () => import('./error-tracking/ErrorTrackingGroupScene'),
[Scene.Surveys]: () => import('./surveys/Surveys'),
[Scene.Survey]: () => import('./surveys/Survey'),
diff --git a/frontend/src/scenes/error-tracking/ErrorTrackingConfigurationScene.tsx b/frontend/src/scenes/error-tracking/ErrorTrackingConfigurationScene.tsx
new file mode 100644
index 0000000000000..b61056d229b43
--- /dev/null
+++ b/frontend/src/scenes/error-tracking/ErrorTrackingConfigurationScene.tsx
@@ -0,0 +1,128 @@
+import { IconTrash } from '@posthog/icons'
+import { LemonButton, LemonCollapse, LemonTable, LemonTableColumns, LemonTabs } from '@posthog/lemon-ui'
+import { useActions, useValues } from 'kea'
+import { stackFrameLogic } from 'lib/components/Errors/stackFrameLogic'
+import { ErrorTrackingSymbolSet } from 'lib/components/Errors/types'
+import { JSONViewer } from 'lib/components/JSONViewer'
+import { useEffect, useState } from 'react'
+import { SceneExport } from 'scenes/sceneTypes'
+
+import { errorTrackingSymbolSetLogic } from './errorTrackingSymbolSetLogic'
+import { SymbolSetUploadModal } from './SymbolSetUploadModal'
+
+export const scene: SceneExport = {
+ component: ErrorTrackingConfigurationScene,
+ logic: errorTrackingSymbolSetLogic,
+}
+
+export function ErrorTrackingConfigurationScene(): JSX.Element {
+ const { missingSymbolSets, validSymbolSets } = useValues(errorTrackingSymbolSetLogic)
+
+ return (
+
+
Symbol sets
+
+ Source maps are required to demangle any minified code in your exception stack traces. PostHog
+ automatically retrieves source maps where possible. Cases where it was not possible are listed below.
+ Source maps can be uploaded retroactively but changes will only apply to all future exceptions ingested.
+
+ {missingSymbolSets.length > 0 &&
}
+ {validSymbolSets.length > 0 &&
}
+
+
+ {!missing && (
+ }
+ onClick={() => deleteSymbolSet(id)}
+ className="py-1"
+ />
+ )}
+
+ )
+ },
+ },
+ ]
+
+ if (missing) {
+ columns.splice(1, 0, { title: 'Failure reason', dataIndex: 'failure_reason' })
+ }
+
+ return (
+
+ },
+ }}
+ />
+ )
+}
+
+const SymbolSetStackFrames = ({ symbolSet }: { symbolSet: ErrorTrackingSymbolSet }): JSX.Element => {
+ const { stackFrameRecords } = useValues(stackFrameLogic)
+ const { loadForSymbolSet } = useActions(stackFrameLogic)
+ const [activeTab, setActiveTab] = useState<'contents' | 'context'>('contents')
+
+ useEffect(() => {
+ loadForSymbolSet(symbolSet.id)
+ }, [loadForSymbolSet, symbolSet])
+
+ const frames = Object.values(stackFrameRecords).filter((r) => r.symbol_set_ref == symbolSet.ref)
+
+ return (
+ ({
+ key: id,
+ header: raw_id,
+ className: 'py-0',
+ content: (
+ },
+ context && {
+ key: 'context',
+ label: 'Context',
+ content: ,
+ },
+ ]}
+ />
+ ),
+ }))}
+ embedded
+ />
+ )
+}
diff --git a/frontend/src/scenes/error-tracking/ErrorTrackingGroupScene.tsx b/frontend/src/scenes/error-tracking/ErrorTrackingGroupScene.tsx
index ae12520249a0d..3270a14d564cd 100644
--- a/frontend/src/scenes/error-tracking/ErrorTrackingGroupScene.tsx
+++ b/frontend/src/scenes/error-tracking/ErrorTrackingGroupScene.tsx
@@ -13,6 +13,7 @@ import { AssigneeSelect } from './AssigneeSelect'
import ErrorTrackingFilters from './ErrorTrackingFilters'
import { errorTrackingGroupSceneLogic } from './errorTrackingGroupSceneLogic'
import { OverviewTab } from './groups/OverviewTab'
+import { SymbolSetUploadModal } from './SymbolSetUploadModal'
export const scene: SceneExport = {
component: ErrorTrackingGroupScene,
@@ -82,6 +83,7 @@ export function ErrorTrackingGroupScene(): JSX.Element {
+
)
}
diff --git a/frontend/src/scenes/error-tracking/ErrorTrackingScene.tsx b/frontend/src/scenes/error-tracking/ErrorTrackingScene.tsx
index 60f9bedd45b37..54f05ae67caf2 100644
--- a/frontend/src/scenes/error-tracking/ErrorTrackingScene.tsx
+++ b/frontend/src/scenes/error-tracking/ErrorTrackingScene.tsx
@@ -1,20 +1,10 @@
import { TZLabel } from '@posthog/apps-common'
import { IconGear } from '@posthog/icons'
-import {
- LemonButton,
- LemonCheckbox,
- LemonDivider,
- LemonFileInput,
- LemonModal,
- LemonSegmentedButton,
-} from '@posthog/lemon-ui'
+import { LemonButton, LemonCheckbox, LemonDivider, LemonSegmentedButton } from '@posthog/lemon-ui'
import clsx from 'clsx'
import { BindLogic, useActions, useValues } from 'kea'
-import { Form } from 'kea-forms'
import { FeedbackNotice } from 'lib/components/FeedbackNotice'
import { PageHeader } from 'lib/components/PageHeader'
-import { IconUploadFile } from 'lib/lemon-ui/icons'
-import { LemonField } from 'lib/lemon-ui/LemonField'
import { LemonTableLink } from 'lib/lemon-ui/LemonTable/LemonTableLink'
import { SceneExport } from 'scenes/sceneTypes'
import { urls } from 'scenes/urls'
@@ -63,7 +53,6 @@ export function ErrorTrackingScene(): JSX.Element {
return (
-
@@ -180,61 +169,13 @@ const AssigneeColumn: QueryContextColumnComponent = (props) => {
}
const Header = (): JSX.Element => {
- const { setIsConfigurationModalOpen } = useActions(errorTrackingSceneLogic)
-
return (
} onClick={() => setIsConfigurationModalOpen(true)}>
+ }>
Configure
}
/>
)
}
-
-const ConfigurationModal = (): JSX.Element => {
- const { isConfigurationModalOpen, isUploadSourceMapSubmitting } = useValues(errorTrackingSceneLogic)
- const { setIsConfigurationModalOpen } = useActions(errorTrackingSceneLogic)
-
- return (
- setIsConfigurationModalOpen(false)}
- isOpen={isConfigurationModalOpen}
- simple
- >
-