Add logging to watch function for easier troubleshooting

[Amorites]

Feature request

It would be helpful to have more detailed logging when using the watch function in TSX. Specifically, it would be beneficial to log the specific event and path that caused a change, making it easier to troubleshoot issues. This would greatly reduce the time and effort required to identify and resolve problems.

Why?

While working with TSX in conjunction with Vite SSR, I have encountered an issue where Vite generates intermediate files during startup, causing unnecessary reruns that have caused me to spend a significant amount of time troubleshooting. Despite attempts to add logging to the TSX rerun function, I have found that the log function returns "undefined". I eventually discovered that the debounce process was discarding all parameters, leading to this issue.

This issue has caused significant disruptions to my workflow, as it has made it difficult to identify and resolve issues efficiently. It would be beneficial to provide a solution for this problem, such as modifying the debounce process or providing a workaround for the logging issue.

Alternatives

Additional context

No response

[karlhorky]

I was also having issues with endless restarts of tsx watch, with a Next.js app with Custom Server, which is being imported from an Express app (index.ts, which is the entry point for tsx watch --clear-screen=false index.ts).

Every time Next.js compiled the pages (which happens automatically when you visit them in a browser) it would restart tsx watch:

2:26:59 PM [tsx] restarting
2:27:02 PM [tsx] restarting
Listening at http://localhost:3000
 ✓ Compiled /middleware in 89ms (60 modules)
 ○ Compiling /(dashboard)/page ...
GET / - - ms - -
2:27:08 PM [tsx] restarting
2:27:10 PM [tsx] restarting
Listening at http://localhost:3000
 ✓ Compiled /middleware in 84ms (60 modules)
 ○ Compiling /(dashboard)/page ...
2:27:16 PM [tsx] restarting
2:27:16 PM [tsx] restarting
2:27:19 PM [tsx] restarting
Listening at http://localhost:3000
 ✓ Compiled /middleware in 99ms (60 modules)
 ○ Compiling /(dashboard)/page ...
2:27:25 PM [tsx] restarting
2:27:28 PM [tsx] restarting
Listening at http://localhost:3000
 ✓ Compiled /middleware in 117ms (60 modules)
 ○ Compiling /(dashboard)/page ...
2:27:34 PM [tsx] restarting
2:27:34 PM [tsx] restarting
2:27:37 PM [tsx] restarting

I was thinking that I would need to ignore the .next directory with --ignore ../website/.next or --ignore ../website/.next/**/* (the Next.js project is in another folder) but this didn't help either and also hidden .* directories are ignored by default

All imported files are watched except from the following directories: node_modules, bower_components, vendor, dist, and .* (hidden directories).

Haven't had a chance to dig in deeper yet, but will post back here if I have more details later.

[karlhorky]

@privatenumber Nice, thanks for #412! I'll test it with my failure case when it's released (potentially in tsx@4.5.0)

[karlhorky]

Ok, looking at the logs with tsx@4.5.0, I see that it's listening to the compiled files in the .next folder, which I imagined would have been ignored because hidden .* directories are ignored by default (but maybe they are not ignored when they are part of a path in another folder).

GET /_next/static/webpack/a67d1f9a228e97fd.webpack.hot-update.json 200 143.315 ms - 44
GET /_next/static/webpack/webpack.a67d1f9a228e97fd.hot-update.js 200 11.379 ms - 858
4:41:50 PM [tsx] change in ./../website/.next/server/app/(dashboard)/page_client-reference-manifest.js Restarting...
4:41:55 PM [tsx] unlink in ./../website/.next/server/app/cohorts/[cohortSlug]/page_client-reference-manifest.js Restarting...
Listening at http://localhost:3000
 ✓ Compiled /middleware in 220ms (62 modules)
 ○ Compiling / ...
4:42:01 PM [tsx] add in ./../website/.next/server/vendor-chunks/combined-stream.js Restarting...
4:42:05 PM [tsx] unlink in ./../website/.next/server/app/(dashboard)/page.js Restarting...

I'll try to find a way to ignore these files.

[karlhorky]

Ok, I think I found a way to ignore the files, but this configuration unfortunately also causes ERR_MODULE_NOT_FOUND errors for anything inside of .next... 🤔

$ pwd
~/p/project/packages/server

$ pnpm tsx watch --clear-screen=false --ignore ./../website/.next/**/* index.ts
...
node:internal/process/esm_loader:40
      internalBinding('errors').triggerUncaughtException(
                                ^
Error [ERR_MODULE_NOT_FOUND]: Cannot find module '~/p/project/packages/website/.next/cache/webpack' imported from ~/p/project/packages/server/

I only want to ignore these files from watch mode, not exclude them from the build entirely... 🤔

[karlhorky]

If it's not my error but rather a bug, happy to open a new issue with a more structured bug report. 👍

[privatenumber]

Sounds like unexpected behavior that was surfaced as a result of this feature.

Regarding your second log: are you saying adding the --ignore ./../website/.next/**/* actually causes a runtime error?

Since this isn't actually relevant to this Issue topic, would you mind filing a bug?

[karlhorky]

Sounds good, opened an issue with the bug report and sandbox here:

• tsx watch --ignore ... causes ERR_MODULE_NOT_FOUND errors #417