feat(changelog): Add Sentry SDK

apps/changelog/.env.example

@@ -6,3 +6,4 @@
 DATABASE_URL=postgresql://postgres:postgres@localhost:5432/changelog
 NEXTAUTH_URL=http://localhost:3000
 NEXTAUTH_SECRET=secret
+NEXT_PUBLIC_SENTRY_DSN=

apps/changelog/next.config.mjs

@@ -8,4 +8,29 @@ const nextConfig = {
   transpilePackages: ['next-mdx-remote'],
 };
 
-export default withSentryConfig(nextConfig);
+export default withSentryConfig(nextConfig, {
+  org: 'sentry',
+  project: 'changelog',
+
+  // Suppresses source map uploading logs during build
+  silent: !process.env.CI,
+
+  // Upload a larger set of source maps for prettier stack traces (increases build time)
+  widenClientFileUpload: true,
+
+  // Hides source maps from generated client bundles
+  hideSourceMaps: true,
+
+  // Automatically tree-shake Sentry logger statements to reduce bundle size
+  disableLogger: true,
+
+  reactComponentAnnotation: {
+    enabled: true,
+  },
+
+  unstable_sentryWebpackPluginOptions: {
+    applicationKey: 'sentry-changelog',
+  },
+
+  automaticVercelMonitors: true,
+});

apps/changelog/package.json

