feat(dd): add RUM + trace on studio (#818)

* feat: add dd rum

* chore: add tracer

* feat: add env to front

* fix: env and version

* feat: update tag

* chore: add vapt

* fix: deps

* chore: add env

Author: seaerchin

.github/workflows/aws_deploy.yml

@@ -158,7 +158,7 @@ jobs:
           tags: |
             ${{ env.ECR_REGISTRY }}/${{ env.ECR_REPOSITORY }}:${{ env.IMAGE_TAG }}
           build-args: |
-            ENV=${{env.ENV}}
+            NEXT_PUBLIC_APP_ENV=${{ inputs.environment }}
             NEXT_PUBLIC_APP_URL=${{ inputs.app-url }}
             NEXT_PUBLIC_APP_NAME=${{ inputs.app-name }}
             NEXT_PUBLIC_APP_VERSION=${{ inputs.app-version }}
@@ -243,7 +243,7 @@ jobs:
           codedeploy-deployment-group: ${{ inputs.codedeploy-deployment-group }}
 
       # - name: Upload sourcemaps to Datadog
-      #   if: ${{ env.DATADOG_API_KEY != '' }}
+      #   if: ${{ env.DD_API_KEY != '' }}
       #   env:
       #     IMAGE_TAG: ${{ env.LOCAL_IMAGE_TAG }}
       #   shell: bash

.github/workflows/deploy_production.yml

@@ -34,7 +34,7 @@ jobs:
       ecs-task-exec-role: studio-production-ecs-task-exec-role
       app-url: "https://studio.isomer.gov.sg"
       app-name: "Isomer Studio"
-      app-version: ${{ github.sha }}
+      app-version: ${{ github.event.release.tag_name }}
       app-enable-sgid: false
       app-s3-region: "ap-southeast-1"
       app-s3-assets-bucket-name: "isomer-next-infra-prod-assets-private-a319984"

apps/studio/.env.test

@@ -6,8 +6,10 @@ SESSION_SECRET=random_session_secret_that_is_at_least_32_characters
 NEXT_PUBLIC_APP_NAME="Isomer Studio (TEST)"
 NEXT_PUBLIC_S3_ASSETS_DOMAIN_NAME=user-content.example.com
 NEXT_PUBLIC_S3_ASSETS_BUCKET_NAME=assets-bucket
+NEXT_PUBLIC_APP_ENV='test'
 
 # Used for E2E testing
 DATABASE_URL=postgres://root:root@localhost:5432/test
 
-PINO_LOG_LEVEL=silent
+PINO_LOG_LEVEL=silent
+

apps/studio/Dockerfile

@@ -1,5 +1,8 @@
 FROM node:22-alpine AS base
 
+ARG NEXT_PUBLIC_APP_ENV
+ENV NEXT_PUBLIC_APP_ENV=$NEXT_PUBLIC_APP_ENV
+
 ARG NEXT_PUBLIC_APP_URL
 ENV NEXT_PUBLIC_APP_URL=$NEXT_PUBLIC_APP_URL
 

apps/studio/package.json

@@ -57,6 +57,7 @@
     "@chakra-ui/styled-system": "^2.9.2",
     "@chakra-ui/theme-tools": "^2.1.2",
     "@chakra-ui/utils": "^2.0.15",
+    "@datadog/browser-rum": "^5.29.1",
     "@fontsource/ibm-plex-mono": "^5.0.13",
     "@formkit/auto-animate": "^0.8.2",
     "@growthbook/growthbook": "^1.2.0",
@@ -112,6 +113,7 @@
     "ajv": "^8.16.0",
     "date-fns": "^4.1.0",
     "date-fns-tz": "^3.1.3",
+    "dd-trace": "^5.24.0",
     "flat": "^6.0.1",
     "fuzzysort": "^2.0.4",
     "inter-ui": "^4.0.2",

apps/studio/src/env.mjs

@@ -22,6 +22,13 @@ const s3Schema = z.object({
  */
 const client = z
   .object({
+    NEXT_PUBLIC_APP_ENV: z.enum([
+      "development",
+      "staging",
+      "production",
+      "vapt",
+      "test",
+    ]),
     NEXT_PUBLIC_ENABLE_SGID: coerceBoolean.default("false"),
     NEXT_PUBLIC_APP_URL: z.string().url().optional(),
     NEXT_PUBLIC_APP_NAME: z.string().default("Isomer Studio"),
@@ -124,6 +131,7 @@ const processEnv = {
   SGID_PRIVATE_KEY: process.env.SGID_PRIVATE_KEY,
   SGID_REDIRECT_URI: process.env.SGID_REDIRECT_URI,
   // Client-side env vars
+  NEXT_PUBLIC_APP_ENV: process.env.NEXT_PUBLIC_APP_ENV,
   NEXT_PUBLIC_APP_NAME: process.env.NEXT_PUBLIC_APP_NAME,
   NEXT_PUBLIC_APP_VERSION:
     process.env.NEXT_PUBLIC_APP_VERSION ??

apps/studio/src/pages/_app.tsx

@@ -5,6 +5,7 @@ import "../styles/editor/editorStyles.scss"
 
 import type { AppProps, AppType } from "next/app"
 import { Skeleton, Stack } from "@chakra-ui/react"
+import { datadogRum } from "@datadog/browser-rum"
 import { GrowthBook } from "@growthbook/growthbook"
 import { GrowthBookProvider } from "@growthbook/growthbook-react"
 import Intercom from "@intercom/messenger-js-sdk"
@@ -28,6 +29,23 @@ type AppPropsWithAuthAndLayout = AppProps & {
   Component: NextPageWithLayout
 }
 
+datadogRum.init({
+  applicationId: "32c64617-51e3-4a6e-a977-ad113021ffae",
+  clientToken: "pub89baaf356268edcb9ed95847d7c5d679",
+  // `site` refers to the Datadog site parameter of your organization
+  // see https://docs.datadoghq.com/getting_started/site/
+  site: "datadoghq.com",
+  service: "isomer-next",
+  env: env.NEXT_PUBLIC_APP_ENV,
+  version: env.NEXT_PUBLIC_APP_VERSION,
+  sessionSampleRate: 100,
+  sessionReplaySampleRate: 100,
+  trackUserInteractions: true,
+  trackResources: true,
+  trackLongTasks: true,
+  defaultPrivacyLevel: "mask-user-input",
+})
+
 // Create a GrowthBook instance
 const gb = new GrowthBook({
   apiHost: "https://cdn.growthbook.io",

apps/studio/src/server/modules/_app.ts

@@ -1,6 +1,8 @@
 /**
  * This file contains the root router of your tRPC-backend
  */
+import "./tracer"
+
 import { publicProcedure, router } from "../trpc"
 import { assetRouter } from "./asset/asset.router"
 import { authRouter } from "./auth/auth.router"

apps/studio/src/server/modules/tracer.ts

@@ -0,0 +1,4 @@
+import tracer from "dd-trace"
+
+tracer.init() // initialized in a different file to avoid hoisting.
+export default tracer