[1.0] Debugging Gatsby

[0x80]

While working on my site I ran into GraphQL errors. I started debugging in VSCode, which has a very nice built in Node debugger. To make the sources readable I decided to modify Gatsby to generate source maps on build.

I must say it works really nice with source maps! I can now just hit F5 and step through the original source of the build process. For anyone who wants to try the VSCode debugger. This is my configuration in launch.json. You need to place this in the .vscode directory.

I use port 7777 to not conflict with any already running instance of gatsby on the default 8000

{
  "version": "0.2.0",
  "configurations": [{
    "name": "Launch",
    "type": "node",
    "request": "launch",
    "protocol": "inspector",
    "program": "${workspaceRoot}/node_modules/.bin/gatsby",
    "args": ["develop", "-p", "7777"],
    "stopOnEntry": false,
    "cwd": "${workspaceRoot}",
    "preLaunchTask": null,
    "runtimeExecutable": null,
    "runtimeArgs": [
      "--nolazy"
    ],
    "env": {
      "NODE_ENV": "development",
      "DEBUG": "gatsby:*"
    },
    "console": "integratedTerminal",
    "sourceMaps": true,
    "outFiles": []
  }]
}

Here's a working branch in case you're curious. There are also commits for cleaning up the cli code. You can ignore those. I got a bit carried away.

[KyleAMathews]

Nifty! Add this to https://github.com/gatsbyjs/gatsby/blob/1.0/CONTRIBUTING.md?

The "development tools" section will probably need broken into sub-pages at some point or we add a table of contents but it'd be great to start collecting these sorts of tips.

Feel free to make a PR on the cleanup of the CLI code as well!

[0x80]

@KyleAMathews I'll try to wrap up that branch and write something about debugging.

Since today, when I start the debugger I keep seeing these errors. Any idea where this might come from?

Error: err {type: "OpenError", name: "OpenError", cause: Error: IO error: lock /Users/me/Development/myproj/.cache/cache/LOCK: Resource tempora…, message: "IO error: lock /Users/me/Development/…ache/cache/LOCK: Resource temporarily unavailable", stack: "OpenError: IO error: lock /Users/me/D…es/abstract-leveldown/abstract-leveldown.js:39:16"}
at emit (events.js:162:6)
    at dispatchError (/Users/me/Development/myproj/node_modules/levelup/lib/util.js:63:55)
    at (anonymous) (/Users/me/Development/myproj/node_modules/levelup/lib/levelup.js:118:13)
    at (anonymous) (/Users/me/Development/myproj/node_modules/abstract-leveldown/abstract-leveldown.js:38:15)

[fabien0102]

You just have some resources locked, try to kill some process or just reboot your computer ;)

[KyleAMathews]

This is leveldb complaining as it only lets you start one process at a time so apparently you have another gatsby process running in addition to your debugger.

…

On Sun, Apr 30, 2017, 9:56 AM Fabien BERNARD ***@***.***> wrote: You just have some resources locked, try to kill some process or just reboot your computer ;) — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#859 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAEVh3htDCijrT0Th5egvr6zKYfHhOkaks5r1L1AgaJpZM4NIyiw> .

[bluprince13]

@0x80 Am I right in thinking that the debugging will not work without modifying Gatsby to generate source maps on build?

I get the error: Cannot launch program because corresponding JavaScript cannot be found when I tried to use the VSCode debugger with your launch.json configuration.

[LukeSchlangen]

@bluprince13 I was able to get it working on my Mac, but a fellow developer is getting that same error on his PC. It could be an environment issue on PC?

[paul-winters]

@LukeSchlangen A moment ago, I managed to get this to work on PC by changing the program value to "${workspaceRoot}/node_modules/gatsby/dist/bin/gatsby".

    {
      "name": "Launch Gatsby Develop",
      "type": "node",
      "request": "launch",
      "protocol": "inspector",
      "program": "${workspaceRoot}/node_modules/gatsby/dist/bin/gatsby",
      "args": ["develop", "-p", "9229"],
      "stopOnEntry": false,
      "cwd": "${workspaceRoot}",
      "preLaunchTask": null,
      "runtimeExecutable": null,
      "runtimeArgs": ["--nolazy"],
      "env": {
        "NODE_ENV": "development",
        "DEBUG": "gatsby:*"
      },
      "console": "integratedTerminal",
      "sourceMaps": true,
      "outFiles": []
    }

