Getting Started Quickly With React Logging
Tags: logging, programming, coding, react
Published: 2019-08-07 15:23:28

<!-- wp:paragraph -->
<p>Throughout this series, we've covered logging in&nbsp;<a href="https://www.scalyr.com/blog/get-started-quickly-csharp-logging/">C#</a>,&nbsp;<a href="https://www.scalyr.com/blog/get-started-quickly-java-logging">Java</a>,&nbsp;<a href="https://www.scalyr.com/blog/started-quickly-python-logging">Python</a>,&nbsp;<a href="https://www.scalyr.com/blog/getting-started-quickly-ruby-logging">Ruby</a>,&nbsp;<a href="https://www.scalyr.com/blog/getting-started-quickly-with-go-logging/">Go</a>,&nbsp;<a href="https://www.scalyr.com/blog/get-started-quickly-javascript-logging">JavaScript</a>,&nbsp;<a href="https://www.scalyr.com/blog/getting-started-quickly-with-php-logging/">PHP</a>,&nbsp;<a href="https://www.scalyr.com/blog/getting-started-swift-logging">Swift</a>, and&nbsp;<a href="https://www.scalyr.com/blog/get-started-scala-logging">Scala</a>. We've also explored a few libraries and platforms, such as&nbsp;<a href="https://www.scalyr.com/blog/log4j2-configuration-detailed-guide/">Log4j</a>,&nbsp;<a href="https://www.scalyr.com/blog/getting-started-quickly-node-js-logging/">Node.js</a>, <a href="https://www.scalyr.com/blog/started-quickly-spring-boot-logging/">Spring Boot</a>,&nbsp;<a href="https://www.scalyr.com/blog/rails-logger/">Rails</a>, and&nbsp;<a href="https://www.scalyr.com/blog/getting-started-angular-logging">Angular</a>. Today we're going to be looking at logging in React.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>In this article, we'll</p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul><li>Set up a simple React application</li><li>Work through an example of simple logging</li><li>Discuss what logging is and why it's important</li><li>Explore some other logging methods that are available to us.</li></ul>
<!-- /wp:list -->

<!-- wp:paragraph -->
<p>Let's get started!</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":3515,"align":"center"} -->
<div class="wp-block-image"><figure class="aligncenter"><img src="https://library.scalyr.com/2019/03/29085441/React_atom_image_with_scalyr_colors.png" alt="React_atom_image_with_scalyr_colors" class="wp-image-3515"/></figure></div>
<!-- /wp:image -->

<!-- wp:more -->
<!--more-->
<!-- /wp:more -->

<!-- wp:heading -->
<h2>Some Background Information</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>React, also known as React.js or React JS, is a popular front-end development library for creating user interfaces. It was originally developed for Facebook and released in 2013.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>React uses JavaScript as its core language. It allows for all the interactiveness we would expect from a JavaScript application, but with increased efficiency through something called a virtual DOM. At a very basic level, this allows only those components that have been affected to reload when changes are made, rather than the entire page. It does this by using an in-memory cache to compare a DOM object to its corresponding virtual DOM object and re-rendering only those that are different.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Because React is a JavaScript library, this means that we once again run into the issues of client-side logging, as we saw when we covered&nbsp;<a href="https://www.scalyr.com/blog/get-started-quickly-javascript-logging">JavaScript</a>. We'll review this again after we've set up our simple logging application.</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>A Simple React Application</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>To create the simplest possible React application, we'll be using Facebook's&nbsp;<a href="https://github.com/facebook/create-react-app#creating-an-app">Create React App</a>. Before we get started though, let's make sure we have all the necessary tools.</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3>Setting Up Our Package Manager</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>In order to use Create React App, you'll need a package manager, such as npx, npm, or Yarn. In this tutorial, we'll be using npm, but any one of these three options will work.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>If you're not sure whether you already have npm installed, open up a command line tool such as the Windows Command Prompt or PowerShell (Windows) or the Terminal app (MacOS). Use this command:</p>
<!-- /wp:paragraph -->

<!-- wp:preformatted -->
<pre class="wp-block-preformatted">npm -v</pre>
<!-- /wp:preformatted -->

