ui: config sentry

* Split react-formule from bundle in order to have <20MB sourcemaps

Signed-off-by: Miguel Garcia Garcia <[email protected]>

.github/workflows/harbour-build-ui.yml

@@ -22,6 +22,10 @@ jobs:
         run: echo "BRANCH_NAME=$(echo ${GITHUB_REF#refs/heads/})" >> $GITHUB_OUTPUT
         id: get_branch
 
+      - name: Extract short commit SHA
+        id: get_short_sha
+        run: echo "SENTRY_RELEASE=$(git rev-parse --short $GITHUB_SHA)" >> $GITHUB_OUTPUT
+
       - id: build-ui
         name: Build and export
         uses: cern-sis/gh-workflows/.github/actions/[email protected]
@@ -35,10 +39,8 @@ jobs:
           username: ${{ secrets.HARBOR_USERNAME }}
           password: ${{ secrets.HARBOR_PASSWORD }}
           build-args: |
-            BRANCH_NAME=${{ steps.get_branch.outputs.BRANCH_NAME }}
-            PIWIK_ENV=${{ steps.get_branch.outputs.BRANCH_NAME }}
-            CAP_PIWIK_URL=${{ secrets.CAP_PIWIK_URL }}
-            CAP_PIWIK_SITEID_DEV=${{ secrets.CAP_PIWIK_SITEID_DEV }}
-            CAP_PIWIK_SITEID_PROD=${{ secrets.CAP_PIWIK_SITEID_PROD }}
-            CAP_PIWIK_SITEID_QA=${{ secrets.CAP_PIWIK_SITEID_QA }}
-            CAP_PIWIK_SITEID_TEST=${{ secrets.CAP_PIWIK_SITEID_TEST }}
+            SENTRY_URL=${{ secrets.CAP_SENTRY_URL }}
+            SENTRY_ORG=${{ secrets.CAP_SENTRY_ORG }}
+            SENTRY_PROJECT=${{ secrets.CAP_SENTRY_PROJECT }}
+            SENTRY_AUTH_TOKEN=${{ secrets.CAP_SENTRY_AUTH_TOKEN }}
+            SENTRY_RELEASE=${{ steps.get_short_sha.outputs.SENTRY_RELEASE }}

docker/harbour/ui/Dockerfile

@@ -1,60 +1,35 @@
-FROM node:18-alpine as build
+FROM node:18-alpine AS build
 
 RUN apk add --no-cache git
 
 ENV WORKING_DIR=/tmp/cap
 
 WORKDIR $WORKING_DIR
 
-ARG PIWIK_ENV=dev
-ARG ENABLE_E2E
+ARG SENTRY_URL
+ARG SENTRY_ORG
+ARG SENTRY_PROJECT
+ARG SENTRY_AUTH_TOKEN
+ARG SENTRY_RELEASE
 
-ARG CAP_PIWIK_URL
-ARG CAP_PIWIK_SITEID_DEV
-ARG CAP_PIWIK_SITEID_PROD
-ARG CAP_PIWIK_SITEID_QA
-ARG CAP_PIWIK_SITEID_TEST
-
-ARG PIWIK_URL
-ARG PIWIK_SITEID_DEV
-ARG PIWIK_SITEID_PROD
-ARG PIWIK_SITEID_QA
-ARG PIWIK_SITEID_TEST
+ENV SENTRY_URL=$SENTRY_URL
+ENV SENTRY_ORG=$SENTRY_ORG
+ENV SENTRY_PROJECT=$SENTRY_PROJECT
+ENV SENTRY_AUTH_TOKEN=$SENTRY_AUTH_TOKEN
+ENV VITE_SENTRY_RELEASE=$SENTRY_RELEASE
 
 RUN mkdir -p ui/cap-react
