Merge pull request #4717 from coopcycle/frontend-monitoring

Frontend monitoring

.env.dist

@@ -47,6 +47,8 @@ COOPCYCLE_JWT_TTL=3600
 COOPCYCLE_OSRM_HOST=osrm:5000
 COOPCYCLE_DEMO=0
 COOPCYCLE_SENTRY_DSN=https://<public>@sentry.io/********
+COOPCYCLE_DATADOG_CLIENT_TOKEN=
+COOPCYCLE_DATADOG_APPLICATION_ID=
 APNS_PRIVATE_KEY_FILE=/dev/null
 APNS_CERTIFICATE_PASS_PHRASE=
 APNS_KEY_ID=

app/config/config.yml

@@ -239,7 +239,10 @@ twig:
         - '@VichUploader/Form/fields.html.twig'
     globals:
         is_demo: "%is_demo%"
+        instance_name: "%env(COOPCYCLE_APP_NAME)%"
         sentry_public_dsn: "%sentry_public_dsn%"
+        datadog_client_token: "%env(COOPCYCLE_DATADOG_CLIENT_TOKEN)%"
+        datadog_application_id: "%env(COOPCYCLE_DATADOG_APPLICATION_ID)%"
         country_iso: "%country_iso%"
         region_iso: "%region_iso%"
         cart_provider: '@AppBundle\Service\CartProviderService'

js/app/components/order/timeRange/TimeRangeChangedModal.js

@@ -24,6 +24,7 @@ import TimeSlotPicker from '../TimeSlotPicker'
 import DatePicker from '../DatePicker'
 import Button from '../../core/Button'
 import Alert from '../../core/Alert'
