Sentry

next.config.js

@@ -1,9 +1,10 @@
 const path = require('path');
+const { withSentryConfig } = require('@sentry/nextjs');
 const Dotenv = require('dotenv-webpack');
 
 const BASE_PATH = process.env.ROOT_PATH || '';
 
-module.exports = {
+const moduleExports = {
   sassOptions: {
     includePaths: [path.join(__dirname, 'styles')],
   },
@@ -23,3 +24,17 @@ module.exports = {
     GOOGLE_CLIENT_ID: process.env.GOOGLE_CLIENT_ID,
   },
 };
+
+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 = withSentryConfig(moduleExports, sentryWebpackPluginOptions);

package.json

@@ -15,6 +15,7 @@
   "dependencies": {
     "@ant-design/icons": "^4.2.1",
     "@apollo/client": "^3.3.21",
+    "@sentry/nextjs": "^7.4.1",
     "@toast-ui/editor": "^3.1.0",
     "@toast-ui/react-editor": "^3.1.0",
     "antd": "^4.4.0",

sentry.client.config.js

@@ -0,0 +1,14 @@
+import * as Sentry from '@sentry/nextjs';
+
+const SENTRY_DSN = process.env.SENTRY_DSN || process.env.NEXT_PUBLIC_SENTRY_DSN;
+
+Sentry.init({
+  dsn: SENTRY_DSN,
+  // We recommend adjusting this value in production, or using tracesSampler
+  // for finer 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.js

@@ -0,0 +1,14 @@
+import * as Sentry from '@sentry/nextjs';
+
+const SENTRY_DSN = process.env.SENTRY_DSN || process.env.NEXT_PUBLIC_SENTRY_DSN;
+
+Sentry.init({
+  dsn: SENTRY_DSN,
+  // We recommend adjusting this value in production, or using tracesSampler
+  // for finer 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/index.tsx

@@ -1,5 +1,6 @@
 import type { NextPage } from 'next';
 import { GetServerSideProps } from 'next';
+import * as Sentry from '@sentry/nextjs';
 import client from 'api/apolloClient';
 
 import { GET_POSTLIST_MAIN } from 'api/queries/post.queries';
@@ -24,16 +25,25 @@ const HomePage: NextPage<Props> = ({ postList }) => {
 };
 
 export const getServerSideProps: GetServerSideProps = async () => {
-  const { data } = await client.query({
-    query: GET_POSTLIST_MAIN,
-    variables: { limit: 10 },
-  });
+  try {
+    const { data } = await client.query({
+      query: GET_POSTLIST_MAIN,
+      variables: { limit: 10 },
+    });
 
-  return {
-    props: {
-      postList: data.listPosts.posts || [],
-    },
-  };
+    return {
+      props: {
+        postList: data.listPosts.posts || [],
+      },
+    };
+  } catch (err) {
+    Sentry.captureException(err);
+    return {
+      props: {
+        postList: [],
+      },
+    };
+  }
 };
 
 export default HomePage;

src/pages/post/[id]/index.tsx

@@ -6,13 +6,13 @@ import Post from '@components/Post';
 import { IPostDetail } from 'types/post';
 import HeadMeta from '@components/common/HeadMeta';
 import { mockPost } from '@components/Post/mockdata';
+import { captureException } from '@sentry/nextjs';
 
 type Props = {
   post: IPostDetail;
 };
 
 const PostPage: NextPage<Props> = ({ post }) => {
-  console.log(post);
   const { title, content } = post;
   return (
     <>
@@ -39,6 +39,7 @@ export const getServerSideProps: GetServerSideProps = async (context: GetServerS
       },
     };
   } catch (err) {
+    captureException(err);
     return {
       props: {
         post: mockPost,