Documentation Menu

JavaScript Logging for ASP.NET Core

Shows how to implement JavaScript logging in your ASP.NET Core web site.

  • JSNLog.AspNetCore supports .NETFramework 4.5.2 and .NETStandard 1.6 (if you use classic ASP.NET, install JSNLog which supports .Net 4.0 and up).
  • ASP.NET Core demo: jsnlog.AspNet5Demo

1. Install server side component

Install JSNLog NuGet package for ASP.NET Core:

Install-Package JSNLog.AspNetCore

2. Install jsnlog client side library from Bower

In Visual Studio 2015+, install jsnlog.js from Bower:

  • In Solution Explorer, expand Dependencies folder;
  • Right click Bower | Manage Bower Packages;
  • Click Browse link;
  • Enter jsnlog in search box;
  • Click Install.

3. Load jsnlog.js on your pages

Include a script tag in your ASP.NET Core web site, such as this (more options):

<script src="~/lib/jsnlog/jsnlog.min.js"></script>

4. Configure JSNLog middleware in startup.cs

In your startup.cs file, add the JSNLog middleware to your ASP.NET Core application before the Static Files middleware.

This short circuits logging requests from the jsnlog.js client side library and hands the log data off to your server side loggers.

using JSNLog;
                    
public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory)
{
    ...

    // Configure JSNLog
    var jsnlogConfiguration = new JsnlogConfiguration();
    app.UseJSNLog(new LoggingAdapter(loggerFactory), jsnlogConfiguration);

    app.UseStaticFiles();

    ...
}

5. Optional: Configure client side loggers with server side code

You can configure your client side loggers in your server side code, by initializing a JsnlogConfiguration object (how) and passing it to the UseJSNLog method as shown in the listing above. This way you can use the ASP.NET Core Configuration features, which are pretty cool.

To make this work, JSNLog exposes the jl-javascript-logger-definitions tag helper. This inserts a JavaScript script block in your HTML that configures the loggers.

Import the tag helper via your _ViewImports.cshtml file:

@*Add to _ViewImports.cshtml*@

@addTagHelper "*, JSNLog"

(The _ViewImports.cshtml file lives in your Views directory, next to your _ViewStart.cshtml file)

Then insert the tag helper near the top of your pages, before any JavaScript. Your _Layout.cshtml file would be a great place:

@*Add to _Layout.cshtml*@

<jl-javascript-logger-definitions />

Note that this is purely optional. JSNLog works fine out of the box without configuration. You can also configure your loggers in your JavaScript.

6. Start logging >>