From 6be21fc1bd41e68852eec1895407f71e51947e31 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nuno=20G=C3=B3is?= <github@nunogois.com>
Date: Tue, 10 Jan 2023 10:33:56 +0000
Subject: [PATCH] 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 | 17 ++++++++++++++++-
 frontend/src/hooks/usePlausibleTracker.ts     |  3 ++-
 2 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/frontend/src/component/layout/Error/Error.tsx b/frontend/src/component/layout/Error/Error.tsx
index 0ef91ab816..895e8ad59a 100644
--- a/frontend/src/component/layout/Error/Error.tsx
+++ b/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
diff --git a/frontend/src/hooks/usePlausibleTracker.ts b/frontend/src/hooks/usePlausibleTracker.ts
index be34d5e7a1..26c920cfc4 100644
--- 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);