-RUN echo "PIWIK_URL=$CAP_PIWIK_URL" >> ui/cap-react/.env
-RUN echo "ENABLE_E2E=$ENABLE_E2E" >> ui/cap-react/.env
-
-RUN if [[ $PIWIK_ENV == "dev" ]]; then \
-        echo "PIWIK_SITEID=$CAP_PIWIK_SITEID_DEV" >> ui/cap-react/.env; \
-    fi
-
-RUN if [[ $PIWIK_ENV == "prod" ]]; then \
-        echo "PIWIK_SITEID=$CAP_PIWIK_SITEID_PROD" >> ui/cap-react/.env; \
-    fi
-
-RUN if [[ $PIWIK_ENV == "qa" ]]; then \
-        echo "PIWIK_SITEID=$CAP_PIWIK_SITEID_QA" >> ui/cap-react/.env; \
-    fi
-
-RUN if [[ $PIWIK_ENV == "test" ]]; then \
-        echo "PIWIK_SITEID=$CAP_PIWIK_SITEID_TEST" >> ui/cap-react/.env; \
-    fi
-
-
-RUN echo "=========================="
-RUN echo $CAP_PIWIK_SITEID_TEST 
-RUN echo $PIWIK_SITEID_TEST
-RUN echo "=========================="
-RUN cat ui/cap-react/.env
-RUN echo "=========================="
 
 WORKDIR $WORKING_DIR/ui
 
 # build CAP UI
 COPY ./ui ${WORKING_DIR}/ui
 RUN yarn install
 RUN yarn workspace cap-react build
+WORKDIR ${WORKING_DIR}/ui/cap-react
+RUN yarn sentry:create-release
+RUN yarn sentry:sourcemaps
+RUN yarn sentry:finalize-release
 
 # build general docs
 COPY ./docs ${WORKING_DIR}/docs
@@ -81,7 +56,8 @@ ENV WORKING_DIR=/tmp/cap
 ENV NGINX_HTML_DIR=/usr/share/nginx/html/
 RUN mkdir -p $NGINX_HTML_DIR
 
-COPY ./docker/nginx/nginx.conf /etc/nginx/nginx.conf
+# Exclude source maps from the final image
+COPY --exclude=*.map ./docker/nginx/nginx.conf /etc/nginx/nginx.conf
 COPY --from=build ${WORKING_DIR}/ui/cap-react/dist/ $NGINX_HTML_DIR
 COPY --from=build ${WORKING_DIR}/docs/_book/ $NGINX_HTML_DIR/docs/general
 COPY --from=build ${WORKING_DIR}/cap-api-docs/web_deploy/ $NGINX_HTML_DIR/docs/api

ui/cap-react/index.html

@@ -5,6 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta charset="utf-8"/>
     <link rel="icon" type="image/png" href="./favicon.ico">
+    <script type="text/javascript" src="/config.js"></script>
     <title>CERN Analysis Preservation</title>
   </head>
   <body>

ui/cap-react/package.json

@@ -22,6 +22,9 @@
     "test:e2e:run": "cypress run --headless --browser chrome",
     "tests": "start-server-and-test start http://localhost:3000 test:e2e:run",
     "open:cover": "npm run test:cover && opn ./coverage/lcov-report/index.html",
+    "sentry:create-release": "sentry-cli releases new $VITE_SENTRY_RELEASE",
+    "sentry:sourcemaps": "sentry-cli releases files $VITE_SENTRY_RELEASE upload-sourcemaps dist",
+    "sentry:finalize-release": "sentry-cli releases finalize $VITE_SENTRY_RELEASE",
     "dev": "vite",
     "dev:docker": "DOCKER=true vite",
     "preview": "vite preview"
