enhancement: adds datadog RUM and logs to website (#8871)

* initial commit.

* Updates

* RUM config

* Adds DD logs config

* Moves config to config.toml file, rename vars

* Testing logger

Signed-off-by: bgdeutsch <bgdeutsch@gmail.com>

* Revert logger testing.

Signed-off-by: bgdeutsch <bgdeutsch@gmail.com>

* Testing JS errors.

Signed-off-by: bgdeutsch <bgdeutsch@gmail.com>

* Refactor to use hugo for client-side env.

Signed-off-by: bgdeutsch <bgdeutsch@gmail.com>

* Remove console.log statement.

Signed-off-by: bgdeutsch <bgdeutsch@gmail.com>

* File should end in a newline.

Signed-off-by: bgdeutsch <bgdeutsch@gmail.com>

website/assets/js/dd-browser-logs-rum.js

@@ -0,0 +1,34 @@
+{{ $latest := index site.Data.docs.versions 0 }}
+{{ $ddConfig := site.Params.datadog_config }}
+{{ $env := hugo.Environment }}
+
+import { datadogRum } from '@datadog/browser-rum';
+import { datadogLogs } from '@datadog/browser-logs';
+
+const env = '{{ $env }}';
+
+if (datadogRum) {
+  if (env === 'preview' || env === 'production') {
+    datadogRum.init({
+      applicationId: '{{ $ddConfig.application_id }}',
+      clientToken: '{{ $ddConfig.client_token }}',
+      env,
+      service: '{{ $ddConfig.service_name }}',
+      version: '{{ $latest }}',
+      trackInteractions: true
+    });
+  }
+}
+
+if (datadogLogs) {
+  if (env === 'preview' || env === 'production') {
+    datadogLogs.init({
+      clientToken: '{{ $ddConfig.client_token }}',
+      forwardErrorsToLogs: true,
+      env,
+      service: '{{ $ddConfig.service_name }}',
+      version: '{{ $latest }}'
+    })
+  }
+}
+

website/config.toml

@@ -85,6 +85,12 @@ twitter_handle = "vectordotdev"
 github_repo = "timberio/vector"
 discord = "https://chat.vector.dev"
 
+# Datadog configuration
+[params.datadog_config]
+application_id = "0b95923b-b06d-445b-893f-a861e93d6ea3"
+client_token = "puba5f23a97d613091ae2ca8c0f4a135af4"
+service_name = "vector"
+
 ## Menus
 
 # Main page doc links

website/layouts/partials/javascript/head.html

@@ -1,6 +1,12 @@
-{{ $appJs   := "js/app.js"}}
-{{ $appJsOpts := dict "targetPath" $appJs "minify" true }}
-{{ $app  := resources.Get $appJs | resources.ExecuteAsTemplate $appJs . | js.Build $appJsOpts }}
+{{ $appJsPath := "js/app.js" }}
+{{ $ddLogsRumPath := "js/dd-browser-logs-rum.js" }}
+{{ $appJsOptions := dict "targetPath" $appJsPath "minify" true }}
+{{ $ddLogsRumJsOptions := dict "targetPath" $ddLogsRumPath "minify" true }}
+
+{{ $app := resources.Get $appJsPath | resources.ExecuteAsTemplate $appJsPath . | js.Build $appJsOptions }}
+{{ $ddLogsRum := resources.Get $ddLogsRumPath | resources.ExecuteAsTemplate $ddLogsRumPath . | js.Build $ddLogsRumJsOptions }}
+
+<script type="text/javascript" src="{{ $ddLogsRum.RelPermalink }}" integrity="{{ $ddLogsRum.Data.Integrity }}"></script>
 <script type="text/javascript" src="{{ $app.RelPermalink }}" integrity="{{ $app.Data.Integrity }}"></script>
 
 {{/* We have a few Ionicons icons scattered throughout */}}

website/package.json

@@ -14,6 +14,8 @@
     "@babel/core": "^7.14.6",
     "@babel/preset-env": "^7.14.5",
     "@babel/preset-typescript": "^7.14.5",
+    "@datadog/browser-logs": "^3.1.3",
+    "@datadog/browser-rum": "^3.1.2",
     "@emotion/babel-preset-css-prop": "^11.2.0",
     "@fullhuman/postcss-purgecss": "^4.0.3",
     "@iarna/toml": "^2.2.5",

website/yarn.lock

@@ -1153,6 +1153,45 @@
     "@babel/helper-validator-identifier" "^7.14.8"
     to-fast-properties "^2.0.0"
 
+"@datadog/browser-core@3.1.2":
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/@datadog/browser-core/-/browser-core-3.1.2.tgz#f76339cbc07d44ea358044d6380f441f5ec9a3e4"
+  integrity sha512-TVw6AEM39UgBm9wDAQJ/t1BurxfRvZY1TaKZiGOm2OQIFjQgdlbB1BXVZru/OcR3/kGA1JMQ6Nhh2cERDLpNHw==
+  dependencies:
+    tslib "^1.10.0"
+
+"@datadog/browser-core@3.1.3":
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/@datadog/browser-core/-/browser-core-3.1.3.tgz#522507c6107def4b4587e0056f704fbb70d0c5c1"
+  integrity sha512-ZbMl+ZAYPdegWly3BKyCi2NRU7/U90uj8/Gc9J0NJDRlknodnLVKbvOK6DaQV1tZxthUIOyyc5WIM44WCzZmag==
+  dependencies:
+    tslib "^1.10.0"
+
+"@datadog/browser-logs@^3.1.3":
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/@datadog/browser-logs/-/browser-logs-3.1.3.tgz#1145fea08bfcdc43dbd59ce3a181c81bb28d52c8"
+  integrity sha512-cgjdAT+rQevv2hVFv3eY6GFJ0XaM5TV12I3z3IKejuHJ/QAthqG6nrST6Xba8XE1+9YA2OaQ4EMYJHy6pV8/7w==
+  dependencies:
+    "@datadog/browser-core" "3.1.3"
+    tslib "^1.10.0"
+
+"@datadog/browser-rum-core@3.1.2":
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/@datadog/browser-rum-core/-/browser-rum-core-3.1.2.tgz#52d5dd519127f0967fca81f80927a3b875a866de"
+  integrity sha512-uXXdFDvkhNixEO8eGrjLO6r47YkEE/HoAq6awKyL1xR7ZOXN9Dn/gqrUQECeppvYA+hM7EGFCwrUFV7/uczkwg==
+  dependencies:
+    "@datadog/browser-core" "3.1.2"
+    tslib "^1.10.0"
+
+"@datadog/browser-rum@^3.1.2":
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/@datadog/browser-rum/-/browser-rum-3.1.2.tgz#c478ca6f42ca1ca94dd5ced7084d542cde4ece59"
+  integrity sha512-PdHPWKm4htrrTVtMdXPHJGx4AqN6Os7IlZjRxtH1QBUEAzh73Ba3CZ8hiHRCaziyDh+O9SOwrI6xl4/h8TAEmQ==
+  dependencies:
+    "@datadog/browser-core" "3.1.2"
+    "@datadog/browser-rum-core" "3.1.2"
+    tslib "^1.10.0"
+
 "@emotion/babel-plugin-jsx-pragmatic@^0.1.5":
   version "0.1.5"
   resolved "https://registry.yarnpkg.com/@emotion/babel-plugin-jsx-pragmatic/-/babel-plugin-jsx-pragmatic-0.1.5.tgz#27debfe9c27c4d83574d509787ae553bf8a34d7e"
@@ -4545,7 +4584,7 @@ ts-node@^9.1.1:
     source-map-support "^0.5.17"
     yn "3.1.1"
 
-tslib@^1.9.0:
+tslib@^1.10.0, tslib@^1.9.0:
   version "1.14.1"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
   integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==