feat: support sentry report (#1729)

apps/web/.env.local.template

@@ -16,3 +16,7 @@ ENABLE_BC_PROVIDER=1
 EXPOSE_INTERNAL=1
 ENABLE_DEBUG_PAGE=
 ENABLE_SUBPAGE=
+
+# Sentry
+SENTRY_AUTH_TOKEN=
+NEXT_PUBLIC_SENTRY_DSN=

apps/web/next.config.mjs

@@ -3,6 +3,7 @@ import { createRequire } from 'node:module';
 import path from 'node:path';
 
 import { PerfseePlugin } from '@perfsee/webpack';
+import { withSentryConfig } from '@sentry/nextjs';
 import debugLocal from 'next-debug-local';
 
 import preset from './preset.config.mjs';
@@ -45,6 +46,9 @@ const getRedirectConfig = profile => {
 
 /** @type {import('next').NextConfig} */
 const nextConfig = {
+  sentry: {
+    hideSourceMaps: true,
+  },
   productionBrowserSourceMaps: true,
   compiler: {
     styledComponents: true,
@@ -158,4 +162,14 @@ const detectFirebaseConfig = () => {
 };
 detectFirebaseConfig();
 
-export default withDebugLocal(nextConfig);
+let config = withDebugLocal(nextConfig);
+
+if (process.env.SENTRY_AUTH_TOKEN) {
+  config = withSentryConfig(config, {
+    silent: true,
+  });
+} else {
+  console.log('Sentry not enabled, please set SENTRY_AUTH_TOKEN to enable it');
+}
+
+export default config;

apps/web/package.json

@@ -24,6 +24,7 @@
     "@emotion/server": "^11.10.0",
     "@emotion/styled": "^11.10.6",
     "@mui/material": "^5.11.13",
+    "@sentry/nextjs": "^7.45.0",
     "cmdk": "^0.2.0",
     "css-spring": "^4.1.0",
     "dayjs": "^1.11.7",

apps/web/sentry.client.config.ts

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

apps/web/sentry.edge.config.ts

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

apps/web/sentry.properties

@@ -0,0 +1,4 @@
+defaults.url=https://sentry.io/
+defaults.org=
+defaults.project=
+cli.executable=../../node_modules/@sentry/cli/bin/sentry-cli

apps/web/sentry.server.config.ts

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

apps/web/src/pages/_error.tsx

@@ -0,0 +1,15 @@
+import * as Sentry from '@sentry/nextjs';
+import type { NextPageContext } from 'next';
+import type { ErrorProps } from 'next/error';
+import NextErrorComponent from 'next/error';
+
+const CustomErrorComponent = (props: ErrorProps) => {
+  return <NextErrorComponent statusCode={props.statusCode} />;
+};
+
+CustomErrorComponent.getInitialProps = async (contextData: NextPageContext) => {
+  await Sentry.captureUnderscoreErrorException(contextData);
+  return NextErrorComponent.getInitialProps(contextData);
+};
+
+export default CustomErrorComponent;