Renewed honeybadger API key + add hook for testing

packages/web/components/Landing/OnboardingGame/index.tsx

@@ -17,7 +17,7 @@ import { useOnScreen } from 'lib/hooks/useOnScreen';
 import { get } from 'lib/store';
 import { ReactElement, useCallback, useEffect, useRef, useState } from 'react';
 import { MdDownloading, MdRestartAlt, MdWarning } from 'react-icons/md';
-import { errorHandler } from 'utils/errorHandler';
+import { errorHandler, useDebugErrorReports } from 'utils/errorHandler';
 import {
   safelyParseContent,
   safelyParseTextForTyping,
@@ -83,7 +83,7 @@ export const OnboardingGame: React.FC = (): JSX.Element => {
   // const pulseAnimation = `${blink} 2s infinite`;
   const visits = visitedElements();
   const [chievFound, setChievFound] = useState(false);
-
+  const { debugErrorReports } = useDebugErrorReports();
   /**
    * Sanitizes & splits the element content into dialogue and
    * choices, adds them to state & returns the values if you want to use it that way */
@@ -128,9 +128,9 @@ export const OnboardingGame: React.FC = (): JSX.Element => {
           currentDialogue: [],
           currentChoices: [],
         };
-      } catch (error) {
-        console.error('makeCurrentSectionDialogue error', error);
-        errorHandler(error as Error);
+      } catch (err) {
+        console.error('makeCurrentSectionDialogue error', err);
+        errorHandler(err as Error);
         return {
           currentDialogue: [],
           currentChoices: [],
@@ -249,8 +249,8 @@ export const OnboardingGame: React.FC = (): JSX.Element => {
           return elementJumpers;
         }
         throw new Error('No jumpers found');
-      } catch (error) {
-        errorHandler(error as Error);
+      } catch (err) {
+        errorHandler(err as Error);
         return undefined;
       }
     };
@@ -408,6 +408,10 @@ export const OnboardingGame: React.FC = (): JSX.Element => {
     }
   }, [currentElement, triggerChiev, visits]);
 
+  useEffect(() => {
+    debugErrorReports();
+  }, [debugErrorReports]);
+
   return (
     <Box
       position="relative"

packages/web/config.ts

@@ -21,7 +21,7 @@ export const CONFIG = {
   honeybadgerReportData:
     process.env.NEXT_PUBLIC_HONEYBADGER_REPORT_DATA === 'true',
   honeybadgerDebug: process.env.NEXT_PUBLIC_HONEYBADGER_DEBUG === 'true',
-  userbackToken: process.env.NEXT_PUBLIC_USERBACK_TOKEN,
+  userbackToken: process.env.NEXT_PUBLIC_USERBACK_TOKEN || '',
   discordApiBaseUrl:
     process.env.DISCORD_API_BASE_URL || 'https://discord.com/api/v8',
   ceramicURL:

packages/web/utils/errorHandler.ts

@@ -1,6 +1,56 @@
 import Honeybadger from '@honeybadger-io/js';
+import { useToast } from '@metafam/ds';
+import { useCallback } from 'react';
 import { CombinedError } from 'urql';
 
 export const errorHandler = (error: Error | CombinedError): void => {
   Honeybadger.notify(error);
 };
+
+type DebugErrorReports = {
+  debugErrorReports: () => void;
+};
+
+/**
+ * @description A hook to test our error reporting service. Currently [Honeybadger](https://app.honeybadger.io/projects/104891/faults?q=-is%3Aresolved+-is%3Aignored&sort=last_seen_desc)
+ * @returns `debugErrorReport` - Function to trigger an error to be reported
+ * based on `urlParams`: `debug=unhandledError` or `debug=handledError`.
+ */
+export const useDebugErrorReports = (): DebugErrorReports => {
+  const toast = useToast();
+
+  const debugErrorReports = useCallback(() => {
+    if (typeof window !== 'undefined') {
+      const query = window.location.search;
+      const urlParams = new URLSearchParams(query);
+      const throwUnhandledError = urlParams.get('debug') === 'unhandledError';
+      const throwHandledError = urlParams.get('debug') === 'handledError';
+      const errorMessage = urlParams.get('message');
+
+      if (throwUnhandledError) {
+        console.error(errorMessage ?? 'Debug Unhandled error');
+        throw new Error(errorMessage ?? 'Debug Unhandled error');
+      }
+
+      if (throwHandledError) {
+        try {
+          console.error(errorMessage ?? 'Debug Handled error');
+          throw new Error(errorMessage ?? 'Debug Handled Error');
+        } catch (err) {
+          const error = err as Error;
+          toast({
+            title: 'Error debug',
+            description: `Throwing handled error: ${error.message}.`,
+            status: 'error',
+            isClosable: true,
+          });
+          errorHandler(error);
+        }
+      }
+    }
+  }, [toast]);
+
+  return {
+    debugErrorReports,
+  };
+};