[SOLVED] Angular Analytics Splunk Logging

Angular Analytics Splunk Logging

I have an angular page that I've developed for my co. that I want to track the usage statistics for. Just very basic information like number of hits. I am trying to use the angulartics plugin found here. So far this is what I have in my angular page that I copied from the git examples folder:

HTML:

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Topic Tester</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="static/js/angular.min.js"></script>
    <script src="static/js/angulartics.min.js"></script>
    <script src="static/js/angulartics-splunk.min.js"></script>
    <script src="static/js/controller.js"></script>
    <script type="text/javascript">
        var sp=sp||[];
        (function(){var e=["init","identify","track","trackLink","pageview"], t=function(e){return function(){sp.push([e].concat(Array.prototype.slice.call(arguments,0)))}};
            for(var n=0;n<e.length;n++)sp[e[n]]=t(e[n])})(), sp.load=function(e,o){sp._endpoint=e;
            if(o){sp.init(o)};
            var t=document.createElement("script");
            t.type="text/javascript",t.async=!0,t.src=("https:"===document.location.protocol?"https://":"http://")+"d21ey8j28ejz92.cloudfront.net/analytics/v1/sp.min.js";
            var n=document.getElementsByTagName("script")[0];n.parentNode.insertBefore(t,n)};

        sp.load("http://localhost:9000/api/log");
    </script>
</head>

var app = angular.module('myApp',['angulartics', 
                                    'angulartics.splunk']);

Of course the script in the html needs adjusting because of the endpoint but I have a problem there. The way my co. has splunk logging setup is this: Developer does any kind of logging they want in the java app. All the logging goes to catalina.out. Application gets deployed to various remote servers (Dev, QA, Prod). Developer can run a search query in enterprise splunk hosted on company domain to search in a particular box (dev box) for a particular log file (tomcat.log, catalina.out, etc).

In this scenario, how would I make the angular app log to a file (doesn't have to be catalina.out obv since splunk can query for any log file) whereby splunk will be able to pick it up from its deployment box?

If that's not possible, do I need to put some splunk endpoint in the sp.load line whereby the angular page will send it's stats directly to splunk?

Solution

You have a couple of options here.

If you want to log to a file like the Java apps your company uses, you'll need to create a backend service that your Angular app can send data to. That backend service can then write to a file.

If you're running Splunk 6.3 or newer, you can use the HTTP Event Collector to send events over HTTP with better performance all around. You can use our Splunk logging for JavaScript library with browserify, see this GitHub issue for more details.