feat: add datadog js monitoring to app js

The `APP_VERSION` needs to be the same for in the javascript initialisation AND the command line tool that uploads the sourcemaps into datadog. Using an evironment var allows us to set the `APP_VERSION` variable in the build process, use it in the command line and pass it into the app js.
citizensadvice · Feb 5, 2025 · 11293af · 11293af
1 parent bbd79ab
commit 11293af
Show file tree

Hide file tree

Showing 8 changed files with 48 additions and 1 deletion.
diff --git a/app/javascript/appliance-calculator.js b/app/javascript/appliance-calculator.js
@@ -1,7 +1,11 @@
 import initErrorSummary from '@citizensadvice/design-system/lib/error-summary';
 import initDismissNotice from "./modules/last_added_appliance";
+import initDatadog from "./modules/datadog";
 
 try {
+    // Initialise datadog monitoring
+    initDatadog();
+
     initErrorSummary();
     window.parent.postMessage(
     {

diff --git a/app/javascript/application.js b/app/javascript/application.js
@@ -2,9 +2,13 @@
 import initHeader from '@citizensadvice/design-system/lib/header';
 import initGreedyNav from "./modules/greedy-nav";
 import initSupplierTableButton from "./modules/supplier-table";
+import initDatadog from "./modules/datadog";
 
 try {
-  // Initialise design-system modules first
+  // Initialise datadog monitoring
+  initDatadog();
+
+  // Initialise design-system modules
   initHeader();
   initGreedyNav();
 
@@ -14,3 +18,5 @@ try {
   document.querySelector("html").classList.add("no-js");
   throw error;
 }
+
+throw new Error("This is a deliberate error from the energy apps javascript")
diff --git a/app/javascript/modules/datadog.js b/app/javascript/modules/datadog.js
@@ -0,0 +1,20 @@
+import { datadogLogs } from '@datadog/browser-logs'
+
+const initDatadog = () => {
+    const ddEnv = window.location.hostname === 'www.citizensadvice.org.uk' ? "prod" : "dev";
+    const appVersion = document.querySelector('meta[name="app-version"]').getAttribute('content');
+
+    if (ddEnv && appVersion) {
+        datadogLogs.init({
+            clientToken: 'pub32a7538113d7910e4304b8aa13ff4521',
+            site: 'datadoghq.eu',
+            forwardErrorsToLogs: true,
+            sessionSampleRate: 100,
+            service: 'energy-apps',
+            env: ddEnv,
+            version: appVersion
+        });
+    }
+}
+
+export default initDatadog;
diff --git a/app/views/layouts/appliance_calculator.html.haml b/app/views/layouts/appliance_calculator.html.haml
@@ -9,6 +9,8 @@
       document.querySelector('html').classList.remove('no-js');
 
     = stylesheet_link_tag "appliance-calculator"
+    = render "shared/head_datadog"
+
 
   %body
     = yield

diff --git a/app/views/layouts/application.html.haml b/app/views/layouts/application.html.haml
@@ -18,6 +18,7 @@
     = render "shared/head_analytics"
 
     = stylesheet_link_tag "energy-csr-table"
+    = render "shared/head_datadog"
 
   %body{ class: ("cas" if scotland?) }
     = render "shared/google_tag_manager_no_script"

diff --git a/app/views/shared/_head_datadog.haml b/app/views/shared/_head_datadog.haml
@@ -0,0 +1 @@
+%meta{ name: "app-version", content: ENV.fetch("APP_VERSION", nil) }
diff --git a/package.json b/package.json
@@ -3,6 +3,7 @@
   "private": "true",
   "dependencies": {
     "@citizensadvice/design-system": "^6.2.0",
+    "@datadog/browser-logs": "^6.1.0",
     "esbuild": "^0.24.2",
     "eslint-plugin-import": "^2.31.0",
     "sass": "^1.83.4"

diff --git a/yarn.lock b/yarn.lock
@@ -53,6 +53,18 @@
   resolved "https://registry.yarnpkg.com/@csstools/selector-specificity/-/selector-specificity-5.0.0.tgz#037817b574262134cabd68fc4ec1a454f168407b"
   integrity sha512-PCqQV3c4CoVm3kdPhyeZ07VmBRdH2EpMFA/pd9OASpOEC3aXNGoqPDAZ80D0cLpMBxnmk0+yNhGsEx31hq7Gtw==
 
+"@datadog/browser-core@6.1.0":
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/@datadog/browser-core/-/browser-core-6.1.0.tgz#789e367b4a5a692d5fc462d868031ca6f371cbe0"
+  integrity sha512-GQV4zkT1k6vdlFaSqRQ9oh4nPJ8aE47mw9gpD1bGIaxdnEDNtyJXo/KI17arwJBEznhcGf7pHI+2wLWx5SfQ8w==
+
+"@datadog/browser-logs@^6.1.0":
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/@datadog/browser-logs/-/browser-logs-6.1.0.tgz#40f7255f992e31f0eb9832ed584cd92159fc98b5"
+  integrity sha512-yk8eNrdhaU2BuD6ffYpjgJxGbdazA06mWqzsFvzJuQUu65E9jjv7154IRN2HCAqR4TCjJ3o8cfB11TyEuHIUpg==
+  dependencies:
+    "@datadog/browser-core" "6.1.0"
+
 "@dual-bundle/import-meta-resolve@^4.1.0":
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/@dual-bundle/import-meta-resolve/-/import-meta-resolve-4.1.0.tgz#519c1549b0e147759e7825701ecffd25e5819f7b"
-Original file line number
+Diff line change
@@ Expand Up / @@ -9,6 +9,8 @@ @@
           document.querySelector('html').classList.remove('no-js');
         = stylesheet_link_tag "appliance-calculator"
+        = render "shared/head_datadog"
       %body
         = yield
@@ Expand Down @@
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		%meta{ name: "app-version", content: ENV.fetch("APP_VERSION", nil) }