What are the best tools to use to profile page loading locally?
Unanswered
Asiatic Lion posted this in #help-forum
Asiatic LionOP
My application is super slow to load, often exceeding the function timeout leading to a 504. I know I can put a bunch of timers and prints throughout my code but was wondering if there are more sophisticated tools like a tracing tool. Note I'm using mostly SSR so the profiling needs to happen on the server side.
52 Replies
Asiatic LionOP
I see there is a .next/trace file that has some item named "handle-request" but I can't find any existing application to interpret the data
American Chinchilla
are you doing large network requests?
Could you show all the network requests your doing
Via network tab
Asiatic LionOP
That's the client side view, and it shows 90% of the time as waiting for server response
@Asiatic Lion That's the client side view, and it shows 90% of the time as waiting for server response
American Chinchilla
Are you hosting the backend
Like did you implement it
Or third party api
Asiatic LionOP
Yeah I'm running it locally
American Chinchilla
Can you show the backend
Api route that your sending the request too
Asiatic LionOP
I'm using app router and SSR. It's not running an API request but rather fetching the page initially
American Chinchilla
Like your page.tsx
Asiatic LionOP
You mean you want me to paste the code?
American Chinchilla
Did you chnage anything or is this
What did you added
When you first got this?
This can be causes by different problems such as using server components into client
Asiatic LionOP
I don't think it would build if I was using server components in client
I.e. Can't do async components on client
I'm not sure exactly what lines I added when it got slow. I've just been dealing with it until now
American Chinchilla
Are you using github
Asiatic LionOP
I could go through the exercise of manually commenting code and seeing whats going on, but thats a pain. It seems like there is some attempt at making the process nice, like https://nextjs.org/docs/app/building-your-application/configuring/debugging#debugging-with-vs-code , or running with
--inspect and using chrome devtools, but neither of those seem to be working. At least on the chrome devtools, most of the time is spent in idleAmerican Chinchilla
You can also retry by deleting .next and run npm run dev
@American Chinchilla Are you using github
Asiatic LionOP
yes but it's a private project
@Asiatic Lion yes but it's a private project
American Chinchilla
You can use git bisect
If you ever used it before
It basicslly performs binary search via the commits you did
And will show all code for that commit
Asiatic LionOP
I know how to do it manually, my question is about what tools exist to make the process better
American Chinchilla
Git bisect
Asiatic LionOP
thats a manual process
American Chinchilla
It literally is 3 lines
And it shows the code live with the current bisect commit
Asiatic LionOP
Have you used an application profiler before?
it shows you how long all of your functions take in a tree view
very popular when doing C/C++ development. Python has one too
American Chinchilla
no I havent but im not sure of any other tool besides one like centry
or debugging server side with vscode
Asiatic LionOP
have you done debugging server side with vscode? that would be a start
American Chinchilla
But i would try git bisext if it were me since it more easier path
Yes i have
next.js has docs on it
Asiatic LionOP
I tried those but I get an error
American Chinchilla
To support with debugger in vscode
Asiatic LionOP
basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
^^^^^^^
SyntaxError: missing ) after argument list
at wrapSafe (internal/modules/cjs/loader:1469:18)
at Module._compile (internal/modules/cjs/loader:1491:20)
at Module._extensions..js (internal/modules/cjs/loader:1691:10)
at Module.load (internal/modules/cjs/loader:1317:32)
at Module._load (internal/modules/cjs/loader:1127:12)
at traceSync (diagnostics_channel:315:14)
at wrapModuleLoad (internal/modules/cjs/loader:217:24)
at executeUserEntryPoint (internal/modules/run_main:166:5)
at <anonymous> (internal/main/run_main_module:30:49)
loader:1469
Process exited with code 1can you share your launch.json?
project/.vscode/launch.json
American Chinchilla
Hmm im not sure what else but i use the one in the doc https://nextjs.org/docs/app/building-your-application/configuring/debugging
Asiatic LionOP
ok actually I did get it working, but from here I'm not sure how to profile the execution
ah ok its this
This is also showing me 4 out of 4.5 seconds in
(idle)