ajbrown / angular-loggly-logger

An AngularJS module which sends your $log message to loggly, and provides a service for manually sending messages to loggly.

This project contains the complete source code for my personal website, which is generated using Jekyll and hosted with Github Pages.

The information I provide here is my own creative work, and any opinions expressed are those of my own. Please consider any examples or solutions as advice only, and make sure things work correctly in your environment. I won't be liable if you break something, introduce a security hole, or run up a usage bill.

Running Jekyll

bundle exec jekyll serve

angular-loggly-logger's Issues

Send uncaught errors

Is there any way to send to loggly uncaught errors?
ideas? any clue to solve it?

Middleware: Session Tracking

Allow tracking of all requests from a single browser session by automatically adding a session field to log messages.

sendMessage doc is not right (i think)

The docs says:

LogglyLogger.sendMessage( 'Short and Stout.' )

But I get empty messages in Loggly, like this:

{}

When I changed the call to:

LogglyLogger.sendMessage( { message: 'Short and Stout.' } );

I got:

{ "message": "Short and Stout." }

As expected.

CORS even using deleteHeaders function

I installed the library and configured it as specified, I experienced CORS errors with the following
message
"Access to XMLHttpRequest at 'https://logs-01.loggly.com/inputs/<my-token>/tag/AngularJS/' from origin 'http: // localhost: 5000' has been blocked by CORS policy: Response to preflight request does not pass access control check: In 'Access-Control-Allow-Origin' header is present on the requested resource. "
but even using the deleteHeaders function to solve this, keeps happening. No log goes to loggly. I'm using AngularJS v1.6.43

Send uncaught injector errors of angular

Is there any way to send to loggly uncaught errors of injector as currently only reference errors are send to loggly?
Need help to solve this.

Handle Offline Case

I would like the (rare) case that when the user is offline, I don't want that the my application fails (blocks). One simple solution would be to add a timeout to the request:

src: https://gist.github.com/hale/5901734

return typeof callback === "function" ? callback(500, {
            error: {
              code: type,
              type: type,
              message: "An unexpected error has occurred with Stripe.js. This may\nbe due to network connectivity issues, so you should try\nagain (you won't be charged twice). If you're still having\nproblems, please let us know!"
            }
          }) : void 0;

what do you think?

Cheers

Error when using $httpProvider.defaults.withCredentials = true

Hi,

There is a problem with CORS when using your library and withCredentials mode is on. Im using angular ver 1.4

Here is error message:

XMLHttpRequest cannot load https://logs-01.loggly.com/inputs/XXX/tag/AngularJS/. A wildcard '*' cannot be used in the 'Access-Control-Allow-Origin' header when the credentials flag is true. Origin 'http://localhost:9000' is therefore not allowed access. The credentials mode of an XMLHttpRequest is controlled by the withCredentials attribute.

So the solution is very easy. Just need to add withCredentials: false in your $http config object.

I can do a PR if you want, or you will do it?

Best,
Milos

Support latest versions of Angular in Bower.json

Seems Bower is expecting "angular": "~1.2.16", which is somewhat outdated

DepShield Deprecation Notice

Depshield will be deprecated on Monday December 12th

Please install our new product, Sonatype Lift with advanced features

CORS issue with 0.2

We had this issue, and found this loggly forum discussion where a few others confirmed it:

http://community.loggly.com/customer/portal/questions/16136807-posting-logs-with-cors?b_id=50

We downgraded to 0.1.3 and the problem went away.

From what I can tell, 0.1.3 used the tracking pixel method, and 0.2 uses an XHR request, so the browser initiates an OPTIONS pre-flight request with the following headers:

Access-Control-Request-Headers:accept, authorization, content-type
Access-Control-Request-Method:POST

And the loggly server rejects it with:

Request Method:OPTIONS
Status Code:405 Method Not Allowed

I assume some people are using 0.2 successfully, so just wondering if there something different we should be doing in configuration?

Support toggling loggly sending for different $log levels

During development, I tend to use $log.debug() so I can keep tabs on things happening under the curtain. $log.debugIsEnabled is then set to false when deploying to production to reduce the noise.