[demeralde]

@0x80's config worked for me. But note it only worked when using the shorthand options for some reason (e.g -H hostname instead of --host hostname).

I'm still getting this error in the browser console though:

Loading failed for the <script> with source “http://devarity.localhost:8000/commons.js”.

Which seems to be due to this Webpack error in the dev server:

daniel@devarity [04:49:10 PM] [~/Dev/projects/devarity/public] [develop *]
-> % cd /home/daniel/Dev/projects/devarity ; env "NODE_ENV=development" "DEBUG=gatsby:*" /usr/bin/node --nolazy --inspect-brk=39550 node_modules/.bin/gatsby develop "-H devarity.localhost" "-p 8000"
Debugger listening on ws://127.0.0.1:39550/4464f21f-3857-4942-975f-f4e5da75b827
For help see https://nodejs.org/en/docs/inspector
Debugger attached.
success open and validate gatsby-configs — 1.637 s
success load plugins — 0.121 s
success onPreInit — 1.137 s
success delete html and css files from previous builds — 0.016 s
success initialize cache — 0.004 s
success copy gatsby files — 0.037 s
success onPreBootstrap — 0.008 s
success source and transform nodes — 0.029 s
success building schema — 0.238 s
success createPages — 0.002 s
success createPagesStatefully — 0.034 s
success onPreExtractQueries — 0.004 s
success update schema — 0.120 s
⠁   gatsby:query-watcher Static query in /home/daniel/Dev/projects/devarity/src/components/Image.jsx has changed. +0ms
  gatsby:query-watcher Static query in /home/daniel/Dev/projects/devarity/src/components/Layout.jsx has changed. +1ms
  gatsby:query-watcher Static query in /home/daniel/Dev/projects/devarity/src/components/SEO.jsx has changed. +2ms
success extract queries from components — 0.091 s
success run graphql queries — 0.040 s — 8/8 205.09 queries/second
success write out page data — 0.007 s
success write out redirect data — 0.005 s
⡀ onPostBootstrapdone generating icons for manifest
success onPostBootstrap — 0.225 s

