Merge pull request #197 from ixartz/spotlight-2

Add Sentry Spotlight

.gitignore

@@ -53,3 +53,6 @@ local
 
 # vercel
 .vercel
+
+# Sentry Config File
+.sentryclirc

README.md

@@ -4,7 +4,7 @@
   <a href="https://creativedesignsguru.com/demo/Nextjs-Boilerplate/"><img height="300" src="public/assets/images/nextjs-starter-banner.png?raw=true" alt="Next js starter banner"></a>
 </p>
 
-🚀 Boilerplate and Starter for Next.js with App Router support, Tailwind CSS and TypeScript ⚡️ Made with developer experience first: Next.js, TypeScript, ESLint, Prettier, Husky, Lint-Staged, Jest, Testing Library, Commitlint, VSCode, Netlify, PostCSS, Tailwind CSS, Authentication with [Clerk](https://clerk.com?utm_source=github&utm_medium=sponsorship&utm_campaign=nextjs-boilerplate), Database with DrizzleORM (SQLite, PostgreSQL, and MySQL) and [Turso](https://turso.tech/?utm_source=nextjsstarterbp), Monitoring as Code with [Checkly](https://www.checklyhq.com), Storybook, Multi-language (i18n), and more
+🚀 Boilerplate and Starter for Next.js with App Router support, Tailwind CSS and TypeScript ⚡️ Made with developer experience first: Next.js, TypeScript, ESLint, Prettier, Husky, Lint-Staged, Jest, Testing Library, Commitlint, VSCode, Netlify, PostCSS, Tailwind CSS, Authentication with [Clerk](https://clerk.com?utm_source=github&utm_medium=sponsorship&utm_campaign=nextjs-boilerplate), Database with DrizzleORM (SQLite, PostgreSQL, and MySQL) and [Turso](https://turso.tech/?utm_source=nextjsstarterbp), Error Monitoring with [Sentry](https://sentry.io), Monitoring as Code with [Checkly](https://www.checklyhq.com), Storybook, Multi-language (i18n), and more
 
 Clone this project and use it to create your own [Next.js](https://nextjs.org) project. You can check a [Next js templates demo](https://creativedesignsguru.com/demo/Nextjs-Boilerplate/).
 
@@ -100,6 +100,7 @@ Developer experience first:
 - 🧪 Integration and E2E Testing with Playwright
 - 👷 Run tests on pull request with GitHub Actions
 - 🎉 Storybook for UI development
+- 🚨 Error Monitoring with [Sentry](https://sentry.io)
 - 🖥️ Monitoring as Code with [Checkly](https://www.checklyhq.com)
 - 🎁 Automatic changelog generation with Semantic Release
 - 🔍 Visual testing with Percy (Optional)
@@ -324,6 +325,12 @@ Clone this repository on own GitHub account and deploy to Netlify in one click:
 
 During the setup, you need to define the `DATABASE_URL` and `DATABASE_AUTH_TOKEN` environment variables.
 
+### Error Monitoring
+
+The project uses [Sentry](https://sentry.io) to monitor errors. For development environment, you don't need to do anything: NextJS Boilerplate is already configured to use Sentry and Spotlight (Sentry for Development). All errors will be automatically sent to your local Spotlight instance. So, you can try the Sentry experience locally.
+
+For production environment, you need to create a Sentry account and create a new project. Then, in `next.config.mjs`, you need to update the `org` and `project` attribute in `withSentryConfig` function. You also need to add your Sentry DSN in `sentry.client.config.ts`, `sentry.edge.config.ts` and `sentry.server.config.ts`.
+
 ### Checkly monitoring
 
 The project uses [Checkly](https://www.checklyhq.com) to ensure that your production environment is always up and running. At regular intervals, Checkly runs the tests ending with `*.check.spec.ts` extension and notifies you if any of the tests fail. Additionally, you have the flexibility to execute tests across multiple locations to ensure that your application is available worldwide.

next.config.mjs

@@ -1,3 +1,4 @@
+import { withSentryConfig } from '@sentry/nextjs';
 /* eslint-disable import/no-extraneous-dependencies, import/extensions */
 import './src/libs/Env.mjs';
 import withBundleAnalyzer from '@next/bundle-analyzer';
@@ -10,23 +11,60 @@ const bundleAnalyzer = withBundleAnalyzer({
 });
 
 /** @type {import('next').NextConfig} */
-export default bundleAnalyzer(
-  withNextIntlConfig({
-    eslint: {
-      dirs: ['.'],
-    },
-    poweredByHeader: false,
-    reactStrictMode: true,
-    webpack: (config) => {
-      // config.externals is needed to resolve the following errors:
-      // Module not found: Can't resolve 'bufferutil'
-      // Module not found: Can't resolve 'utf-8-validate'
-      config.externals.push({
-        bufferutil: 'bufferutil',
-        'utf-8-validate': 'utf-8-validate',
-      });
-
-      return config;
-    },
-  }),
+export default withSentryConfig(
+  bundleAnalyzer(
+    withNextIntlConfig({
+      eslint: {
+        dirs: ['.'],
+      },
+      poweredByHeader: false,
+      reactStrictMode: true,
+      webpack: (config) => {
+        // config.externals is needed to resolve the following errors:
+        // Module not found: Can't resolve 'bufferutil'
+        // Module not found: Can't resolve 'utf-8-validate'
+        config.externals.push({
+          bufferutil: 'bufferutil',
+          'utf-8-validate': 'utf-8-validate',
+        });
+
+        return config;
+      },
+    }),
+  ),
+  {
+    // For all available options, see:
+    // https://github.com/getsentry/sentry-webpack-plugin#options
+
+    // Suppresses source map uploading logs during build
+    silent: true,
+    // FIXME: Add your Sentry organization and project names
+    org: 'nextjs-boilerplate-org',
+    project: 'nextjs-boilerplate-project',
+  },
+  {
+    // 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,
+
+    // Routes browser requests to Sentry through a Next.js rewrite to circumvent ad-blockers (increases server load)
+    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,
+  },
 );