<!-- wp:paragraph -->
<p>If npm is already installed, you'll get a version number back. For example, 6.5.0 is the version number that was returned when I ran the command, and it's the version I'm using for this tutorial. If you get something similar back, you're good to go!</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>If you don't get a version number back, you'll need to install npm first. Check out the&nbsp;<a href="https://www.npmjs.com/get-npm">npm website</a>&nbsp;to get the official instructions. In short, you'll need to download an installer from the&nbsp;<a href="https://nodejs.org/en/download/">Node.js</a> website and run it. This is because npm is distributed with Node.js. Once you've completed the installation, simply restart your computer and you're all set!</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3>Downloading the Create React App</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Now that we have npm, we're ready to create our React application. In your command line tool, you'll enter the following command:</p>
<!-- /wp:paragraph -->

<!-- wp:preformatted -->
<pre class="wp-block-preformatted">npm init react-app my-app</pre>
<!-- /wp:preformatted -->

<!-- wp:paragraph -->
<p>This downloads the code we need from the Create React App page linked above and places it inside a directory called <strong>my-app</strong>. You'll find the new directory inside your current directory.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Let's see what it looks like before we make any new changes. Use this command:</p>
<!-- /wp:paragraph -->

<!-- wp:preformatted -->
<pre class="wp-block-preformatted">cd my-app</pre>
<!-- /wp:preformatted -->

<!-- wp:paragraph -->
<p>And that will move the application into the newly created folder. Once inside, you can run the application by using the following:</p>
<!-- /wp:paragraph -->

<!-- wp:preformatted -->
<pre class="wp-block-preformatted">npm start</pre>
<!-- /wp:preformatted -->

<!-- wp:paragraph -->
<p>Next, you'll need to open up a browser window and navigate to&nbsp;<a href="http://localhost:3000"><strong>http://localhost:3000</strong></a>. You'll be able to see your application running locally. It should have some text and a spinning React logo. Not a lot going on here, but we've got all the groundwork set up to do some simple logging!</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":3516,"align":"center"} -->
<div class="wp-block-image"><figure class="aligncenter"><img src="https://library.scalyr.com/2019/03/29085538/011-1024x660.png" alt="" class="wp-image-3516"/></figure></div>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>If you want some more detailed information on how&nbsp;Create React App works, you can check out the README <a href="https://github.com/facebook/create-react-app#creating-an-app">here</a>.</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>Logging to the Console</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>The simplest way to log in React is by printing out to the console. Inside the new <strong>my-app</strong> folder you should see another folder named&nbsp;<strong>src</strong>. Inside, you'll see a file named <strong>App.js</strong>. Open it now inside the IDE or text editor of your choice. As expected, it's very short, with just a div containing a header with an image, a paragraph, and a link. We won't bother with changing any of the existing code right now, but this is where you'd start if you wanted to expand this simple app into something more complex. Instead, we're just going to add a button underneath the link by adding the following code:</p>
<!-- /wp:paragraph -->

<!-- wp:preformatted -->
<pre class="wp-block-preformatted">&lt;div&gt;
  &lt;button onClick={this.logSomething}&gt;Log Something!&lt;/button&gt;
&lt;/div&gt;</pre>
<!-- /wp:preformatted -->

<!-- wp:paragraph -->
<p>Don't forget to add the corresponding function outside the render block.</p>
<!-- /wp:paragraph -->

<!-- wp:preformatted -->
<pre class="wp-block-preformatted">logSomething = () =&gt; {
  console.log("Button was clicked.")
}</pre>
<!-- /wp:preformatted -->

<!-- wp:paragraph -->
<p>Here's what your finished <strong>App.js</strong> file should look like once you're done:</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":3517,"align":"center"} -->
<div class="wp-block-image"><figure class="aligncenter"><img src="https://library.scalyr.com/2019/03/29085616/021-969x1024.png" alt="" class="wp-image-3517"/></figure></div>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>You'll notice that the app inside your browser updates as soon as you save your changes. It should look something like this:</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":3518,"align":"center"} -->
<div class="wp-block-image"><figure class="aligncenter"><img src="https://library.scalyr.com/2019/03/29085642/03-1024x604.png" alt="" class="wp-image-3518"/></figure></div>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>To open the console, right-click inside the application window, click <strong>Inspect</strong>, and select the <strong>Console</strong> tab. You might also be able to use the F12 key to do the same thing.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":3519,"align":"center"} -->
<div class="wp-block-image"><figure class="aligncenter"><img src="https://library.scalyr.com/2019/03/29085707/04.png" alt="" class="wp-image-3519"/></figure></div>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>With the console open, you'll be able to see anything that gets printed out when the button is pressed. Click on the button now, and you should see a message printed out into the console.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":3520,"align":"center"} -->
<div class="wp-block-image"><figure class="aligncenter"><img src="https://library.scalyr.com/2019/03/29085822/05-1024x369.png" alt="" class="wp-image-3520"/></figure></div>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>And there you have it! You've created a simple logging application in React!</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>What's Logging?</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Before we go any further, let's make sure we have a solid understanding of what we mean when we talk about logging.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>At the <a href="https://www.scalyr.com/blog/get-started-quickly-csharp-logging/">very beginning of this series</a>, we defined logging, or application logging, as follows:</p>
<!-- /wp:paragraph -->

