Merge pull request #16138 from ethereum/sentry-breadcrumbs

Sentry breadcrumbs improvements

Author: corwintines

instrumentation-client.ts

@@ -2,13 +2,49 @@ import * as Sentry from "@sentry/nextjs"
 
 const environment = process.env.NEXT_PUBLIC_CONTEXT || "development"
 
-if (environment === "production") {
-  Sentry.init({
-    dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
-    tracesSampleRate: 0.1,
-    debug: false,
-    environment,
-  })
+/**
+ * Finds the closest element (including the element itself) that has an id attribute
+ * @param element - The starting element to search from
+ * @param maxDepth - Maximum number of parent levels to search (default: 3)
+ * @returns The first found attribute value in priority order, null otherwise
+ */
+function findClosestElementId(
+  element: Element | null | undefined,
+  maxDepth: number = 3
+): string | null {
+  if (!element || maxDepth < 0) return null
+
+  const sentryId = element.getAttribute("data-testid")
+  if (sentryId) return sentryId
+
+  const ariaLabel = element.getAttribute("aria-label")
+  if (ariaLabel) return ariaLabel
+
+  const id = element.getAttribute("id")
+  if (id) return id
+
+  // Recursively check parent elements up to maxDepth
+  return findClosestElementId(element.parentElement, maxDepth - 1)
 }
 
+Sentry.init({
+  dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
+  tracesSampleRate: 0.1,
+  debug: environment === "development",
+  environment,
+  enabled: environment === "production",
+  beforeBreadcrumb(breadcrumb, hint) {
+    if (breadcrumb.category === "ui.click") {
+      const element = hint?.event?.target
+
+      const id = findClosestElementId(element)
+      if (id) {
+        breadcrumb.message = id + " (" + breadcrumb.message + ")"
+      }
+    }
+
+    return breadcrumb
+  },
+})
+
 export const onRouterTransitionStart = Sentry.captureRouterTransitionStart

next.config.js

@@ -137,11 +137,19 @@ module.exports = (phase, { defaultConfig }) => {
     },
   }
 
+  nextConfig = {
+    ...nextConfig,
+    experimental: {
+      ...experimental,
+      instrumentationHook: true,
+    },
+  }
+
   if (phase !== PHASE_DEVELOPMENT_SERVER) {
     nextConfig = {
       ...nextConfig,
       experimental: {
-        ...experimental,
+        ...nextConfig.experimental,
         outputFileTracingExcludes: {
           "*": [
             /**

sentry.edge.config.ts

@@ -2,11 +2,10 @@ import * as Sentry from "@sentry/nextjs"
 
 const environment = process.env.NEXT_PUBLIC_CONTEXT || "development"
 
-if (environment === "production") {
-  Sentry.init({
-    dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
-    tracesSampleRate: 0.1,
-    debug: false,
-    environment,
-  })
-}
+Sentry.init({
+  dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
+  tracesSampleRate: 0.1,
+  debug: environment === "development",
+  environment,
+  enabled: environment === "production",
+})

sentry.server.config.ts

@@ -2,11 +2,10 @@ import * as Sentry from "@sentry/nextjs"
 
 const environment = process.env.NEXT_PUBLIC_CONTEXT || "development"
 
-if (environment === "production") {
-  Sentry.init({
-    dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
-    tracesSampleRate: 0.1,
-    debug: false,
-    environment,
-  })
-}
+Sentry.init({
+  dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
+  tracesSampleRate: 0.1,
+  debug: environment === "development",
+  environment,
+  enabled: environment === "production",
+})

src/components/Footer.tsx

@@ -323,6 +323,7 @@ const Footer = ({ lastDeployLocaleTimestamp }: FooterProps) => {
           variant="outline"
           isSecondary
           onClick={() => scrollIntoView("body")}
+          data-testid="footer-go-to-top"
         >
           <ChevronUp /> <Translation id="go-to-top" />
         </Button>

src/components/LanguagePicker/MobileCloseBar.tsx

@@ -13,7 +13,12 @@ export const MobileCloseBar = ({ handleClick }: MobileCloseBarProps) => {
 
   return (
     <div className="sticky top-0 flex justify-end bg-background md:hidden">
-      <Button className="self-end p-4" variant="ghost" onClick={handleClick}>
+      <Button
+        className="self-end p-4"
+        variant="ghost"
+        onClick={handleClick}
+        data-testid="mobile-language-picker-close"
+      >
         {t("close")}
       </Button>
     </div>

src/components/LanguagePicker/index.tsx

@@ -174,6 +174,7 @@ const LanguagePickerMenu = ({ languages, onClose, onSelect }) => {
 
       <CommandInput
         placeholder={t("page-languages-filter-placeholder")}
+        data-testid="language-filter-input"
         className="h-9"
         kbdShortcut="\"
       />
@@ -188,6 +189,7 @@ const LanguagePickerMenu = ({ languages, onClose, onSelect }) => {
               key={"item-" + displayInfo.localeOption}
               displayInfo={displayInfo}
               onSelect={onSelect}
+              data-testid={`language-option-${displayInfo.localeOption}`}
             />
           ))}
         </CommandGroup>

src/components/Nav/Mobile/HamburgerButton.tsx

@@ -31,6 +31,7 @@ const HamburgerButton = forwardRef<HTMLButtonElement, HamburgerProps>(
       <Button
         ref={ref}
         id={HAMBURGER_BUTTON_ID}
+        data-testid="mobile-menu-hamburger"
         aria-label={t("aria-toggle-menu-button")}
         className={cn("px-2 py-0 text-body", className)}
         variant="ghost"

src/components/Nav/Mobile/LvlAccordion.tsx

@@ -4,6 +4,7 @@ import * as AccordionPrimitive from "@radix-ui/react-accordion"
 
 import { cn } from "@/lib/utils/cn"
 import { trackCustomEvent } from "@/lib/utils/matomo"
+import { slugify } from "@/lib/utils/url"
 import { cleanPath } from "@/lib/utils/url"
 
 import { Button } from "../../ui/buttons/Button"
@@ -131,6 +132,7 @@ const LvlAccordion = ({
             <AccordionTrigger
               heading={`h${lvl + 1}` as "h2" | "h3" | "h4" | "h5"}
               className={cn("text-body", nestedAccordionSpacingMap[lvl])}
+              data-testid={`accordion-toggle-${slugify(label)}`}
               onClick={() => {
                 trackCustomEvent({
                   eventCategory: "Mobile navigation menu",

src/components/Nav/Mobile/MenuBody.tsx

@@ -3,6 +3,7 @@ import { useLocale } from "next-intl"
 
 import { cn } from "@/lib/utils/cn"
 import { trackCustomEvent } from "@/lib/utils/matomo"
+import { slugify } from "@/lib/utils/url"
 
 import { SECTION_LABELS } from "@/lib/constants"
 
@@ -46,6 +47,7 @@ const MenuBody = ({ linkSections, onToggle }: MenuBodyProps) => {
             >
               <AccordionTrigger
                 className="text-body"
+                data-testid={`menu-section-toggle-${slugify(label)}`}
                 onClick={() => {
                   trackCustomEvent({
                     eventCategory: "Mobile navigation menu",