feat(general): added sentry

.env.example

@@ -49,4 +49,10 @@ TRANSLO_I18N_BASE_URL=https://translo.app/
 # Analytics
 # -----------------------------------------------------------------------------
 NEXT_PUBLIC_POSTHOG_KEY=
-NEXT_PUBLIC_POSTHOG_HOST=https://eu.posthog.com
+NEXT_PUBLIC_POSTHOG_HOST=https://eu.posthog.com
+
+# -----------------------------------------------------------------------------
+# Sentry
+# -----------------------------------------------------------------------------
+SENTRY_DNS=
+SENTRY_ENVIROMENT=

.env.github

@@ -49,4 +49,10 @@ TRANSLO_I18N_BASE_URL=https://translo.app/
 # Analytics
 # -----------------------------------------------------------------------------
 NEXT_PUBLIC_POSTHOG_KEY=test
-NEXT_PUBLIC_POSTHOG_HOST=https://eu.posthog.com
+NEXT_PUBLIC_POSTHOG_HOST=https://eu.posthog.com
+
+# -----------------------------------------------------------------------------
+# Sentry
+# -----------------------------------------------------------------------------
+SENTRY_DNS=
+SENTRY_ENVIROMENT=

.gitignore

@@ -37,4 +37,6 @@ yarn-error.log*
 next-env.d.ts
 
 .vscode
-.contentlayer
+.contentlayer
+# Sentry Config File
+.sentryclirc

env.mjs

@@ -24,6 +24,8 @@ export const env = createEnv({
     TRANSLO_I18N_BASE_URL: z.string().optional(),
     NEXT_PUBLIC_POSTHOG_KEY: z.string().min(1),
     NEXT_PUBLIC_POSTHOG_HOST: z.string().min(1),
+    SENTRY_DNS: z.string(),
+    SENTRY_ENVIROMENT: z.string(),
   },
   client: {
     NEXT_PUBLIC_APP_URL: z.string().min(1),
@@ -49,5 +51,7 @@ export const env = createEnv({
     TRANSLO_I18N_BASE_URL: process.env.TRANSLO_I18N_BASE_URL,
     NEXT_PUBLIC_POSTHOG_KEY: process.env.NEXT_PUBLIC_POSTHOG_KEY,
     NEXT_PUBLIC_POSTHOG_HOST: process.env.NEXT_PUBLIC_POSTHOG_HOST,
+    SENTRY_DNS: process.env.SENTRY_DNS,
+    SENTRY_ENVIROMENT: process.env.SENTRY_ENVIROMENT,
   },
 })

next.config.mjs

@@ -1,3 +1,4 @@
+import { withSentryConfig } from "@sentry/nextjs"
 import { withContentlayer } from "next-contentlayer"
 
 import "./env.mjs"
@@ -14,4 +15,43 @@ const nextConfig = {
   },
 }
 
-export default withContentlayer(nextConfig)
+export default withSentryConfig(
+  withContentlayer(nextConfig),
+  {
+    // For all available options, see:
+    // https://github.com/getsentry/sentry-webpack-plugin#options
+
+    // Suppresses source map uploading logs during build
+    silent: true,
+    org: "translo",
+    project: "javascript-nextjs",
+  },
+  {
+    // For all available options, see:
+    // https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup/
+
+    // Upload a larger set of source maps for prettier stack traces (increases build time)
+    widenClientFileUpload: true,
+
+    // Transpiles SDK to be compatible with IE11 (increases bundle size)
+    transpileClientSDK: true,
+
+    // Uncomment to route browser requests to Sentry through a Next.js rewrite to circumvent ad-blockers.
+    // This can increase your server load as well as your hosting bill.
+    // Note: Check that the configured route will not match with your Next.js middleware, otherwise reporting of client-
+    // side errors will fail.
+    // tunnelRoute: "/monitoring",
+
+    // Hides source maps from generated client bundles
+    hideSourceMaps: true,
+
+    // Automatically tree-shake Sentry logger statements to reduce bundle size
+    disableLogger: true,
+
+    // Enables automatic instrumentation of Vercel Cron Monitors.
+    // See the following for more information:
+    // https://docs.sentry.io/product/crons/
+    // https://vercel.com/docs/cron-jobs
+    automaticVercelMonitors: true,
+  }
+)

package.json

@@ -68,6 +68,7 @@
     "@radix-ui/react-toggle": "^1.0.2",
     "@radix-ui/react-toggle-group": "^1.0.3",
     "@radix-ui/react-tooltip": "^1.0.5",
+    "@sentry/nextjs": "^7.105.0",
     "@t3-oss/env-nextjs": "^0.2.2",
     "@tanstack/react-query": "^5.27.5",
     "@vercel/analytics": "^1.0.0",

pages/_error.jsx

@@ -0,0 +1,17 @@
+import Error from "next/error"
+import * as Sentry from "@sentry/nextjs"
+
+const CustomErrorComponent = (props) => {
+  return <Error 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 Error.getInitialProps(contextData)
+}
+
+export default CustomErrorComponent