feat: sourcemaps + testing (#2366)

* feat: sourcemaps + testing

* feat: source map upload in CI

.circleci/config.yml

@@ -312,6 +312,16 @@ workflows:
           requires:
             - test-viewer
 
+      - frontend-2-sourcemaps:
+          context:
+            - datadog-sourcemaps-publish
+          filters: *filters-publish
+          requires:
+            - get-version
+            - docker-build-frontend-2
+            - test-frontend-2
+            - publish-helm-chart
+
 jobs:
   get-version:
     docker: &docker-base-image
@@ -1030,3 +1040,38 @@ jobs:
           environment:
             CLOUDFLARE_PAGES_PROJECT_NAME: viewer
             VIEWER_SANDBOX_DIR_PATH: packages/viewer-sandbox
+
+  frontend-2-sourcemaps:
+    docker: *docker-node-image
+    working_directory: *work-dir
+    steps:
+      - checkout
+      - attach_workspace:
+          at: /tmp/ci/workspace
+      - run: cat workspace/env-vars >> $BASH_ENV
+      - restore_cache:
+          name: Restore Yarn Package Cache
+          keys:
+            - yarn-packages-server-{{ checksum "yarn.lock" }}
+      - run:
+          name: Install Dependencies
+          command: yarn
+      - run:
+          name: Install Dependencies v2 (.node files missing bug)
+          command: yarn
+      - save_cache:
+          name: Save Yarn Package Cache
+          key: yarn-packages-server-{{ checksum "yarn.lock" }}
+          paths:
+            - .yarn/cache
+            - .yarn/unplugged
+      - run:
+          name: Build public packages
+          command: yarn build:public
+      - run:
+          name: Build FE2
+          command: yarn build:sourcemaps
+          working_directory: 'packages/frontend-2'
+      - run:
+          name: Upload source maps
+          command: ./.circleci/publish_fe2_sourcemaps.sh

.circleci/publish_fe2_sourcemaps.sh

@@ -0,0 +1,24 @@
+#!/usr/bin/env bash
+set -eo pipefail
+
+GIT_ROOT="$(git rev-parse --show-toplevel)"
+SCRIPT_DIR=$( cd -- "$( dirname -- "${BASH_SOURCE[0]}" )" &> /dev/null && pwd )
+# shellcheck disable=SC1090,SC1091
+source "${SCRIPT_DIR}/common.sh"
+
+FE2_DIR_PATH="${FE2_DIR_PATH:-"packages/frontend-2"}"
+FE2_DATADOG_SERVICE="${FE2_DATADOG_SERVICE:-"web-app-2"}"
+DATADOG_SITE="${DATADOG_SITE:-"datadoghq.eu"}"
+
+
+if [[ -z "${DATADOG_API_KEY}" ]]; then
+  echo "DATADOG_API_KEY is not set"
+  exit 1
+fi
+
+pushd "${GIT_ROOT}/${FE2_DIR_PATH}"
+yarn datadog-ci sourcemaps upload ./.output/public/_nuxt \
+--service="${FE2_DATADOG_SERVICE}" \
+--release-version="${IMAGE_VERSION_TAG}" \
+--minified-path-prefix=/_nuxt \
+popd

packages/frontend-2/components/projects/Dashboard.vue

@@ -18,6 +18,9 @@
     </div>
 
     <PromoBannersWrapper v-if="promoBanners.length" :banners="promoBanners" />
+    <div v-if="showErrorTest" class="w-full">
+      <FormButton @click="testError">Test error</FormButton>
+    </div>
 
     <div
       v-if="!showEmptyState"
@@ -131,6 +134,7 @@ const promoBanners = ref<PromoBanner[]>([
   }
 ])
 
+const route = useRoute()
 const { activeUser, isGuest } = useActiveUser()
 const { triggerNotification } = useGlobalToast()
 const areQueriesLoading = useQueryLoading()
@@ -156,6 +160,8 @@ const { onResult: onUserProjectsUpdate } = useSubscription(
   onUserProjectsUpdateSubscription
 )
 
+const showErrorTest = computed(() => route.query.showErrorButton === '1')
+
 const projects = computed(() => projectsPanelResult.value?.activeUser?.projects)
 const showEmptyState = computed(() => {
   const isFiltering =
@@ -334,4 +340,8 @@ const clearSearch = () => {
   selectedRoles.value = []
   updateSearchImmediately()
 }
+
+const testError = () => {
+  throw new Error('what duhh hell')
+}
 </script>

packages/frontend-2/nuxt.config.ts

@@ -13,15 +13,19 @@ const buildOutputFileName = (chunkName: string) =>
 const {
   SPECKLE_SERVER_VERSION,
   NUXT_PUBLIC_LOG_LEVEL = 'info',
-  NUXT_PUBLIC_LOG_PRETTY = false
+  NUXT_PUBLIC_LOG_PRETTY = false,
+  BUILD_SOURCEMAPS = 'false'
 } = process.env
 
 const featureFlags = Environment.getFeatureFlags()
 
 const isLogPretty = ['1', 'true', true, 1].includes(NUXT_PUBLIC_LOG_PRETTY)
+const buildSourceMaps = ['1', 'true', true, 1].includes(BUILD_SOURCEMAPS)
 
 // https://v3.nuxtjs.org/api/configuration/nuxt.config
 export default defineNuxtConfig({
+  // sourcemaps in prod only needed for datadog and should be deleted after (or at least made inaccessible?)
+  sourcemap: !!buildSourceMaps,
   typescript: {
     shim: false,
     strict: true

packages/frontend-2/package.json

@@ -5,7 +5,7 @@
   "private": true,
   "scripts": {
     "build": "nuxt build",
-    "build:prod": "NODE_ENV=production yarn build",
+    "build:sourcemaps": "BUILD_SOURCEMAPS=true yarn build",
     "dev:nuxt": "nuxt dev",
     "dev:app": "concurrently \"nuxt dev\" \"yarn gqlgen:watch\"",
     "dev": "yarn dev:app",
@@ -85,6 +85,7 @@
     "@babel/preset-env": "^7.19.4",
     "@babel/preset-react": "^7.18.6",
     "@babel/preset-typescript": "^7.18.6",
+    "@datadog/datadog-ci": "^2.37.0",
     "@eslint/config-inspector": "^0.4.10",
     "@graphql-codegen/cli": "^2.13.6",
     "@graphql-codegen/client-preset": "^1.2.5",