NexTrace: Restoring Network and Console Developer Tools For Next.js
If you were to ask me to write my favorite line of code, I would, without hesitation, hammer away at my keys: “console.log().” This simple little call expression has been my silver bullet — often more reliable than any guidance AI or Stack Overflow could bring. And while I would love to wax poetic about just how powerful it can be, I probably wouldn’t be telling you anything you don’t know. But what if I told you that there is a community of developers that have limited access to this tool?
The Problem
When I heard about all the exciting changes with Next.js 13, I decided to npx create-next-app@latest and tinker around. The shiny new App Router offers an intuitive approach to server routing and component rendering. I spun up my app and eventually wrote my first console.log(). This is what I saw:
My console logs in the browser’s developer tools were nowhere to be found. So be it, I thought. I can use the terminal instead. I switched over to the Network Tab to inspect my fetch requests. Again, what I saw:
My HTTP requests were missing from the Network tab as well. Surely, I thought, the sixth most popular web framework of 2023 has a solution for this? As it turns out, the answer to my question was no.
Don’t get me wrong– Next.js and Server-Side-Rendering (SSR) is almost certainly the future of web development. SSR offers considerable benefits to performance and user experience while making your app more search engine optimized. When you build an app using Next.js, you can sleep at night knowing that your <h2> elements matter to the web-scrapers looking to bring your content to the world. Still, I couldn’t imagine a world where developers of the future didn’t have access to fundamental debugging and metric analysis tools.
Introducing NexTrace
NexTrace is a VSCode extension that solves Next.js’ limited network and log visibility without sacrificing the benefits the framework has to offer. Next.js developers can use NexTrace to display all HTTP requests and console logs that occur when running their application, regardless of the component rendering client or server-side. It provides developers with intuitive graph displays (thank you, D3) that imitates the Chrome Dev Tools in a native VSCode environment. NexTrace presents a collection of metrics displayed in a table with charts that synthesize the data. Our extension effectively restores the network and console tabs of the browser’s developer tools and serves as a one-stop shop for this data.
Using NexTrace
To begin, a user selects the root file/entry point and root directory of their application and presses ‘START’. Doing so will open up a local host server on the user’s machine for receiving data from the root application’s monitored network requests. The user is free to go about changing their code during this process and when they are finished, simply presses ‘STOP’.
When the user selects their files and clicks start, our extension scans through the selected files and generates an abstract syntax tree (AST) using Facebook’s jscodeshift to modify the developer’s code. We leverage the observability tools provided by the folks over at OpenTelemetry and prepare the user’s code with the necessary boilerplate. From there, the developer is free to spin up their application and view the outcomes of their network requests and console logs.
The Metrics panel displays a waterfall chart of all the requests through time. There are three pie charts that display the average duration, total duration and status code distribution of incoming requests. Below that is a table that displays the endpoint, status, method, type, duration (in milliseconds) and whether the component is rendered server-side or client-side. The best part? You can gather these metrics in real time, allowing the developer to spot unnecessary component re-renders, failed network requests, and meaningful insights into the overall health of their application.
The Console panel displays a table of all console logs that are fired during runtime, regardless of being rendered client or server-side. Like its metrics counterpart, the extension renders incoming logs in real time. We took advantage of the VSCode API to implement single-click file navigation for each log, allowing a developer to quickly and more easily debug their application.
When the developer is finished using our extension and presses ‘STOP’, a similar AST traversal removes the boilerplate code.
Keeping Things Safe
Building an application that effectively works as a codemod presents some unique challenges. Our philosophy while building has been to work with a developer’s codebase in a minimally invasive manner while bringing support to as many developers as possible. To protect the developer’s code, we only interface with it through abstract syntax tree traversal. This decision provides a plethora of security benefits that wouldn’t otherwise be available with regex. The decision to work directly on the user’s code instead of staging a ‘copy’ of the user’s code was difficult, but it ultimately means that the user can interface with their application while running our extension and their changes will persist when they press ‘STOP’. For an extension aiming to provide a solution to debugging, this feature is a must. We also added features that help prevent undue overhead for the developer such as introducing a file cleaning feature and filtering out unnecessary file collections such as node_modules, .git, .next and more. We’ve also considered safety features where if the user forgets to press STOP, our extension will scan for existing boiler plate code prior to adding additional copies. State preservation is also a key component of our extension. Once a user uploads a directory and file, it is preserved in our extension until it is removed.
Our goal has been to make NexTrace intuitive and straightforward for developers. For this reason, we have configured NexTrace to support .js, .jsx, .ts and .tsx file types at launch. Our extension currently supports async/await, .then, and fetch syntax for network requests.
Conclusion
If you would like to try NexTrace for yourself, simply head over to the VSCode Extension Marketplace, or visit our website here. We are incredibly excited to put these debugging and metric analysis tools back in the hands of Next.js developers. May you revel in the power of console.log() once more.
If you are interested in contributing to NexTrace, please refer to our GitHub for contribution guidelines. We would love for you to contribute.
The NexTrace team is proud and excited to launch our extension. If you have any questions, please feel free to reach out! We would love to connect.
The NexTrace Team and Co-Authors
Charles Dunlap | GitHub | LinkedIn
