catch exceptions globally and send to analytics

medyo · medyo · commit 885219cd54b3 · 2022-01-21T00:10:37.000+01:00
diff --git a/package.json b/package.json
@@ -17,6 +17,7 @@
     "react-contexify": "^5.0.0",
     "react-device-detect": "^1.17.0",
     "react-dom": "^17.0.1",
+    "react-error-boundary": "^3.1.4",
     "react-icons": "^4.1.0",
     "react-markdown": "^7.0.1",
     "react-modal": "^3.12.1",
diff --git a/src/App.css b/src/App.css
@@ -19,6 +19,13 @@ body {
   height: 100vh;
   display: flex;
 }
+.appError {
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
 
 a {
   color: var(--primary-text-color);
diff --git a/src/App.js b/src/App.js
@@ -1,10 +1,7 @@
 import React, { useState, useReducer, useEffect, useContext, useRef } from 'react'
 import './App.css'
-import { PreferencesProvider } from './preferences/PreferencesContext'
-import AppReducer from './preferences/AppReducer'
 import ConfigurationContext from './configuration/ConfigurationContext'
 import { APP, LS_PREFERENCES_KEY, SUPPORTED_CARDS } from './Constants'
-import { getOSMode } from './services/os'
 import AppStorage from './services/localStorage'
 import TermsPage from './pages/TermsPage'
 import PrivacyPage from './pages/PrivacyPage'
@@ -18,76 +15,37 @@ import ScrollCardsNavigator from './components/ScrollCardsNavigator'
 import BottomNavigation from './components/BottomNavigation'
 import AppContentLayout from './components/AppContentLayout'
 import 'react-contexify/dist/ReactContexify.css'
+import PreferencesContext from './preferences/PreferencesContext'
 
 function App() {
-  const {
-    supportedTags,
-    marketingBannerConfig = {},
-    feedbackWidget,
-  } = useContext(ConfigurationContext)
+  const { marketingBannerConfig = {}, feedbackWidget } = useContext(ConfigurationContext)
   const [showSideBar, setShowSideBar] = useState(false)
   const [showSettings, setShowSettings] = useState(false)
   const [currentPage, setCurrentPage] = useState('home')
-  const [state, dispatcher] = useReducer(
-    AppReducer,
-    {
-      userSelectedTags: supportedTags.filter((t) => t.value === 'javascript'),
-      userBookmarks: [],
-      theme: getOSMode(),
-      openLinksNewTab: true,
-      listingMode: 'normal',
-      searchEngine: 'Google',
-      cards: [
-        { id: 0, name: 'github' },
-        { id: 1, name: 'hackernews' },
-        { id: 2, name: 'devto' },
-        { id: 3, name: 'producthunt' },
-      ],
-    },
-    (initialState) => {
-      try {
-        let preferences = AppStorage.getItem(LS_PREFERENCES_KEY)
-        if (preferences) {
-          preferences = JSON.parse(preferences)
-          preferences = {
-            ...preferences,
-            userSelectedTags: supportedTags.filter((tag) =>
-              preferences.userSelectedTags.includes(tag.value)
-            ),
-          }
-          return {
-            ...initialState,
-            ...preferences,
-          }
-        }
-      } catch (e) {}
-      return initialState
-    }
-  )
+  const { state, dispatcher } = useContext(PreferencesContext)
+
   useEffect(() => {
     trackPageView(currentPage)
   }, [currentPage])
 
   const renderHomePage = () => {
     return (
-      <PreferencesProvider value={{ ...state, dispatcher: dispatcher }}>
-        <div className="App">
-          <Header
-            setShowSideBar={setShowSideBar}
-            state={state}
-            dispatcher={dispatcher}
-            showSideBar={showSideBar}
-            showSettings={showSettings}
-            setShowSettings={setShowSettings}
-          />
-          <ScrollCardsNavigator />
-          <MarketingBanner {...marketingBannerConfig} />
-          <AppContentLayout setShowSettings={setShowSettings} />
-          <BookmarksSidebar showSidebar={showSideBar} onClose={() => setShowSideBar(false)} />
+      <div className="App">
+        <Header
+          setShowSideBar={setShowSideBar}
+          state={state}
+          dispatcher={dispatcher}
+          showSideBar={showSideBar}
+          showSettings={showSettings}
+          setShowSettings={setShowSettings}
+        />
+        <ScrollCardsNavigator />
+        <MarketingBanner {...marketingBannerConfig} />
+        <AppContentLayout setShowSettings={setShowSettings} />
+        <BookmarksSidebar showSidebar={showSideBar} onClose={() => setShowSideBar(false)} />
 
-          <Footer setCurrentPage={setCurrentPage} feedbackWidget={feedbackWidget} />
-        </div>
-      </PreferencesProvider>
+        <Footer setCurrentPage={setCurrentPage} feedbackWidget={feedbackWidget} />
+      </div>
     )
   }
 
diff --git a/src/configuration/AppWrapper.js b/src/configuration/AppWrapper.js
@@ -0,0 +1,81 @@
+import React, { useReducer, useContext } from 'react'
+import { getOSMode } from '../services/os'
+import AppReducer from '../preferences/AppReducer'
+import { PreferencesProvider } from '../preferences/PreferencesContext'
+import ConfigurationContext from './ConfigurationContext'
+import { ErrorBoundary } from 'react-error-boundary'
+import { trackException } from '../utils/Analytics'
+import { AiFillBug } from 'react-icons/ai'
+import { WiRefresh } from 'react-icons/wi'
+import { APP } from '../Constants'
+
+function ErrorFallback({ error, resetErrorBoundary }) {
+  return (
+    <div className="Page appError">
+      <AiFillBug size={64} />
+      <p>Sorry there was a problem loading this page.</p>
+      <p>Please try again or contact the developer at {APP.contactEmail}</p>
+      <button onClick={resetErrorBoundary}>
+        <WiRefresh size={32} className={'buttonIcon'} /> Try again
+      </button>
+    </div>
+  )
+}
+
+export default function AppWrapper({ children }) {
+  const configuration = useContext(ConfigurationContext)
+
+  const [state, dispatcher] = useReducer(
+    AppReducer,
+    {
+      userSelectedTags: configuration.supportedTags.filter((t) => t.value === 'javascript'),
+      userBookmarks: [],
+      theme: getOSMode(),
+      openLinksNewTab: true,
+      listingMode: 'normal',
+      searchEngine: 'Google',
+      cards: [
+        { id: 0, name: 'github' },
+        { id: 1, name: 'hackernews' },
+        { id: 2, name: 'devto' },
+        { id: 3, name: 'producthunt' },
+      ],
+    },
+    (initialState) => {
+      try {
+        let preferences = AppStorage.getItem(LS_PREFERENCES_KEY)
+        if (preferences) {
+          preferences = JSON.parse(preferences)
+          preferences = {
+            ...preferences,
+            userSelectedTags: supportedTags.filter((tag) =>
+              preferences.userSelectedTags.includes(tag.value)
+            ),
+          }
+          return {
+            ...initialState,
+            ...preferences,
+          }
+        }
+      } catch (e) {}
+      return initialState
+    }
+  )
+
+  const errorHandler = (error, info) => {
+    trackException(error, true)
+  }
+
+  return (
+    <ErrorBoundary
+      FallbackComponent={ErrorFallback}
+      onError={errorHandler}
+      onReset={() => {
+        // reset the state of your app so the error doesn't happen again
+      }}>
+      <PreferencesProvider value={{ ...state, state, dispatcher: dispatcher }}>
+        {children}
+      </PreferencesProvider>
+    </ErrorBoundary>
+  )
+}
diff --git a/src/configuration/ConfigurationWrapper.js b/src/configuration/ConfigurationWrapper.js
@@ -2,21 +2,23 @@ import useRemoteConfiguration from './useRemoteConfiguration';
 import { ConfigurationProvider } from './ConfigurationContext';
 import { LOCAL_CONFIGURATION } from '../Constants';
 import BeatLoader from "react-spinners/BeatLoader";
+import AppWrapper from './AppWrapper'
 
 export default function ConfigurationWrapper({ children }) {
-  const [configuration, loadingConfiguration, errorConfiguration] = useRemoteConfiguration();
+  const [configuration, loadingConfiguration, errorConfiguration] = useRemoteConfiguration()
   if (loadingConfiguration) {
-    return <div className="appLoading">
-      <BeatLoader color={"#A9B2BD"} loading={true} size={15} />
-    </div>
+    return (
+      <div className="appLoading">
+        <BeatLoader color={'#A9B2BD'} loading={true} size={15} />
+      </div>
+    )
   }
 
-  const getConfiguration = () => errorConfiguration ? LOCAL_CONFIGURATION : configuration
+  const getConfiguration = () => (errorConfiguration ? LOCAL_CONFIGURATION : configuration)
 
   return (
     <ConfigurationProvider value={getConfiguration()}>
-      {children}
+      <AppWrapper>{children}</AppWrapper>
     </ConfigurationProvider>
   )
-
 }
diff --git a/src/pages/Page.css b/src/pages/Page.css
@@ -18,5 +18,5 @@
 
 .Page .buttonIcon {
   position: relative;
-  top: 2px;
+  vertical-align: middle;
 }
diff --git a/src/utils/Analytics.js b/src/utils/Analytics.js
@@ -69,6 +69,30 @@ const trackReposDateRangeChange = (dateRange) => {
   trackEvent('Repos', 'ChangeDateRange', dateRange)
 }
 
+const trackException = (exceptionMessage, fatal) => {
+  if (!process.env.REACT_APP_ANALYTICS_ID) {
+    console.log('Missing analytics ID')
+    return
+  }
+
+  let userId = getRandomUserId()
+
+  const payload = new URLSearchParams([
+    ['v', '1'],
+    ['type', 'exception'],
+    ['exd', exceptionMessage],
+    ['exf', fatal === true ? '1' : '0'],
+    ['tid', process.env.REACT_APP_ANALYTICS_ID],
+    ['cid', userId],
+  ])
+
+  if (process.env.NODE_ENV !== 'production') {
+    console.log('Analytics debug payload', payload.toString())
+    return
+  }
+
+  navigator.sendBeacon('https://www.google-analytics.com/collect', payload.toString())
+}
 const getResolution = () => {
   const realWidth = window.screen.width
   const realHeight = window.screen.height
@@ -81,12 +105,7 @@ const trackEvent = (category, action, label) => {
     return
   }
 
-  let userId = AppStorage.getItem(LS_ANALYTICS_ID_KEY)
-  if (!userId) {
-    let newUserId = `${new Date().getTime()}${Math.random()}` // Random User Id
-    AppStorage.setItem(LS_ANALYTICS_ID_KEY, newUserId)
-    userId = newUserId
-  }
+  let userId = getRandomUserId()
 
   const payload = new URLSearchParams([
     ['v', '1'],
@@ -118,6 +137,15 @@ const trackEvent = (category, action, label) => {
   navigator.sendBeacon('https://www.google-analytics.com/collect', payload.toString())
 }
 
+const getRandomUserId = () => {
+  let userId = AppStorage.getItem(LS_ANALYTICS_ID_KEY)
+  if (!userId) {
+    let newUserId = `${new Date().getTime()}${Math.random()}` // Random User Id
+    AppStorage.setItem(LS_ANALYTICS_ID_KEY, newUserId)
+    userId = newUserId
+  }
+  return userId
+}
 Object.assign(String.prototype, {
   capitalize() {
     return this.charAt(0).toUpperCase() + this.slice(1)
@@ -141,4 +169,5 @@ export {
   trackPageScroll,
   trackSearch,
   trackSearchEngineChange,
+  trackException,
 }
diff --git a/yarn.lock b/yarn.lock
@@ -9734,6 +9734,13 @@ react-dom@^17.0.1:
     object-assign "^4.1.1"
     scheduler "^0.20.1"
 
+react-error-boundary@^3.1.4:
+  version "3.1.4"
+  resolved "https://registry.yarnpkg.com/react-error-boundary/-/react-error-boundary-3.1.4.tgz#255db92b23197108757a888b01e5b729919abde0"
+  integrity sha512-uM9uPzZJTF6wRQORmSrvOIgt4lJ9MC1sNgEOj2XGsDTRE4kmpWxg7ENK9EWNKJRMAOY9z0MuF4yIfl6gp4sotA==
+  dependencies:
+    "@babel/runtime" "^7.12.5"
+
 react-error-overlay@^6.0.9:
   version "6.0.9"
   resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.9.tgz#3c743010c9359608c375ecd6bc76f35d93995b0a"

Original file line number	Diff line number	Diff line change
`@@ -18,5 +18,5 @@`
`18`	`18`
`19`	`19`	`.Page .buttonIcon {`
`20`	`20`	`position: relative;`
`21`		`- top: 2px;`
	`21`	`+ vertical-align: middle;`
`22`	`22`	`}`