From 0c9bd8d416527dac10fa707dfe792eff22a5bddc Mon Sep 17 00:00:00 2001
From: Robbie <robbie.coomber@gmail.com>
Date: Thu, 16 Nov 2023 09:57:20 +0000
Subject: [PATCH] feat(web-analytics): Add staleness check and update warning
 (#18660)

* Add staleness check and update warning

* Tweak the posthog-js doc link text
---
 .../web-analytics/WebAnalyticsHealthCheck.tsx | 18 ++++++---
 .../scenes/web-analytics/webAnalyticsLogic.ts | 38 +++++++++++++------
 2 files changed, 39 insertions(+), 17 deletions(-)

diff --git a/frontend/src/scenes/web-analytics/WebAnalyticsHealthCheck.tsx b/frontend/src/scenes/web-analytics/WebAnalyticsHealthCheck.tsx
index e87a1fc8b3c9d..34cad0e5dc31a 100644
--- 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
index d3aaac330e695..96b8aa4b81b7e 100644
--- 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
+}