@datadog/browser-logs

What is @datadog/browser-logs?

@datadog/browser-logs is an npm package that allows you to collect and monitor logs from your web applications in real-time. It integrates with Datadog's logging service to provide comprehensive insights into your application's performance, errors, and user interactions.

What are @datadog/browser-logs's main functionalities?

Basic Logging

This feature allows you to initialize the Datadog logging client and send basic log messages. The `init` method configures the client with your Datadog client token and other settings, while the `logger.info` method sends an informational log message.

const { datadogLogs } = require('@datadog/browser-logs');
datadogLogs.init({
  clientToken: 'YOUR_CLIENT_TOKEN',
  site: 'datadoghq.com',
  forwardErrorsToLogs: true,
  sampleRate: 100,
});
datadogLogs.logger.info('This is an info log');

Error Logging

This feature allows you to log errors that occur in your application. By catching exceptions and using the `logger.error` method, you can send detailed error logs to Datadog.

try {
  throw new Error('Something went wrong');
} catch (error) {
  datadogLogs.logger.error('An error occurred', { error });
}

Custom Attributes

This feature allows you to add custom attributes to your log messages. By passing an object with additional data to the logging methods, you can enrich your logs with context-specific information.

datadogLogs.logger.info('User action', { userId: '12345', action: 'click' });

Other packages similar to @datadog/browser-logs

logrocket

LogRocket is a front-end logging and session replay tool that helps you understand issues affecting your users. It provides similar logging capabilities as @datadog/browser-logs but also includes session replay, which allows you to see exactly what the user did leading up to an issue.

loggly-jslogger

Loggly is a cloud-based log management service. The `loggly-jslogger` package allows you to send logs from your web applications to Loggly. It provides similar logging capabilities as @datadog/browser-logs but integrates with Loggly's log management and analysis platform.

README

logs

Datadog browser logs library.

Browser support

Setup

NPM

import { datadogLogs } from '@datadog/browser-logs'
datadogLogs.init({
  clientToken: 'XXX',
  datacenter: 'us',
  forwardErrorsToLogs: true,
  sampleRate: 100
})

Bundle

<script src = 'https://www.datadoghq-browser-agent.com/datadog-logs-us.js'>
<script>
  window.DD_LOGS.init({
    clientToken: 'XXX',
    datacenter: 'us',
    forwardErrorsToLogs: true,
    sampleRate: 100
  });
</script>

Public API

What we call Context is a map {key: value} that will be added to the message context.

• Init must be called before other methods. Configurable options:

  • isCollectingError: when truthy, we'll automatically forward console.error logs, uncaught exceptions and network errors.
  • sampleRate: percentage of sessions to track. Only tracked sessions send logs.
  • datacenter: defined to which datacenter we'll send collected data ('us' | 'eu')

  init(configuration: {
      clientToken: string,
      datacenter?: string,
      isCollectingError?: boolean,
      sampleRate?: number
  })
  

• Default logger

  logger.debug | info | warn | error (message: string, messageContext = Context)`
  logger.log (message: string, messageContext: Context, status? = 'debug' | 'info' | 'warn' | 'error')
  logger.setLevel (level?: 'debug' | 'info' | 'warn' | 'error')
  logger.setHandler (handler?: 'http' | 'console' | 'silent')
  logger.addContext (key: string, value: any)  # add one key-value to the logger context
  logger.setContext (context: Context)  # entirely replace the logger context
  

• Custom loggers

  Custom loggers have the same API than the default logger

  createLogger (name: string, conf?: {
      level?: 'debug' | 'info' | 'warn' | 'error'
      handler?: 'http' | 'console' | 'silent'
      context?: Context
  })  # create a new logger
  getLogger (name: string)  # retrieve a previously created logger
  

• Modify the global context for all loggers

  addLoggerGlobalContext (key: string, value: any)  # add one key-value to the default context
  setLoggerGlobalContext (context: Context)  # entirely replace the default context
  

TypeScript support

Types are compatible with TypeScript >= 3.0. For earlier version, you can import js sources and use global variable to avoid any compilation issue:

import '@datadog/browser-logs/bundle/datadog-logs-us';

window.DD_LOGS.init({
  clientToken: 'XXX',
  datacenter: 'us',
  forwardErrorsToLogs: true,
  sampleRate: 100
});