Include JavaScript exceptions in your server side logs with JSNLog

Integrating JavaScript exception logging with your server side logs.

• Install JSNLog with Nuget (recommended)
• Documentation and source code

Introduction

The JSNLog JavaScript logging package is a JavaScript counterpart to Log4Net, NLog, Elmah, etc. It lets you insert loggers in your JavaScript code. It automatically sends the log messages to a server side component which then inserts them in your existing server side log. It supports Log4Net, NLog, Elmah and Common.Logging.

Because it has sensible default configuration settings, you can start logging right away after you have installed the JSNLog Nuget package.

It has many options, from stack traces for JavaScript exceptions to request ids to correlate messages and various filters to cut down the volume of log messages. You can also log to the browser console, so there is no more need to litter your code with console.log statements. This can all be configured in your web.config, or in your JavaScript.

Why and how

Your web site consists of C#/VB code running on the server, and JavaScript running on the browser.

When an exception happens in your C#/VB code, you log it, so you can fix the bug.

Using your server side logging package, such as Log4Net, NLog or Elmah, with loggers configured via web.config.

try
{
    ....
}
catch (Exception e)
{
    ILog log = LogManager.GetLogger("serverlogger");
    log.Fatal(e.ToString());
}

But what about exceptions in your JavaScript code?

try
{
    ....
}
catch(err)
{
    ????
}

Log the JavaScript exception on the client with JSNLog, which sends it to the server.

JSNLog will pass the JavaScript exception log message with its stack trace on to your server side logging package, so it winds up in your server side logs. You can log extra information, such as the values of variables.

try
{
    ....
}
catch(e)
{
    // Log the exception, complete with stack trace
    JL("jsLogger").fatalException({ "msg": "something went wrong!", "variable1": variable1, ... }, e);
}

Or use a window.onerror handler, to catch all uncaught exceptions:

window.onerror = function (errorMsg, url, lineNumber, column, errorObj) {
    JL("onerrorLogger").fatalException({
        "msg": "something went wrong!", 
        "errorMsg": errorMsg, "url": url, 
        "line number": lineNumber, "column": column
    }, errorObj);
        
    return false;
}

More about JavaScript exception logging

Benefits

• Extensive documentation. Easy to install.
• No need to pay fees to a third party logging service.
• JavaScript log messages go into the same logs as your server side log messages.
• Or send JavaScript log messages to the browser console.
• Uses a tiny JavaScript library that can be loaded as an AMD module or with a simple script tag, or as part of a bundle.
• Request ids correlate JavaScript log messages and server side log messages generated by the same user session.
• Configure JavaScript loggers in your web.config.
• Many filtering options to prevent flooding your server with JavaScript log messages.
• Option to send JavaScript log messages in batches of 2 or more for greater efficiency.
• Logs JSON objects as well as strings.

Next step

• Install JSNLog via NuGet (how):

  Install-Package JSNLog

• Full documentation is on the web site of the JSNLog JavaScript logging package.

If you like this article, please vote for it.