added datadog RUM events

Signed-off-by: Brett Wright <brett.wright@bestseller.com> Signed-off-by: Brett Wright <wright.brett@gmail.com>
2021-04-19 11:16:43 +02:00
parent 2730b30b7c
commit 8761385311
4 changed files with 100 additions and 58 deletions
@@ -2,6 +2,12 @@ app:
  title: Backstage Example App
  baseUrl: http://localhost:3000
  googleAnalyticsTrackingId: # UA-000000-0
+  datadogRum:
+    clientToken: '123456789'
+    applicationId: qwerty 
+  #   site: # datadoghq.eu default = datadoghq.com
+  #   env: # optional
+
  support:
    url: https://github.com/backstage/backstage/issues # Used by common ErrorPage
    items: # Used by common SupportButton component
@@ -1,60 +1,34 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#000000" />
-    <meta
-      name="description"
-      content="Backstage is an open platform for building developer portals"
-    />
-    <link rel="apple-touch-icon" href="<%= publicPath %>/logo192.png" />
-    <!--
+
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <meta name="theme-color" content="#000000" />
+  <meta name="description" content="Backstage is an open platform for building developer portals" />
+  <link rel="apple-touch-icon" href="<%= publicPath %>/logo192.png" />
+  <!--
      manifest.json provides metadata used when your web app is installed on a
      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
    -->
-    <link
-      rel="manifest"
-      href="<%= publicPath %>/manifest.json"
-      crossorigin="use-credentials"
-    />
-    <link rel="icon" href="<%= publicPath %>/favicon.ico" />
-    <link rel="shortcut icon" href="<%= publicPath %>/favicon.ico" />
-    <link
-      rel="apple-touch-icon"
-      sizes="180x180"
-      href="<%= publicPath %>/apple-touch-icon.png"
-    />
-    <link
-      rel="icon"
-      type="image/png"
-      sizes="32x32"
-      href="<%= publicPath %>/favicon-32x32.png"
-    />
-    <link
-      rel="icon"
-      type="image/png"
-      sizes="16x16"
-      href="<%= publicPath %>/favicon-16x16.png"
-    />
-    <link
-      rel="mask-icon"
-      href="<%= publicPath %>/safari-pinned-tab.svg"
-      color="#5bbad5"
-    />
-    <style>
-      #root {
-        min-height: 100%;
-      }
-    </style>
-    <title><%= app.title %></title>
+  <link rel="manifest" href="<%= publicPath %>/manifest.json" crossorigin="use-credentials" />
+  <link rel="icon" href="<%= publicPath %>/favicon.ico" />
+  <link rel="shortcut icon" href="<%= publicPath %>/favicon.ico" />
+  <link rel="apple-touch-icon" sizes="180x180" href="<%= publicPath %>/apple-touch-icon.png" />
+  <link rel="icon" type="image/png" sizes="32x32" href="<%= publicPath %>/favicon-32x32.png" />
+  <link rel="icon" type="image/png" sizes="16x16" href="<%= publicPath %>/favicon-16x16.png" />
+  <link rel="mask-icon" href="<%= publicPath %>/safari-pinned-tab.svg" color="#5bbad5" />
+  <style>
+    #root {
+      min-height: 100%;
+    }
+  </style>
+  <title>
+    <%= app.title %>
+  </title>

-    <% if (app.googleAnalyticsTrackingId && typeof app.googleAnalyticsTrackingId
-    === 'string') { %>
-    <script
-      async
-      src="https://www.googletagmanager.com/gtag/js?id=<%= app.googleAnalyticsTrackingId %>"
-    ></script>
+  <% if (app.googleAnalyticsTrackingId && typeof app.googleAnalyticsTrackingId==='string' ) { %>
+    <script async src="https://www.googletagmanager.com/gtag/js?id=<%= app.googleAnalyticsTrackingId %>"></script>
    <script>
      window.dataLayer = window.dataLayer || [];
      function gtag() {
@@ -65,11 +39,32 @@
      gtag('config', '<%= app.googleAnalyticsTrackingId %>');
    </script>
    <% } %>
-  </head>
-  <body style="margin: 0">
-    <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="root"></div>
-    <!--
+    <% if (app.datadogRum.clientToken && app.datadogRum.applicationId ) { %>
+    <script>
+      (function (h, o, u, n, d) {
+        h = h[d] = h[d] || { q: [], onReady: function (c) { h.q.push(c) } }
+        d = o.createElement(u); d.async = 1; d.src = n
+        n = o.getElementsByTagName(u)[0]; n.parentNode.insertBefore(d, n)
+      })(window, document, 'script', 'https://www.datadoghq-browser-agent.com/datadog-rum.js', 'DD_RUM')
+      DD_RUM.onReady(function () {
+        DD_RUM.init({
+          clientToken: '<%= app.datadogRum.clientToken %>',
+          applicationId: '<%= app.datadogRum.applicationId %>',
+          site: '<%= app.datadogRum.site %>' || 'datadoghq.com',
+          service: 'backstage',
+          env: '<%= app.datadogRum.env %>',
+          sampleRate: 100,
+          trackInteractions: true,
+        })
+      })
+    </script>
+    <% } %>
+</head>
+
+<body style="margin: 0">
+  <noscript>You need to enable JavaScript to run this app.</noscript>
+  <div id="root"></div>
+  <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

@@ -79,5 +74,6 @@
      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
-  </body>
-</html>
+</body>
+
+</html>
@@ -180,6 +180,36 @@
              "UA-000000-0"
            ]
          },
+          "datadogRum": {
+            "type": "object",
+            "description": "Datadog RUM events configuration",
+            "properties": {
+              "env": {
+                "type": "string",
+                "visibility": "frontend",
+                "description": "Environment for Datadog RUM events"
+              },
+              "clientToken": {
+                "type": "string",
+                "visibility": "frontend",
+                "description": "clientToken for Datadog RUM events"
+              },
+              "applicationId": {
+                "type": "string",
+                "visibility": "frontend",
+                "description": "applicationId for Datadog RUM events"
+              },
+              "site": {
+                "type": "string",
+                "visibility": "frontend",
+                "description": "site for Datadog RUM events"
+              }
+            },
+            "required": [
+              "clientToken",
+              "applicationId"
+            ]
+          },
          "listen": {
            "type": "object",
            "description": "Listening configuration for local development",
@@ -127,6 +127,16 @@ export async function createConfig(
          googleAnalyticsTrackingId: frontendConfig.getOptionalString(
            'app.googleAnalyticsTrackingId',
          ),
+          datadogRum: {
+            env: frontendConfig.getOptionalString('app.datadogRum.env'),
+            clientToken: frontendConfig.getOptionalString(
+              'app.datadogRum.clientToken',
+            ),
+            applicationId: frontendConfig.getOptionalString(
+              'app.datadogRum.applicationId',
+            ),
+            site: frontendConfig.getOptionalString('app.datadogRum.site'),
+          },
        },
      },
    }),