Blog Home » Agent as a Module

Agent as a Module

By Todd H Gardner

We recently released a new version of the TrackJS agent as a JavaScript module. This change was often-requested and long-overdue. It will make it way easier for you to include TrackJS in your applications and bundle it with your assets.

Loading the Agent

TrackJS Agent 3.0.0 is a major-version update that supports loading as an ES6 Module, CommonJS, or AMD in addition to the classic global namespace. This enables you to easily load us with webpack, browserify, or other build system.


import { TrackJS } from 'trackjs';
TrackJS.install({ token: 'YOUR_TOKEN' });
TrackJS.track('oh no! something went wrong!');

Example Loading TrackJS as an ES6 Module

We strongly recommend bundling the agent into your web application via npm, or by downloading a known version for high-performance production systems. Bundling reduces the total number of network requests, and potential for problems accessing our CDN from browser plugins or proxies.

Our CDN still works great, and is the easiest way to get started. We took the opportunity with this major release to change our URL patterns. We stopped using the term tracker to refer to our agent as it incorrectly got caught up in overly-broad privacy-blockers.


<script src="https://cdn.trackjs.com/agent/v3/latest/t.js"></script>
<script>
  TrackJS.install({ token: "YOUR_TOKEN" });
  TrackJS.track("oh no! something went wrong!");
</script>

Example Loading TrackJS from the CDN

We automatically push the latest stable release of the agent to https://cdn.trackjs.com/agent/v3/latest/t.js. We added the major version to the URL as v3, because we don’t want people to automatically load changes that may break functionality. If you are using the previous URL, https://cdn.trackjs.com/releases/current/tracker.js, you will not get the v3 agent. “Current” is through the 2.X line only.

You can also access a specific version of our agent on the CDN using the versioned paths: https://cdn.trackjs.com/agent/3.0.0/t.js. This gives you control of when to accept changes to the agent, without having to self-host the file.

Using the Agent

The agent behaves as a singleton, reflecting that it can only be installed into the document once. Keeping with community naming norms for singletons, we changed the namespace from trackJs to TrackJS, which also supports our updated brand.

The previous agent relied on a global configuration object to install itself immediately. This had a number of advantages, but it was not always obvious to the developer and lacked explicitness. The new agent introduces a install(opts) command to explicitly control when the agent adds its listeners to the document.

install(opts) allows the agent configuration to be placed in more obvious parts of your application. However, you must understand that telemetry and error reporting will not start until the agent is installed. By delaying the call to install(opts), you may be blind to errors that occur earlier in initialization or bootstrapping of your application.

Backwards Compatibility

We remain committed to backwards compatibility. Agent 3.0.0 is fully backwards compatible with the names and API of Agent 2.X and 1.X. If you liked using trackJs as the global namespace, it’s still there. If you liked auto-initialization with window._trackJs, that still works too.

We’re bucking the trend and trying to build web software that lasts. We prioritize backwards compatibility in our software, our APIs, and our agents to make using our tools as easy as possible for you.

Grab the new agent, and let us know what you think. Our development priorities are driven by you: our customers. If you don’t use TrackJS, that’s easy to fix. Grab a free 14 day trial and let us help you fix JavaScript bugs and build better webapps.

Todd H Gardner
Todd H Gardner
CEO and Cofounder