Measure how often arriving with a broken hash (#49430)

src/frame/components/article/ArticlePage.tsx

@@ -12,6 +12,7 @@ import { Lead } from 'src/frame/components/ui/Lead'
 import { PermissionsStatement } from 'src/frame/components/ui/PermissionsStatement'
 import { ArticleGridLayout } from './ArticleGridLayout'
 import { ArticleInlineLayout } from './ArticleInlineLayout'
+import { MeasureBrokenHashes } from './MeasureBrokenHashes'
 import { PlatformPicker } from 'src/tools/components/PlatformPicker'
 import { ToolPicker } from 'src/tools/components/ToolPicker'
 import { MiniTocs } from 'src/frame/components/ui/MiniTocs'
@@ -102,6 +103,7 @@ export const ArticlePage = () => {
     <DefaultLayout>
       <LinkPreviewPopover />
       {isDev && <ClientSideRefresh />}
+      <MeasureBrokenHashes />
       {router.pathname.includes('/rest/') && <RestRedirect />}
       {currentLayout === 'inline' ? (
         <ArticleInlineLayout

src/frame/components/article/MeasureBrokenHashes.ts

@@ -0,0 +1,42 @@
+/**
+ * This component never renders anything but on initial mount, it checks
+ * if the hash is broken and sends this as a measurement analytics point.
+ *
+ * This experiment is meant to be temporary. At least until we know and
+ * have documented how often this happens.
+ *
+ */
+
+import { useEffect } from 'react'
+import { useRouter } from 'next/router'
+
+import { sendEvent, EventType } from 'src/events/components/events'
+
+const EXPERIMENT_NAME = 'broken_hash'
+
+function sendHash(hash: string) {
+  const broken = !document.querySelector(`#${hash},a[name="${hash}"]`)
+  sendEvent({
+    type: EventType.experiment,
+    experiment_name: EXPERIMENT_NAME,
+    experiment_variation: hash,
+    experiment_success: broken,
+  })
+}
+
+export function MeasureBrokenHashes() {
+  const { asPath } = useRouter()
+
+  useEffect(() => {
+    try {
+      if (asPath.includes('#')) {
+        const hash = asPath.split('#')[1]
+        if (hash) sendHash(hash)
+      }
+    } catch (error) {
+      console.error('Error measuring broken hash', error)
+    }
+  }, [])
+
+  return null
+}