Adding Sentry is basically done now. We have a nice lil component to help us get started to!

src/components/default/sentry/TestSentry.tsx

@@ -0,0 +1,125 @@
+'use client';
+
+import * as Sentry from '@sentry/nextjs';
+import { useState, useEffect } from 'react';
+import {
+  Button,
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+  Separator,
+} from '@/components/ui';
+import Link from 'next/link';
+import { CheckCircle, MessageCircleWarning } from 'lucide-react';
+
+class SentryExampleFrontendError extends Error {
+  constructor(message: string | undefined) {
+    super(message);
+    this.name = 'SentryExampleFrontendError';
+  }
+}
+
+export const TestSentryCard = () => {
+  const [hasSentError, setHasSentError] = useState(false);
+  const [isConnected, setIsConnected] = useState(true);
+
+  useEffect(() => {
+    const checkConnectivity = async () => {
+      const result = await Sentry.diagnoseSdkConnectivity();
+      setIsConnected(result !== 'sentry-unreachable');
+    };
+    checkConnectivity().catch((error) => {
+      console.error('Error trying to connect to Sentry: ', error);
+    });
+  }, []);
+
+  const createError = async () => {
+    await Sentry.startSpan(
+      {
+        name: 'Example Frontend Span',
+        op: 'test',
+      },
+      async () => {
+        const res = await fetch('/api/sentry/example');
+        if (!res.ok) {
+          setHasSentError(true);
+          throw new SentryExampleFrontendError(
+            'This error is raised in our TestSentry component on the main page.',
+          );
+        }
+      },
+    );
+  };
+
+  return (
+    <Card>
+      <CardHeader>
+        <div className='flex flex-row my-auto space-x-4'>
+          <svg
+            height='40'
+            width='40'
+            fill='none'
+            xmlns='http://www.w3.org/2000/svg'
+          >
+            <path
+              d='M21.85 2.995a3.698 3.698 0 0 1 1.353 1.354l16.303 28.278a3.703 3.703 0 0 1-1.354 5.053 3.694 3.694 0 0 1-1.848.496h-3.828a31.149 31.149 0 0 0 0-3.09h3.815a.61.61 0 0 0 .537-.917L20.523 5.893a.61.61 0 0 0-1.057 0l-3.739 6.494a28.948 28.948 0 0 1 9.63 10.453 28.988 28.988 0 0 1 3.499 13.78v1.542h-9.852v-1.544a19.106 19.106 0 0 0-2.182-8.85 19.08 19.08 0 0 0-6.032-6.829l-1.85 3.208a15.377 15.377 0 0 1 6.382 12.484v1.542H3.696A3.694 3.694 0 0 1 0 34.473c0-.648.17-1.286.494-1.849l2.33-4.074a8.562 8.562 0 0 1 2.689 1.536L3.158 34.17a.611.611 0 0 0 .538.917h8.448a12.481 12.481 0 0 0-6.037-9.09l-1.344-.772 4.908-8.545 1.344.77a22.16 22.16 0 0 1 7.705 7.444 22.193 22.193 0 0 1 3.316 10.193h3.699a25.892 25.892 0 0 0-3.811-12.033 25.856 25.856 0 0 0-9.046-8.796l-1.344-.772 5.269-9.136a3.698 3.698 0 0 1 3.2-1.849c.648 0 1.285.17 1.847.495Z'
+              fill='currentcolor'
+            />
+          </svg>
+          <CardTitle className='text-3xl my-auto'>Test Sentry</CardTitle>
+        </div>
+        <CardDescription className='text-[1.0rem]'>
+          Click the button below & view the sample error on{' '}
+          <Link
+            href={`${process.env.NEXT_PUBLIC_SENTRY_URL}`}
+            className='text-accent-foreground underline hover:text-primary'
+          >
+            the Sentry website
+          </Link>
+          . Navigate to the {"'"}Issues{"'"} page & you should see the sample
+          error!
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <div className='flex flex-row gap-4 my-auto'>
+          <Button
+            type='button'
+            onClick={createError}
+            className='cursor-pointer text-md my-auto py-6'
+          >
+            <span>Throw Sample Error</span>
+          </Button>
+          {hasSentError ? (
+            <div className='rounded-md bg-green-500/80 dark:bg-green-500/50 py-2 px-4 flex flex-row gap-2 my-auto'>
+              <CheckCircle size={30} className='my-auto' />
+              <p className='text-lg'>Sample error was sent to Sentry!</p>
+            </div>
+          ) : !isConnected ? (
+            <div className='rounded-md bg-red-600/50 dark:bg-red-500/50 py-2 px-4 flex flex-row gap-2 my-auto'>
+              <MessageCircleWarning size={40} className='my-auto' />
+              <p>
+                Wait! The Sentry SDK is not able to reach Sentry right now -
+                this may be due to an adblocker. For more information, see{' '}
+                <Link
+                  href='https://docs.sentry.io/platforms/javascript/guides/nextjs/troubleshooting/#the-sdk-is-not-sending-any-data'
+                  className='text-accent-foreground underline hover:text-primary'
+                >
+                  the troubleshooting guide.
+                </Link>
+              </p>
+            </div>
+          ) : (
+            <div className='success_placeholder' />
+          )}
+        </div>
+        <Separator className='my-4 bg-accent' />
+        <p className='description'>
+          Warning! Sometimes Adblockers will prevent errors from being sent to
+          Sentry.
+        </p>
+      </CardContent>
+    </Card>
+  );
+};

src/components/default/sentry/index.tsx

@@ -0,0 +1 @@
+export { TestSentryCard } from './TestSentry';