When the loggly $log decoration is in place, those $log.debug messages also get sent to Loggly, increasing the noise. Disabling loggly sending while in development isn't the best solution because I still want to send some information to a development input.

We should allow turning off loggly sending for certain levels. Something like this:

LogglyLoggerProvider.disableLogLevel( 'debug' );

LogglyLoggerProvider.disableLogLevel( ['debug', 'info'] );

.sendConsoleErrors( true) is broken

Does not send the actual error message.
Tried with throw "this is my custom error"; but custom message could not be seen in Loggly, though script error log was there.

`angular-mocks` and `angular-loader` should be `devDependencies`

These libs are not dependencies, they are dev dependencies. This is causing bower install conflicts in my app. https://github.com/ajbrown/angular-loggly-logger/blob/master/bower.json#L28

Also, 0.2.4 should probably be 0.3.0 if you're strictly following semver since new features were added.

I've added a custom bower resolution in my app for now but that isn't ideal.

Release latest on npm

The latest version on npm is 0.2.4.

Add `logUserAgent()`?

It's easy enough to log user agent yourself, but the same could be said for time and url. Is logUserAgent something we could add? Happy to send a PR.

Resource interpreted as Image but transferred with MIME type text/html

Resource interpreted as Image but transferred with MIME type text/htmlreceived for every request made to loggly. Actual text is {"response" : "ok"} with all functionality working and loggly receiving all requests. Trying to understand best method to remove the client-side warning. Thoughts?

Batch log requests

It would be nice to batch log messages that happen in quick succession. This would cut down on the number of network requests for errors that happen in tight loops, or anything else where multiple log messages are sent in quick succession. I'm not sure how to do this without potentially cutting off the last log messages if the user closes the page quickly after causing the log messages to be sent.

logger.batchLogDelay(1000) could make the logger wait 1000ms after receiving a log to send the original log and any logs that have been sent since the original one.

RequireJS Only?

The provided installation instructions don't include an alternative for those who don't have require.
To get this plugin to work I had to tweak my bower.json overrides to include:

    "angular-loggly-logger": {
      "main": [
        "angular-loggly-logger.js"
      ]
    }

to get main-bower-files to inject the right file. Then I specified the module dependency like:

angular
    .module('xxx', [
        'logglyLogger.logger'
    ]);

and now it works. Maybe this can serve as some helpful documentation for those looking to install as a bower dependency using gulp.

Fake logging events?

First off I apologize if this is a naive question but, if this is entirely client-sided, couldn't a malicious user send fake logs or an absurd number of logs trivially via just using the chrome console? I'd love, love, love, to include client side logs to my log aggregation, but it seems like a huge risk to me.

msg.stack is undefined

Hello!

Line 204:

var msg = args.length == 1 ? args[0] : args;

If I log the msg variable:

Then the stack is not in msg but in msg[0].

I added a quick fix:

if (angular.isDefined(msg.stack || msg[0].stack)) {
    //handling console errors
    if (logger.sendConsoleErrors() === true) {
        sending.message = msg.message || msg[0].message;
        sending.stack = msg.stack || msg[0].stack;
    } else {
        return;
    }
}

Module could not get injected after Uglifying

This is current code and not working after uglify task:

; (function( angular ) {
  "use strict";

  angular.module( 'logglyLogger.logger', [] )
...
...
  }]);

})(window.angular);

But this one works:

  "use strict";

  angular.module( 'logglyLogger.logger', [] )
...
...
  }]);

It seems first line and last line are not necessary,
Could this get fixed in next version ?
So we could use logglyLogger as a bower dependency.

p.s. if matters grunt-contrib-uglify version 0.10.1 was used.

tags not being sent correctly

Looks like the URL with tags is malformed. Using LogglyLoggerProvider.inputTag('angular') I can see it generating a URL like https://logs-01.loggly.com/inputs/.../tag/angular.gif, which in Loggly shows:

dropped invalid tags: ("angular.gif?...")
type: InvalidTags

Looks like it just needs a trailing / here:

diff --git a/angular-loggly-logger.js b/angular-loggly-logger.js
index 733adbc..f17ea35 100644
--- a/angular-loggly-logger.js
+++ b/angular-loggly-logger.js
@@ -35,7 +35,7 @@

         var buildUrl = function ( data ) {
           var msg = encodeURIComponent( angular.toJson( data ) );
-          return (https ? 'https' : 'http') + endpoint + token + (tag ? '/tag/'+ tag : '') + '.gif?PLAINTEXT=' + msg;
+          return (https ? 'https' : 'http') + endpoint + token + (tag ? '/tag/'+ tag +'/': '') + '.gif?PLAINTEXT=' + msg;
         };

         this.setExtra = function (d) {

Tried it out and it works, so will create a PR.

Support customizing `timestamp`, `level` labels.

It would be nice to have the ability to customize the label for the timestamp field that includeTimestamp automatically sets (or any other preset field). This would be useful for anyone who wants to maintain a consistent format with other logs that are being sent to loggly from non-angular sources.

This could easily be supported by adding .labels function that accepts an object of label overrides. I'm happy to send a PR if this is approved.

logger
    .includeTimestamp(true)
    .labels({
        timestamp: 'dt',
        level: 'lvl'
    });

Alternatively, you could add support for specifying functions as fields so that users could add the timestamp themselves, but that leads to the possibility of having js errors in your logging. You could even bind the log context to the functions to give them access to some log information like the log level. Happy to send a PR for this too.

logger
    .fields({
        dt: function() { return (new Date()).toISOString() }
        lvl: function() { return this.level }
    });

Update bower.json to latest version of angular.

Same as #9 just newer. I'm using this with 1.4.8 and it works fine, but I'm not sure about newer versions.

stack isn't sent for errors caught by window.onerror

The stack is only sent for errors caught by the $log provider (I think). Errors caught by window.onerror don't sent their stack. I think this code needs to change to log the stack from the error object.

window.onerror = function (msg, url, line, col, error) {
    logger.sendMessage({
        level : 'ERROR',
        message: msg,
        url: url,
        line: line,
        col: col,
        stack: error && error.stack
    });
...

Happy to send a PR.

Rename module to not use the ng prefix

I believe the ng prefix (as in ngLoggly) as meant to be used only for Angular core modules. Maybe worth changing it?

Support adding extra fields during application run time.

With the current implementation, setExtra is only available during bootstrap since it's a method on the provider and not the service. This does not allow applications to cleanly add interesting fields which are calculated during runtime (such as the current user after a log in) to future log messages.

Allow both JSON and Text Logging

Hey AJ one of our developers recently spent some time to improve the unit tests. We submitted a pull request for you to review.

Also, we wanted to get your opinion on logging JSON and string objects. Loggly only supports one type per field. So if we log a string to json.message then we can't also log a JSON object there. This will prevent the JSON fields from showing in the field explorer and other places. One solution we thought of was to log strings to json.message and log objects to json.messageObj. This way you can send either type of data and both will show in Loggly correctly. Do you think this solution would work for your library? If so, we can submit a pull request for it.

Thanks,
Jason

$log.log undefined throws error

I would expect the following code to log "undefined" in console:

var a;
$log.log(a);

However, I got "TypeError: Cannot read property 'stack' of undefined" error. And because of this error, some JS code couldn't complete running, which caused an error state in my app.

Line 207: if(angular.isDefined(msg.stack)){ ... might also need to check if msg is undefined?

Thanks.

Add documentation to project

We should add ngdocs which can be published using the grunt build process.

Option to avoid logs flood

Hi,
I' would like to have an option to avoid flood logs from one user. Thank you for this project :)

Npm install fails unless bower is already installed

This broke our build the other night. I can reproduce fairly easily.

First, make sure bower is not installed locally or globally.

This fails (see attached debug log):

mkdir loggly_test
cd loggly_test
npm init --yes
npm install angular-loggly-logger

It works if I do it like this:

mkdir loggly_test
cd loggly_test
npm init --yes
npm install bower
npm install angular-loggly-logger

I believe the fix is simply moving bower into the "dependencies" property of package.json, so it is marked as required for installation. I want to open this issue before working on a fix.

npm-debug.log.txt

CORS issue exists with 2.4

Angular projects with custom headers still experience CORS issue. Kicks off Options requests to which the server responds with 405