<!-- wp:quote -->
<blockquote class="wp-block-quote"><p>Application logging involves recording information about your application's runtime behavior to a more persistent medium.</p></blockquote>
<!-- /wp:quote -->

<!-- wp:paragraph -->
<p>There are two things to note here. The first is that logging provides us with information about what the application does as it's running.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>The second is that we want our logs to stick around for a while rather than disappearing immediately. The level of persistence we need may vary depending on the application, but at the very least we want to be able to read the logs even if the application crashes or the server goes down.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Now that we know what logging is, let's make sure we understand why we would want to go to all the trouble of adding logging to our applications.</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>What's the Motivation for Logging?</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Once our software is out in the world and away from the safe confines of our local debug environment, we need a way to investigate issues and analyze performance. Put simply, logging allows us to record the behavior of our application and analyze it later. With so many things that could go wrong, logged data allows us to pinpoint what error occurred and even retrace the steps the user took to create or discover the issue.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":3534,"align":"right"} -->
<div class="wp-block-image"><figure class="alignright"><img src="https://library.scalyr.com/2019/03/29091319/Logging-provides-us-with-a-strategy-for-maintaining-the-health-of-our-application.png" alt="" class="wp-image-3534"/></figure></div>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>Furthermore, by logging data and analyzing it later, we become familiar with what normal behavior looks like and may even be able to detect and prevent problems before they occur. Logging—and more importantly, logging the right data—provides us with a strategy for maintaining the health of our application.</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>What Should We Be Logging?</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Now that we know why logging is important, we need to decide what information to include. Randomly dumping data into a log file makes finding the data we actually need tedious and difficult. On the other hand, we want to provide enough information so that we can efficiently solve issues that arise. So what should we be logging?</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>We can start by conceptually thinking of each log entry as an event. An event is something of interest that happened at a particular instance in time. Our goal is to capture the information needed in order to understand the event as it occurred. Here's a list of some information that would be useful to capture:</p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul><li>A timestamp. Timestamps tell us when an event took place and when it occurred in relation to other events. Best practices suggest logging timestamps in a standard timezone, such as UTC, and using a standard format, such as ISO-8601.</li><li>Context. We want to make it as clear as possible what the event is about. Trying to debug an issue using vague logged data or error names can be extremely frustrating. Providing a good description of the context of the error makes understanding and correcting it a lot more efficient.</li><li>Log levels, such as <strong>Error</strong>, <strong>Warning</strong>, or <strong>Information</strong>. These provide more context for understanding the issue and its severity. They allow us to prioritize and focus first on those issues that have the greatest impact. They also allow us to filter through our data and analyze it more effectively.</li></ul>
<!-- /wp:list -->

<!-- wp:paragraph -->
<p>Consider this list as a baseline of information that would be helpful to log. Obviously, our simple application above falls short of these basic guidelines.</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>Issues With Client-Side Logging</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Our simple demonstration of React logging may have provided us with some information about the application's behavior while running, but our logged information definitely wasn't persistent. If we were to refresh the browser or navigate to another page, the information would disappear.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>More importantly, our application was logging information to the console of the browser. If this application was released into production rather than just running locally, we would have no way to access those logged messages.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>With many of the technologies we've explored throughout this series, we were able to use the file system to satisfy the need for a persistent medium. However, as was the case when we looked at JavaScript, that approach won't work with React. There are several security issues involved in accessing the file system from the browser, and accessing local storage on unknown and inaccessible machines is not an option.</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>Extending Our Logging Application</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Logging to the console has some benefit, mainly for debugging locally. But to get the full benefit of logging our data, we need something better. We need to find a way to satisfy the requirements outlined by the definition of logging given earlier:</p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul><li>Access to the logged information via the server and not the browser</li><li>The ability to store our data using a persistent medium</li></ul>
<!-- /wp:list -->

<!-- wp:paragraph -->
<p>In short, we need a way to send messages to a server and write them to a persistent medium. Although this sounds simple, the work involved in creating a suitable mechanism is actually quite substantial. We would need to write a separate application with an available API to accept logging messages.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Rather than bogging ourselves down with the numerous tasks involved in creating something from scratch, we can instead explore another option—namely a logging framework.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>A logging framework is a computer data logging package with methods allowing for logging at different levels. Fortunately for us, there are several existing options that satisfy our requirements.</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>Exploring a Logging Framework</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>For the purposes of this tutorial, we'll be looking at <strong><a href="https://www.npmjs.com/package/universal-react-logger">universal-react-logger</a></strong>. The description given states that it's</p>
<!-- /wp:paragraph -->

<!-- wp:quote -->
<blockquote class="wp-block-quote"><p>A logger to catch client errors on the server.</p></blockquote>
<!-- /wp:quote -->

<!-- wp:paragraph -->
<p>In addition, events triggered in the browser are sent to the server. From there, they can be printed out immediately or sent to external log services for persistent storage. Both our requirements are satisfied!</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>How does <strong>universal-react-logger</strong> work? It takes advantage of error boundaries, which were introduced with React 16. Error boundaries are primarily used to catch errors during rendering but have been extended here to catch event errors as well.</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>Working With Universal React Logger</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Now let's start implementing our logging framework. Once again, let's make sure we have all the requirements in order first.</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3>Requirements and Installation</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>As you might expect, <strong>universal-react-logger</strong> requires a React version of at least 16.2.0. To find out what version your project is running, find the <strong>node_modules</strong> folder inside your <strong>my-app</strong> application directory. Find <strong>/node_modules/react/package.json</strong> and look for the <strong>version</strong> key:</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":3521,"align":"center"} -->
<div class="wp-block-image"><figure class="aligncenter"><img src="https://library.scalyr.com/2019/03/29085923/06.png" alt="" class="wp-image-3521"/></figure></div>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>If your version of React is below 16.2.0, use the following command to upgrade:</p>
<!-- /wp:paragraph -->

<!-- wp:preformatted -->
<pre class="wp-block-preformatted">npm update</pre>
<!-- /wp:preformatted -->

<!-- wp:paragraph -->
<p>Additionally, <strong>universal-react-logger</strong> requires React Router DOM with a version of at least 4.2.2. Install it with this command:</p>
<!-- /wp:paragraph -->

<!-- wp:preformatted -->
<pre class="wp-block-preformatted">npm install --save react-router-dom</pre>
<!-- /wp:preformatted -->

<!-- wp:paragraph -->
<p>Finally, install <strong>universal-react-logger</strong>:</p>
<!-- /wp:paragraph -->

<!-- wp:preformatted -->
<pre class="wp-block-preformatted">npm i universal-react-logger</pre>
<!-- /wp:preformatted -->

<!-- wp:heading {"level":3} -->
<h3>Create a New Component</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Now that we're set up, we can create a new component and import the <strong>ErrorHandler</strong> HOC to use with it. The example below is based on the code provided on the <a href="https://www.npmjs.com/package/universal-react-logger"><strong>universal-react-logger</strong> website</a>. We'll start by creating a new file called <strong>Homepage.js</strong> and importing <strong>ErrorHandler</strong> from <strong>universal-react-logger</strong>.</p>
<!-- /wp:paragraph -->

<!-- wp:preformatted -->
<pre class="wp-block-preformatted">import { ErrorHandler} from 'universal-react-logger';</pre>
<!-- /wp:preformatted -->

<!-- wp:paragraph -->
<p>Next, we'll add a constructor to our <strong>Homepage</strong> component to set up our state and bind a few new functions.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":3522,"align":"center"} -->
<div class="wp-block-image"><figure class="aligncenter"><img src="https://library.scalyr.com/2019/03/29090006/07.png" alt="" class="wp-image-3522"/></figure></div>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>We'll also need to create the functions mentioned in the constructor, starting with the function that updates the counter:</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":3524,"align":"center"} -->
<div class="wp-block-image"><figure class="aligncenter"><img src="https://library.scalyr.com/2019/03/29090035/08.png" alt="" class="wp-image-3524"/></figure></div>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>The second function pretends to call a function that doesn't exist, resulting in an event error. It then sends the error using the <strong>setEventError</strong> function.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":3525,"align":"center"} -->
<div class="wp-block-image"><figure class="aligncenter"><img src="https://library.scalyr.com/2019/03/29090103/09.png" alt="" class="wp-image-3525"/></figure></div>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>Lastly, we'll update the render block. We'll add a condition to simulate a render error when the counter is equal to five, and we'll also have two buttons this time. One button will allow us to update the counter so we can eventually create a render error. The other will trigger an event error.&nbsp;The completed file should look like this:</p>
<!-- /wp:paragraph -->

