frontendlogger v1.1.1
frontendlogger
frontendlogger is a JavaScript library for sending logs of front events and errors to a server.
This library sends logs to the server only when it catches a warning or a critical event. Logs sent to the server are composed of the last events logs.
It integrates easily with an ELK (Elasticsearch-Logstash-Kibana) stack.
Installing
The simplest way to install frontendlogger is to use npm:
npm install frontendlogger
or bower:
bower install frontendlogger
After that, you have to include it with a script tag in your HTML file:
<script src="path_to_bower_components/frontendlogger/frontendlogger.js"></script>
Configuration
setServerUrl (default: "http://10.10.10.10:8080")
To use this library, you have to set the URL of the server to which you want to send your application logs. To do that, simply use the setServerUrl command; for example:
frontendlogger.setServerUrl("http://localhost:8080");
setUser (default: {})
You can also add current user information with the setUser command, for example:
frontendlogger.setUser(user);
setMaxLengthLog (default: 30)
You can also change the default length of the stack trace with the setMaxLengthLog command, for example:
frontendlogger.setMaxLengthLog(100);
addEvent
You can also add your custom event with the addEvent command, for example:
var event = {
message = "This is a critical event!",
eventLevel = 2, // 0 for debug events, 1 for warning events, 2 for critical events
eventType = "myCriticalEvent"
};
frontendlogger.addEvent(event);
frontendlogger adds automagically the current user page URL, a datetime string and the user (if defined) to your custom event.
Logstash configuration
If you want to send your application logs to Logstash, you have to use the input http plugin.
An example of Logstash configuration is the following one:
input {
http {
response_headers => {
"Access-Control-Allow-Origin" => "*"
"Access-Control-Allow-Headers" => "Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With"
"Access-Control-Allow-Methods" => "*"
"Access-Control-Allow-Credentials" => "*"
}
host => "10.10.10.10"
port => 8080
}
}
filter {
if [logType] == "frontendlogger" {
useragent {
source => "userAgentUA"
target => "UA"
}
}
}
output {
elasticsearch {}
}
With this configuration, Logstash creates an HTTP server that will listen on 10.10.10.10:8080 with some custom response headers. Logstash allows you to parse the userAgent string to get information about the user browser and OS (you can find this data in the output UA object). Finally, Logstash sends logs to Elasticsearch and you can visualize this data in the Kibana platform.