Saltar al contenido principal

Datadog event logging

Introduction​

The Datadog browser log SDK can send logs JS clients. It can leverage the following features:

  • Use the SDK as a logger. Everything is forwarded to Datadog as JSON documents.
  • Add context and extra custom attributes to each log sent.
  • Wrap and forward every frontend error automatically.
  • Optimized network usage with automatic bulk posts.

Configuration​

You can use the following parameters to configure Datadog:

  • clientToken (required): a Datadog client token
  • serviceName: service name for the application (the default value is Jutro)
  • env: the environment in which the application is running. For example: atmos-staging, atmos-dev

Which Atmos environment should I use?​

You can find more information about environments here.

Where do I get the token?​

You can find details about getting access to Datadog and a token here. You can get the token from here: https://app.datadoghq.com/organization-settings/client-tokens

Client Token can be obtained from AWS SSM in the Teamcity pipeline using the command:

aws ssm get-parameter --with-decryption --output text --query Parameter.Value --name "tenant-jutro-datadog-client-token"

Using Datadog in a new app​

You will see several questions regarding Datadog during the process of creating a Jutro app.

  1. Enable Datadog? - enter yes

  2. Service name to be used for Datadog log - provide the service name you want to see in logs. It is "Jutro" by default.

    Service name

  3. Datadog client token - provide the client token (there are instructions for getting the token above).

  4. Datadog environment (dev | prod ) - choose the environment. It is "dev" by default.

The following is a list of aliases for some of the most commonly used Datadog environments:

  • atmos-dev: dev
  • atmos-int: int
  • atmos-staging: staging
  • omega2-circinus: circinus-omega2
  • omega4-sunflower: prod-us-east-2
  • omega2-cartwheel: cartwheel-omega2

When choosing the environment, always use the alias if it is one of the environments listed above.

Adding Datadog to an existing app​

To use Datadog in your application, add the following variables to your .env file:

REACT_APP_JUTRO_DATA_DOG_CLIENT_TOKEN
REACT_APP_JUTRO_DATA_DOG_SERVICE_NAME
REACT_APP_JUTRO_DATA_DOG_ENV

Optionally, you can also set:

REACT_APP_JUTRO_DATA_DOG_SITE # allowed values are 'EU' or 'US'
  • REACT_APP_JUTRO_DATA_DOG_SITE=EU sets your Datadog site to datadoghq.eu.
  • REACT_APP_JUTRO_DATA_DOG_SITE=US sets your Datadog site to datadoghq.com.
  • Default is datadoghq.com.

Eventos gestionados de forma predeterminada​

De forma predeterminada, para los eventos de Jutro que se describen aquí, la integración de Datadog se agrega a los siguientes grupos. Por lo tanto, si su aplicación está suscrita, los datos de eventos se envían a Datadog de forma predeterminada.

  • UNKNOWN_ERROR
  • FETCH_ERROR
  • FETCH_REQUEST
  • FETCH_RESPONSE

Los eventos de Jutro permiten suscribirse a diferentes temas de eventos. Encontrará más información aquí.

Note: Si tiene JUTRO_DISABLE_AUTO_EVENTS_PUBLISHING=true en su archivo .env, primero debe publicar un evento y suscribirse a él. Para obtener más información, consulte la documentación de la API de eventos.

Por ejemplo, para suscribirse a UNKNOWN_ERROR:

import { publish, subscribe, JUTRO_TOPICS } from '@jutro/events';

publish(JUTRO_TOPICS.UNKNOWN_ERROR, val: 'unknown error');

subscribe(JUTRO_TOPICS.UNKNOWN_ERROR, (error) => {
  //... your analytics code
});

Para habilitar la suscripción completa al evento, establezca REACT_APP_JUTRO_DATA_DOG_FULL_LOG=true en el archivo .env.

REACT_APP_JUTRO_DATA_DOG_FULL_LOG=true

Esto habilitará los siguientes eventos:

  • VALUE_CHANGED
  • FIELD_BLUR
  • BUTTON_CLICKED
  • LINK_CLICKED

Jutro proporciona tipos de eventos predeterminados para sus componentes. Estos se definen en un objeto llamado JUTRO_TOPICS, que se ve así:

const JUTRO_TOPICS = {
    COMPONENT_LOADED: 'JUTRO_TOPICS.COMPONENT_LOADED',
    VALUE_CHANGED: 'JUTRO_TOPICS.VALUE_CHANGED',
    FIELD_BLUR: 'JUTRO_TOPICS.FIELD_BLUR',
    ROUTE_CHANGED: 'JUTRO_TOPICS.ROUTE_CHANGED',
    ...
};

Encontrará JUTRO_TOPICS como: import { JUTRO_TOPICS } from '@jutro/events';

Envío de mensajes personalizados​

Puede enviar mensajes personalizados y errores con los temas de Jutro existentes:

import { publish, subscribe, JUTRO_TOPICS } from '@jutro/events';

publish(JUTRO_TOPICS.UNKNOWN_ERROR, { val: 'map clicked' });
subscribe(JUTRO_TOPICS.UNKNOWN_ERROR, (event) => console.log(event));

Eventos personalizados​

  1. Importe lo siguiente:

    import { subscribe, publish, JUTRO_TOPICS } from '@jutro/events';
    import { datadogLogs } from '@datadog/browser-logs';

  2. Publique el tema que desee:

    publish('PRODUCT_VIEW', { test: 'jutro-custom' });

  3. Suscríbase y utilice el registrador de Datadog con el nivel de registro que desee:

    subscribe('PRODUCT_VIEW', () => {
      datadogLogs.logger.error(JSON.stringify('custom-error'), {
        sourceCategory: 'PRODUCT_VIEW',
      });
    });

Datadog Real User Monitoring​

Real User Monitoring (RUM) gives you an insight into the real time activity and experience of individual users. It addresses the following four aspects of monitoring web and mobile applications:

  • Performance: Track the performance of web pages, mobile application screens, user actions, network requests, and your front-end code.
  • Error Management: Monitor ongoing bugs and issues, track them over time and across versions.
  • Analytics / Usage: Understand who is using your application (the user's country, device, or operating system), monitor individual user journeys, and analyze how users interact with your application (most common pages visited, clicks, interactions, and feature usage).
  • Support: Retrieve all of the information related to a user session to troubleshoot issues (session duration, pages visited, interactions, resources loaded, and errors).

Setting up RUM​

The current implementation of Datadog integration with Jutro is completely separate from Datadog RUM. The current implementation is based on the JUTRO_TOPICS event being emitted and sent as logs to the Datadog server. RUM is a different solution that is independent from this event emission, and requires its own setup.

RUM applications must be created using the 'New Application' button on the RUM Applications page. You must give the application a name and a type, for Jutro apps the type is 'JS'. After doing this, an applicationId and clientToken are generated.

When prompted to choose the installation type for the RUM Browser SDK, choose npm. Integration code will then be generated automatically, and will look similar to the following:

import { datadogRum } from '@datadog/browser-rum';

datadogRum.init({
  applicationId: 'generated-application-id',
  clientToken: 'generated-client-token',
  site: 'datadoghq.com',
  service: 'jutro-rum-test',

  // Specify a version number to identify the deployed version of your application in Datadog
  // version: '1.0.0',
  sampleRate: 100,
  sessionReplaySampleRate: 0,
  trackInteractions: true,
  trackResources: true,
  trackLongTasks: true,
  defaultPrivacyLevel: 'mask-user-input',
});

To ensure that tracking is working properly after applying the config you can test it by opening a tracked app in your browser and generating some traffic. Verify that data is being reported successfully by checking the 'Verify your installation' section after doing this.