feat(web-analytics): Add staleness check and update warning (#18660)

* Add staleness check and update warning * Tweak the posthog-js doc link text
PostHog · Nov 16, 2023 · 0c9bd8d · 0c9bd8d
1 parent 987a2d4
commit 0c9bd8d
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 17 deletions.
diff --git a/frontend/src/scenes/web-analytics/WebAnalyticsHealthCheck.tsx b/frontend/src/scenes/web-analytics/WebAnalyticsHealthCheck.tsx
@@ -21,9 +21,12 @@ export const WebAnalyticsHealthCheck = (): JSX.Element | null => {
                             or <code>$pageleave</code>{' '}
                         </>
                     ) : null}
-                    events have been received, please read{' '}
-                    <Link to={'https://posthog.com/docs/product-analytics/capture-events'}>the documentation</Link> and
-                    fix this before using Web Analytics.
+                    events have been received. Web analytics won't work correctly (it'll be a little empty!)
+                </p>
+                <p>
+                    Please see{' '}
+                    <Link to={'https://posthog.com/docs/libraries/js'}>documentation for how to set up posthog-js</Link>
+                    .
                 </p>
             </LemonBanner>
         )
@@ -32,9 +35,12 @@ export const WebAnalyticsHealthCheck = (): JSX.Element | null => {
             <LemonBanner type={'warning'} className={'mt-2'}>
                 <p>
                     No <code>$pageleave</code> events have been received, this means that Bounce rate and Session
-                    Duration might be inaccurate. Please read{' '}
-                    <Link to={'https://posthog.com/docs/product-analytics/capture-events'}>the documentation</Link> and
-                    fix this before using Web Analytics.
+                    duration might be inaccurate.
+                </p>
+                <p>
+                    Please see{' '}
+                    <Link to={'https://posthog.com/docs/libraries/js'}>documentation for how to set up posthog-js</Link>
+                    .
                 </p>
             </LemonBanner>
         )

diff --git a/frontend/src/scenes/web-analytics/webAnalyticsLogic.ts b/frontend/src/scenes/web-analytics/webAnalyticsLogic.ts
@@ -9,10 +9,19 @@ import {
     WebAnalyticsPropertyFilters,
     WebStatsBreakdown,
 } from '~/queries/schema'
-import { BaseMathType, ChartDisplayType, EventDefinitionType, PropertyFilterType, PropertyOperator } from '~/types'
+import {
+    BaseMathType,
+    ChartDisplayType,
+    EventDefinition,
+    EventDefinitionType,
+    PropertyFilterType,
+    PropertyOperator,
+} from '~/types'
 import { isNotNil } from 'lib/utils'
 import { loaders } from 'kea-loaders'
 import api from 'lib/api'
+import { dayjs } from 'lib/dayjs'
+import { STALE_EVENT_SECONDS } from 'lib/constants'
 
 export interface WebTileLayout {
     colSpan?: number
@@ -584,16 +593,18 @@ export const webAnalyticsLogic = kea<webAnalyticsLogicType>([
 
                 // no need to worry about pagination here, event names beginning with $ are reserved, and we're not
                 // going to add enough reserved event names that match this search term to cause problems
-                const shouldWarnAboutNoPageviews =
-                    pageviewResult.status === 'fulfilled' &&
-                    !pageviewResult.value.next &&
-                    (pageviewResult.value.count === 0 ||
-                        !pageviewResult.value.results.some((r) => r.name === '$pageview'))
-                const shouldWarnAboutNoPageleaves =
-                    pageleaveResult.status === 'fulfilled' &&
-                    !pageleaveResult.value.next &&
-                    (pageleaveResult.value.count === 0 ||
-                        !pageleaveResult.value.results.some((r) => r.name === '$pageleave'))
+                const pageviewEntry =
+                    pageviewResult.status === 'fulfilled'
+                        ? pageviewResult.value.results.find((r) => r.name === '$pageview')
+                        : undefined
+
+                const pageleaveEntry =
+                    pageleaveResult.status === 'fulfilled'
+                        ? pageleaveResult.value.results.find((r) => r.name === '$pageleave')
+                        : undefined
+
+                const shouldWarnAboutNoPageviews = !pageviewEntry || isEventDefinitionStale(pageviewEntry)
+                const shouldWarnAboutNoPageleaves = !pageleaveEntry || isEventDefinitionStale(pageleaveEntry)
 
                 return {
                     shouldWarnAboutNoPageviews,
@@ -608,3 +619,8 @@ export const webAnalyticsLogic = kea<webAnalyticsLogicType>([
         actions.loadStatusCheck()
     }),
 ])
+
+const isEventDefinitionStale = (definition: EventDefinition): boolean => {
+    const parsedLastSeen = definition.last_seen_at ? dayjs(definition.last_seen_at) : null
+    return !!parsedLastSeen && dayjs().diff(parsedLastSeen, 'seconds') > STALE_EVENT_SECONDS
+}