+import { useDatadog } from '../../../hooks/useDatadog'
 import { useMatomo } from '../../../hooks/useMatomo'
 
 function useChooseRestaurant() {
@@ -183,12 +184,14 @@ export default function TimeRangeChangedModal() {
   const isModalOpen = useSelector(selectIsTimeRangeChangedModalOpen)
 
   const { t } = useTranslation()
+  const { logger } = useDatadog()
   const { trackEvent } = useMatomo()
 
   return (
     <Modal
       isOpen={isModalOpen}
       onAfterOpen={() => {
+        logger.info('TimeRangeChangedModal opened')
         trackEvent('Checkout', 'openTimeRangeChangedModal')
       }}
       contentLabel={t('CART_CHANGE_TIME_MODAL_LABEL')}

js/app/datadog.js

@@ -0,0 +1,95 @@
+import { datadogLogs } from '@datadog/browser-logs'
+import { datadogRum } from '@datadog/browser-rum'
+
+const el = document.getElementById('datadog')
+const datadogEnabled = Boolean(el)
+
+if (datadogEnabled) {
+  datadogLogs.init({
+    clientToken: el.dataset.clientToken,
+    site: 'datadoghq.com',
+    service: el.dataset.service,
+    forwardErrorsToLogs: true,
+    // Only tracked sessions send logs; from 0 to 100
+    sessionSampleRate: 100,
+    telemetrySampleRate: 0,
+  })
+
+  datadogRum.init({
+    applicationId: el.dataset.applicationId,
+    clientToken: el.dataset.clientToken,
+    site: 'datadoghq.com',
+    service: el.dataset.service,
+    // Specify a version number to identify the deployed version of your application in Datadog
+    // version: '1.0.0',
+    // 'Browser RUM' session sample rate; from 0 to 100
+    sessionSampleRate: 1,
+    // 'Browser RUM & Session Replay' sample rate (% from sessions tracked by RUM/sessionSampleRate); from 0 to 100
+    sessionReplaySampleRate: 10,
+    telemetrySampleRate: 0,
+    trackUserInteractions: true,
+    trackResources: true,
+    trackLongTasks: true,
+    defaultPrivacyLevel: 'mask-user-input',
+  })
+}
+
+const DatadogLogger = {
+  /**
+   * Send a log with debug level.
+   * @param message: The message to send.
+   * @param context: The additional context to send.
+   */
+  debug(message, context) {
+    if (!datadogEnabled) {
+      console.debug(message, context)
+      return
+    }
+
+    datadogLogs.logger.debug(message, context)
+  },
+
+  /**
+   * Send a log with info level.
+   * @param message: The message to send.
+   * @param context: The additional context to send.
+   */
+  info(message, context) {
+    if (!datadogEnabled) {
+      console.info(message, context)
+      return
+    }
+
+    datadogLogs.logger.info(message, context)
+  },
+
+  /**
+   * Send a log with warn level.
+   * @param message: The message to send.
+   * @param context: The additional context to send.
+   */
+  warn(message, context) {
+    if (!datadogEnabled) {
+      console.warn(message, context)
+      return
+    }
+
+    datadogLogs.logger.warn(message, context)
+  },
+
+  /**
+   * Send a log with error level.
+   * @param message: The message to send.
+   * @param context: The additional context to send.
+   */
+  error(message, context) {
+    if (!datadogEnabled) {
+      console.error(message, context)
+      return
+    }
+
+    datadogLogs.logger.error(message, context)
+  },
+}
+
+window.DatadogLogger = DatadogLogger

js/app/hooks/useDatadog.js

@@ -0,0 +1,5 @@
+export const useDatadog = () => {
+  return {
+    logger: window.DatadogLogger,
+  }
+}

package.json

@@ -37,6 +37,8 @@
     "@cubejs-client/core": "^0.34.0",
     "@cubejs-client/playground": "^0.34.0",
     "@cubejs-client/react": "^0.34.0",
+    "@datadog/browser-logs": "^5.29.1",
+    "@datadog/browser-rum": "^5.29.1",
     "@hotwired/stimulus": "^3.2.2",
     "@mapbox/polyline": "^1.1.0",
     "@nivo/core": "^0.87.0",

templates/_partials/monitoring.html.twig

@@ -0,0 +1,15 @@
+{% if app.environment == "prod" %}
+  <div id="sentry" data-dsn="{{ sentry_public_dsn }}"></div>
+  {{ encore_entry_script_tags('sentry') }}
+{% endif %}
+
+{% if app.environment == "prod" %}
+  <div id="datadog"
+       data-client-token="{{ datadog_client_token }}"
+       data-application-id="{{ datadog_application_id }}"
+       data-service="{{ instance_name }}"
+  ></div>
+{% endif %}
+
+{# inject on all environments (on dev: logs to console) #}
+{{ encore_entry_script_tags('datadog') }}

templates/base.html.twig

@@ -89,10 +89,8 @@
       {% include "footer.html.twig" %}
       {% endif %}
     {% endblock %}
-    {% if app.environment == "prod" %}
-    <div id="sentry" data-dsn="{{ sentry_public_dsn }}"></div>
-    {{ encore_entry_script_tags('sentry') }}
-    {% endif %}
+
+    {% include '_partials/monitoring.html.twig' %}
 
     <div id="cpccl_settings"
       data-latlng="{{ coopcycle_setting('latlng')|json_encode|e('html_attr') }}"></div>

templates/delivery/tracking.html.twig

@@ -44,10 +44,7 @@
     <div id="cpccl_settings"
       data-latlng="{{ coopcycle_setting('latlng')|json_encode|e('html_attr') }}"></div>
 
-    {% if app.environment == "prod" %}
-    <div id="sentry" data-dsn="{{ sentry_public_dsn }}"></div>
-    {{ encore_entry_script_tags('sentry') }}
-    {% endif %}
+    {% include '_partials/monitoring.html.twig' %}
 
     <script src="/tracking/socket.io/socket.io.js"></script>
     <script src="{{ asset('bundles/fosjsrouting/js/router.min.js') }}"></script>

templates/error.html.twig

@@ -14,6 +14,7 @@
       <p>{{ ('error.' ~ exception.statusCode)|trans }}</p>
       <a href="{{ path('homepage') }}">{{ 'error.return_to_homepage'|trans }}</a>
     </div>
+    {% include '_partials/monitoring.html.twig' %}
     {% include "_partials/analytics.html.twig" %}
   </body>
 </html>

templates/maintenance.html.twig

@@ -19,6 +19,7 @@
         {% endif %}
       </div>
     </div>
+    {% include '_partials/monitoring.html.twig' %}
     {% include "_partials/analytics.html.twig" %}
   </body>
 </html>

webpack.config.js

@@ -27,6 +27,7 @@ Encore
   .addEntry('common', './js/app/common.js')
   .addEntry('customize-form', './js/app/customize/form.js')
   .addEntry('dashboard', './js/app/dashboard/index.js')
+  .addEntry('datadog', './js/app/datadog.js')
   .addEntry('delivery-form', './js/app/delivery/form.js')
   .addEntry('delivery-homepage', './js/app/delivery/homepage.js')
   .addEntry('delivery-list', './js/app/delivery/list.js')