Let's add an appender that will forward your Angular app logs to Loom

This guide assumes you are using the Angular log service, i.e. $log.

Step 1 - Adding the script tag

Next to the <script> tag that adds the Angular script, add another tag as follows:
<script src="//static.loomsystems.com/scripts/loom-sdk-angular.min.js"></script>

Step 2 - Configuring the appender

Add a .config section and 'loomLogger' as a dependency to your app, replacing 'customer-name' with your customer name (you can find it in the domain name you use to access Loom, e.g. this-part.loomsystems.com):

angular.module( 'myApp', ['loomLogger'] )
 .config( function( LoomLoggerProvider ) {

    LoomLoggerProvider
        .customerName( 'customer-name' );

});

Step 3 - Using the logger

Once configured, simply use $log. For example:

angular.module( 'myApp')
 .controller( 'MyCtrl', function( $log ) {

// send plain messages
$log.debug('hello world');

// send structured logs like a pro
$log.info({
'message': 'hello world',
'anotherKey': 'you can add arbitrary fields to your structured logs');
});

// send a message with logger name
$log.getLogger('world_greeting_logger').info('hello world');

// this will cause an error which will be logged
I_am_a_troublemaker

}

Step 4 - Seeing the events in Loom

In the data-inputs screen, check the active data inputs.
The events arrive at the Default data input named "Raw events REST endpoint" - which should turn green once data starts streaming.

Each log line will be accompanied by some metadata the logger collects (browser type and version, screen size and more).
This might be helpful when troubleshooting issues. It is recommended that you add your own metadata to the logs. Examples of useful such metadata are the application version, session and user ids, name of the current view.

Note that unhandled exceptions are also sent, since Angular invokes $log.error for those.

Did this answer your question?