Menu

Expand
Rate this page:

JavaScript Logger

This page is for reference only. We are no longer onboarding new customers to Programmable Video. Existing customers can continue to use the product until December 5, 2024.

We recommend migrating your application to the API provided by our preferred video partner, Zoom. We've prepared this migration guide to assist you in minimizing any service disruption.

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>

You should make sure you're using the latest Twilio Video JavaScript SDK release. To find the CDN link for the most recent JavaScript SDK release, visit the JavaScript SDK latest release documentation.

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, {})...

Below is an example of what the log output would look like after connecting to a Video Room:

[My Application] 2022-02-25T05:09:50.186Z info [connect #1] Connecting to a Room ...
[My Application] 2022-02-25T05:09:50.186Z debug [connect #1] Options: ...
[My Application] 2022-02-25T05:09:50.187Z info [connect #1] ...

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

Name Description
datetime The current date and time in simplified extended ISO format
logLevel The current logging level. Possible values are trace, debug, info, warn, error, and silent.
component The component where the log originated, using `[name #count]` format. name is the component name, either the method name or the object name where the log was generated. count is the instance count. For example, a component [RemoteVideoTrack #2: MT...] indicates that the log line originated from a RemoteVideoTrack and that there are two total instances of RemoteVideoTracks. The component includes the SID of the object if the log originates from an object.
message The message that is being logged
data An optional data object, which can be inspected for more information about the log. For example, the data might be a Room object after a Room is created, or an object containing signaling data. Any new type of data will be published in the JavaScript SDK changelog.

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.

Rate this page:

Need some help?

We all do sometimes; code is hard. Get help now from our support team, or lean on the wisdom of the crowd by visiting Twilio's Stack Overflow Collective or browsing the Twilio tag on Stack Overflow.

Loading Code Sample...
        
        
        

        Thank you for your feedback!

        Please select the reason(s) for your feedback. The additional information you provide helps us improve our documentation:

        Sending your feedback...
        🎉 Thank you for your feedback!
        Something went wrong. Please try again.

        Thanks for your feedback!

        thanks-feedback-gif