configure sentry for runtime error logging

Author: Roshanjossey

.gitignore

@@ -25,6 +25,7 @@ yarn-debug.log*
 yarn-error.log*
 
 # local env files
+.env
 .env.local
 .env.development.local
 .env.test.local
@@ -40,4 +41,9 @@ yarn-error.log*
 .vscode
 
 # relay
-__generated__
+__generated__
+# Sentry
+.sentryclirc
+
+# Sentry
+next.config.original.js

next.config.js

@@ -1,3 +1,9 @@
+// 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/manual-setup/
+import { withSentryConfig } from '@sentry/nextjs'
+
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   // webpack: (config, { isServer, webpack }) => {
@@ -32,3 +38,9 @@ const nextConfig = {
 }
 
 module.exports = nextConfig
+
+module.exports = withSentryConfig(
+  module.exports,
+  { silent: true },
+  { hideSourcemaps: true }
+)

package.json

@@ -25,6 +25,7 @@
     "@editorjs/table": "^2.0.2",
     "@firstcontributions/editorjs-codeflask": "https://github.com/firstcontributions/editorjs-codeflask",
     "@react-icons/all-files": "^4.1.0",
+    "@sentry/nextjs": "^7.37.0",
     "dayjs": "^1.11.5",
     "form-data": "^4.0.0",
     "formidable": "^2.0.1",

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.edge.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 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.properties

@@ -0,0 +1,4 @@
+defaults.url=https://sentry.io/
+defaults.org=opensourcer
+defaults.project=frontend
+cli.executable=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
+})

src/pages/_error.js

@@ -0,0 +1,39 @@
+/**
+ * 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 NextErrorComponent from 'next/error'
+
+const CustomErrorComponent = (props) => {
+  // If you're using a Nextjs version prior to 12.2.1, uncomment this to
+  // compensate for https://github.com/vercel/next.js/issues/8592
+  // Sentry.captureUnderscoreErrorException(props);
+
+  return <NextErrorComponent statusCode={props.statusCode} />
+}
+
+CustomErrorComponent.getInitialProps = async (contextData) => {
+  // 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

src/pages/sentry_sample_error.js

@@ -0,0 +1,65 @@
+import Head from 'next/head'
+
+const boxStyles = {
+  padding: '12px',
+  border: '1px solid #eaeaea',
+  borderRadius: '10px',
+}
+export default function Home() {
+  return (
+    <div>
+      <Head>
+        <title>Sentry Onboarding</title>
+        <meta name="description" content="Make your Next.js ready for Sentry" />
+      </Head>
+
+      <main
+        style={{
+          minHeight: '100vh',
+          display: 'flex',
+          flexDirection: 'column',
+          justifyContent: 'center',
+          alignItems: 'center',
+        }}
+      >
+        <h1 style={{ fontSize: '4rem' }}>
+          <svg
+            style={{
+              height: '1em',
+            }}
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 200 44"
+          >
+            <path
+              fill="currentColor"
+              d="M124.32,28.28,109.56,9.22h-3.68V34.77h3.73V15.19l15.18,19.58h3.26V9.22h-3.73ZM87.15,23.54h13.23V20.22H87.14V12.53h14.93V9.21H83.34V34.77h18.92V31.45H87.14ZM71.59,20.3h0C66.44,19.06,65,18.08,65,15.7c0-2.14,1.89-3.59,4.71-3.59a12.06,12.06,0,0,1,7.07,2.55l2-2.83a14.1,14.1,0,0,0-9-3c-5.06,0-8.59,3-8.59,7.27,0,4.6,3,6.19,8.46,7.52C74.51,24.74,76,25.78,76,28.11s-2,3.77-5.09,3.77a12.34,12.34,0,0,1-8.3-3.26l-2.25,2.69a15.94,15.94,0,0,0,10.42,3.85c5.48,0,9-2.95,9-7.51C79.75,23.79,77.47,21.72,71.59,20.3ZM195.7,9.22l-7.69,12-7.64-12h-4.46L186,24.67V34.78h3.84V24.55L200,9.22Zm-64.63,3.46h8.37v22.1h3.84V12.68h8.37V9.22H131.08ZM169.41,24.8c3.86-1.07,6-3.77,6-7.63,0-4.91-3.59-8-9.38-8H154.67V34.76h3.8V25.58h6.45l6.48,9.2h4.44l-7-9.82Zm-10.95-2.5V12.6h7.17c3.74,0,5.88,1.77,5.88,4.84s-2.29,4.86-5.84,4.86Z M29,2.26a4.67,4.67,0,0,0-8,0L14.42,13.53A32.21,32.21,0,0,1,32.17,40.19H27.55A27.68,27.68,0,0,0,12.09,17.47L6,28a15.92,15.92,0,0,1,9.23,12.17H4.62A.76.76,0,0,1,4,39.06l2.94-5a10.74,10.74,0,0,0-3.36-1.9l-2.91,5a4.54,4.54,0,0,0,1.69,6.24A4.66,4.66,0,0,0,4.62,44H19.15a19.4,19.4,0,0,0-8-17.31l2.31-4A23.87,23.87,0,0,1,23.76,44H36.07a35.88,35.88,0,0,0-16.41-31.8l4.67-8a.77.77,0,0,1,1.05-.27c.53.29,20.29,34.77,20.66,35.17a.76.76,0,0,1-.68,1.13H40.6q.09,1.91,0,3.81h4.78A4.59,4.59,0,0,0,50,39.43a4.49,4.49,0,0,0-.62-2.28Z"
+            ></path>
+          </svg>
+        </h1>
+
+        <p>Get started by sending us a sample error</p>
+        <button
+          type="button"
+          style={{
+            ...boxStyles,
+            backgroundColor: '#c73852',
+            borderRadius: '12px',
+            border: 'none',
+          }}
+          onClick={() => {
+            throw new Error('Sentry Frontend Error')
+          }}
+        >
+          Throw error
+        </button>
+
+        <p>
+          For more information, see{' '}
+          <a href="https://docs.sentry.io/platforms/javascript/guides/nextjs/">
+            https://docs.sentry.io/platforms/javascript/guides/nextjs/
+          </a>
+        </p>
+      </main>
+    </div>
+  )
+}