<!-- wp:preformatted -->
<pre class="wp-block-preformatted">import React, { Component } from 'react';
import { ErrorHandler} from 'universal-react-logger';

class Homepage extends Component {

    constructor(props) {
        super(props);
        this.state = {
            counter: 0,
            error: this.props.error,
            errorInfo: this.props.errorInfo
        };
        this.handleClick = this.handleClick.bind(this);
        this.makeError = this.makeError.bind(this);
    }

    handleClick() {
        this.setState(({counter}) =&gt; ({
            counter: counter + 1
        }));
    }

    makeError () {
        try{
            // pretend to call a function that does not exist
            this.functionThatDontExist();
        } catch(error) {
            // send the error using the setEventError function
            this.props.setEventError(error);
        }
    };

    render() {
        if (this.state.counter === 5) {
            // Simulate a render error
            throw new Error('Error on render');
        }

        return (
            &lt;div&gt;
                &lt;h1 key="welcome"&gt;universal-react-logger&lt;/h1&gt;
                &lt;button onClick={this.handleClick}&gt;Update counter: {this.state.counter}&lt;/button&gt;
                &lt;button onClick={() =&gt; {this.makeError()}}&gt;Make event error&lt;/button&gt;
            &lt;/div&gt;
        );
    }
}

export default ErrorHandler(Homepage, true);</pre>
<!-- /wp:preformatted -->

<!-- wp:heading {"level":3} -->
<h3>Create a Route on the Server</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>With our component ready, we also need to add the corresponding route on the server. Inside the <strong>src</strong> folder, you'll find the <strong>index.js</strong> file. Open it and add the following:</p>
<!-- /wp:paragraph -->

<!-- wp:preformatted -->
<pre class="wp-block-preformatted">/**
 * Post client errors in order to log them
 */
app.post('/log-client-errors', (req, res) =&gt; {

    let error       = req.body.error.message;
    let errorInfo   = req.body.error.stack;

    // send these errors to some service or to a logger (ex: winston)
    //ex: logger.error(`The app received a new client log: ${error} ${errorInfo}`);

    res.status(200);
});</pre>
<!-- /wp:preformatted -->

<!-- wp:paragraph -->
<p>Now when we run the application with the server, we'll see our log messages printed to the console when we trigger an error. This means we've successfully sent a logging message from the browser back to the server!</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>What's Next?</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Even with all the work we've done here, we've barely scratched the surface of logging in React. In particular, sending logging information from the client-side back to the server involves a whole new set of variables to consider. For example, browser information, URLs, and device information might be valuable information to transmit. The features and capabilities of different logging frameworks are also worth your consideration and should be influenced by an understanding of what information you need.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>No matter what you decide, you've undoubtedly recognized that client-side logging isn't enough. It can be helpful to get an impression of the overall behavior of your application, but to be really useful, you want to consider a way to get your logs back to the server.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Knowing where to start with logging can be a daunting task, but having clear and detailed insight into the functioning of your software will be well worth the effort. Once you get to the point where you're collecting a considerable amount of data, you may want to organize it, search it, and represent it visually. You'd most likely benefit from matching client-side messages to server-side messages as well. If that's the case, your next step is to consider log aggregation, which happens to be Scalyr's specialty.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>To read more about the things you can do with your data, check out what we have to say about <a href="https://www.scalyr.com/product">log aggregation</a>! But in the meantime, start with a basic level of logging and build from there.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><em>This post was written by </em><a href="https://www.linkedin.com/in/delila-lee-92061552/"><em>Delila Lee</em></a><em>. Delila s a software developer in the NLP and ML space with degrees in both linguistics and computer science. She currently works with functional programming languages, and she does some web development on occasion.</em></p>
<!-- /wp:paragraph -->