Add Sentry and Baselime packages in the monitoring section

This commit introduces Sentry and Baselime packages into the monitoring section, complete with associated dependencies and scripts. These changes also reflect necessary updates to the 'pnpm-lock.yaml' file to account for these new dependencies.

README.md

@@ -100,6 +100,7 @@ Below are the reusable packages that can be shared across multiple applications
 - **`@kit/billing-gateway`**: Billing gateway package that defines the schema and logic for managing payment gateways
 - **`@kit/email-templates`**: Here we define the email templates using the `react.email` package.
 - **`@kit/mailers`**: Mailer package that abstracts the email service provider (e.g., Resend, Cloudflare, SendGrid, Mailgun, etc.)
+- **`@kit/monitoring`**: A unified monitoring package that defines the schema and logic for monitoring the application with third party services (e.g., Sentry, Baselime, etc.)
 
 And features that can be added to the application:
 - **`@kit/auth`**: Authentication package (using Supabase)
@@ -114,7 +115,6 @@ And billing packages that can be added to the application:
 
 Also planned (post-release):
 - **`@kit/notifications`**: Notifications package that defines the schema and logic for managing notifications
-- **`@kit/monitoring`**: A unified monitoring package that defines the schema and logic for monitoring the application with third party services (e.g., Sentry, Baselime, etc.)
 - **`@kit/plugins`**: Move the existing plugins to a separate package here
 - **`@kit/analytics`**: A unified analytics package to track user behavior
 

apps/web/instrumentation.ts

@@ -0,0 +1,7 @@
+import { registerInstrumentation } from '@kit/monitoring';
+
+export async function register() {
+  // Register monitoring instrumentation based on the
+  // MONITORING_INSTRUMENTATION_PROVIDER environment variable.
+  await registerInstrumentation();
+}

apps/web/next.config.mjs

@@ -12,12 +12,11 @@ const INTERNAL_PACKAGES = [
   '@kit/supabase',
   '@kit/i18n',
   '@kit/mailers',
-  '@kit/billing',
   '@kit/billing-gateway',
-  '@kit/stripe',
   '@kit/email-templates',
   '@kit/database-webhooks',
   '@kit/cms',
+  '@kit/monitoring',
 ];
 
 /** @type {import('next').NextConfig} */