info bootstrap finished - 6.343 s

  gatsby:html generating static HTML +0ms
  gatsby:webpack-config Loading webpack config for stage "develop-html" +0ms
  gatsby:webpack-config Building env for "develop-html" +4ms
  gatsby:webpack-config Error resolving user loaders directory { Error: ENOENT: no such file or directory, stat '/home/daniel/Dev/projects/devarity/loaders'
    at Object.fs.statSync (fs.js:948:11)
    at Object.statSync (/home/daniel/Dev/projects/devarity/node_modules/graceful-fs/polyfills.js:295:24)
    at getResolveLoader (/home/daniel/Dev/projects/devarity/node_modules/gatsby/dist/utils/webpack.config.js:390:16)
    at /home/daniel/Dev/projects/devarity/node_modules/gatsby/dist/utils/webpack.config.js:421:22
    at Generator.next (<anonymous>)
    at asyncGeneratorStep (/home/daniel/Dev/projects/devarity/node_modules/@babel/runtime/helpers/asyncToGenerator.js:3:24)
    at _next (/home/daniel/Dev/projects/devarity/node_modules/@babel/runtime/helpers/asyncToGenerator.js:25:9)
    at tryCatcher (/home/daniel/Dev/projects/devarity/node_modules/bluebird/js/release/util.js:16:23)
    at Promise.module.exports.Promise._settlePromiseFromHandler (/home/daniel/Dev/projects/devarity/node_modules/bluebird/js/release/promise.js:512:31)
    at Promise.module.exports.Promise._settlePromise (/home/daniel/Dev/projects/devarity/node_modules/bluebird/js/release/promise.js:569:18)
    at Promise.module.exports.Promise._settlePromiseCtx (/home/daniel/Dev/projects/devarity/node_modules/bluebird/js/release/promise.js:606:10)
    at _drainQueueStep (/home/daniel/Dev/projects/devarity/node_modules/bluebird/js/release/async.js:142:12)
    at _drainQueue (/home/daniel/Dev/projects/devarity/node_modules/bluebird/js/release/async.js:131:9)
    at Async._drainQueues (/home/daniel/Dev/projects/devarity/node_modules/bluebird/js/release/async.js:147:5)
    at Immediate.Async.drainQueues (/home/daniel/Dev/projects/devarity/node_modules/bluebird/js/release/async.js:17:14)
    at runCallback (timers.js:794:20)
  errno: -2,
  code: 'ENOENT',
  syscall: 'stat',
  path: '/home/daniel/Dev/projects/devarity/loaders' } +0ms
  gatsby:webpack-config Loading webpack config for stage "develop" +895ms
  gatsby:webpack-eslint-config Attempting to load package.json for eslint config check +0ms
  gatsby:webpack-eslint-config Checking for eslint config file +1ms
  gatsby:webpack-config Building env for "develop" +2ms
  gatsby:webpack-config Error resolving user loaders directory { Error: ENOENT: no such file or directory, stat '/home/daniel/Dev/projects/devarity/loaders'
    at Object.fs.statSync (fs.js:948:11)
    at Object.statSync (/home/daniel/Dev/projects/devarity/node_modules/graceful-fs/polyfills.js:295:24)
    at getResolveLoader (/home/daniel/Dev/projects/devarity/node_modules/gatsby/dist/utils/webpack.config.js:390:16)
    at /home/daniel/Dev/projects/devarity/node_modules/gatsby/dist/utils/webpack.config.js:421:22
    at Generator.next (<anonymous>)
    at asyncGeneratorStep (/home/daniel/Dev/projects/devarity/node_modules/@babel/runtime/helpers/asyncToGenerator.js:3:24)
    at _next (/home/daniel/Dev/projects/devarity/node_modules/@babel/runtime/helpers/asyncToGenerator.js:25:9)
    at tryCatcher (/home/daniel/Dev/projects/devarity/node_modules/bluebird/js/release/util.js:16:23)
    at Promise.module.exports.Promise._settlePromiseFromHandler (/home/daniel/Dev/projects/devarity/node_modules/bluebird/js/release/promise.js:512:31)
    at Promise.module.exports.Promise._settlePromise (/home/daniel/Dev/projects/devarity/node_modules/bluebird/js/release/promise.js:569:18)
    at Promise.module.exports.Promise._settlePromiseCtx (/home/daniel/Dev/projects/devarity/node_modules/bluebird/js/release/promise.js:606:10)
    at _drainQueueStep (/home/daniel/Dev/projects/devarity/node_modules/bluebird/js/release/async.js:142:12)
    at _drainQueue (/home/daniel/Dev/projects/devarity/node_modules/bluebird/js/release/async.js:131:9)
    at Async._drainQueues (/home/daniel/Dev/projects/devarity/node_modules/bluebird/js/release/async.js:147:5)
    at Immediate.Async.drainQueues (/home/daniel/Dev/projects/devarity/node_modules/bluebird/js/release/async.js:17:14)
    at runCallback (timers.js:794:20)
  errno: -2,
  code: 'ENOENT',
  syscall: 'stat',
  path: '/home/daniel/Dev/projects/devarity/loaders' } +0ms
 DONE  Compiled successfully in 2637ms                                                                                                                                              4:49:36 PM


You can now view devarity in the browser.

  http:// devarity.localhost: 8000/

View GraphiQL, an in-browser IDE, to explore your site's data and schema

  http:// devarity.localhost: 8000/___graphql

Note that the development build is not optimized.
To create a production build, use gatsby build

ℹ ｢wdm｣:
ℹ ｢wdm｣: Compiled successfully.
Waiting for the debugger to disconnect...
[1]    21280 killed     env "NODE_ENV=development" "DEBUG=gatsby:*" /usr/bin/node --nolazy   develop

Here's my config for the VSCode debug server:

{
  "type": "node",
  "request": "launch",
  "protocol": "inspector",
  "name": "Run Dev Server",
  "cwd": "${workspaceRoot}",
  "stopOnEntry": false,
  "preLaunchTask": null,
  "runtimeExecutable": null,
  "runtimeArgs": [
    "--nolazy"
  ],
  "env": {
    "NODE_ENV": "development",
    "DEBUG": "gatsby:*"
  },
  "program": "${workspaceRoot}/node_modules/.bin/gatsby",
  "args": [
    "develop",
    "-H devarity.localhost",
    "-p 8000"
  ],
  "console": "integratedTerminal",
  "sourceMaps": true,
  "outFiles": []
}

The dev server works fine when I run it from the command line manually, such as with yarn develop -H devarity.localhost -p 8000, so it's only failing on the VSCode debug server.

Anyone have any ideas? I'm having difficulty troubleshooting this.