From 9505f33d284562927be0635f41967ce250253388 Mon Sep 17 00:00:00 2001
From: Francesco Novy <francesco.novy@sentry.io>
Date: Fri, 23 May 2025 11:50:09 +0200
Subject: [PATCH 1/2] feat: Capture plausible event for expandables

---
 src/components/expandable/index.tsx | 9 +++++++++
 src/hooks/usePlausibleEvent.tsx     | 8 ++++++++
 2 files changed, 17 insertions(+)

diff --git a/src/components/expandable/index.tsx b/src/components/expandable/index.tsx
index 3738212f0ba6c3..00c37f992457c9 100644
--- a/src/components/expandable/index.tsx
+++ b/src/components/expandable/index.tsx
@@ -4,6 +4,8 @@ import {ReactNode, useCallback, useEffect, useRef, useState} from 'react';
 import {ChevronDownIcon, ChevronRightIcon} from '@radix-ui/react-icons';
 import * as Sentry from '@sentry/nextjs';
 
+import {usePlausibleEvent} from 'sentry-docs/hooks/usePlausibleEvent';
+
 // explicitly not usig CSS modules here
 // because there's some prerendered content that depends on these exact class names
 import '../callout/styles.scss';
@@ -39,6 +41,7 @@ export function Expandable({
   const [isExpanded, setIsExpanded] = useState(false);
   const [copied, setCopied] = useState(false);
   const contentRef = useRef<HTMLDivElement>(null);
+  const {emit} = usePlausibleEvent();
 
   // Ensure we scroll to the element if the URL hash matches
   useEffect(() => {
@@ -75,6 +78,8 @@ export function Expandable({
         return;
       }
 
+      emit('Copy Expandable Content', {props: {page: window.location.pathname, title}});
+
       // Attempt to get text from markdown code blocks if they exist
       const codeBlocks = contentRef.current.querySelectorAll('code');
       let contentToCopy = '';
@@ -117,6 +122,10 @@ export function Expandable({
     const newVal = event.currentTarget.open;
     setIsExpanded(newVal);
 
+    if (newVal) {
+      emit('Open Expandable', {props: {page: window.location.pathname, title}});
+    }
+
     if (id) {
       if (newVal) {
         window.history.pushState({}, '', `#${id}`);
diff --git a/src/hooks/usePlausibleEvent.tsx b/src/hooks/usePlausibleEvent.tsx
index 8124e464908541..1976dbc6f2d1fb 100644
--- a/src/hooks/usePlausibleEvent.tsx
+++ b/src/hooks/usePlausibleEvent.tsx
@@ -4,10 +4,18 @@ import {ReadProgressMilestone} from 'sentry-docs/types/plausible';
 
 // Adding custom events here will make them available via the hook
 type PlausibleEventProps = {
+  ['Copy Expandable Content']: {
+    page: string;
+    title: string;
+  };
   ['Doc Feedback']: {
     helpful: boolean;
     page: string;
   };
+  ['Open Expandable']: {
+    page: string;
+    title: string;
+  };
   ['Read Progress']: {
     page: string;
     readProgress: ReadProgressMilestone;

From 8f648fab5c04d803ea9944ce03d113d96ad48474 Mon Sep 17 00:00:00 2001
From: Francesco Novy <francesco.novy@sentry.io>
Date: Fri, 23 May 2025 11:53:00 +0200
Subject: [PATCH 2/2] fix useCallback

---
 src/components/expandable/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/expandable/index.tsx b/src/components/expandable/index.tsx
index 00c37f992457c9..00bf1ca1b61d8e 100644
--- a/src/components/expandable/index.tsx
+++ b/src/components/expandable/index.tsx
@@ -115,7 +115,7 @@ export function Expandable({
         setCopied(false);
       }
     },
-    []
+    [emit, title]
   );
 
   function toggleIsExpanded(event: React.MouseEvent<HTMLDetailsElement>) {