Merge pull request #729 from CodeForAfrica/chore/ui_payload

Upgrade Payload SEO and Sentry Config
CodeForAfrica · Jun 22, 2024 · b7243b4 · b7243b4
2 parents ad566d5 + a78b058
commit b7243b4
Show file tree

Hide file tree

Showing 31 changed files with 1,448 additions and 326 deletions.
diff --git a/.github/workflows/roboshield-deploy-dev.yml b/.github/workflows/roboshield-deploy-dev.yml
@@ -56,7 +56,7 @@ jobs:
           cache-from: type=local,src=/tmp/.buildx-cache
           cache-to: type=local,dest=/tmp/.buildx-cache-new
           context: .
-          file: roboshield.Dockefile
+          file: roboshield.Dockerfile
           push: true
           tags: "${{ env.IMAGE_NAME }}:${{ github.sha }}"
 

diff --git a/Makefile b/Makefile
@@ -3,11 +3,14 @@
 COMPOSE=docker compose
 COMPOSE_BUILD_ENV=BUILDKIT_PROGRESS=plain
 
-.PHONY: charterafrica codeforafrica mongodb mongodb-keyfile vpnmanager
+.PHONY: charterafrica codeforafrica mongodb mongodb-keyfile vpnmanager pesayetu roboshield down
 
 charterafrica:
 	$(COMPOSE_BUILD_ENV) $(COMPOSE) --env-file apps/charterafrica/.env.local up charterafrica --build
 
+codeforafrica:
+	$(COMPOSE_BUILD_ENV) $(COMPOSE) --env-file apps/codeforafrica/.env.local up codeforafrica --build
+
 vpnmanager:
 	$(COMPOSE_BUILD_ENV) $(COMPOSE) --env-file apps/vpnmanager/.env.local up vpnmanager --build
 

diff --git a/apps/charterafrica/README.md b/apps/charterafrica/README.md
@@ -7,7 +7,7 @@ This is the official code for https://charter.africa site
 First create `.env.local` file in the root directory of the project.
 
 ```bash
-cp  env.template .env.local
+cp env.template .env.local
 ```
 
 and modify the `.env.local` file according to your needs.
@@ -37,7 +37,7 @@ make mongodb
 Then run the development server:
 
 ```bash
-pnpm  dev
+pnpm dev
 ```
 
 ## Debugging

diff --git a/apps/charterafrica/instrumentation.js b/apps/charterafrica/instrumentation.js
@@ -0,0 +1,11 @@
+// Next.js requires this to be exported as register
+// eslint-disable-next-line import/prefer-default-export
+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");
+  }
+}
diff --git a/apps/charterafrica/jest.setup.js b/apps/charterafrica/jest.setup.js
@@ -34,4 +34,9 @@ jest.mock("next/router", () => ({
   })),
 }));
 
+jest.mock("@sentry/nextjs", () => ({
+  captureException: jest.fn(),
+  captureMessage: jest.fn(),
+}));
+
 module.exports = require("@commons-ui/testing-library/jest.setup");
diff --git a/apps/charterafrica/next.config.js b/apps/charterafrica/next.config.js
@@ -89,30 +89,12 @@ const nextConfig = {
 
     return config;
   },
-  sentry: {
-    // See the 'Configure Source Maps' and 'Configure Legacy Browser Support'
-    // sections below for information on the following options:
-    //   - disableServerWebpackPlugin
-    //   - disableClientWebpackPlugin
-    //   - hideSourceMaps
-    //   - widenClientFileUpload
-    //   - transpileClientSDK
-    hideSourceMaps: false,
-  },
-};
-
-const sentryWebpackPluginOptions = {
-  // Additional config options for the Sentry Webpack plugin. Keep in mind that
-  // the following options are set automatically, and overriding them is not
-  // recommended:
-  //   release, url, org, project, authToken, configFile, stripPrefix,
-  //   urlPrefix, include, ignore
-
-  silent: true, // Suppresses all logs
-  // For all available options, see:
-  // https://github.com/getsentry/sentry-webpack-plugin#options.
 };
 
