Log JavaScript client side events in your server side logs

This JavaScript logging package logs JavaScript errors, AJAX timeouts and other client side events in your server side log. Supports Elmah, Log4Net, NLog, Serilog, Common.Logging.

Install JSNLog

version 2.19.2

Automatically logs JavaScript exceptions to your server side logs (details). Lets you log other client side events such as AJAX time outs.

1. Install NuGet package

If you use Install this NuGet package
Log4Net Install-Package JSNLog.Log4Net
NLog Install-Package JSNLog.NLog
Elmah Install-Package JSNLog.Elmah

These packages contain dependencies for both ASP.NET 4.x and ASP.NET Core. However, versions below 2.8.60318.667 of the NuGet Package Manager installed in Visual Studio do not support this.

To check your Nuget version and upgrade if needed:

  1. In Visual Studio, open Tools | Extensions and Updates...;
  2. Click Updates (in left hand menu);
  3. If an update of NuGet Package Manager is available, click Update.

If you use Serilog, Common.Logging, OWIN, WebForms, flat HTML files or ASP.NET CORE, click here.

2. Add JSNLog to your pages

Add this code to your pages, before any script tags:

@*Add to your pages before the script tags*@
@Html.Raw(JSNLog.JavascriptLogging.Configure())

Your _Layout.cshtml or _Layout.vbhtml would probably be a good place for this.

3. See how to log other client side events

By default, JSNLog logs all uncaught JavaScript exceptions to your server side logs. Click here to start logging other events to your server side logs as well.

Why use JSNLog

  • You probably log server side exceptions and other events using a logging package such as Log4Net, Elmah, or NLog.
  • However, you're not logging JavaScript events. This makes fixing bugs in live JavaScript code much harder.
  • Fix this by installing JSNLog. It automatically logs client side exceptions to your server side log.
  • And you can log other JavaScript events as well, such as AJAX timeouts:
    JL().error("..message..");
  • JSNLog sends the log data to the server and into your server side log.
  • Your logs now have both the server and client side events. You can correlate them with request ids.
  • Install JSNLog

Demos and sample code

6 minute introduction

Vital Stats

Log important JavaScript events

Insert loggers in your JavaScript

JL().info("log message");

Optionally use logger names

JL("jsLogger").info("log message");

Log JavaScript exceptions, with their stack traces

try {
        ...
    } catch(e) {
        JL().fatalException("Exception info", e);
    }

Configure loggers in your web.config

<logger name="jslogger" level="FATAL" />

Or in server side code

loggers = new List
{
    new Logger { name = "jsLogger", level = "FATAL" }
}

Or configure them in your JavaScript code

JL("jsLogger").setOptions({ "level": 4000 });

Log objects as well as strings

var obj = {"f1": "v1", "f2": "v2"};
    JL().log(2500, obj);

Pass in function that returns log info

JL().log(2500, function() {
        // Only executed when log info
        // will actually be logged.
        var loginfo = expensiveOperation();
        return loginfo;
    });

See which messages belong to the same request

Request IDMessage
CB0734CE....A debug message
D623A22B....An error message
CB0734CE....Some other message
D623A22B....Yet another message
D623A22B....A fatal message
...

Use a single logging end point for multiple sites

<jsnlog defaultAjaxUrl="http://my-api-domain.com/jsnlog.logger"
  corsAllowedOriginsRegex="^http://my-xyz-domain[.]com$">
</jsnlog>

Filter out what you don't need

Only log high severity messages

// Only log messages with severity ERROR or higher
<logger level="ERROR" />

Suppress messages that match a regular expression

<logger disallow="suppress me" />

Only log for certain user agents or IP addresses

<logger userAgentRegex="MSIE 7|MSIE 8" />

Limit total messages sent to server

<jsnlog maxMessages="3">

Reduce AJAX requests by batching log messages

<ajaxAppender name="appender1" batchSize="3"/>

Suppress duplicate messages

LoggerMessage
jsLoggerx too high (x = 5)
jsLoggerx too high (x = 6)
jsLoggerx too high (x = 7)
jsLoggerx too high (x = 8)
jsLoggerx too high (x = 9)

Get the info you need, but only when you need it

  • To solve JavaScript exceptions, you often need to know what happened before they happened.
  • But you don't want to send trace messages with that context unless there actually is an exception.
  • Solution: JSNLog lets you buffer log messages on the client, and only send them when there is a fatal message.

Show log data in the console

Switch console logging on or off in one central location.

screenshot of browser console with log generated by JSNLog