Skip to contentSkip to navigationSkip to topbar
Rate this page:
On this page

JavaScript Logger


(warning)

Warning

This documentation 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, 2026(link takes you to an external page).

We recommend migrating your application to the API provided by our preferred video partner, Zoom. We've prepared this migration guide(link takes you to an external page) 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

access-the-javascript-logger page anchor

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(link takes you to an external page) (npm) or using the Twilio CDN.

See the list of supported browsers here.

NPM

npm page anchor

Install the Video JavaScript SDK using npm:


_10
npm install --save twilio-video

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


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

Script tag

script-tag page anchor

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.


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

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


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

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


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

(information)

Info

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(link takes you to an external page).

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


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


Use the JavaScript Logger API

use-the-javascript-logger-api page anchor

The Video JavaScript SDK uses the loglevel(link takes you to an external page) 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(link takes you to an external page) 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:


_10
const logger = Twilio.Video.Logger.getLogger('twilio-video');
_10
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

intercept-javascript-sdk-logs page anchor

The loglevel module's plugin system(link takes you to an external page) 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.


_19
// access the JS Logger API
_19
const logger = Twilio.Video.Logger.getLogger('twilio-video');
_19
_19
// overwrite the loglevel module's original methodFactory
_19
// and prefix each log with `[My Application]`
_19
const originalFactory = logger.methodFactory;
_19
logger.methodFactory = function (methodName, logLevel, loggerName) {
_19
const method = originalFactory(methodName, logLevel, loggerName);
_19
return function (datetime, logLevel, component, message, data) {
_19
const prefix = '[My Application]';
_19
method(prefix, datetime, logLevel, component, message, data);
_19
};
_19
};
_19
_19
// set the logger to log debug messages and above
_19
logger.setLevel('debug');
_19
_19
// 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:


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

NameDescription
datetimeThe current date and time in simplified extended ISO format(link takes you to an external page)
logLevelThe current logging level. Possible values are trace, debug, info, warn, error, and silent.
componentThe 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.
messageThe message that is being logged
dataAn 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(link takes you to an external page).

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.


_17
// access the JS Logger API
_17
const logger = Twilio.Video.Logger.getLogger('twilio-video');
_17
logger.setLevel("debug");
_17
_17
// overwrite the loglevel module's original methodFactory
_17
const originalFactory = logger.methodFactory;
_17
logger.methodFactory = function (methodName, logLevel, loggerName) {
_17
const method = originalFactory(methodName, logLevel, loggerName);
_17
return function (datetime, logLevel, component, message, data) {
_17
if (component.includes('connect')) {
_17
// assume you have a function called sendToServerFoo, which
_17
// can send a line of text to a remote server
_17
sendToServerFoo(datetime, logLevel, component, message, data);
_17
}
_17
method(datetime, logLevel, component, message, data);
_17
};
_17
};

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


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

Send JavaScript logs to a remote server

send-javascript-logs-to-a-remote-server page anchor

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(link takes you to an external page) module is a pre-written plugin that sends logs to a server with minimal configuration.

NPM

Install loglevel-plugin-remote using npm:


_10
npm i loglevel-plugin-remote --save

Then, you can use the plugin in your application:


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


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


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


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

You can configure how and where the plugin sends logs. See the plugin's documentation(link takes you to an external page) for more information and full configuration options.


Rate this page: