[feat] integrate sentry

package.json

@@ -30,6 +30,7 @@
     "@metamask/onboarding": "^1.0.1",
     "@reduxjs/toolkit": "^1.7.2",
     "@sapphire/utilities": "^3.3.0",
+    "@sentry/nextjs": "^6.19.6",
     "@shibuidao/erc721exchange-types": "^1.0.3",
     "@subgraphs/eip721-matic": "^1.0.1",
     "@tailwindcss/line-clamp": "^0.3.1",

sentry.client.config.ts

@@ -0,0 +1,8 @@
+import * as Sentry from '@sentry/nextjs';
+
+const SENTRY_DSN: string = process.env.SENTRY_DSN || process.env.NEXT_PUBLIC_SENTRY_DSN;
+
+Sentry.init({
+	dsn: SENTRY_DSN,
+	tracesSampleRate: 1.0
+});

sentry.properties

@@ -0,0 +1,4 @@
+defaults.url=https://sentry.io/
+defaults.org=shibuidao
+defaults.project=shibui-nft
+# cli.executable=../path/to/bin/sentry-cli

sentry.server.config.ts

@@ -0,0 +1,8 @@
+import * as Sentry from '@sentry/nextjs';
+
+const SENTRY_DSN: string = process.env.SENTRY_DSN || process.env.NEXT_PUBLIC_SENTRY_DSN;
+
+Sentry.init({
+	dsn: SENTRY_DSN,
+	tracesSampleRate: 1.0
+});

src/next.config.js

@@ -1,7 +1,8 @@
 const { withPlausibleProxy } = require('next-plausible');
 const { version } = require('./package.json');
+const { withSentryConfig } = require('@sentry/nextjs');
 
-module.exports = withPlausibleProxy()({
+const config = {
 	publicRuntimeConfig: {
 		version: version || '0.0.0'
 	},
@@ -25,5 +26,17 @@ module.exports = withPlausibleProxy()({
 				permanent: true
 			}
 		];
+	},
+	sentry: {
+		widenClientFileUpload: true
 	}
-});
+};
+
+const sentryWebpackPluginOptions = {
+	silent: true
+};
+
+const configWithPlausible = withPlausibleProxy()(config);
+// @ts-expect-error
+const configWithPlausibleAndSentry = withSentryConfig(configWithPlausible, sentryWebpackPluginOptions);
+module.exports = configWithPlausibleAndSentry;

src/pages/_error.tsx

@@ -0,0 +1,61 @@
+// https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup/
+import * as Sentry from '@sentry/nextjs';
+import NextErrorComponent from 'next/error';
+import React from 'react';
+
+// @ts-expect-error Not sure what type of component this really is
+const MyError = ({ statusCode, hasGetInitialPropsRun, err }) => {
+	if (!hasGetInitialPropsRun && err) {
+		// getInitialProps is not called in case of
+		// https://github.com/vercel/next.js/issues/8592. As a workaround, we pass
+		// err via _app.js so it can be captured
+		Sentry.captureException(err);
+		// Flushing is not required in this case as it only happens on the client
+	}
+
+	return <NextErrorComponent statusCode={statusCode} />;
+};
+
+// @ts-expect-error Not sure what type of component this really is
+MyError.getInitialProps = async ({ res, err, asPath }) => {
+	// @ts-expect-error Not sure what type of component this really is
+	const errorInitialProps = await NextErrorComponent.getInitialProps({ res, err });
+
+	// Workaround for https://github.com/vercel/next.js/issues/8592, mark when
+	// getInitialProps has run
+	// @ts-expect-error Not sure what type of component this really is
+	errorInitialProps.hasGetInitialPropsRun = true;
+
+	// Running on the server, the response object (`res`) is available.
+	//
+	// Next.js will pass an err on the server if a page's data fetching methods
+	// threw or returned a Promise that rejected
+	//
+	// Running on the client (browser), Next.js will provide an err if:
+	//
+	//  - a page's `getInitialProps` threw or returned a Promise that rejected
+	//  - an exception was thrown somewhere in the React lifecycle (render,
+	//    componentDidMount, etc) that was caught by Next.js's React Error
+	//    Boundary. Read more about what types of exceptions are caught by Error
+	//    Boundaries: https://reactjs.org/docs/error-boundaries.html
+
+	if (err) {
+		Sentry.captureException(err);
+
+		// Flushing before returning is necessary if deploying to Vercel, see
+		// https://vercel.com/docs/platform/limits#streaming-responses
+		await Sentry.flush(2000);
+
+		return errorInitialProps;
+	}
+
+	// If this point is reached, getInitialProps was called without any
+	// information about what the error might be. This is unexpected and may
+	// indicate a bug introduced in Next.js, so record it in Sentry
+	Sentry.captureException(new Error(`_error.js getInitialProps missing data at path: ${asPath}`));
+	await Sentry.flush(2000);
+
+	return errorInitialProps;
+};
+
+export default MyError;