Debugging Next.js App in Production

Bug(s) in production NextJS app

We’ll take a simple Todo NextJS App available here — https://github.com/requestly/sample-nextjs-app
which is also live at: https://sample-nextjs-app-flax.vercel.app/

To Do App
"/": ["static/chunks/pages/index-b1a6b3cf2be8bc12f539.js"]

So there is a hash generated along with the filename, the hash will change whenever we rebuild your application.

Now, we have a hypothetical situation where clicking on submit while adding a task I am getting an error in production, only the total tasks count gets updated but the task is not created.

Debugging Backend APIs

If I have to debug this on a local setup, I need to set up the frontend and backend server locally too because my UI code by default hits the server on /create and /delete and it is too cumbersome to set server along with frontend and debug for a quick find.

About Requestly

Requestly is a Chrome extension that lets you modify network requests like Modify Request & Response Headers, Redirect URLs, Switch Hosts, Mock API Response, Delay Network requests, Insert Custom Scripts, and much more. This is widely used by developers on daily basis because of the features it provides and it makes things simpler.

Solution

Using the Requestly Redirect feature, we can redirect our script(s) from Production to localhost. In layman terms, when the browser loads the app then instead of loading the JS from production, requestly picks the JS from localhost. Now, we can add some more logic that can help us debug the issue. And once, we find the issue we can fix in our local script, test it on the production site and then deploy it with confidence.

Redirect Production JS To Local

Setting up Requestly

Step1 — Install Requestly

Install from https://requestly.io

Step2 — Setup Redirect Rule

Create a redirect rule to redirect production server capability to our local machine for debugging.

Redirect Rule — Redirect Production API End Point to Local API Endpoint

Now Debugging JS Code on Production

Just like in the previous example, we have set up redirects for routing an API endpoint from the production server to the local server, we will use a similar technique to redirect the JS hosted on production to my local JS.
However, there is a slight complexity when it comes to JS mentioned earlier, every resource in the next.js project gets a unique file hash when the application is built. For example, In the following script resource

https://sample-nextjs-app-flax.vercel.app/_next/static/chunks/pages/index-b1a6b3cf2be8bc12f539.js

Request URL “WildCard Matches” https://sample-nextjs-app-flax.vercel.app/_next/static/chunks/pages/index-*.js

Destination — https://localhost:3000/_next/static/chunks/pages/index.js

Requestly Redirect Rule (Redirect Production JS to localhost JS)

References —

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Requestly

Requestly

Setup redirects, modify headers, switch hosts, insert user scripts and much more. Install it on Chrome & Firefox and join our family of more than 100,000 devs!