Client-Side Logging: Getting Started

As software developers, we have become pretty good at logging server-side errors. When something blows up on the server, it gets logged to a file, database, or somewhere we can look at later.

But what about errors that happen on the client side? What about an event occurring at the browser that we want to log?

As we build more and more single page applications (SPAs), we are putting more and more code in the browser. As that increases, the ability to log from the browser becomes more important.

Here’s how to get started logging client-side events.

For this post, we will assume that we already have an ASP.NET Core web application running with NLog configured. Doing both is pretty easy.

We will start by configuring our ASP.NET backend to support hosting a JSNLog. To do this, add the JSNLog NuGet package.

After we have the JSNLog NuGet package installed, we need to configure Program.cs and Startup.cs.

In the program.cs file, we need to configure our NLog setup with the ConfigureLogging extension method.

In the startup.cs file, we need to configure our JSNLog endpoint. We do this using the JsnlogConfiguration class and the UseJSNLog extension method.

Now we need a client-side application.

Create an Angular project.

ng new MyProject

Install the JSNLog node module.

npm install jsnlog --save

Load JSNLog in the app.module.ts.

Now we can send logs from the client to the server.

If you have any questions or comments, hit me up on Twitter or sound off in the comments below.

References

http://jsnlog.com/Documentation/HowTo/Angular2Logging
https://github.com/NLog/NLog.Web/wiki/Getting-started-with-ASP.NET-Core-2