sentry setup

.env.example

@@ -1 +1,3 @@
-API_AUTHORIZATION_TOKEN=xxx
+API_AUTHORIZATION_TOKEN=xxx
+SENTRY_DSN=xxx
+NEXT_PUBLIC_SENTRY_DSN=xxx

.gitignore

@@ -36,3 +36,6 @@ yarn-error.log*
 *.tsbuildinfo
 
 .eslintcache
+
+# Sentry
+.sentryclirc

next.config.js

@@ -1,7 +1,8 @@
+const { withSentryConfig } = require('@sentry/nextjs');
 const withReactSvg = require('next-react-svg');
 const path = require('path');
 
-module.exports = withReactSvg({
+const moduleExports = {
   include: path.resolve(__dirname, 'icons'),
   reactStrictMode: true,
   webpack(config) {
@@ -17,4 +18,18 @@ module.exports = withReactSvg({
     ];
   },
   output: 'standalone',
-});
+};
+
+const sentryWebpackPluginOptions = {
+  // Additional config options for the Sentry Webpack plugin. Keep in mind that
+  // the following options are set automatically, and overriding them is not
+  // recommended:
+  //   release, url, org, project, authToken, configFile, stripPrefix,
+  //   urlPrefix, include, ignore
+
+  silent: true, // Suppresses all logs
+  // For all available options, see:
+  // https://github.com/getsentry/sentry-webpack-plugin#options.
+};
+
+module.exports = withReactSvg(withSentryConfig(moduleExports, sentryWebpackPluginOptions));

package.json

@@ -15,6 +15,7 @@
     "@chakra-ui/theme-tools": "^2.0.2",
     "@emotion/react": "^11",
     "@emotion/styled": "^11",
+    "@sentry/nextjs": "^7.11.1",
     "@tanstack/react-query": "^4.0.10",
     "@tanstack/react-query-devtools": "^4.0.10",
     "@types/react-scroll": "^1.8.4",

pages/_error.tsx

@@ -0,0 +1,45 @@
+/**
+ * NOTE: This requires `@sentry/nextjs` version 7.3.0 or higher.
+ *
+ * NOTE: If using this with `next` version 12.2.0 or lower, uncomment the
+ * penultimate line in `CustomErrorComponent`.
+ *
+ * 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://reactjs.org/docs/error-boundaries.html
+ */
+
+import * as Sentry from '@sentry/nextjs';
+import type { NextPageContext } from 'next';
+import NextErrorComponent from 'next/error';
+import React from 'react';
+
+type ContextOrProps = {
+  req?: NextPageContext['req'];
+  res?: NextPageContext['res'];
+  err?: NextPageContext['err'] | string;
+  pathname?: string;
+  statusCode?: number;
+};
+
+const CustomErrorComponent = (props: { statusCode: number }) => {
+  return <NextErrorComponent statusCode={ props.statusCode }/>;
+};
+
+CustomErrorComponent.getInitialProps = async(contextData: ContextOrProps) => {
+  // 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 as NextPageContext);
+};
+
+export default CustomErrorComponent;

sentry.client.config.js

@@ -0,0 +1,17 @@
+// 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
+});

sentry.properties

@@ -0,0 +1,4 @@
+defaults.url=https://sentry.io/
+defaults.org=tom-goriunov
+defaults.project=javascript-nextjs
+cli.executable=../../.npm/_npx/a8388072043b4cbc/node_modules/@sentry/cli/bin/sentry-cli

sentry.server.config.js

@@ -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
+});