Web applications, and single page applications in particular, make it hard to see errors that are happening in client side JavaScript.
Flinger flings logs from your browser clients back to your node servers so you can see what your users are up to.
Flinger is node middleware for express or connect that does two things:
- For the client, serves a client library that monkey patches
console.log
console.error
Error
- For the server, provides a receiver that catches and logs client logs
- Can optionally send those logs to a HipChat room.
- Need to Specify 2 env vars HCToken (Hipchat oauthToken) and HCRoom(name of hipchat room to send messages to)
- Can optionally send those logs to a HipChat room.
Flinger uses jQuery for HTTP back to the server. Make sure it is in your page.
Here is the most basic installation possible:
npm install flinger
var path = require('path');
var express = require('express');
var flinger = require('flinger');
var app = express()
.use(express.cookieParser())
.use(express.static(path.join(__dirname, 'client')))
.use(flinger())
.listen(9999);
Flinger serves its client library automatically as a convenience, so on the client:
<script type="text/javascript" src="/flinger.js"></script>
This redirects, by default:
- client
console.log(...)
to serverconsole.log(...)
- client
console.error(...)
to serverconsole.error(...)
- client
new Error(...)
to serverconsole.error(...)
Flinger lets you hook to reformat or log as you see fit, flinger really is:
flinger(onConsoleLog, onConsoleWarn, onConsoleError, onException)
Each of the onXXX
functions is:
function handler(logEvent){}
Each logEvent
is:
request
, flinger logs over HTTP, so you can get at cookies etc to identify users and make custom logsarguments
, the javascriptarguments
captured on the client function
If you want to prefix the flinger log messages, say with your user session or user identifier -- we already thought of that:
window.flingerAdditionalClientData = function () {
# you can also use something like window.location.href to help
# identify the app sending the error.
return "Your User ID Here!";
}
Want to format your messages:
window.flingerFormatter = function(x){
return "Your Format Here!";
}
Want to post to a different endpoint or have a server that doesn't live at '/'
<script>
window.flingerURL("http://www.domain.com/endpoint");
</script>
To disable posting to server, set flingerURL
to an empty string.
You can do this anywhere you like client side. Yep, it's a global function, but did we mention that we're monkey patching console.log to make this work? Don't panic.
And you can switch things off, which will log locally but not got to the server:
console.log.on = false;
console.warn.on = true;
console.error.on = true;
console.exception.on = true;
By default flinger will log out the error from the client. But what if you want more information from the request, or prepend something to the log output?
Flinger has that covered with augmentLog.
Usage to prepend a date for each log message, and append some request header fields:
var flinger_handler = flinger();
flinger_handler.augmentLog = function (logArguments,request) {
var stamp = new Date();
logArguments.unshift(stamp + " Client side error >> ");
logArguments.push("UserAgent : "+ request.headers['user-agent']);
logArguments.push("Referer : "+ request.headers['referer']);
};
// now register this handler with the middleware stack
app.use(flinger_handler);