@@ -31,6 +30,7 @@ const config = {
   },
   experimental: {
     mdxRs: true,
+    instrumentationHook: true,
     optimizePackageImports: [
       'recharts',
       'lucide-react',

apps/web/package.json

@@ -31,6 +31,7 @@
     "@kit/supabase": "workspace:^",
     "@kit/team-accounts": "workspace:^",
     "@kit/ui": "workspace:^",
+    "@kit/monitoring": "workspace:^",
     "@radix-ui/react-icons": "^1.3.0",
     "@supabase/ssr": "^0.1.0",
     "@supabase/supabase-js": "^2.42.0",
@@ -41,7 +42,7 @@
     "edge-csrf": "^1.0.9",
     "i18next": "^23.10.1",
     "i18next-resources-to-backend": "^1.2.0",
-    "next": "14.2.0-canary.54",
+    "next": "14.2.0-canary.55",
     "next-sitemap": "^4.2.3",
     "next-themes": "0.3.0",
     "react": "18.2.0",

package.json

@@ -26,10 +26,7 @@
   "packageManager": "pnpm@8.15.5",
   "workspaces": [
     "apps/*",
-    "packages/*",
+    "packages/**",
-    "packages/features/*",
-    "packages/billing/*",
-    "packages/cms/*",
     "tooling/*",
     "supabase"
   ],

packages/monitoring/README.md

@@ -0,0 +1,14 @@
+# Monitoring / @kit/monitoring
+
+Please set the following environment variable to your preferred monitoring provider:
+
+```
+MONITORING_INSTRUMENTATION_PROVIDER=
+```
+
+## Available Providers
+
+To use a specific provider, set the `MONITORING_INSTRUMENTATION_PROVIDER` environment variable to one of the following values:
+
+1. Baselime: `baselime`
+2. Sentry: `sentry`

packages/monitoring/baselime/README.md

@@ -0,0 +1,8 @@
+# Baselime Monitoring / @kit/baselime
+
+Please set the following environment variables:
+
+```
+BASELIME_KEY=your_key
+MONITORING_INSTRUMENTATION_PROVIDER=baselime
+```

packages/monitoring/baselime/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "@kit/baselime",
+  "private": true,
+  "version": "0.1.0",
+  "scripts": {
+    "clean": "git clean -xdf .turbo node_modules",
+    "format": "prettier --check \"**/*.{ts,tsx}\"",
+    "lint": "eslint .",
+    "typecheck": "tsc --noEmit"
+  },
+  "prettier": "@kit/prettier-config",
+  "exports": {
+    ".": "./src/index.ts"
+  },
+  "dependencies": {
+    "@baselime/node-opentelemetry": "^0.5.5"
+  },
+  "devDependencies": {
+    "@kit/eslint-config": "workspace:*",
+    "@kit/prettier-config": "workspace:*",
+    "@kit/tailwind-config": "workspace:*",
+    "@kit/tsconfig": "workspace:*"
+  },
+  "eslintConfig": {
+    "root": true,
+    "extends": [
+      "@kit/eslint-config/base",
+      "@kit/eslint-config/react"
+    ]
+  },
+  "typesVersions": {
+    "*": {
+      "*": [
+        "src/*"
+      ]
+    }
+  }
+}

packages/monitoring/baselime/src/index.ts

@@ -0,0 +1,33 @@
+import {
+  BaselimeSDK,
+  BetterHttpInstrumentation,
+  VercelPlugin,
+} from '@baselime/node-opentelemetry';
+
+const INSTRUMENTATION_SERVICE_NAME = process.env.INSTRUMENTATION_SERVICE_NAME;
+
+if (!INSTRUMENTATION_SERVICE_NAME) {
+  throw new Error(`
+    You have set the Baselime instrumentation provider, but have not set the INSTRUMENTATION_SERVICE_NAME environment variable. Please set the INSTRUMENTATION_SERVICE_NAME environment variable.
+  `);
+}
+
+/**
+ * @name registerBaselimeInstrumentation
+ * @description This file is used to register Baselime instrumentation for your Next.js application.
+ *
+ * Please set the MONITORING_INSTRUMENTATION_PROVIDER environment variable to 'baselime' to register Baselime instrumentation.
+ */
+export function registerBaselimeInstrumentation() {
+  const sdk = new BaselimeSDK({
+    serverless: true,
+    service: INSTRUMENTATION_SERVICE_NAME,
+    instrumentations: [
+      new BetterHttpInstrumentation({
+        plugins: [new VercelPlugin()],
+      }),
+    ],
+  });
+
+  sdk.start();
+}

packages/monitoring/baselime/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "extends": "@kit/tsconfig/base.json",
+  "compilerOptions": {
+    "tsBuildInfoFile": "node_modules/.cache/tsbuildinfo.json"
+  },
+  "include": ["*.ts", "src"],
+  "exclude": ["node_modules"]
+}

packages/monitoring/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "@kit/monitoring",
+  "private": true,
+  "version": "0.1.0",
+  "scripts": {
+    "clean": "git clean -xdf .turbo node_modules",
+    "format": "prettier --check \"**/*.{ts,tsx}\"",
+    "lint": "eslint .",
+    "typecheck": "tsc --noEmit"
+  },
+  "prettier": "@kit/prettier-config",
+  "exports": {
+    ".": "./src/index.ts"
+  },
+  "devDependencies": {
+    "@kit/eslint-config": "workspace:*",
+    "@kit/prettier-config": "workspace:*",
+    "@kit/tailwind-config": "workspace:*",
+    "@kit/tsconfig": "workspace:*",
+    "@kit/baselime": "workspace:*",
+    "@kit/sentry": "workspace:*"
+  },
+  "eslintConfig": {
+    "root": true,
+    "extends": [
+      "@kit/eslint-config/base",
+      "@kit/eslint-config/react"
+    ]
+  },
+  "typesVersions": {
+    "*": {
+      "*": [
+        "src/*"
+      ]
+    }
+  }
+}

