Documentation

JavaScript

Open your main layout html file and add the following snippet into the <head> directly above any of your application's JavaScript. This way Trackets can initialize everything properly and capture errors from your application.

<script type="text/javascript" data-trackets-key="..." src="https://trackets.s3.amazonaws.com/client.js"></script>

After inserting the HTML snippet above, open the page in your favorite web browser, open the JavaScript console and paste in the following code to create a test error.

Trackets.notify("Test error");

Now just reload the project page and you should see the error show up. If it didn't work, check that your API key in the HTML snippet is the same as the public API key of the project, which you can see under the project settings. If you're still having trouble getting Trackets to work, email us at info@trackets.com and we'll gladly help you out. If your application is written using Ruby on Rails, you can make use of your Ruby tracking, which also includes a simpler way to track the JavaScript errors.

Advanced error tracking

In order to catch all errors with the accompanying stacktrace, Trackets will override all global APIs with a simple and safe wrapper, which catches all exceptions and sends them to our servers. This might not be what you're looking for, which is why we're offering an alternative solution of handling the exceptions manually in your application code, which is in the form of the Trackets.notify function. You can either give it the actual error object, which is useful when handling exceptions with try/catch, in which case Trackets will automatically extract all of the data from the exception object.

try {
throw new Error("Something went wrong");
} catch (e) {
Trackets.notify(e);
}

Or you can invoke it manually with an error message and an optional file name and a line number.

Trackets.notify("Something went wrong", "file.js", 42);

Custom user data

You can also add custom user data to your errors. This could be things like the user's email, name, subscription plan, or anything else entirely. This data is then stored with every error that is captured for that particular user.

Trackets.custom_data = {
email: "john@example.com",
account_info: {
user_id: "123",
name: "John Doe",
plan_id: "83452"
}
};

Event tracking

While Trackets will log user actions by default, you can add your custom events containing a message, log level and an action. The message should describe what happened, the log level can be debug, info, warn, and error, and the action is basically a category, by which you'll be able to filter the event log. This could be anything from the name of the component, such as "authentication", to a type of user action that caused this, such as "drag-n-drop".

Trackets.pushEvent({
message: "User logged in",
level: "info",
action: "authentication"
});

Every message in the event log will get a timestamp attached automatically. The messages are then displayed on each error page in chronological order. You can also attach arbitrary data to each event, which will then be displayed as formatted JSON.

Trackets.pushEvent({
message: "User logged in",
level: "info",
action: "authentication",
data: { user_id: 123, email: "john@example.com" }
});

Currently we have a limit for 100 custom events in each error. If your application logs more than 100 events, the oldest ones will simply get pushed away from the log, which means only the newest 100 events will get logged. If your application requires more than 100 events, email us at info@trackets.com and we'll increase the limit based on your needs.

Calling functions in a safe way

Sometimes all you want to do is just call a single function and have it's exception be handled by the Trackets client script. We provide a simple helper for this, which simply calls your function while also wrapping it in the try/catch block, to make sure no exceptions happen unnoticed. Here's how you would call a simple function:

Trackets.guard(someFunction);

If your function is a method and/or takes additional arguments, you can provide those as additional arguments to the Trackets.guard call,

Trackets.guard(someFunction, someObject, 1, 2);

which is equivalent to the following snippet.

try {
someObject.someFunction(1, 2);
} catch (e) {
Trackets.notify(e);
}

Sourcemaps

If your subscription supports sourcemaps, Trackets will automatically download them based on the sourcemap standard. There is no additional configuration that needs to happen from your end, only make sure that the sourcemap is publically available.


We are working on an API to support private upload of sourcemaps. If you're interested in this feature, don't hesitate to contact us at info@trackets.com.

Feedback