fix: add error handling around twttr widgets

geyserfund · Aug 26, 2023 · 0c4ef54 · 0c4ef54
1 parent 74a7cbf
commit 0c4ef54
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 19 deletions.
diff --git a/src/forms/markdown/commands/TweetCommand.tsx b/src/forms/markdown/commands/TweetCommand.tsx
@@ -2,7 +2,7 @@ import { Box } from '@chakra-ui/react'
 import { useCommands } from '@remirror/react'
 import { BsTwitter } from 'react-icons/bs'
 
-import { useDarkMode } from '../../../utils'
+import { useDarkMode, useNotification } from '../../../utils'
 import {
   InsertTwitterModal,
   MarkdownTwitter,
@@ -13,9 +13,9 @@ import { ToolbarCommandButton } from './ToolbarCommandButton'
 export const TweetCommand = ({ isDisabled }: { isDisabled?: boolean }) => {
   const commands = useCommands()
   const isDarkMode = useDarkMode()
+  const { toast } = useNotification()
 
   const modal = useInsertTwitterModal(async ({ url }: MarkdownTwitter) => {
-    if (!commands.addYouTubeVideo) return
     commands.insertHardBreak()
 
     const UrlSplit = url.split('/').filter((val) => val && val !== '/')
@@ -24,21 +24,29 @@ export const TweetCommand = ({ isDisabled }: { isDisabled?: boolean }) => {
 
     if (!tweetId) return
 
-    const value = await twttr.widgets.createTweet(
-      tweetId,
-      document.getElementById('tweet-container'),
-      {
-        width: '350px',
-        theme: isDarkMode ? 'dark' : 'light',
-      },
-    )
+    try {
+      const value = await twttr.widgets.createTweet(
+        tweetId,
+        document.getElementById('tweet-container'),
+        {
+          width: '350px',
+          theme: isDarkMode ? 'dark' : 'light',
+        },
+      )
 
-    commands.insertHtml(value.innerHTML, {})
-    commands.insertHardBreak()
+      commands.insertHtml(value.innerHTML, {})
+      commands.insertHardBreak()
 
-    const element = document.getElementById('tweet-container')
-    if (element) {
-      element.innerHTML = ''
+      const element = document.getElementById('tweet-container')
+      if (element) {
+        element.innerHTML = ''
+      }
+    } catch {
+      toast({
+        status: 'error',
+        title: 'Failed to insert tweet',
+        description: 'Please try again',
+      })
     }
 
     modal.onClose()

diff --git a/src/forms/markdown/helpers/StyleProvider.tsx b/src/forms/markdown/helpers/StyleProvider.tsx
@@ -1,6 +1,7 @@
 import { Box, BoxProps, styled } from '@chakra-ui/react'
 import { ThemeProvider } from '@remirror/react-components'
 import { AllStyledComponent } from '@remirror/styles/emotion'
+import { captureException } from '@sentry/react'
 import { useEffect, useMemo } from 'react'
 import { RemirrorThemeType } from 'remirror'
 
@@ -64,9 +65,13 @@ export const StyleProvider = ({
   )
 
   useEffect(() => {
-    twttr.widgets.load(
-      document.getElementById(ID.project.story.markdown.container),
-    )
+    twttr.widgets
+      .load(document.getElementById(ID.project.story.markdown.container))
+      .catch((e: any) =>
+        captureException(e, {
+          tags: { area: 'twitter-widgets' },
+        }),
+      )
   }, [])
 
   return (

diff --git a/src/translations/English.json b/src/translations/English.json
@@ -666,5 +666,6 @@
   "Insert":"Insert",
   "Must be a valid twitter URL":"Must be a valid twitter URL",
   "URL is required":"URL is required",
-  "Insert tweet":"Insert tweet"
+  "Insert tweet":"Insert tweet",
+  "Failed to insert tweet":"Failed to insert tweet"
 }