|
5 | 5 |
|
6 | 6 | Because the renderer communicates over a port to the server, you can start a renderer instance locally in your application and debug it. |
7 | 7 |
|
8 | | -## Yalc vs Yarn Link |
| 8 | +## Monorepo Workflow |
9 | 9 |
|
10 | | -The project is setup to use [yalc](https://github.com/whitecolor/yalc). This means that at the top level |
11 | | -directory, `yalc publish` will send the node package files to the global yalc store. Running `yarn` in the |
12 | | -`/spec/dummy/client` directory will copy the files from the global yalc store over to the local `node_modules` |
13 | | -directory. |
| 10 | +For renderer debugging inside this repo, use the Pro dummy app at `react_on_rails_pro/spec/dummy`. |
| 11 | +It is a `pnpm` workspace app and already points at the local packages in this monorepo. |
14 | 12 |
|
15 | 13 | ## Debugging the Node Renderer |
16 | 14 |
|
17 | | -1. cd to the top level of the project. |
18 | | -1. `yarn` to install any libraries. |
19 | | -1. To compile renderer files on changes, open console and run `yarn build:dev`. |
20 | | -1. Open another console tab and run `RENDERER_LOG_LEVEL=debug yarn start` |
21 | | -1. Reload the browser page that causes the renderer issue. You can then update the JS code, and restart the `yarn start` to run the renderer with the new code. |
22 | | -1. Be sure to restart the rails server if you change any ruby code in loaded gems. |
23 | | -1. Note, the default setup for spec/dummy to reference the pro renderer is to use yalc, which may or may not be using a link, which means that you have to re-run yarn to get the files updated when changing the renderer. |
24 | | -1. Check out the top level nps task `nps renderer.debug` and `spec/dummy/package.json` which has script `"node-renderer-debug"`. |
| 15 | +### Quick start: debugging with the full stack running |
| 16 | + |
| 17 | +If you already have the dummy app running via `bin/dev` (which uses `Procfile.dev`), the node renderer is already listening on port 3800 with `--inspect` enabled. To debug: |
| 18 | + |
| 19 | +1. Open `chrome://inspect` in Chrome and connect to the renderer process. |
| 20 | +2. Use overmind to isolate renderer logs: `overmind connect node-renderer` (Ctrl-B to detach). |
| 21 | +3. After a code change, restart just the renderer: `overmind restart node-renderer`. |
| 22 | + |
| 23 | +### Isolated debugging: manual per-terminal startup |
| 24 | + |
| 25 | +Use this when you need full control over the renderer process — different flags, a specific bundle, or rebuilding just the renderer package. |
| 26 | + |
| 27 | +1. From the repo root, install dependencies and build the local packages: |
| 28 | + ```bash |
| 29 | + pnpm install |
| 30 | + pnpm run build |
| 31 | + ``` |
| 32 | +1. In one terminal, start the Pro dummy bundle watcher: |
| 33 | + ```bash |
| 34 | + cd react_on_rails_pro/spec/dummy |
| 35 | + pnpm run build:dev:watch |
| 36 | + ``` |
| 37 | +1. In another terminal, start the renderer with verbose logging: |
| 38 | + ```bash |
| 39 | + cd react_on_rails_pro/spec/dummy |
| 40 | + RENDERER_LOG_LEVEL=debug pnpm run node-renderer |
| 41 | + ``` |
| 42 | +1. If you want to attach a debugger instead, run: |
| 43 | + ```bash |
| 44 | + cd react_on_rails_pro/spec/dummy |
| 45 | + pnpm run node-renderer-debug |
| 46 | + ``` |
| 47 | +1. Reload the page that triggers the SSR issue and reproduce the problem. |
| 48 | +1. If you change Ruby code in loaded gems, restart the Rails server. |
| 49 | +1. If you change code under `packages/react-on-rails-pro-node-renderer`, rebuild that package before restarting the renderer: |
| 50 | + ```bash |
| 51 | + pnpm --filter react-on-rails-pro-node-renderer run build |
| 52 | + ``` |
| 53 | +1. If you are debugging an external app instead of the monorepo dummy app, refresh the installed renderer package using your local package workflow (for example `yalc`, `npm pack`, or a workspace link) before rerunning the renderer. |
25 | 54 |
|
26 | 55 | ## Debugging Memory Leaks |
27 | 56 |
|
28 | 57 | If worker memory grows over time, use heap snapshots to find the source: |
29 | 58 |
|
30 | 59 | 1. Start the renderer with `--expose-gc` to enable forced GC before snapshots: |
31 | 60 | ```bash |
32 | | - node --expose-gc node-renderer.js |
| 61 | + cd react_on_rails_pro/spec/dummy |
| 62 | + # Adjust the port if your Rails app points at a different renderer URL. |
| 63 | + RENDERER_PORT=3800 node --expose-gc client/node-renderer.js |
33 | 64 | ``` |
34 | 65 | 2. Take heap snapshots at different times using `v8.writeHeapSnapshot()` (triggered via `SIGUSR2` signal or a custom endpoint). |
35 | 66 | 3. Load both snapshots in Chrome DevTools (Memory tab → Load) and use the **Comparison** view to see which objects accumulated between snapshots. |
|
0 commit comments