JavaScript Logger

The JavaScript Logger allows you to capture logs generated by the Twilio Video JavaScript SDK in real time so that you can monitor your frontend applications and see how they behave in production. You can interact with the JavaScript Logger to intercept logs generated by the JavaScript SDK, modify them, and send the logs to a remote server.

Access the JavaScript Logger

The JavaScript logger is included with the Twilio Video JavaScript SDK in versions 2.10.0 and above.

You can include the JavaScript SDK in your application either by installing it with Node Package Manager (npm) or using the Twilio CDN.

See the list of supported browsers here.

NPM

Install the Video JavaScript SDK using npm:

npm install --save twilio-video

Then, you can start using the JavaScript Logger API in your application:

const { Logger } = require('twilio-video');
const logger = Logger.getLogger('twilio-video');

Script tag

You can also copy twilio-video.min.js from the twilio-video/dist folder after npm installing it and include it directly in your web app using a <script> tag.

<script src="https://my-server-path/twilio-video.min.js"></script>

Using this method, you can access the JavaScript Logger API like so:

const logger = Twilio.Video.Logger.getLogger('twilio-video');

CDN

You can also include the JavaScript SDK in your application from Twilio's CDN:

<script src="https://sdk.twilio.com/js/video/releases/2.20.0/twilio-video.min.js"></script>

Using the CDN, the JavaScript SDK will set a browser global that you can use to reference the Logger API:

const logger = Twilio.Video.Logger.getLogger('twilio-video');

Use the JavaScript Logger API

The Video JavaScript SDK uses the loglevel module, which is a lightweight logging library that works in all modern browsers and NodeJS environments. Using the JavaScript SDK's Logger API, you can access internal JavaScript SDK logs and perform actions as defined by the loglevel APIs. You can see output from logs in your browser's developer console.

Set the logging level

You can set the level of logs that you see and filter out using logger.setLevel:

const logger = Twilio.Video.Logger.getLogger('twilio-video');
logger.setLevel('debug');

Possibe logging levels are:

• trace
• debug
• info
• warn
• error
• silent

When you set a logging level, you will see all logs at that level and above. For example, if you set the logging level to warn, you'll see logs at warn and error level. Setting the logging level to silent filters out all logs.

The default level is warn.

Intercept JavaScript SDK logs

The loglevel module's plugin system allows you to add features specific to your application to the Video JavaScript SDK logger. You can intercept logs, modify them, and perform other actions based on the log message.

To interact with logs, you will need to overwrite the logger's original methodFactory. With this aproach, you can process each log before it is printed out to the console. The following example shows how to add the prefix [My Application] to each log of debug level and above from the Video JavaScript SDK. Note that you should update the logger's methodFactory before you connect to a Twilio Video Room.

// access the JS Logger API
const logger = Twilio.Video.Logger.getLogger('twilio-video');

// overwrite the loglevel module's original methodFactory
// and prefix each log with `[My Application]`
const originalFactory = logger.methodFactory;
logger.methodFactory = function (methodName, logLevel, loggerName) {
  const method = originalFactory(methodName, logLevel, loggerName);
  return function (datetime, logLevel, component, message, data) {
    const prefix = '[My Application]';
    method(prefix, datetime, logLevel, component, message, data);
  };
};

// set the logger to log debug messages and above
logger.setLevel('debug');

// Then, connect to a Twilio Video Room using the `connect` method
// Twilio.Video.connect(token, {})...

The callback function returned from the methodFactory contains parameters provided by the JavaScript SDK. You can use these parameters to gather more information about the log and act on it as desired.

Callback parameters

The example below demonstrates how you might inspect the component parameter to send log lines to a different remote server based on what the component includes.

// access the JS Logger API
const logger = Twilio.Video.Logger.getLogger('twilio-video');
logger.setLevel("debug");

// overwrite the loglevel module's original methodFactory
const originalFactory = logger.methodFactory;
logger.methodFactory = function (methodName, logLevel, loggerName) {
  const method = originalFactory(methodName, logLevel, loggerName);
  return function (datetime, logLevel, component, message, data) {
    if (component.includes('connect')) {
      // assume you have a function called sendToServerFoo, which
      // can send a line of text to a remote server
      sendToServerFoo(datetime, logLevel, component, message, data);
    }
    method(datetime, logLevel, component, message, data);
  };
};

The following example demonstrates inspecting the data parameter, looking for logs with signaling data, and creating new logs based on the information returned.

// access the JS Logger API
const logger = Twilio.Video.Logger.getLogger('twilio-video');
logger.setLevel("debug");

// overwrite the loglevel module's original methodFactory
const originalFactory = logger.methodFactory;
logger.methodFactory = function (methodName, level, loggerName) {
const method = originalFactory(methodName, level, loggerName);
 return function (datetime, logLevel, component, message, data) {
   method(datetime, logLevel, component, message, data);
   if (message === 'event' && data.group === 'signaling') {
     if (data.name === 'waiting') {
       console.warn('Twilio\'s signaling server is busy.');
     } else if (data.name === 'connecting') {
       console.log('Connecting to Twilio\'s signaling server.');
     } else if (data.name === 'open') {
       console.log('Connected to Twilio\'s signaling server.');
     } else if (data.name === 'closed') {
       if (data.level === 'error') {
         const { payload: { reason } } = data;
         console.error('Connection to Twilio\'s signaling server abruptly closed:', data.reason);
       } else {
         console.log('Connection to Twilio\'s signaling server closed.');
       }
     }
   }
 };
};

Send JavaScript logs to a remote server

One common use case in client side logging is forwarding logs to a remote server to monitor your frontend applications. Using loglevel's plugin system, you can intercept logs from the Video JavaScript SDK and forward them to your server. The loglevel-plugin-remote module is a pre-written plugin that sends logs to a server with minimal configuration.

Install the plugin

NPM

Install loglevel-plugin-remote using npm:

npm i loglevel-plugin-remote --save

Then, you can use the plugin in your application:

const remote = require('loglevel-plugin-remote');

Script tag

You can also copy loglevel-plugin-remote.min.js from the loglevel-plugin-remote/dist folder after npm installing it and include it directly in your web app using a <script> tag.

<script src="https://my-server-path/loglevel-plugin-remote.min.js"></script>

Using this method, you can access the plugin directly by calling methods on the remote object.

remote.apply(Twilio.Video.Logger);

Use the plugin

The code below uses the default settings for loglevel-plugin-remote to send all logs for the level debug and above to the server that is serving your application at the /logger route.

remote.apply(Twilio.Video.Logger);
const logger = Logger.getLogger('twilio-video');
logger.setLevel('debug');

You can configure how and where the plugin sends logs. See the plugin's documentation for more information and full configuration options.