chore: error tracking access prompt (#26769)

PostHog · Dec 10, 2024 · 11f5857 · 11f5857
1 parent c5c9b40
commit 11f5857
Show file tree

Hide file tree

Showing 6 changed files with 122 additions and 60 deletions.
diff --git a/frontend/src/lib/components/Support/supportLogic.ts b/frontend/src/lib/components/Support/supportLogic.ts
@@ -178,6 +178,11 @@ export const TARGET_AREA_TO_NAME = [
                 'data-attr': `support-form-target-area-web_analytics`,
                 label: 'Web Analytics',
             },
+            {
+                value: 'error_tracking',
+                'data-attr': `support-form-target-area-error_tracking`,
+                label: 'Error tracking',
+            },
         ],
     },
 ]
@@ -211,6 +216,7 @@ export type SupportTicketTargetArea =
     | 'toolbar'
     | 'surveys'
     | 'web_analytics'
+    | 'error_tracking'
 export type SupportTicketSeverityLevel = keyof typeof SEVERITY_LEVEL_TO_NAME
 export type SupportTicketKind = keyof typeof SUPPORT_KIND_TO_SUBJECT
 

diff --git a/frontend/src/scenes/error-tracking/AlphaAccessScenePrompt.tsx b/frontend/src/scenes/error-tracking/AlphaAccessScenePrompt.tsx
@@ -0,0 +1,40 @@
+import { LemonButton } from '@posthog/lemon-ui'
+import { useActions } from 'kea'
+import { ProductIntroduction } from 'lib/components/ProductIntroduction/ProductIntroduction'
+import { supportLogic } from 'lib/components/Support/supportLogic'
+import { useFeatureFlag } from 'lib/hooks/useFeatureFlag'
+
+import { ProductKey } from '~/types'
+
+export const AlphaAccessScenePrompt = ({ children }: { children: React.ReactElement }): JSX.Element => {
+    const hasErrorTracking = useFeatureFlag('ERROR_TRACKING')
+    const { openSupportForm } = useActions(supportLogic)
+
+    return !hasErrorTracking ? (
+        children
+    ) : (
+        <ProductIntroduction
+            productName="Error tracking"
+            thingName="issue"
+            titleOverride="Capture your first exception"
+            description="Error tracking is in closed alpha for our JS and Python SDKs. If you would like access please reach out and someone on our team will onboard you."
+            isEmpty={true}
+            actionElementOverride={
+                <LemonButton
+                    type="primary"
+                    onClick={() =>
+                        openSupportForm({
+                            target_area: 'error_tracking',
+                            isEmailFormOpen: true,
+                            message: 'Hi\n\nI would like to request access to the error tracking product',
+                            severity_level: 'low',
+                        })
+                    }
+                >
+                    Request access
+                </LemonButton>
+            }
+            productKey={ProductKey.ERROR_TRACKING}
+        />
+    )
+}
diff --git a/frontend/src/scenes/error-tracking/ErrorTrackingConfigurationScene.tsx b/frontend/src/scenes/error-tracking/ErrorTrackingConfigurationScene.tsx
@@ -8,6 +8,7 @@ import { humanFriendlyDetailedTime } from 'lib/utils'
 import { useEffect, useState } from 'react'
 import { SceneExport } from 'scenes/sceneTypes'
 
+import { AlphaAccessScenePrompt } from './AlphaAccessScenePrompt'
 import { errorTrackingSymbolSetLogic } from './errorTrackingSymbolSetLogic'
 import { SymbolSetUploadModal } from './SymbolSetUploadModal'
 
@@ -25,19 +26,24 @@ export function ErrorTrackingConfigurationScene(): JSX.Element {
     }, [loadSymbolSets])
 
     return (
-        <div className="space-y-4">
-            <h2>Symbol sets</h2>
-            <p>
-                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.
-            </p>
-            {missingSymbolSets.length > 0 && (
-                <SymbolSetTable id="missing" dataSource={missingSymbolSets} pageSize={5} missing />
-            )}
-            {validSymbolSets.length > 0 && <SymbolSetTable id="valid" dataSource={validSymbolSets} pageSize={10} />}
-            <SymbolSetUploadModal />
-        </div>
+        <AlphaAccessScenePrompt>
+            <div className="space-y-4">
+                <h2>Symbol sets</h2>
+                <p>
+                    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.
+                </p>
+                {missingSymbolSets.length > 0 && (
+                    <SymbolSetTable id="missing" dataSource={missingSymbolSets} pageSize={5} missing />
+                )}
+                {(validSymbolSets.length > 0 || missingSymbolSets.length === 0) && (
+                    <SymbolSetTable id="valid" dataSource={validSymbolSets} pageSize={10} />
+                )}
+                <SymbolSetUploadModal />
+            </div>
+        </AlphaAccessScenePrompt>
     )
 }
 

diff --git a/frontend/src/scenes/error-tracking/ErrorTrackingIssueScene.tsx b/frontend/src/scenes/error-tracking/ErrorTrackingIssueScene.tsx
@@ -8,6 +8,7 @@ import { SceneExport } from 'scenes/sceneTypes'
 
 import { ErrorTrackingIssue } from '~/queries/schema'
 
+import { AlphaAccessScenePrompt } from './AlphaAccessScenePrompt'
 import { AssigneeSelect } from './AssigneeSelect'
 import ErrorTrackingFilters from './ErrorTrackingFilters'
 import { errorTrackingIssueSceneLogic } from './errorTrackingIssueSceneLogic'
