Logging from JSNLog

Thomas Ardal, August 29, 2014

This post has been adapted as part of our official documentation. To read the most updated version, please check out Logging from JSNLog

Using JSNLog you will be able to log JavaScript errors to elmah.io. In this sample, we will focus about logging JavaScript errors from a ASP.NET MVC web application, but you can use JSNLog to log anything to elmah.io, so please check out their documentation.

Start by installing the JSNLog.Elmah package:

Install-Package JSNLog.Elmah

This installs and setup JSNLog into your project, using ELMAH as an appender. Then install elmah.io:

Install-Package elmah.io

Remember to input a valid log id during the installation. Add the JSNLog code before any script imports in your _Layout.cshtml file:

@Html.Raw(JSNLog.JavascriptLogging.Configure())

You are ready to log errors from JavaScript til elmah.io. To test that everything is installed correctly, launch your web application and execute the following JavaScript using Chrome Developer Tools or similar:

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

Navigate to you log at elmah.io and observe the new error. As you can see, logging JavaScript errors is now extremely simple and can be build into any try-catch, jQuery fail handlers and pretty much anywhere else. To log every JavaScript error, add the following to the bottom of the _Layout.cshtml file:

<script>
window.onerror = function (errorMsg, url, lineNumber, column, errorObj) {

    // Send object with all data to server side log, using severity fatal,
    // from logger "onerrorLogger"
    JL("onerrorLogger").fatalException({
        "msg": "Exception!",
        "errorMsg": errorMsg, "url": url,
        "line number": lineNumber, "column": column
    }, errorObj);

    // Tell browser to run its own error handler as well  
    return false;
}
</script>

This post was brought to you by the elmah.io team. elmah.io is the best error management system for .NET web applications. We monitor your website, alert you when errors start happening and help you fix errors fast.

Monitor your website



Comments