@@ -15,41 +15,42 @@
     "migrate:dev": "dotenv -e .env.development -- yarn prisma migrate reset"
   },
   "dependencies": {
-    "rehype-prism-plus": "^1.6.3",
-    "rehype-slug": "^6.0.0",
     "@auth/prisma-adapter": "^1.2.0",
-    "nextjs-toploader": "^1.6.6",
-    "prism-sentry": "^1.0.2",
+    "@google-cloud/storage": "^7.7.0",
+    "@prisma/client": "^5.8.1",
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-toolbar": "^1.0.4",
     "@radix-ui/themes": "^2.0.3",
     "@sentry/nextjs": "^8.8.0",
-    "@google-cloud/storage": "^7.7.0",
-    "@prisma/client": "^5.8.1",
+    "@spotlightjs/spotlight": "^2.1.1",
     "next": "^14.2.5",
     "next-auth": "^4.24.5",
     "next-mdx-remote": "^4.4.1",
+    "nextjs-toploader": "^1.6.6",
+    "prism-sentry": "^1.0.2",
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "react-select": "^5.7.3",
-    "sass": "^1.69.5",
     "react-textarea-autosize": "^8.5.3",
+    "rehype-prism-plus": "^1.6.3",
+    "rehype-slug": "^6.0.0",
     "rss": "^1.2.2",
+    "sass": "^1.69.5",
     "textarea-markdown-editor": "^1.0.4"
   },
   "devDependencies": {
-    "autoprefixer": "^10.4.17",
+    "@tailwindcss/forms": "^0.5.7",
+    "@tailwindcss/typography": "^0.5.10",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18.3.0",
-    "prisma": "^5.8.1",
     "@types/rss": "^0.0.32",
+    "autoprefixer": "^10.4.17",
     "eslint": "^8",
     "eslint-config-next": "^14.2.5",
     "postcss": "^8.4.33",
-    "@tailwindcss/forms": "^0.5.7",
+    "prisma": "^5.8.1",
     "tailwindcss": "^3.4.1",
-    "@tailwindcss/typography": "^0.5.10",
     "typescript": "^5"
   },
   "volta": {

apps/changelog/sentry.client.config.ts

@@ -0,0 +1,35 @@
+// This file configures the initialization of Sentry on the client.
+// The config you add here will be used whenever a users loads a page in their browser.
+// https://docs.sentry.io/platforms/javascript/guides/nextjs/
+
+import * as SentryCore from '@sentry/core';
+import * as Sentry from '@sentry/nextjs';
+import * as Spotlight from '@spotlightjs/spotlight';
+
+Sentry.init({
+  dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
+
+  // Adjust this value in production, or use tracesSampler for greater control
+  tracesSampleRate: 1,
+
+  replaysOnErrorSampleRate: 1.0,
+
+  // This sets the sample rate to be 10%. You may want this to be 100% while
+  // in development and sample at a lower rate in production
+  replaysSessionSampleRate: 0.1,
+
+  // You can remove this option if you're not planning to use the Sentry Session Replay feature:
+  integrations: [
+    Sentry.replayIntegration(),
+    SentryCore.thirdPartyErrorFilterIntegration({
+      filterKeys: ['sentry-docs'],
+      behaviour: 'drop-error-if-contains-third-party-frames',
+    }),
+  ],
+});
+
+if (process.env.NODE_ENV === 'development') {
+  Spotlight.init({
+    showClearEventsButton: true,
+  });
+}

apps/changelog/sentry.edge.config.ts

@@ -0,0 +1,8 @@
+import * as Sentry from '@sentry/nextjs';
+
+Sentry.init({
+  dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
+  tracesSampleRate: 1,
+  debug: false,
+  environment: process.env.NODE_ENV,
+});

apps/changelog/sentry.server.config.ts

@@ -0,0 +1,10 @@
+import * as Sentry from '@sentry/nextjs';
+
+Sentry.init({
+  dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
+  tracesSampleRate: 1,
+  debug: false,
+  environment: process.env.NODE_ENV,
+  spotlight: process.env.NODE_ENV === 'development',
+  integrations: [Sentry.prismaIntegration()],
+});

apps/changelog/src/instrumentation.ts

@@ -0,0 +1,9 @@
+export async function register() {
+  if (process.env.NEXT_RUNTIME === 'nodejs') {
+    await import('../sentry.server.config');
+  }
+
+  if (process.env.NEXT_RUNTIME === 'edge') {
+    await import('../sentry.edge.config');
+  }
+}

yarn.lock

@@ -2739,11 +2739,21 @@
   resolved "https://registry.yarnpkg.com/@spotlightjs/overlay/-/overlay-2.0.0-alpha.1.tgz#ccf8af298f05f07db54475aee5d633e3f7b4790c"
   integrity sha512-BJM8l9mJ6obTX/3xw1Erj9Pk/eVOP8oUtb3PoNjwQfnOrio7J8wlWjSETES22EslVPFI1kpl2UMtB+s91Ic8zQ==
 
+"@spotlightjs/overlay@2.1.0":
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/@spotlightjs/overlay/-/overlay-2.1.0.tgz#47f6f616c3401bbe4b2094936018e4c840a0a66f"
+  integrity sha512-4A718MNG81N1q81lH45BppN/Z94lEHa9U8dUtfjpBdnSngJnwz6Ku3gmFhQQfEOcei+xtPdLgCVP3ODfu0etsg==
+
 "@spotlightjs/sidecar@1.4.0":
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/@spotlightjs/sidecar/-/sidecar-1.4.0.tgz#8cbd7b620e718723a9507c5b7975d7d379685cdd"
   integrity sha512-onj/phrNtDI8a79zc8jfxJ5BITQk5klO4xSoQXxiYeQWTZcegVeO8VftOVfWPBnMY/axnh+ltxJm/cHaV5SP6Q==
 
+"@spotlightjs/sidecar@1.5.0":
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/@spotlightjs/sidecar/-/sidecar-1.5.0.tgz#b7afb8d0e4aaeaaa6d425b0f6a3eef97f78ae3e4"
+  integrity sha512-ASGHrRKQ40+kN/SAVEVD5GY3tt7gJM4lziEALHKb5rBXKHKIDqCckgEY4n8FhzpTo1N8azVFVHEIriPtpWTEsg==
+
 "@spotlightjs/spotlight@^2.0.0-alpha.1":
   version "2.0.0-alpha.1"
   resolved "https://registry.yarnpkg.com/@spotlightjs/spotlight/-/spotlight-2.0.0-alpha.1.tgz#942b1ca78723ac5d20f2006e71abe4862ae9b29a"
@@ -2752,6 +2762,16 @@
     "@spotlightjs/overlay" "2.0.0-alpha.1"
     "@spotlightjs/sidecar" "1.4.0"
 
+"@spotlightjs/spotlight@^2.1.1":
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/@spotlightjs/spotlight/-/spotlight-2.1.1.tgz#c57a60c8a4164c2bf6cbf10c72fcf2dcaead8639"
+  integrity sha512-i67sfCEIXvsHMtGMfE7U0F0MQMcrMRc54ToyaqvzZZ4aRCcUpPdl50KChcixY1ksuI7KiiP0q4h+NbjOzrrX7w==
+  dependencies:
+    "@spotlightjs/overlay" "2.1.0"
+    "@spotlightjs/sidecar" "1.5.0"
+    import-meta-resolve "^4.1.0"
+    source-map "^0.7.4"
+
 "@swc/counter@^0.1.3":
   version "0.1.3"
   resolved "https://registry.yarnpkg.com/@swc/counter/-/counter-0.1.3.tgz#cc7463bd02949611c6329596fccd2b0ec782b0e9"
@@ -6490,6 +6510,11 @@ import-local@^3.0.2:
     pkg-dir "^4.2.0"
     resolve-cwd "^3.0.0"
 
+import-meta-resolve@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/import-meta-resolve/-/import-meta-resolve-4.1.0.tgz#f9db8bead9fafa61adb811db77a2bf22c5399706"
+  integrity sha512-I6fiaX09Xivtk+THaMfAwnA3MVA5Big1WHF1Dfx9hFuvNIWpXnorlkzhcQf6ehrqQiiZECRt1poOAkPmer3ruw==
+
 imurmurhash@^0.1.4:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/imurmurhash/-/imurmurhash-0.1.4.tgz#9218b9b2b928a238b13dc4fb6b6d576f231453ea"
@@ -10620,7 +10645,7 @@ source-map@^0.6.0, source-map@^0.6.1, source-map@~0.6.0, source-map@~0.6.1:
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
   integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==
 
-source-map@^0.7.0:
+source-map@^0.7.0, source-map@^0.7.4:
   version "0.7.4"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.7.4.tgz#a9bbe705c9d8846f4e08ff6765acf0f1b0898656"
   integrity sha512-l3BikUxvPOcn5E74dZiq5BGsTb5yEwhaTSzccU6t4sDOH8NWJCstKO5QT2CvtFoK6F0saL7p9xHAqHOlCPJygA==