Advanced JavaScript applications are increasingly being rendered on the server-side to offer faster loading speed for clients and wider compatibility with search engines and mobile devices. Many of these apps are called “isomorphic” meaning requests can be handled either by a server or a client. The rise of isomorphic app design is due in part to the introduction of frameworks such as Rendr and React, which allow engineers to build rich and dynamic websites where the processing of requests may be performed on either the client or the server-side, depending on what makes the most sense with the current state of the application.
The overwhelming advantage of the isomorphic approach is that developers don’t have to divide their code into distinct client and server-side collections, or spend time trying to determine where to place a particular piece of code to allow for the best performance.
Yet isomorphism also presents challenges. While the ability of code to be executed on either the client or the server-side depending on the state of the application affords a more performant experience, it also makes trying to debug that code more challenging for the developer. This is because finding and identifying bugs is hard in an isomorphic environment (although bugs are generally easy to fix once they are identified).
In this article, we’re going to look at a solution for this challenge. Specifically, we’ll debug isomorphic applications using Rollbar’s Javascript debugging tools.
We’ll walk through how to set up a project, connect your application to the project, and then investigate and diagnose problems faster and with more information at your fingertips than you have ever had before.
I used a React application when putting together this article, but Rollbar supports many other languages and frameworks. If you’d like to try the React application out with the same project, you can clone or download it from https://github.com/echovue/react-server-example. The project itself requires a couple of changes before we get going, but we’ll cover those next.
Configuring Your Project with Rollbar
The first step is to integrate our project with our Rollbar account. Rollbar offers a 14-day trial which you can sign up for here. For this example, I picked the React SDK. The installation page includes instructions on how to enable Rollbar monitoring for both the server and client of your application. If you’re following along, you’ll want to open up server.js for editing and replace the following line with the Rollbar access token.
var rollbar = new Rollbar("*** Replace with Rollbar Server-Side Access Token ***")
You’ll also need to install the Rollbar node module. I’m using npm and achieved this with the following command.
$ npm install --save rollbar
Now install the other modules:
$ npm install
And start the application:
$ node server.js
With that app started, you can access it from your browser. You should get a notification sent to Rollbar. This is sent when a request is received “/” and simply sends an info-level log message that a request has been received.
Figure 4. Information Log Entry Sent to Rollbar
Try to navigate to an invalid page, for instance http://localhost:3000/invalid. This results in the generation of an error event, which is uploaded to the Rollbar API as well.
Investigating the Error with Javascript Telemetry
If you click on the error listed on your project dashboard, you’ll be taken to a page which provides more in-depth information on the problem itself. By using Rollbar to track errors in your projects, you’ll be able to identify problems promptly, understand the scope of the problem and specific factors which may be causing them, as well as controls to manage the assignment, triage, and resolution of the issue.
Figure 6. Details of Error Occurrence and Current Status
Below the occurrence graphics, a series of tabs is available with aggregate information about the circumstances surrounding the bug. You can view information about the browsers and operating systems involved and originating IP addresses, and even access Rollbar community resources which may identify similar issues and related information from other users.
Telemetry is perhaps the most useful section on the entire page. When a user encounters a problem on a website, often the hardest part is trying to recreate the series of events which precipitated the error. The Telemetry section will list in chronological order the sequence of events immediately before the failure, allowing you to see what happened and when, and quickly identify the cause of the problem. Telemetry is most useful on client-side apps since we often want to track user interactions that may have kicked off the error.
As you integrate your projects, you also have the support of an extended and well-designed documentation library covering all aspects of the Rollbar experience, from integration of each of the SDKs into your projects to source control connectivity, issue tracking and messaging options.
Conclusion
And there you have it. Yes, isomorphic apps with server-side rendering can be somewhat harder to debug. But it’s certainly not impossible. With tools like Rollbar on your side, you can find and fix bugs in isomorphic applications.
