feat(Sentry): Add sentry for error monitoring and browser tracing (#53)

* feat(Sentry): Add sentry for error monitoring and browser tracing

* chore(deps): Bump Next.js Version

Author: codebycorey

.gitignore

@@ -34,3 +34,6 @@ public/sitemap.xml
 public/rss.xml
 
 .vercel
+
+# Sentry
+.sentryclirc

next.config.js

@@ -1,4 +1,17 @@
 const withBundleAnalyzer = require('@next/bundle-analyzer')({
   enabled: process.env.ANALYZE === 'true',
 });
-module.exports = withBundleAnalyzer({});
+const { withSentryConfig } = require('@sentry/nextjs');
+
+const moduleExports = {
+  reactStrictMode: true,
+};
+
+const sentryConfig = {
+  silent: true,
+};
+
+module.exports = withSentryConfig(
+  withBundleAnalyzer(moduleExports),
+  sentryConfig
+);

package-lock.json

@@ -15,6 +15,7 @@
     "analyze:browser": "cross-env BUNDLE_ANALYZE=browser next build"
   },
   "dependencies": {
+    "@sentry/nextjs": "^6.17.9",
     "@supabase/supabase-js": "^1.29.1",
     "@tailwindcss/forms": "^0.4.0",
     "@tailwindcss/typography": "^0.5.0",
@@ -25,7 +26,7 @@
     "globby": "^12.0.2",
     "gray-matter": "^4.0.3",
     "mdx-prism": "^0.3.4",
-    "next": "^12.0.7",
+    "next": "^12.0.10",
     "next-mdx-remote": "^3.0.8",
     "next-seo": "^4.28.1",
     "next-themes": "0.0.15",

package.json

@@ -0,0 +1,78 @@
+import NextErrorComponent, { ErrorProps } from 'next/error';
+import { NextPageContext } from 'next';
+
+import * as Sentry from '@sentry/nextjs';
+
+interface PageProps {
+  hasGetInitialPropsRun?: boolean;
+  err?: NextPageContext['err'];
+}
+
+const MyError = ({
+  statusCode,
+  hasGetInitialPropsRun,
+  err,
+}: ErrorProps & PageProps) => {
+  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} />;
+};
+
+MyError.getInitialProps = async (context: NextPageContext) => {
+  const errorInitialProps = await NextErrorComponent.getInitialProps(context);
+
+  const { res, err, asPath } = context;
+
+  // Workaround for https://github.com/vercel/next.js/issues/8592, mark when
+  // getInitialProps has run
+  const errorProps: ErrorProps & PageProps = {
+    ...errorInitialProps,
+    hasGetInitialPropsRun: true,
+  };
+
+  // Returning early because we don't want to log 404 errors to Sentry.
+  if (res?.statusCode === 404) {
+    return errorProps;
+  }
+
+  // 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 errorProps;
+  }
+
+  // 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 errorProps;
+};
+
+export default MyError;

pages/_error.tsx

@@ -0,0 +1,23 @@
+// 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({
+  enabled: process.env.NODE_ENV === 'production',
+  dsn:
+    SENTRY_DSN ||
+    'https://e145f94dff0d4fcaa5ef6fdb42cbeb31@o1146015.ingest.sentry.io/6214305',
+  // Adjust this value in production, or use tracesSampler for greater control
+
+  integrations: [
+    new Sentry.BrowserTracing({
+      // custom options
+    }),
+  ],
+
+  tracesSampleRate: 0.1,
+});

sentry.client.config.js

@@ -0,0 +1,4 @@
+defaults.url=https://sentry.io/
+defaults.org=codebycorey
+defaults.project=codebycorey
+cli.executable=../../.npm/_npx/84807/lib/node_modules/@sentry/wizard/node_modules/@sentry/cli/bin/sentry-cli

sentry.properties

@@ -0,0 +1,20 @@
+// 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({
+  enabled: process.env.NODE_ENV === 'production',
+  dsn:
+    SENTRY_DSN ||
+    'https://e145f94dff0d4fcaa5ef6fdb42cbeb31@o1146015.ingest.sentry.io/6214305',
+  // Adjust this value in production, or use tracesSampler for greater control
+  // tracesSampleRate: 0.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
+});