Customize the React SDK logger

2 min

The logger captures details about your experiments, making it easier for you to debug them. You can customize where the log information is stored and choose the types of data you want to track.

The React SDK includes a default Logger implementation. To configure the log level threshold, call setLogLevel.

import {
  setLogLevel,
} from '@optimizely/react-sdk'

// Set log level to debug
// Can be 'info', 'debug', 'warn', 'error'
setLogLevel('debug');

To turn off logging from the SDK, call setLogger with null:

import {
  setLogger,
} from '@optimizely/react-sdk'

// To turn off logging, call setLogger with null
setLogger(null);

Pass in a custom logger for your Optimizely client for finer control over your SDK configuration in a production environment. A custom logger is a function that receives two arguments: the log level and the message. See the following code sample to create and set a custom logger.

import {
  setLogLevel,
  setLogger,
} from '@optimizely/react-sdk'

// Set log level
setLogLevel('debug');

/**
 * customLogger
 * 
 * Example of a custom logger. A custom logger is a function that
 * takes two parameters (level, message) and logs to an appropriate place,
 * typically the console.
 *
 * @param {string} level indicating the level of the log message
 * @param {string} message indicating the log message
 *
 */
var customLogger = function(level, message) {
  var LOG_LEVEL = optimizelySDK.enums.LOG_LEVEL;
  switch (level) {
    case LOG_LEVEL.INFO:
      // INFO log message
      console.log(message);
      break;
    
    case LOG_LEVEL.DEBUG:
      // DEBUG log message
      console.log(message);
      break;

    case LOG_LEVEL.WARNING:
      // WARNING log message
      console.log(message);
      break;

    case LOG_LEVEL.ERROR:
      // ERROR log message
      console.log(message);
      break;
  }
}

// Set the custom logger
setLogger({
  log: customLogger,
});

Log levels

The following list shows the log levels for the JavaScript (React) SDK.

ERROR – Logs events that prevent feature flags from working properly, such as an invalid data file during initialization or incorrect feature keys. These issues require user intervention to fix.

WARN – Logs events that do not prevent feature flags from working properly but may cause unexpected results, such as future API deprecation, improper logger or error handler settings, and null values from getters.

INFO – Logs key events to illustrate the lifecycle of an API call, such as when a decision or tracking starts and succeeds.

DEBUG – Logs extra information related to errors that aid Optimizely in debugging, like when a feature flag is not running or a user is not included in a rollout.