Feature/error handling and reporting

Contributors.md

@@ -0,0 +1,5 @@
+# name
+
+## ThankGod munachimso Agu
+
+## frontEnd developer

src/components/UserDetails/UserDetails.tsx

@@ -5,11 +5,23 @@ import { GoIssueOpened } from '@react-icons/all-files/go/GoIssueOpened'
 import { GoGitPullRequest } from '@react-icons/all-files/go/GoGitPullRequest'
 import { UserDetails_user$key } from '__generated__/UserDetails_user.graphql'
 
+type GitContributionStats = {
+  issues: number;
+  pullRequests: number;
+}
+
+type User = {
+  id: string;
+  handle: string;
+  avatar: string;
+  gitContributionStats: GitContributionStats;
+}
+
 type Props = {
   user: UserDetails_user$key
 }
 
-const UserDetails = ({ user }: Props) => {
+const UserDetails = ({ user }: Props): JSX.Element => {
   const data = useFragment(
     graphql`
       fragment UserDetails_user on User {

src/pages/_error.js

@@ -19,21 +19,30 @@
 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);
+const CustomErrorComponent = ({ statusCode, error }) => {
+  if (statusCode === 404) {
+    return <h1>404 - Page Not Found</h1>
+  }
 
-  return <NextErrorComponent statusCode={props.statusCode} />
+  // Add additional error handling logic here based on error type or status code
+
+  // Capture the error with Sentry
+  Sentry.captureException(error)
+
+  // Return the default error component
+  return <NextErrorComponent statusCode={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)
+  try {
+    // Attempt to fetch initial props and return them
+    return await NextErrorComponent.getInitialProps(contextData)
+  } catch (error) {
+    // If there's an error, capture it with Sentry and pass it to the error component
+    await Sentry.captureException(error)
+    return { statusCode: 500, error }
+  }
 }
 
 export default CustomErrorComponent
+