Browser Adapter

Log Owl's browser adapter does not only catch errors in the browser but also allows you to collect information and metrics about your visitors. All events are reported to the Log Owl service. If you are using a self-hosted Log Owl service, you can easily configure the adapter to report to your own instance instead of Log Owl's managed service. This page will explain how to install and configure the adapter.

Highlights

  • Framework agnostic: The adapter is designed to be framework agnostic.

  • Lightweight: The entire adapter is only 8kb and is hosted on a CDN.

  • Cross-browser compatibility: Great compatibility including IE11.

  • Easy setup: Install and configure the adapter in just a minute.

Usage

Add the script to the header of your website or web application.

<script src="https://unpkg.com/@logowl/adapter-browser@2.3.0/dist/logowl-adapter-browser.js" crossorigin></script>

Configuration

To initialize the adapter with your desired configuration, you need to pass the configuration object to the init method.

<script src="https://unpkg.com/@logowl/adapter-browser@2.3.0/dist/logowl-adapter-browser.js" crossorigin></script>
<script>
window.logowl && window.logowl.init({ ticket: '2ATNP1AD70' });
</script>

Ticket

The ticket is the only mandatory information. Each service has a unique ticket and all events sent with this ticket will be attached to the corresponding service. The ticket can be found in your service on the Ticket tab.

logowl.init({
ticket: '2ATNP1AD70'
});

Endpoint

Set the endpoint property to connect to your individual Log Owl instance at a given address. Please notice that the endpoint property will be preferred to the instance property.

logowl.init({
ticket: '2ATNP1AD70',
endpoint: 'https://logowl.example.com'
});

Disable anonymization

By default, Log Owl does not store the clients IP address. Keeping track of the IP address can be enabled with the option anonymizeData.

logowl.init({
ticket: '2ATNP1AD70',
anonymizeData: false
});

Badges

Badges contain individual information that will be attached to the reported error. A badge must be of type string. You can add up to 80 badges. The key of the badge can have up to 100 characters while the value can have up to 200 characters. If these limits are exceeded, the event will not be processed.

logowl.init({
ticket: '2ATNP1AD70',
badges: {
example: 'information',
language: navigator.language
}
});

Custom element IDs

The adapter tracks which elements the user has clicked before an error occurred. Among other information about the elements, it tracks the element's ID. Alternatively, you can set a custom element ID, which helps you identify the clicked elements.

<option data-logowl-element-id="status-dropdown-option-done" value="done">Done</option>

Verifying setup

To test if everything works you can just try to execute an undefined function like so.

logowl.init({ ticket: '2ATNP1AD70' });
test();

Emitting errors manually

You can emit errors manually to build your own error handling logic.

try {
undefinedFunction();
} catch(error) {
window.logowl && window.logowl.emitError(error);
}
Edit this page