packages/monitoring/sentry/README.md

@@ -0,0 +1,35 @@
+# Sentry Monitoring / @kit/sentry
+
+Please set the following environment variable:
+
+```
+MONITORING_INSTRUMENTATION_PROVIDER=sentry
+NEXT_PUBLIC_SENTRY_DSN=your_dsn
+```
+
+Create the following file at the root of your project:
+
+```tsx title="sentry.client.config.ts"
+export * from '@kit/sentry/config/client';
+```
+
+Create the following file at the root of your project:
+
+```tsx title="sentry.server.config.ts"
+export * from '@kit/sentry/config/server';
+```
+
+Create the following file at the root of your project:
+
+```tsx title="sentry.edge.config.ts"
+export * from '@kit/sentry/config/edge';
+```
+
+Finally, update the Next.js configuration in your `next.config.js` file:
+
+```tsx title="next.config.mjs"
+import { withSentryConfig } from "@sentry/nextjs";
+
+// wrap your Next.js configuration with the Sentry configuration
+withSentryConfig(nextConfig);
+```

packages/monitoring/sentry/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@kit/sentry",
+  "private": true,
+  "version": "0.1.0",
+  "scripts": {
+    "clean": "git clean -xdf .turbo node_modules",
+    "format": "prettier --check \"**/*.{ts,tsx}\"",
+    "lint": "eslint .",
+    "typecheck": "tsc --noEmit"
+  },
+  "prettier": "@kit/prettier-config",
+  "exports": {
+    ".": "./src/index.ts",
+    "./config/client": "./src/config/sentry.client.config.ts",
+    "./config/server": "./src/config/sentry.server.config.ts",
+    "./config/edge": "./src/config/sentry.server.edge.ts"
+  },
+  "dependencies": {
+    "@sentry/nextjs":"^7.109.0",
+    "@sentry/opentelemetry-node": "^7.109.0"
+  },
+  "devDependencies": {
+    "@kit/eslint-config": "workspace:*",
+    "@kit/prettier-config": "workspace:*",
+    "@kit/tailwind-config": "workspace:*",
+    "@kit/tsconfig": "workspace:*"
+  },
+  "eslintConfig": {
+    "root": true,
+    "extends": [
+      "@kit/eslint-config/base",
+      "@kit/eslint-config/react"
+    ]
+  },
+  "typesVersions": {
+    "*": {
+      "*": [
+        "src/*"
+      ]
+    }
+  }
+}

packages/monitoring/sentry/src/config/sentry.client.config.ts

@@ -0,0 +1,23 @@
+import * as Sentry from '@sentry/nextjs';
+
+Sentry.init({
+  dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
+  // Replay may only be enabled for the client-side
+  integrations: [Sentry.replayIntegration()],
+
+  // Set tracesSampleRate to 1.0 to capture 100%
+  // of transactions for performance monitoring.
+  // We recommend adjusting this value in production
+  tracesSampleRate: 1.0,
+
+  // Capture Replay for 10% of all sessions,
+  // plus for 100% of sessions with an error
+  replaysSessionSampleRate: 0.1,
+  replaysOnErrorSampleRate: 1.0,
+
+  // ...
+
+  // Note: if you want to override the automatic release value, do not set a
+  // `release` value here - use the environment variable `SENTRY_RELEASE`, so
+  // that it will also get attached to your source maps
+});

packages/monitoring/sentry/src/config/sentry.edge.config.ts

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

packages/monitoring/sentry/src/config/sentry.server.config.ts

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

packages/monitoring/sentry/src/index.ts

