feat(frontend): add sentry

frontend/pages/_error.js

@@ -0,0 +1,39 @@
+/**
+ * NOTE: This requires `@sentry/nextjs` version 7.3.0 or higher.
+ *
+ * NOTE: If using this with `next` version 12.2.0 or lower, uncomment the
+ * penultimate line in `CustomErrorComponent`.
+ *
+ * This page is loaded by Nextjs:
+ *  - on the server, when data-fetching methods throw or reject
+ *  - on the client, when `getInitialProps` throws or rejects
+ *  - on the client, when a React lifecycle method throws or rejects, and it's
+ *    caught by the built-in Nextjs error boundary
+ *
+ * See:
+ *  - https://nextjs.org/docs/basic-features/data-fetching/overview
+ *  - https://nextjs.org/docs/api-reference/data-fetching/get-initial-props
+ *  - https://reactjs.org/docs/error-boundaries.html
+ */
+
+import * as Sentry from '@sentry/nextjs';
+import NextErrorComponent from 'next/error';
+
+const CustomErrorComponent = props => {
+  // If you're using a Nextjs version prior to 12.2.1, uncomment this to
+  // compensate for https://github.com/vercel/next.js/issues/8592
+  // Sentry.captureUnderscoreErrorException(props);
+
+  return <NextErrorComponent statusCode={props.statusCode} />;
+};
+
+CustomErrorComponent.getInitialProps = async contextData => {
+  // In case this is running in a serverless function, await this in order to give Sentry
+  // time to send the error before the lambda exits
+  await Sentry.captureUnderscoreErrorException(contextData);
+
+  // This will contain the status code of the response
+  return NextErrorComponent.getInitialProps(contextData);
+};
+
+export default CustomErrorComponent;

frontend/pages/login/discord.tsx

@@ -19,10 +19,10 @@ interface CallbackResponse {
 interface State {
   hasAccount: boolean;
   isLoading: boolean;
-  token?: string;
-  user?: MeUser;
-  discord?: string;
-  ticket?: string;
+  token: string | null;
+  user: MeUser | null;
+  discord: string | null;
+  ticket: string | null;
   error?: any;
 }
 
@@ -62,13 +62,23 @@ export const getServerSideProps: GetServerSideProps<State> = async (
       props: {
         hasAccount: resp.has_account,
         isLoading: false,
-        token: resp.token,
-        user: resp.user,
+        token: resp.token || null,
+        user: resp.user || null,
         discord: resp.discord || null,
         ticket: resp.ticket || null,
       },
     };
-  } catch (e) {
-    return { props: { error: e } };
+  } catch (e: any) {
+    return {
+      props: {
+        hasAccount: false,
+        isLoading: false,
+        error: e,
+        token: null,
+        user: null,
+        discord: null,
+        ticket: null,
+      },
+    };
   }
 };

frontend/pages/u/[user]/index.tsx

@@ -40,11 +40,10 @@ export default function Index({ user }: Props) {
       <div className="container mx-auto">
         <div className="flex flex-col m-2 p-2 lg:flex-row justify-center lg:justify-start items-center space-y-4 lg:space-y-0 lg:space-x-16 lg:items-start border-b border-slate-200 dark:border-slate-700">
           {user.avatar_url && (
+            // eslint-disable-next-line @next/next/no-img-element
             <img
               className="max-w-xs rounded-full"
               src={user.avatar_url}
-              //width="20rem"
-              //height="20rem"
               alt={`@${user.username}'s avatar`}
             />
           )}