feat(src): 🥅 Add sentry

.gitignore

@@ -43,4 +43,6 @@ yarn-error.log*
 
 package-lock.json
 
-public/locales/en/translations.zip
+public/locales/en/translations.zip
+# Sentry Config File
+.env.sentry-build-plugin

next.config.js

@@ -105,3 +105,47 @@ const nextConfig = {
 };
 
 module.exports = withBundleAnalyzer(nextConfig);
+
+
+// Injected content via Sentry wizard below
+
+const { withSentryConfig } = require("@sentry/nextjs");
+
+module.exports = withSentryConfig(
+  module.exports,
+  {
+    // For all available options, see:
+    // https://github.com/getsentry/sentry-webpack-plugin#options
+
+    org: "buildtheearth",
+    project: "main-website",
+    sentryUrl: "https://sentry.buildtheearth.net/",
+
+    // Only print logs for uploading source maps in CI
+    silent: !process.env.CI,
+
+    // For all available options, see:
+    // https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup/
+
+    // Upload a larger set of source maps for prettier stack traces (increases build time)
+    widenClientFileUpload: true,
+
+    // Route browser requests to Sentry through a Next.js rewrite to circumvent ad-blockers.
+    // This can increase your server load as well as your hosting bill.
+    // Note: Check that the configured route will not match with your Next.js middleware, otherwise reporting of client-
+    // side errors will fail.
+    tunnelRoute: "/monitoring",
+
+    // Hides source maps from generated client bundles
+    hideSourceMaps: true,
+
+    // Automatically tree-shake Sentry logger statements to reduce bundle size
+    disableLogger: true,
+
+    // Enables automatic instrumentation of Vercel Cron Monitors. (Does not yet work with App Router route handlers.)
+    // See the following for more information:
+    // https://docs.sentry.io/product/crons/
+    // https://vercel.com/docs/cron-jobs
+    automaticVercelMonitors: false,
+  }
+);

package.json

@@ -35,6 +35,7 @@
 		"@next/bundle-analyzer": "^13.5.6",
 		"@react-three/drei": "^9.56.10",
 		"@react-three/fiber": "^8.10.1",
+		"@sentry/nextjs": "8",
 		"@tabler/icons-react": "^2.35.0",
 		"@tiptap/extension-highlight": "^2.0.2",
 		"@tiptap/extension-link": "^2.0.2",
@@ -110,4 +111,4 @@
 		"typescript": "^4.7.2",
 		"webpack-bundle-analyzer": "^4.5.0"
 	}
-}
+}

sentry.client.config.ts

@@ -0,0 +1,18 @@
+import * as Sentry from '@sentry/nextjs';
+
+Sentry.init({
+	dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
+	tracesSampleRate: 1,
+	debug: false,
+	replaysOnErrorSampleRate: 1.0,
+	replaysSessionSampleRate: 0.05,
+	maxBreadcrumbs: 10,
+	integrations: [
+		Sentry.replayIntegration({
+			// Additional Replay configuration goes in here, for example:
+			maskAllText: true,
+			blockAllMedia: true,
+		}),
+	],
+	environment: process.env.NEXT_PUBLIC_SENTRY_ENVIRONMENT,
+});

sentry.edge.config.ts

@@ -0,0 +1,9 @@
+import * as Sentry from '@sentry/nextjs';
+
+Sentry.init({
+	dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
+	maxBreadcrumbs: 5,
+	tracesSampleRate: 1,
+	debug: false,
+	environment: process.env.NEXT_PUBLIC_SENTRY_ENVIRONMENT,
+});

sentry.server.config.ts

@@ -0,0 +1,9 @@
+import * as Sentry from '@sentry/nextjs';
+
+Sentry.init({
+	dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
+	tracesSampleRate: 1,
+	maxBreadcrumbs: 5,
+	environment: process.env.NEXT_PUBLIC_SENTRY_ENVIRONMENT,
+	debug: false,
+});

src/instrumentation.ts

@@ -0,0 +1,9 @@
+export async function register() {
+  if (process.env.NEXT_RUNTIME === 'nodejs') {
+    await import('../sentry.server.config');
+  }
+
+  if (process.env.NEXT_RUNTIME === 'edge') {
+    await import('../sentry.edge.config');
+  }
+}

src/pages/_error.tsx

@@ -1,3 +1,5 @@
+import * as Sentry from '@sentry/nextjs';
+
 import {
 	Button,
 	Center,
@@ -7,12 +9,13 @@ import {
 	useMantineTheme,
 } from '@mantine/core';
 
+import Error from 'next/error';
+import Image from 'next/image';
+import type { NextPageContext } from 'next';
 import Page from '@/components/Page';
 import thumbnail from '@/public/images/thumbnails/error.png';
-import { useTranslation } from 'next-i18next';
-import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
-import Image from 'next/image';
 import { useRouter } from 'next/router';
+import { useTranslation } from 'next-i18next';
 
 function ErrorPage(props: any) {
 	const theme = useMantineTheme();
@@ -90,13 +93,16 @@ function ErrorPage(props: any) {
 		</Page>
 	);
 }
-export async function getStaticProps({ locale }: any) {
-	return {
-		props: {
-			...(await serverSideTranslations(locale, ['common'])),
-		},
-	};
-}
+
+ErrorPage.getInitialProps = async (contextData: NextPageContext) => {
+	await Sentry.captureUnderscoreErrorException(contextData);
+
+	return Error.getInitialProps({
+		...contextData,
+		// ...(await serverSideTranslations(contextData.locale || 'en', ['common'])),
+	});
+};
+
 export default ErrorPage;
 
 const errors: any = {