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.

Install the Video JavaScript SDK using npm:

npm install --save twilio-video

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

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

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');

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');

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.

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

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

Possible 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.

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 approach, 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.

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

4
// overwrite the loglevel module's original methodFactory
5
// and prefix each log with `[My Application]`
6
const originalFactory = logger.methodFactory;
7
logger.methodFactory = function (methodName, logLevel, loggerName) {
8
  const method = originalFactory(methodName, logLevel, loggerName);
9
  return function (datetime, logLevel, component, message, data) {
10
    const prefix = '[My Application]';
11
    method(prefix, datetime, logLevel, component, message, data);
12
  };
13
};
14

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

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

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

1
[My Application] 2022-02-25T05:09:50.186Z info [connect #1] Connecting to a Room ...
2
[My Application] 2022-02-25T05:09:50.186Z debug [connect #1] Options: ...
3
[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.

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.

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

5
// overwrite the loglevel module's original methodFactory
6
const originalFactory = logger.methodFactory;
7
logger.methodFactory = function (methodName, logLevel, loggerName) {
8
  const method = originalFactory(methodName, logLevel, loggerName);
9
  return function (datetime, logLevel, component, message, data) {
10
    if (component.includes('connect')) {
11
      // assume you have a function called sendToServerFoo, which
12
      // can send a line of text to a remote server
13
      sendToServerFoo(datetime, logLevel, component, message, data);
14
    }
15
    method(datetime, logLevel, component, message, data);
16
  };
17
};

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

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

5
// overwrite the loglevel module's original methodFactory
6
const originalFactory = logger.methodFactory;
7
logger.methodFactory = function (methodName, level, loggerName) {
8
const method = originalFactory(methodName, level, loggerName);
9
 return function (datetime, logLevel, component, message, data) {
10
   method(datetime, logLevel, component, message, data);
11
   if (message === 'event' && data.group === 'signaling') {
12
     if (data.name === 'waiting') {
13
       console.warn('Twilio\'s signaling server is busy.');
14
     } else if (data.name === 'connecting') {
15
       console.log('Connecting to Twilio\'s signaling server.');
16
     } else if (data.name === 'open') {
17
       console.log('Connected to Twilio\'s signaling server.');
18
     } else if (data.name === 'closed') {
19
       if (data.level === 'error') {
20
         const { payload: { reason } } = data;
21
         console.error('Connection to Twilio\'s signaling server abruptly closed:', data.reason);
22
       } else {
23
         console.log('Connection to Twilio\'s signaling server closed.');
24
       }
25
     }
26
   }
27
 };
28
};

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.

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);

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.

1
remote.apply(Twilio.Video.Logger);
2
const logger = Logger.getLogger('twilio-video');
3
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.