Fix site crashing with certain anchor links (#3107)

* Add safeQuerySelector function * Fix site crashing with certain anchor links
iterative · Dec 21, 2021 · faeb64e · faeb64e
1 parent 5f52875
commit faeb64e
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 2 deletions.
diff --git a/src/components/Link/index.tsx b/src/components/Link/index.tsx
@@ -4,6 +4,7 @@ import { useLocation } from '@reach/router'
 import GatsbyLink from 'gatsby-link'
 import { getRedirect } from '../../utils/shared/redirects'
 import { scrollIntoLayout, getScrollNode } from '../../utils/front/scroll'
+import safeQuerySelector from '../../utils/front/safeQuerySelector'
 
 export type ILinkProps = {
   children: React.ReactNode
@@ -78,7 +79,7 @@ const ResultLinkComponent: React.FC<ILinkProps> = ({
 
 const scrollToHash = (hash: string, scrollOptions = {}): void => {
   if (hash) {
-    scrollIntoLayout(document.querySelector(hash), {
+    scrollIntoLayout(safeQuerySelector(hash), {
       waitImages: true,
       ...scrollOptions
     })

diff --git a/src/components/Page/utils.ts b/src/components/Page/utils.ts
@@ -3,6 +3,7 @@ import { useLocation } from '@reach/router'
 
 import { handleFrontRedirect } from '../../utils/shared/redirects'
 import { scrollIntoLayout, getScrollNode } from '../../utils/front/scroll'
+import safeQuerySelector from '../../utils/front/safeQuerySelector'
 
 import * as styles from './styles.module.css'
 
@@ -11,7 +12,7 @@ export const useAnchorNavigation = (): void => {
 
   useEffect(() => {
     if (location.hash) {
-      const node = document.querySelector(location.hash)
+      const node = safeQuerySelector(location.hash)
 
       if (node) {
         scrollIntoLayout(node, { waitImages: true })

diff --git a/src/utils/front/safeQuerySelector.ts b/src/utils/front/safeQuerySelector.ts
@@ -0,0 +1,10 @@
+const safeQuerySelector = (query: string): null | Element => {
+  try {
+    const el = document.querySelector(query)
+    return el
+  } catch (err) {
+    return null
+  }
+}
+
+export default safeQuerySelector