🤖 sentry (#273)

* install and configure sentry.

* fake errors.

* move to environment variables.

* enable debug.

* make env variable public.

* add log messages to api routes.

* move logs inside handler.

* cleanup.

* remove error button.

Co-authored-by: Brad Garropy <[email protected]>

.gitignore

@@ -19,3 +19,4 @@ coverage
 
 # logs
 debug.log
+

next.config.js

@@ -1,4 +1,6 @@
-module.exports = {
+const {withSentryConfig} = require("@sentry/nextjs")
+
+const config = {
     i18n: {
         locales: ["en-US"],
         defaultLocale: "en-US",
@@ -94,3 +96,9 @@ module.exports = {
         return config
     },
 }
+
+const sentryWebpackPluginOptions = {
+    silent: true,
+}
+
+module.exports = withSentryConfig(config, sentryWebpackPluginOptions)

package.json

@@ -50,6 +50,7 @@
         "@fortawesome/react-fontawesome": "^0.1.16",
         "@octokit/graphql": "^4.8.0",
         "@remark-embedder/core": "^2.0.0",
+        "@sentry/nextjs": "^6.17.3",
         "classnames": "^2.3.1",
         "date-fns": "^2.27.0",
         "form-data": "^4.0.0",

sentry.client.config.js

@@ -0,0 +1,6 @@
+import * as Sentry from "@sentry/nextjs"
+
+Sentry.init({
+    dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
+    tracesSampleRate: 1.0,
+})

sentry.server.config.js

@@ -0,0 +1,6 @@
+import * as Sentry from "@sentry/nextjs"
+
+Sentry.init({
+    dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
+    tracesSampleRate: 1.0,
+})

src/pages/_error.js

@@ -0,0 +1,38 @@
+import * as Sentry from "@sentry/nextjs"
+import NextErrorComponent from "next/error"
+
+const MyError = ({statusCode, hasGetInitialPropsRun, err}) => {
+    if (!hasGetInitialPropsRun && err) {
+        Sentry.captureException(err)
+    }
+
+    return <NextErrorComponent statusCode={statusCode} />
+}
+
+MyError.getInitialProps = async context => {
+    const errorInitialProps = await NextErrorComponent.getInitialProps(context)
+    const {res, err, asPath} = context
+
+    errorInitialProps.hasGetInitialPropsRun = true
+
+    if (res?.statusCode === 404) {
+        return errorInitialProps
+    }
+
+    if (err) {
+        Sentry.captureException(err)
+        await Sentry.flush(2000)
+
+        return errorInitialProps
+    }
+
+    Sentry.captureException(
+        new Error(`_error.js getInitialProps missing data at path: ${asPath}`),
+    )
+
+    await Sentry.flush(2000)
+
+    return errorInitialProps
+}
+
+export default MyError

api/subscribe.ts → src/pages/api/subscribe.ts

@@ -1,7 +1,8 @@
 import {post} from "@bradgarropy/http"
-import {VercelRequest, VercelResponse} from "@vercel/node"
+import {withSentry} from "@sentry/nextjs"
+import {NextApiHandler} from "next"
 
-const handler = async (req: VercelRequest, res: VercelResponse) => {
+const handler: NextApiHandler = async (req, res) => {
     const apiKey = process.env.REVUE_API_KEY
 
     const subscriber = await post(
@@ -20,4 +21,4 @@ const handler = async (req: VercelRequest, res: VercelResponse) => {
     res.status(200).json(subscriber)
 }
 
-export default handler
+export default withSentry(handler)

api/twitch.ts → src/pages/api/twitch.ts

@@ -1,11 +1,12 @@
 import {get, post} from "@bradgarropy/http"
-import {VercelRequest, VercelResponse} from "@vercel/node"
+import {withSentry} from "@sentry/nextjs"
+import {NextApiHandler} from "next"
 
 type ChannelStatus = {
     isLive: boolean
 }
 
-const handler = async (req: VercelRequest, res: VercelResponse) => {
+const handler: NextApiHandler = async (req, res) => {
     const clientId = process.env.TWITCH_CLIENT_ID
     const clientSecret = process.env.TWITCH_CLIENT_SECRET
 
@@ -32,4 +33,4 @@ const handler = async (req: VercelRequest, res: VercelResponse) => {
     res.status(200).json(channelStatus)
 }
 
-export default handler
+export default withSentry(handler)