@@ -0,0 +1,34 @@
+import { Resource } from '@opentelemetry/resources';
+import { NodeSDK } from '@opentelemetry/sdk-node';
+import { SEMRESATTRS_SERVICE_NAME } from '@opentelemetry/semantic-conventions';
+import {
+  SentryPropagator,
+  SentrySpanProcessor,
+} from '@sentry/opentelemetry-node';
+
+const INSTRUMENTATION_SERVICE_NAME = process.env.INSTRUMENTATION_SERVICE_NAME;
+
+if (!INSTRUMENTATION_SERVICE_NAME) {
+  throw new Error(`
+    You have set the Sentry instrumentation provider, but have not set the INSTRUMENTATION_SERVICE_NAME environment variable. Please set the INSTRUMENTATION_SERVICE_NAME environment variable.
+  `);
+}
+
+/**
+ * @name registerSentryInstrumentation
+ * @description This file is used to register Sentry instrumentation for your Next.js application.
+ *
+ * Please set the MONITORING_INSTRUMENTATION_PROVIDER environment variable to 'sentry' to register Sentry instrumentation.
+ */
+export function registerSentryInstrumentation() {
+  const sdk = new NodeSDK({
+    resource: new Resource({
+      [SEMRESATTRS_SERVICE_NAME]: INSTRUMENTATION_SERVICE_NAME,
+    }),
+    // @ts-expect-error: an error in the lib
+    spanProcessor: new SentrySpanProcessor(),
+    textMapPropagator: new SentryPropagator(),
+  });
+
+  sdk.start();
+}

packages/monitoring/sentry/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "extends": "@kit/tsconfig/base.json",
+  "compilerOptions": {
+    "tsBuildInfoFile": "node_modules/.cache/tsbuildinfo.json"
+  },
+  "include": ["*.ts", "src"],
+  "exclude": ["node_modules"]
+}

packages/monitoring/src/index.ts

@@ -0,0 +1 @@
+export * from './instrumentation';

packages/monitoring/src/instrumentation.ts

@@ -0,0 +1,46 @@
+/**
+ * @name DEFAULT_INSTRUMENTATION_PROVIDER
+ * @description Register monitoring instrumentation based on the MONITORING_INSTRUMENTATION_PROVIDER environment variable.
+ */
+const DEFAULT_INSTRUMENTATION_PROVIDER =
+  process.env.MONITORING_INSTRUMENTATION_PROVIDER;
+
+enum InstrumentationProvider {
+  Baselime = 'baselime',
+  Sentry = 'sentry',
+}
+
+/**
+ * @name registerInstrumentation
+ * @description Register monitoring instrumentation based on the MONITORING_INSTRUMENTATION_PROVIDER environment variable.
+ *
+ * Please set the MONITORING_INSTRUMENTATION_PROVIDER environment variable to register the monitoring instrumentation provider.
+ */
+export async function registerInstrumentation() {
+  // Only run instrumentation in Node.js environment
+  if (
+    process.env.NEXT_RUNTIME !== 'nodejs' ||
+    !DEFAULT_INSTRUMENTATION_PROVIDER
+  ) {
+    return;
+  }
+
+  switch (DEFAULT_INSTRUMENTATION_PROVIDER) {
+    case InstrumentationProvider.Baselime: {
+      const { registerBaselimeInstrumentation } = await import('@kit/baselime');
+
+      return registerBaselimeInstrumentation();
+    }
+
+    case InstrumentationProvider.Sentry: {
+      const { registerSentryInstrumentation } = await import('@kit/sentry');
+
+      return registerSentryInstrumentation();
+    }
+
+    default:
+      throw new Error(
+        `Unknown instrumentation provider: ${DEFAULT_INSTRUMENTATION_PROVIDER}`,
+      );
+  }
+}

packages/monitoring/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "extends": "@kit/tsconfig/base.json",
+  "compilerOptions": {
+    "tsBuildInfoFile": "node_modules/.cache/tsbuildinfo.json"
+  },
+  "include": ["*.ts", "src"],
+  "exclude": ["node_modules"]
+}

pnpm-workspace.yaml

@@ -1,8 +1,5 @@
 packages:
   - apps/*
-  - packages/*
+  - packages/**
-  - packages/features/*
-  - packages/billing/*
-  - packages/cms/*
   - tooling/*
   - supabase