feat: support sentry

Author: hqwlkj

.env

@@ -1,2 +1,3 @@
 NEXT_APP_ENV=development
 NEXT_APP_API_HOST=https://api-staging.pietrastudio.com
+NEXT_PUBLIC_SENTRY_DSN=https://143e08d5e8f04e0ea6771e8bd0fc9945@o4505486562754560.ingest.sentry.io/4505486566293504

.env.production

@@ -1,2 +1,3 @@
 NEXT_APP_ENV=production
-NEXT_APP_API_HOST=http://127.0.0.1:5555
+NEXT_APP_API_HOST=http://127.0.0.1:5555
+NEXT_PUBLIC_SENTRY_DSN=https://143e08d5e8f04e0ea6771e8bd0fc9945@o4505486562754560.ingest.sentry.io/4505486566293504

.env.staging

@@ -1,2 +1,3 @@
 NEXT_APP_ENV=staging
-NEXT_APP_API_HOST=http://127.0.0.1:4444
+NEXT_APP_API_HOST=http://127.0.0.1:4444
+NEXT_PUBLIC_SENTRY_DSN=https://143e08d5e8f04e0ea6771e8bd0fc9945@o4505486562754560.ingest.sentry.io/4505486566293504

next.config.js

@@ -1,14 +1,22 @@
+// This file sets a custom webpack configuration to use your Next.js app
+// with Sentry.
+// https://nextjs.org/docs/api-reference/next.config.js/introduction
+// https://docs.sentry.io/platforms/javascript/guides/nextjs/
+
+const { withSentryConfig } = require('@sentry/nextjs');
 const path = require('path');
 const withBundleAnalyzer = require('@next/bundle-analyzer')({
   enabled: process.env.ANALYZE === 'true',
 });
 const withLess = require('next-with-less');
+const dayjs = require('dayjs');
 const isProd = process.env.NODE_ENV === 'production';
 
 const nextConfig = (phase) => {
   const env = {
     NEXT_APP_ENV: process.env.NEXT_APP_ENV,
     NEXT_APP_API_HOST: process.env.NEXT_APP_API_HOST,
+    NEXT_PUBLIC_SENTRY_DSN: process.env.NEXT_PUBLIC_SENTRY_DSN,
   };
   /** @type {import('next').NextConfig} */
   const config = {
@@ -50,8 +58,23 @@ const nextConfig = (phase) => {
       });
       return config;
     },
+    sentry: {
+      // Use `hidden-source-map` rather than `source-map` as the Webpack `devtool`
+      // for client-side builds. (This will be the default starting in
+      // `@sentry/nextjs` version 8.0.0.) See
+      // https://webpack.js.org/configuration/devtool/ and
+      // https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup/#use-hidden-source-map
+      // for more information.
+      hideSourceMaps: true,
+    },
   };
-  return withBundleAnalyzer(withLess(config));
+  return withBundleAnalyzer(
+    withSentryConfig(withLess(config), {
+      debug: !isProd,
+      environment: process.env.NODE_ENV,
+      release: `${process.env.NODE_ENV}@${dayjs().format('YYYY-MM-DD HH:mm')}`,
+    }),
+  );
 };
 
 module.exports = nextConfig;

sentry.client.config.ts

@@ -0,0 +1,31 @@
+// This file configures the initialization of Sentry on the browser.
+// The config you add here will be used whenever a page is visited.
+// https://docs.sentry.io/platforms/javascript/guides/nextjs/
+
+import * as Sentry from '@sentry/nextjs';
+
+const SENTRY_DSN = process.env.SENTRY_DSN || process.env.NEXT_PUBLIC_SENTRY_DSN;
+
+Sentry.init({
+  dsn: SENTRY_DSN,
+  // Adjust this value in production, or use tracesSampler for greater control
+  tracesSampleRate: 1.0,
+  // ...
+  // Note: if you want to override the automatic release value, do not set a
+  // `release` value here - use the environment variable `SENTRY_RELEASE`, so
+  // that it will also get attached to your source maps
+  // in development and sample at a lower rate in production
+  replaysSessionSampleRate: 0.1,
+
+  // If the entire session is not sampled, use the below sample rate to sample
+  // sessions when an error occurs.
+  replaysOnErrorSampleRate: 1.0,
+
+  integrations: [
+    new Sentry.Replay({
+      // Additional SDK configuration goes in here, for example:
+      maskAllText: true,
+      blockAllMedia: true,
+    }),
+  ],
+});

sentry.edge.config.ts

@@ -0,0 +1,17 @@
+// This file configures the initialization of Sentry on the server.
+// The config you add here will be used whenever middleware or an Edge route handles a request.
+// https://docs.sentry.io/platforms/javascript/guides/nextjs/
+
+import * as Sentry from '@sentry/nextjs';
+
+const SENTRY_DSN = process.env.SENTRY_DSN || process.env.NEXT_PUBLIC_SENTRY_DSN;
+
+Sentry.init({
+  dsn: SENTRY_DSN,
+  // Adjust this value in production, or use tracesSampler for greater control
+  tracesSampleRate: 1.0,
+  // ...
+  // Note: if you want to override the automatic release value, do not set a
+  // `release` value here - use the environment variable `SENTRY_RELEASE`, so
+  // that it will also get attached to your source maps
+});

sentry.server.config.ts

@@ -0,0 +1,17 @@
+// This file configures the initialization of Sentry on the server.
+// The config you add here will be used whenever the server handles a request.
+// https://docs.sentry.io/platforms/javascript/guides/nextjs/
+
+import * as Sentry from '@sentry/nextjs';
+
+const SENTRY_DSN = process.env.SENTRY_DSN || process.env.NEXT_PUBLIC_SENTRY_DSN;
+
+Sentry.init({
+  dsn: SENTRY_DSN,
+  // Adjust this value in production, or use tracesSampler for greater control
+  tracesSampleRate: 1.0,
+  // ...
+  // Note: if you want to override the automatic release value, do not set a
+  // `release` value here - use the environment variable `SENTRY_RELEASE`, so
+  // that it will also get attached to your source maps
+});

src/pages/404.tsx

@@ -1,4 +1,5 @@
 import React, { useEffect } from 'react';
+import Error from 'next/error';
 
 import { useRouter } from 'next/router';
 
@@ -7,7 +8,8 @@ const Custom404 = () => {
   useEffect(() => {
     router.push('/error');
   }, [router]);
-  return <div></div>;
+  // Opinionated: do not record an exception in Sentry for 404
+  return <Error statusCode={404} />;
 };
 
 export default Custom404;

src/pages/_error.tsx

@@ -0,0 +1,28 @@
+/**
+ * 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://react.dev/reference/react/Component#catching-rendering-errors-with-an-error-boundary
+ */
+
+import * as Sentry from '@sentry/nextjs';
+import NextErrorComponent from 'next/error';
+
+const CustomErrorComponent = (props: any) => <NextErrorComponent statusCode={props.statusCode} />;
+
+CustomErrorComponent.getInitialProps = async (contextData: any) => {
+  // 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;