🔧 Update Sentry config to get proper sourcemapping (#828)

next.config.js

@@ -10,8 +10,6 @@ const redirects = require('./config/redirects.js')
 
 const remoteImagesPatterns = require('./config/remoteImagesPatterns.js')
 
-// const { sentryWebpackPlugin } = require('@sentry/webpack-plugin')
-
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   pageExtensions: ['ts', 'tsx', 'js', 'jsx', 'md', 'mdx'],
@@ -50,16 +48,6 @@ const nextConfig = {
       config.devtool = 'source-map'
     }
 
-    // if (process.env.SENTRY_AUTH_TOKEN) {
-    //   config.plugins.push(
-    //     sentryWebpackPlugin({
-    //       authToken: process.env.SENTRY_AUTH_TOKEN_SOURCEMAPS,
-    //       org: 'betagouv',
-    //       project: 'nosgestesclimat-nextjs',
-    //     })
-    //   )
-    // }
-
     // We do not want to split the chunks too much
     config.optimization.splitChunks.minSize = 300000
 
@@ -85,40 +73,55 @@ const nextConfig = {
   },
 }
 
-const sentryConfig = [
-  {
-    // For all available options, see:
-    // https://github.com/getsentry/sentry-webpack-plugin#options
-
-    // Suppresses source map uploading logs during build
-    silent: true,
-    org: 'incubateur-ademe',
-    project: 'nosgestesclimat-nextjs',
-    url: 'https://sentry.incubateur.net/',
-    authToken: process.env.SENTRY_AUTH_TOKEN,
-  },
-  {
-    // For all available options, see:
-    // https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup/
+/** @type {import('@sentry/nextjs').SentryBuildOptions} */
+const sentryConfig = {
+  // For all available options, see:
+  // https://github.com/getsentry/sentry-webpack-plugin#options
 
-    // Upload a larger set of source maps for prettier stack traces (increases build time)
-    widenClientFileUpload: false,
+  org: 'incubateur-ademe',
+  project: 'nosgestesclimat-nextjs',
+  sentryUrl: 'https://sentry.incubateur.net/',
 
-    // Transpiles SDK to be compatible with IE11 (increases bundle size)
-    transpileClientSDK: false,
+  // Only print logs for uploading source maps in CI
+  silent: !process.env.CI,
+
+  debug: true,
+
+  sourcemaps: {
+    deleteSourcemapsAfterUpload: true,
+  },
 
-    // Routes browser requests to Sentry through a Next.js rewrite to circumvent ad-blockers (increases server load)
-    tunnelRoute: '/monitoring',
+  // For all available options, see:
+  // https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup/
 
-    // Hides source maps from generated client bundles
-    hideSourceMaps: false,
+  // Upload a larger set of source maps for prettier stack traces (increases build time)
+  widenClientFileUpload: true,
 
-    // Automatically tree-shake Sentry logger statements to reduce bundle size
-    disableLogger: true,
+  // // Automatically annotate React components to show their full name in breadcrumbs and session replay
+  reactComponentAnnotation: {
+    enabled: true,
   },
-]
+
+  // 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. (Does not yet work with App Router route handlers.)
+  // // See the following for more information:
+  // // https://docs.sentry.io/product/crons/
+  // // https://vercel.com/docs/cron-jobs
+  automaticVercelMonitors: true,
+}
 
 module.exports =
   process.env.NODE_ENV !== 'development'
-    ? withSentryConfig(withMDX(nextConfig), ...sentryConfig)
-    : nextConfig
+    ? withSentryConfig(withMDX(nextConfig), sentryConfig)
+    : withMDX(nextConfig)

package.json

@@ -1,7 +1,7 @@
 {
   "name": "nosgestesclimat-site-nextjs",
   "license": "MIT",
-  "version": "2.8.1",
+  "version": "2.8.2",
   "description": "The leading open source climate footprint calculator",
   "repository": {
     "type": "git",
@@ -44,8 +44,9 @@
     "@next/mdx": "^14.2.7",
     "@publicodes/react-ui": "^1.3.3",
     "@publicodes/tools": "^1.2.0",
-    "@sentry/nextjs": "^8",
-    "@sentry/react": "^8.10.0",
+    "@sentry/nextjs": "^8.52.0",
+    "@sentry/react": "^8.52.0",
+    "@sentry/utils": "^8.52.0",
     "@socialgouv/react-departements": "^3.0.0",
     "@swc/core": "^1.7.12",
     "@swc/jest": "^0.2.36",

sentry.client.config.ts

@@ -7,13 +7,10 @@ import * as Sentry from '@sentry/nextjs'
 Sentry.init({
   dsn: 'https://[email protected]/118',
 
-  enableTracing: true,
-
-  // Only for previews including preprod
-  debug: process.env.NODE_ENV !== 'production',
-
+  // In production keep a 10% sample rate to avoid high costs
   sampleRate: process.env.NODE_ENV === 'production' ? 0.1 : 1,
 
-  // Disable sentry for development based on local data
+  // Setting this option to true will print useful information to the console while you're setting up Sentry.
+  debug: true,
   enabled: process.env.NODE_ENV !== 'development',
 })

sentry.edge.config.ts

@@ -8,13 +8,10 @@ import * as Sentry from '@sentry/nextjs'
 Sentry.init({
   dsn: 'https://[email protected]/118',
 
-  enableTracing: true,
-
-  // Only for previews including preprod
-  debug: process.env.NODE_ENV !== 'production',
-
+  // In production keep a 10% sample rate to avoid high costs
   sampleRate: process.env.NODE_ENV === 'production' ? 0.1 : 1,
 
-  // Disable sentry for development based on local data
+  // Setting this option to true will print useful information to the console while you're setting up Sentry.
+  debug: true,
   enabled: process.env.NODE_ENV !== 'development',
 })

sentry.server.config.ts

@@ -7,15 +7,10 @@ import * as Sentry from '@sentry/nextjs'
 Sentry.init({
   dsn: 'https://[email protected]/118',
 
-  // Enable tracing for more detailed performance monitoring
-  enableTracing: true,
-
-  // Only for previews including preprod
-  debug: process.env.NODE_ENV !== 'production',
-
   // In production keep a 10% sample rate to avoid high costs
   sampleRate: process.env.NODE_ENV === 'production' ? 0.1 : 1,
 
-  // Enable Sentry in all environments for debugging
+  // Setting this option to true will print useful information to the console while you're setting up Sentry.
+  debug: true,
   enabled: process.env.NODE_ENV !== 'development',
 })

src/app/blog/[category]/[article]/_components/ArticleJSONLD.tsx

@@ -13,7 +13,7 @@ export default function ArticleJSONLD({ article }: { article: ArticleType }) {
           dateModified: article.updatedAt,
           image: {
             '@type': 'imageObject',
-            url: article.image,
+            url: article.image?.url,
             height: '640',
             width: '800',
           },

src/instrumentation.ts

@@ -1,3 +1,5 @@
+import * as Sentry from '@sentry/nextjs'
+
 export async function register() {
   if (process.env.NEXT_RUNTIME === 'nodejs') {
     await import('../sentry.server.config')
@@ -7,3 +9,5 @@ export async function register() {
     await import('../sentry.edge.config')
   }
 }
+
+export const onRequestError = Sentry.captureException