Update: On May 6, 2021 LogDNA introduced a new Browser Logger feature so that frontend developers can easily ingest browser logs, collect the diagnostic data that they need to understand when and why the user experience is degraded, and view browser data in context with other services (both on the client and server side). Learn more in this blog post: now.logdna.com/browserlogger.

Logging is an essential part of application development, monitoring, and debugging. There are countless libraries, frameworks, and services for logging backend and server-based applications. But for client-side applications, especially JavaScript-based web applications, it’s a different story. As we see increasingly complex code running on end user devices, the need to log these applications is also becoming increasingly important.

With version 3.0.1 of the LogDNA Node.js library, you can now use LogDNA’s Node.js library to log your client-side JavaScript applications to LogDNA. The library sends logs directly from your end users to LogDNA’s ingestion servers, letting you collect vital operational and debugging information without having to print logs to the console. The library offers a complete feature set including multiple log levels, customizable metadata, and the ability to add tags.

In this article, we will show you how to add client-side logging to your JavaScript applications and how it will benefit you and your team.

Adding Client-Side Logging to Your App

The LogDNA Node.js library supports Browserify and Webpack - utilities that automatically bundles JavaScript files along with any modules that they reference. You can use the require method to reference the LogDNA library from any JavaScript file, and Browserify will compile the library along with its required modules. You can then deploy the compiled file with your website as you would a normal JavaScript file.

With Browserify installed, follow the setup instructions on the Node.js agent page to initialize and configure the LogDNA agent. When declaring Logger.createLogger(), replace “API KEY HERE” with your LogDNA ingestion key. We recommend creating a new API key specifically for this use case.

const Logger = require('logdna');
const logger = Logger.createLogger('API KEY HERE', {
   hostname: 'client-device',
   app: 'my-client-side-app',
   index_meta: true
});

To avoid hard-coding your API key into your source code (which you should never do!), you can use a library such as envify to replace the API key string with an environment variable. Pass in your API key when calling Browserify, and envify will automatically insert it into the final bundle.

For example, the following code snippet replaces the hard-coded API key with the value stored in the LOGDNA_API_KEY environment variable:

const logger = Logger.createLogger(process.env.LOGDNA_API_KEY, {

   …


});

The following command calls Browserify and packages our source code file (“logdna.js”) into a bundle named “bundle.js”, replacing process.env.LOGDNA_API_KEY with our actual API key:

$ browserify logdna.js -t [ envify --LOGDNA_API_KEY <your actual="" api="" key=""> ] > bundle.js</your>

Now, you can include the newly created “bundle.js” file in your web application:

<script src="bundle.js" type="application/javascript"></script>

Pro Tip to Avoid CORS Issues

Before running the script, you will need to whitelist your domain in the LogDNA web app. Open the LogDNA web app and navigate to Settings > Organization > Whitelist Domains. Enter the domain(s) that you are deploying the script to. For example, if you are hosting a website at mydomain.com, you would add the domain as shown in the following screenshot. It may take a few minutes for your changes to take effect.

Next, let’s look at some use cases where client-side logging is helpful in combination with the server-side logging you do today.

Use Case #1: Collecting Diagnostic Data

Modern websites run full-blown applications in the browser, and like any application, these generate useful diagnostic and debugging data. However, this data is often stored on the user’s device, making it difficult to retrieve. Collecting this data typically requires using a separate solution that simulates real user behavior, or by asking users to report this data themselves.

A better way to handle this is to automatically log certain events such as errors. This immediately notifies you when a user experiences an error, and gives you the opportunity to collect relevant environmental data. For example, if your application throws an exception, you can log the full error message and stack trace directly to LogDNA.

If you have multiple deployments with different user bases—such as production, beta, and testing—you can even use tags feature to separate logs by deployment. This lets you, collect diagnostic data in your pre-release builds separately from your production builds, allowing you to troubleshoot and fix problems faster.

Use Case #2: Handling with High-Volumes of Client Log Data

In a typical client-server infrastructure, logs generated by the client are sent back to the server or simply ignored. While sending this data to your servers is helpful for collection and consolidation, it can add a significant amount of load. For high-traffic websites, this can add gigabytes or terabytes of data each day that your infrastructure will need to handle.

Client-side logging lets you bypass logging to your servers and instead log directly to LogDNA. Since LogDNA automatically scales to meet demand, this means you can collect more logs faster, and leave your backend servers to host your application.

Use Case #3: When Your Servers Fail

For any number of reasons, your users may lose access to your backend server. This might be due to an application crash, a network routing error, a new firewall policy, etc. Any of these incidents will prevent you from receiving important information about why your users lost connection. Sending your users’ logs to LogDNA provides an alternate means of collecting data in case your backend servers become unreachable.

This data could also offer insights that you can’t find in your server logs, such as the user’s browser version and session identifier.

Next Steps

With more and more applications moving to browsers and mobile devices, client-side logging is becoming more and more important as a tool for developers. LogDNA makes it easy to deploy a complete client-side logging solution with just a bit of JavaScript and single command.

We would love to hear how you'll be using LogDNA with client side logging.

To get started, check out the client side instructions for the LogDNA Node.js agent. To learn more about using the library and Node.js logging in general, check out our guide to logging Node.js applications the right way. And if you have any questions, please contact us.