Developer's Reference - JavaScript

Developer's Reference - JavaScript - Introduction

In This Topic

The Loupe Agent for Typescript is a generic agent for JavaScript-based web applications.

If you are creating an Angular application we recommend using our dedicated Loupe Agent for Angular

The agent will hook into the window.onerror event to automatically log any uncaught JavaScript errors.

Use of the agent needs to be combined with a server component to correlate the actions your user performs client side with the corresponding server side processing, giving you a better insight into end-to-end functionality. See the [project readme](../README.md) for more details.

Adding the Agent to your Application

The Loupe Agent for Typescript is added via npm:

npm install @gibraltarsoftware/loupe-typescript

Once added, you'll need to initialize the Loupe Agent to use it. Typically you only need to instantiate the agent, passing it the window and document objects:

import { LoupeAgent } from '@gibraltarsoftware/loupe-typescript';
const loupe = new LoupeAgent(window, document);

If your JavaScript application needs to send log messages somewhere other than where it was hosted on, then you'll need to set the target:

loupe.setLogServer('https://myserver.com/');

Logging with Loupe

Now you can record log messages, which will be passed asynchronously to the Loupe Agent for your web application to be integrated with its log:

//You can pass additional details on each log message which will be serialized
//and included in the Message Details of each message on the server.
const someObject = { name: "test", code: 123, nestedObj: { a: 1} };
loupe.verbose('Javascript', 'verbose caption', 'verbose description',
    null, null, someObject, null);
loupe.information('Javascript', 'info caption', 'info description',
    null, null, someObject, null);
loupe.warning('Javascript', 'warning caption', 'warning description',
    null, null, someObject, null);
loupe.error('Javascript', 'error caption', 'error description',
    null, null, someObject, null);
loupe.critical('Javascript', 'critical caption', 'critical description',
    null, null, someObject, null);

To get the most out of logging with Loupe, see Developer's Reference - JavaScript - Logging.

Angular

Developer's Reference - Angular - Introduction

Send Feedback