@@ -73,6 +76,7 @@
     "vite": "^5.0.2"
   },
   "devDependencies": {
+    "@sentry/cli": "2.38.2",
     "autoprefixer": "7.1.4",
     "chalk": "2.0.1",
     "concurrently": "3.5.0",

ui/cap-react/public/config.js

@@ -0,0 +1,11 @@
+(() => {
+  const CONFIG = {
+    ENV: null,
+    PIWIK_URL: null,
+    PIWIK_SITE_ID: null,
+    SENTRY_UI_DSN: null,
+    ENABLE_E2E: false,
+  };
+
+  Object.defineProperty(window, "CONFIG", { value: Object.freeze(CONFIG) });
+})();

ui/cap-react/src/antd/Root.js

@@ -5,12 +5,16 @@ import App from "../antd/App";
 import { ConfigProvider } from "antd";
 import { MatomoProvider, createInstance } from "@datapunt/matomo-tracker-react";
 import { theme } from "./utils/theme";
+import { getConfigFor } from "../config";
+
+const PIWIK_URL = getConfigFor("PIWIK_URL");
+const PIWIK_SITE_ID = getConfigFor("PIWIK_SITE_ID");
 
 export const matomoInstance =
-  process.env.PIWIK_URL && process.env.PIWIK_SITEID
+  PIWIK_URL && PIWIK_SITE_ID
     ? createInstance({
-        urlBase: process.env.PIWIK_URL,
-        siteId: process.env.PIWIK_SITEID,
+        urlBase: PIWIK_URL,
+        siteId: PIWIK_SITE_ID,
       })
     : null;
 

ui/cap-react/src/antd/drafts/CreateForm/CreateForm.js

@@ -1,6 +1,7 @@
 import { useEffect } from "react";
 import PropTypes from "prop-types";
 import { Space, Form, Input, Radio } from "antd";
+import { getConfigFor } from "../../../config";
 const BLOCK_DEPOSIT_GROUPS = ["cms-analysis"];
 const CreateForm = ({
   contentTypes,
@@ -17,7 +18,7 @@ const CreateForm = ({
   }, []);
 
   let contentType = contentTypes;
-  if (!(process.env.NODE_ENV === "development" || process.env.ENABLE_E2E)) {
+  if (!(process.env.NODE_ENV === "development" || getConfigFor("ENABLE_E2E"))) {
     contentType =
       contentTypes &&
       contentTypes.filter(

ui/cap-react/src/antd/partials/Header/Menu/Menu.js

@@ -4,6 +4,7 @@ import { WELCOME } from "../../../routes";
 import { LoginOutlined } from "@ant-design/icons";
 import LoginForm from "../LoginForm";
 import { useState } from "react";
+import { getConfigFor } from "../../../../config";
 
 const SimpleMenu = ({
   loginLocalUser,
@@ -30,7 +31,7 @@ const SimpleMenu = ({
     },
   ];
 
-  (process.env.NODE_ENV == "development" || process.env.ENABLE_E2E) &&
+  (process.env.NODE_ENV == "development" || getConfigFor("ENABLE_E2E")) &&
     menuItems.unshift({
       key: "localLogin",
       label: (

ui/cap-react/src/config.js

@@ -1,8 +1,13 @@
-const config = {
-  project: {
-    name: "CERN Analysis Preservation",
-    api: "https://pammbp.cern.ch:5000"
-  }
-};
+import * as Sentry from "@sentry/react";
 
-export default config;
+export function getConfigFor(configKey, notSetValue = null) {
+  try {
+    return window.CONFIG[configKey] != null
+      ? window.CONFIG[configKey]
+      : notSetValue;
+  } catch (error) {
+    Sentry.captureException(error);
+    console.error(error); // eslint-disable-line no-console
+    return notSetValue;
+  }
+}

ui/cap-react/src/index.js

@@ -2,12 +2,20 @@ import { createRoot } from "react-dom/client";
 import store, { history } from "./store/configureStore";
 import Root from "./antd/Root";
 import * as Sentry from "@sentry/react";
+import { getConfigFor } from "./config";
 
 // import "antd/dist/reset.css";
 import "./style.less";
 
-if (process.env.SENTRY_UI_DSN) {
-  Sentry.init({ dsn: process.env.SENTRY_UI_DSN });
+const SENTRY_UI_DSN = getConfigFor("SENTRY_UI_DSN");
+const ENV = getConfigFor("ENV");
+
+if (SENTRY_UI_DSN && ENV) {
+  Sentry.init({
+    dsn: SENTRY_UI_DSN,
+    environment: ENV,
+    release: import.meta.env.VITE_SENTRY_RELEASE,
+  });
 }
 
 const container = document.getElementById("app");

ui/cap-react/vite.config.js

@@ -43,6 +43,14 @@ export default defineConfig(({ mode }) => {
       commonjsOptions: {
         transformMixedEsModules: true,
       },
+      sourcemap: true, // For Sentry
+      rollupOptions: {
+        output: {
+          manualChunks: {
+            "react-formule": ["react-formule"],
+          },
+        },
+      },
     },
     // Allows writing JSX in .js files
     esbuild: {