@@ -40,47 +41,52 @@ export function ErrorTrackingIssueScene(): JSX.Element {
     }, [])
 
     return (
-        <>
-            <PageHeader
-                buttons={
-                    issue && hasGroupActions ? (
-                        issue.status === 'active' ? (
-                            <div className="flex divide-x gap-x-2">
-                                <AssigneeSelect
-                                    assignee={issue.assignee}
-                                    onChange={(assignee) => updateIssue({ assignee })}
-                                    type="secondary"
-                                    showName
-                                />
-                                <div className="flex pl-2 gap-x-2">
-                                    <LemonButton type="secondary" onClick={() => updateIssue({ status: 'archived' })}>
-                                        Archive
-                                    </LemonButton>
-                                    <LemonButton type="primary" onClick={() => updateIssue({ status: 'resolved' })}>
-                                        Resolve
-                                    </LemonButton>
+        <AlphaAccessScenePrompt>
+            <>
+                <PageHeader
+                    buttons={
+                        issue && hasGroupActions ? (
+                            issue.status === 'active' ? (
+                                <div className="flex divide-x gap-x-2">
+                                    <AssigneeSelect
+                                        assignee={issue.assignee}
+                                        onChange={(assignee) => updateIssue({ assignee })}
+                                        type="secondary"
+                                        showName
+                                    />
+                                    <div className="flex pl-2 gap-x-2">
+                                        <LemonButton
+                                            type="secondary"
+                                            onClick={() => updateIssue({ status: 'archived' })}
+                                        >
+                                            Archive
+                                        </LemonButton>
+                                        <LemonButton type="primary" onClick={() => updateIssue({ status: 'resolved' })}>
+                                            Resolve
+                                        </LemonButton>
+                                    </div>
                                 </div>
-                            </div>
+                            ) : (
+                                <LemonButton
+                                    type="secondary"
+                                    className="upcasefirst-letter:uppercase"
+                                    onClick={() => updateIssue({ status: 'active' })}
+                                    tooltip="Mark as active"
+                                >
+                                    {STATUS_LABEL[issue.status]}
+                                </LemonButton>
+                            )
                         ) : (
-                            <LemonButton
-                                type="secondary"
-                                className="upcasefirst-letter:uppercase"
-                                onClick={() => updateIssue({ status: 'active' })}
-                                tooltip="Mark as active"
-                            >
-                                {STATUS_LABEL[issue.status]}
-                            </LemonButton>
+                            false
                         )
-                    ) : (
-                        false
-                    )
-                }
-            />
-            <ErrorTrackingFilters.FilterGroup />
-            <LemonDivider className="mt-2" />
-            <ErrorTrackingFilters.Options isGroup />
-            <OverviewTab />
-            <SymbolSetUploadModal />
-        </>
+                    }
+                />
+                <ErrorTrackingFilters.FilterGroup />
+                <LemonDivider className="mt-2" />
+                <ErrorTrackingFilters.Options isGroup />
+                <OverviewTab />
+                <SymbolSetUploadModal />
+            </>
+        </AlphaAccessScenePrompt>
     )
 }
diff --git a/frontend/src/scenes/error-tracking/ErrorTrackingScene.tsx b/frontend/src/scenes/error-tracking/ErrorTrackingScene.tsx
@@ -16,6 +16,7 @@ import { ErrorTrackingIssue } from '~/queries/schema'
 import { QueryContext, QueryContextColumnComponent, QueryContextColumnTitleComponent } from '~/queries/types'
 import { InsightLogicProps } from '~/types'
 
+import { AlphaAccessScenePrompt } from './AlphaAccessScenePrompt'
 import { AssigneeSelect } from './AssigneeSelect'
 import { errorTrackingDataNodeLogic } from './errorTrackingDataNodeLogic'
 import ErrorTrackingFilters from './ErrorTrackingFilters'
@@ -52,14 +53,16 @@ export function ErrorTrackingScene(): JSX.Element {
     }
 
     return (
-        <BindLogic logic={errorTrackingDataNodeLogic} props={{ query, key: insightVizDataNodeKey(insightProps) }}>
-            <Header />
-            <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" />
-            {selectedIssueIds.length === 0 ? <ErrorTrackingFilters.Options /> : <ErrorTrackingActions />}
-            <Query query={query} context={context} />
-        </BindLogic>
+        <AlphaAccessScenePrompt>
+            <BindLogic logic={errorTrackingDataNodeLogic} props={{ query, key: insightVizDataNodeKey(insightProps) }}>
+                <Header />
+                <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" />
+                {selectedIssueIds.length === 0 ? <ErrorTrackingFilters.Options /> : <ErrorTrackingActions />}
+                <Query query={query} context={context} />
+            </BindLogic>
+        </AlphaAccessScenePrompt>
     )
 }
 

diff --git a/frontend/src/types.ts b/frontend/src/types.ts
@@ -196,6 +196,7 @@ export enum ProductKey {
     PLATFORM_AND_SUPPORT = 'platform_and_support',
     TEAMS = 'teams',
     WEB_ANALYTICS = 'web_analytics',
+    ERROR_TRACKING = 'error_tracking',
 }
 
 type ProductKeyUnion = `${ProductKey}`