-// Make sure adding Sentry options is the last code to run before exporting, to
-// ensure that your source maps include changes from all other Webpack plugins
-module.exports = withSentryConfig(nextConfig, sentryWebpackPluginOptions);
+module.exports = withSentryConfig(nextConfig, {
+  silent: true,
+  hideSourceMaps: true,
+  org: process.env.SENTRY_ORG,
+  authToken: process.env.SENTRY_AUTH_TOKEN,
+  project: process.env.SENTRY_PROJECT,
+});
diff --git a/apps/charterafrica/package.json b/apps/charterafrica/package.json
@@ -23,7 +23,7 @@
   },
   "scripts": {
     "build-server": "tsc --project tsconfig.server.json",
-    "build-next": "NEXT_BUILD=true pnpm pnpm build-server && NEXT_BUILD=true PAYLOAD_CONFIG_PATH=${PAYLOAD_CONFIG_PATH:-dist/payload.config.js} node dist/server.js",
+    "build-next": "NEXT_BUILD=true pnpm build-server && NEXT_BUILD=true PAYLOAD_CONFIG_PATH=${PAYLOAD_CONFIG_PATH:-dist/payload.config.js} node dist/server.js",
     "build-payload": "payload build",
     "dev": "NODE_OPTIONS='--inspect' ts-node --project tsconfig.server.json server.ts",
     "start": "PAYLOAD_CONFIG_PATH=${PAYLOAD_CONFIG_PATH:-dist/payload.config.js} NODE_ENV=${NODE_ENV:-production} node dist/server.js",
@@ -55,20 +55,21 @@
     "@payloadcms/db-mongodb": "^1.5.1",
     "@payloadcms/plugin-cloud-storage": "^1.1.2",
     "@payloadcms/plugin-nested-docs": "^1.0.12",
+    "@payloadcms/plugin-sentry": "^0.0.6",
     "@payloadcms/plugin-seo": "^2.3.2",
     "@payloadcms/richtext-slate": "^1.5.2",
     "@react-spring/web": "^9.7.3",
-    "@sentry/nextjs": "^7.86.0",
+    "@sentry/nextjs": "^8.10.0",
     "airtable": "^0.12.2",
     "dotenv": "^16.3.1",
     "express": "^4.18.2",
     "leaflet": "^1.9.4",
     "migrate-mongo": "^11.0.0",
-    "monaco-editor": "^0.44.0",
+    "monaco-editor": "^0.50.0",
     "next": "^14.1.1",
     "next-seo": "^6.4.0",
     "nodemailer-sendgrid": "^1.0.3",
-    "payload": "^2.18.3",
+    "payload": "^2.22.0",
     "prop-types": "^15.8.1",
     "qs": "^6.11.2",
     "react": "^18.2.0",
@@ -77,8 +78,8 @@
     "react-share": "^5.0.3",
     "react-swipeable-views-react-18-fix": "^0.14.1",
     "scheduler": "^0.23.0",
-    "sharp": "^0.33.2",
-    "slate": "^0.101.1",
+    "sharp": "^0.33.0",
+    "slate": "^0.103.0",
     "swr": "^2.2.4",
     "video.js": "^8.6.1",
     "videojs-youtube": "^3.0.1"

diff --git a/apps/charterafrica/payload.config.ts b/apps/charterafrica/payload.config.ts
@@ -5,6 +5,7 @@ import { s3Adapter } from "@payloadcms/plugin-cloud-storage/s3";
 import nestedDocs from "@payloadcms/plugin-nested-docs";
 import seo from "@payloadcms/plugin-seo";
 import dotenv from "dotenv";
+import { sentry } from "@payloadcms/plugin-sentry";
 import { buildConfig } from "payload/config";
 import { slateEditor } from "@payloadcms/richtext-slate";
 import { mongooseAdapter } from "@payloadcms/db-mongodb";
@@ -176,6 +177,9 @@ export default buildConfig({
         },
       },
     }),
