Catch tooltip v2 errors in older browsers (#5171)

* Catch errors in tooltip functions * Update changeset
primer · Oct 31, 2024 · 8138dee · 8138dee
1 parent cbeed21
commit 8138dee
Show file tree

Hide file tree

Showing 2 changed files with 67 additions and 30 deletions.
diff --git a/.changeset/grumpy-lamps-behave.md b/.changeset/grumpy-lamps-behave.md
@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+catch TooltipV2 errors in old browsers as a temp fix for unnecessary Sentry reports
diff --git a/packages/react/src/TooltipV2/Tooltip.tsx b/packages/react/src/TooltipV2/Tooltip.tsx
@@ -198,40 +198,72 @@ export const Tooltip = React.forwardRef(
     const [isPopoverOpen, setIsPopoverOpen] = useState(false)
 
     const openTooltip = () => {
-      if (
-        tooltipElRef.current &&
-        triggerRef.current &&
-        tooltipElRef.current.hasAttribute('popover') &&
-        !tooltipElRef.current.matches(':popover-open')
-      ) {
-        const tooltip = tooltipElRef.current
-        const trigger = triggerRef.current
-        tooltip.showPopover()
-        setIsPopoverOpen(true)
-        /*
-         * TOOLTIP POSITIONING
-         */
-        const settings = {
-          side: directionToPosition[direction].side,
-          align: directionToPosition[direction].align,
+      try {
+        if (
+          tooltipElRef.current &&
+          triggerRef.current &&
+          tooltipElRef.current.hasAttribute('popover') &&
+          !tooltipElRef.current.matches(':popover-open')
+        ) {
+          const tooltip = tooltipElRef.current
+          const trigger = triggerRef.current
+          tooltip.showPopover()
+          setIsPopoverOpen(true)
+          /*
+           * TOOLTIP POSITIONING
+           */
+          const settings = {
+            side: directionToPosition[direction].side,
+            align: directionToPosition[direction].align,
+          }
+          const {top, left, anchorAlign, anchorSide} = getAnchoredPosition(tooltip, trigger, settings)
+          // This is required to make sure the popover is positioned correctly i.e. when there is not enough space on the specified direction, we set a new direction to position the ::after
+          const calculatedDirection = positionToDirection[`${anchorSide}-${anchorAlign}` as string]
+          setCalculatedDirection(calculatedDirection)
+          tooltip.style.top = `${top}px`
+          tooltip.style.left = `${left}px`
+        }
+      } catch (error) {
+        // older browsers don't support the :popover-open selector and will throw, even though we use a polyfill
+        // see https://github.com/github/issues/issues/12468
+        if (
+          error &&
+          typeof error === 'object' &&
+          'message' in error &&
+          typeof error.message === 'string' &&
+          error.message.includes('not a valid selector')
+        ) {
+          // fail silently
+        } else {
+          throw error
         }
-        const {top, left, anchorAlign, anchorSide} = getAnchoredPosition(tooltip, trigger, settings)
-        // This is required to make sure the popover is positioned correctly i.e. when there is not enough space on the specified direction, we set a new direction to position the ::after
-        const calculatedDirection = positionToDirection[`${anchorSide}-${anchorAlign}` as string]
-        setCalculatedDirection(calculatedDirection)
-        tooltip.style.top = `${top}px`
-        tooltip.style.left = `${left}px`
       }
     }
     const closeTooltip = () => {
-      if (
-        tooltipElRef.current &&
-        triggerRef.current &&
-        tooltipElRef.current.hasAttribute('popover') &&
-        tooltipElRef.current.matches(':popover-open')
-      ) {
-        tooltipElRef.current.hidePopover()
-        setIsPopoverOpen(false)
+      try {
+        if (
+          tooltipElRef.current &&
+          triggerRef.current &&
+          tooltipElRef.current.hasAttribute('popover') &&
+          tooltipElRef.current.matches(':popover-open')
+        ) {
+          tooltipElRef.current.hidePopover()
+          setIsPopoverOpen(false)
+        }
+      } catch (error) {
+        // older browsers don't support the :popover-open selector and will throw, even though we use a polyfill
+        // see https://github.com/github/issues/issues/12468
+        if (
+          error &&
+          typeof error === 'object' &&
+          'message' in error &&
+          typeof error.message === 'string' &&
+          error.message.includes('not a valid selector')
+        ) {
+          // fail silently
+        } else {
+          throw error
+        }
       }
     }