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
https://github.com/Unleash/unleash/pull/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.

frontend/src/component/layout/Error/Error.tsx

@@ -1,8 +1,9 @@
-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;
@@ -10,6 +11,20 @@ interface IErrorProps {
 
 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

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);