+    sentry({
+      dsn: process?.env?.NEXT_PUBLIC_SENTRY_DSN,
+    }),
     seo({
       collections: ["news", "pages", "research"],
       globals: ["settings"],

diff --git a/apps/charterafrica/sentry.edge.config.js b/apps/charterafrica/sentry.edge.config.js
@@ -5,7 +5,7 @@
 
 import * as Sentry from "@sentry/nextjs";
 
-const SENTRY_DSN = process.env.SENTRY_DSN || process.env.NEXT_PUBLIC_SENTRY_DSN;
+const SENTRY_DSN = process.env.NEXT_PUBLIC_SENTRY_DSN;
 
 Sentry.init({
   dsn: SENTRY_DSN,

diff --git a/apps/charterafrica/sentry.server.config.js b/apps/charterafrica/sentry.server.config.js
@@ -4,7 +4,7 @@
 
 import * as Sentry from "@sentry/nextjs";
 
-const SENTRY_DSN = process.env.SENTRY_DSN || process.env.NEXT_PUBLIC_SENTRY_DSN;
+const SENTRY_DSN = process.env.NEXT_PUBLIC_SENTRY_DSN;
 
 Sentry.init({
   dsn: SENTRY_DSN,

diff --git a/apps/charterafrica/turbo.json b/apps/charterafrica/turbo.json
@@ -19,6 +19,7 @@
         "NEXT_PUBLIC_LOCALES",
         "NEXT_PUBLIC_SENTRY_DSN",
         "NEXT_PUBLIC_SEO_DISABLED",
+        "NEXT_RUNTIME",
         "NODE_ENV",
         "NODE_OPTIONS",
         "PAYLOAD_CORS",
@@ -37,7 +38,9 @@
         "SENDGRID_API_KEY",
         "SENDGRID_FROM_EMAIL",
         "SENDGRID_FROM_NAME",
-        "SENTRY_DSN"
+        "SENTRY_AUTH_TOKEN",
+        "SENTRY_ORG",
+        "SENTRY_PROJECT"
       ]
     },
     "build-payload": {

diff --git a/apps/codeforafrica/.env b/apps/codeforafrica/.env
@@ -7,3 +7,7 @@ NEXT_PUBLIC_VERCEL_URL=${VERCEL_URL}
 NEXT_PUBLIC_APP_DIRECTORY="apps/codeforafrica/"
 NEXT_PUBLIC_GOOGLE_ANALYTICS_ID="G-QVY4THBKNT"
 MIGRATIONS_DIR=./migrations
+
+SENTRY_ENV=local
+SENTRY_ORG=code-for-africa
+SENTRY_PROJECT=codeforafrica
diff --git a/apps/codeforafrica/README.md b/apps/codeforafrica/README.md
@@ -7,7 +7,7 @@ This is the official cfa site
 First create `.env.local` file in the root directory of the project.
 
 ```bash
-cp  env.template .env.local
+cp env.template .env.local
 ```
 
 and modify the `.env.local` file according to your needs.
@@ -19,7 +19,7 @@ The default `.env` file is for the 'Publicly' visible environment variables.
 Then run the development server:
 
 ```bash
-pnpm  dev
+pnpm dev
 ```
 
 ## Debugging

diff --git a/apps/codeforafrica/env.template b/apps/codeforafrica/env.template
@@ -14,8 +14,14 @@ PAYLOAD_PUBLIC_PORT=3010
 PAYLOAD_SECRET=randomsecretkeythatyougenerateherethisisjustanexample
 MONGODB_URL=mongodb://root:rootpassword@localhost:27017/codeforafrica?authSource=admin
 
-#S3
+# S3
 S3_ACCESS_KEY_ID=
 S3_SECRET_ACCESS_KEY=
 S3_ACCESS_KEY_ID=
 
+# Sentry
+NEXT_PUBLIC_SENTRY_DSN=
+SENTRY_AUTH_TOKEN=
+SENTRY_ENV=
+SENTRY_ORG=
+SENTRY_PROJECT=
diff --git a/apps/codeforafrica/instrumentation.js b/apps/codeforafrica/instrumentation.js
@@ -0,0 +1,11 @@
+// Next.js requires this to be exported as register
+// eslint-disable-next-line import/prefer-default-export
+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");
+  }
+}
diff --git a/apps/codeforafrica/next.config.js b/apps/codeforafrica/next.config.js
@@ -1,11 +1,13 @@
 const path = require("path");
 
+const { withSentryConfig } = require("@sentry/nextjs");
+
 const PROJECT_ROOT = process.env.PROJECT_ROOT?.trim();
 const outputFileTracingRoot = PROJECT_ROOT
   ? path.resolve(__dirname, PROJECT_ROOT)
   : undefined;
 
-module.exports = {
+const nextConfig = {
   images: {
     domains: process.env.NEXT_PUBLIC_IMAGE_DOMAINS?.split(",")
       ?.map((d) => d.trim())
@@ -49,3 +51,11 @@ module.exports = {
     return config;
   },
 };
+
+module.exports = withSentryConfig(nextConfig, {
+  silent: true,
+  hideSourceMaps: true,
+  org: process.env.SENTRY_ORG,
+  authToken: process.env.SENTRY_AUTH_TOKEN,
+  project: process.env.SENTRY_PROJECT,
+});
diff --git a/apps/codeforafrica/package.json b/apps/codeforafrica/package.json
@@ -22,7 +22,7 @@
   },
   "scripts": {
     "build-server": "tsc --project tsconfig.server.json",
-    "build-next": "NEXT_BUILD=true pnpm pnpm build-server && NEXT_BUILD=true PAYLOAD_CONFIG_PATH=${PAYLOAD_CONFIG_PATH:-dist/payload.config.js} node dist/server.js",
+    "build-next": "NEXT_BUILD=true pnpm build-server && NEXT_BUILD=true PAYLOAD_CONFIG_PATH=${PAYLOAD_CONFIG_PATH:-dist/payload.config.js} node dist/server.js",
     "build-payload": "payload build",
     "start": "PAYLOAD_CONFIG_PATH=${PAYLOAD_CONFIG_PATH:-dist/payload.config.js} NODE_ENV=${NODE_ENV:-production} node dist/server.js",
     "dev": "NODE_OPTIONS='--inspect' ts-node --project tsconfig.server.json server.ts",
@@ -49,8 +49,10 @@
     "@payloadcms/db-mongodb": "^1.4.0",
     "@payloadcms/plugin-cloud-storage": "^1.1.1",
     "@payloadcms/plugin-nested-docs": "^1.0.9",
-    "@payloadcms/plugin-seo": "^1.0.15",
+    "@payloadcms/plugin-sentry": "^0.0.6",
+    "@payloadcms/plugin-seo": "^2.3.2",
     "@payloadcms/richtext-slate": "^1.4.0",
+    "@sentry/nextjs": "^8.10.0",
     "camelcase-keys": "^9.1.2",
     "dotenv": "^16.3.1",
     "express": "^4.18.2",
@@ -61,14 +63,14 @@
     "next": "^14.1.1",
     "next-seo": "^6.4.0",
     "nodemailer-sendgrid": "^1.0.3",
-    "payload": "^2.18.3",
+    "payload": "^2.22.0",
     "prop-types": "^15.8.1",
     "qs": "^6.11.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-share": "^5.0.3",
     "sharp": "^0.33.0",
-    "slate": "^0.101.1",
+    "slate": "^0.103.0",
     "swr": "^2.2.4"
   },
   "devDependencies": {

diff --git a/apps/codeforafrica/payload.config.ts b/apps/codeforafrica/payload.config.ts
@@ -7,6 +7,7 @@ import { webpackBundler } from "@payloadcms/bundler-webpack";
 import { CollectionConfig, GlobalConfig } from "payload/types";
 import { cloudStorage } from "@payloadcms/plugin-cloud-storage";
 import dotenv from "dotenv";
+import { sentry } from "@payloadcms/plugin-sentry";
 import seo from "@payloadcms/plugin-seo";
 import nestedDocs from "@payloadcms/plugin-nested-docs";
 import { s3Adapter } from "@payloadcms/plugin-cloud-storage/s3";
@@ -127,6 +128,9 @@ export default buildConfig({
         },
       },
     }),
+    sentry({
+      dsn: process?.env?.NEXT_PUBLIC_SENTRY_DSN,
+    }),
     seo({
       collections: ["pages", "posts"],
       globals: [],

diff --git a/apps/codeforafrica/sentry.client.config.js b/apps/codeforafrica/sentry.client.config.js
@@ -0,0 +1,14 @@
+// This file configures the initialization of Sentry on the browser.
+// The config you add here will be used whenever a page is visited.
+// https://docs.sentry.io/platforms/javascript/guides/nextjs/
+
+import * as Sentry from "@sentry/nextjs";
+
+const SENTRY_DSN = process.env.NEXT_PUBLIC_SENTRY_DSN;
+
+Sentry.init({
+  dsn: SENTRY_DSN,
+  // 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
+});
diff --git a/apps/codeforafrica/sentry.edge.config.js b/apps/codeforafrica/sentry.edge.config.js
@@ -0,0 +1,15 @@
+// This file configures the initialization of Sentry for edge features (middleware, edge routes, and so on).
+// The config you add here will be used whenever one of the edge features is loaded.
+// Note that this config is unrelated to the Verel Edge Runtime and is also required when running locally.
+// https://docs.sentry.io/platforms/javascript/guides/nextjs/
+
+import * as Sentry from "@sentry/nextjs";
+
+const SENTRY_DSN = process.env.NEXT_PUBLIC_SENTRY_DSN;
+
+Sentry.init({
+  dsn: SENTRY_DSN,
+  // 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
+});
diff --git a/apps/codeforafrica/sentry.server.config.js b/apps/codeforafrica/sentry.server.config.js
@@ -0,0 +1,14 @@
+// This file configures the initialization of Sentry on the server.
+// The config you add here will be used whenever the server handles a request.
+// https://docs.sentry.io/platforms/javascript/guides/nextjs/
+
+import * as Sentry from "@sentry/nextjs";
+
+const SENTRY_DSN = process.env.NEXT_PUBLIC_SENTRY_DSN;
+
+Sentry.init({
+  dsn: SENTRY_DSN,
+  // 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
+});