feat: track uncaught UI errors in plausible (#2860)

https://linear.app/unleash/issue/2-567/add-plausible-tracking-to-unknown-uncaught-frontend-errors Based on the discussion from #2851, something like this could help us track uncaught/unknown errors on the frontend. Just a quick suggestion, since there might be something better we could use for this.
Unleash · Jan 10, 2023 · 6be21fc · 6be21fc
1 parent 4d93532
commit 6be21fc
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 2 deletions.
diff --git a/frontend/src/component/layout/Error/Error.tsx b/frontend/src/component/layout/Error/Error.tsx
@@ -1,15 +1,30 @@
-import { VFC } from 'react';
+import { useEffect, VFC } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { Box } from '@mui/material';
 import { Dialogue } from 'component/common/Dialogue/Dialogue';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
+import { usePlausibleTracker } from 'hooks/usePlausibleTracker';
 
 interface IErrorProps {
     error: Error;
 }
 
 export const Error: VFC<IErrorProps> = ({ error }) => {
     const navigate = useNavigate();
+    const { trackEvent } = usePlausibleTracker();
+
+    useEffect(() => {
+        const { message, stack = 'unknown' } = error;
+
+        trackEvent('unknown_ui_error', {
+            props: {
+                location: window?.location?.href || 'unknown',
+                message,
+                stack,
+            },
+        });
+    }, []);
+
     return (
         <Box sx={{ backgroundColor: 'neutral.light', height: '100%', p: 4 }}>
             <Dialogue

diff --git a/frontend/src/hooks/usePlausibleTracker.ts b/frontend/src/hooks/usePlausibleTracker.ts
@@ -15,7 +15,8 @@ type CustomEvents =
     | 'favorite'
     | 'maintenance'
     | 'message_banner'
-    | 'hidden_environment';
+    | 'hidden_environment'
+    | 'unknown_ui_error';
 
 export const usePlausibleTracker = () => {
     const plausible = useContext(PlausibleContext);