Git Commit & File Hashing problem

[julienes]

Hi,

I have a problem for a few days with canvas-sketch exports. During my exports with cmd + K I have a message in the console who said :

→ Nothing new to commit.  
 Error: Error [ERR_HTTP_HEADERS_SENT]: Cannot set headers after they are sent to the client
  at ServerResponse.setHeader (_http_outgoing.js:470:11)
  at respond (/usr/local/lib/node_modules/canvas-sketch-cli/src/middleware.js:62:9)
  at commit.then.result (/usr/local/lib/node_modules/canvas-sketch-cli/src/middleware.js:144:7)
  at process._tickCallback (internal/process/next_tick.js:68:7)

I don't know why, and each time the canvas is refreshed, the exported drawing always has the same hash.

If somebody have an idea :)

Thank you

Julien

[mattdesl]

Hmm weird! Thanks for the report.

If you change the code and save the file, and then hit Cmd + K again, do you get a new hash?

Since git only tracks file changes, it doesn't store for example the random seed of the artwork, so if you hit Cmd + K numerous times even after refreshing the canvas and getting new random artworks, you will always end up with the same git hash in the file name until you change your code. You might want to use { suffix: Random.getSeed() } in settings to suffix the random seed to the filename as well.

https://github.com/mattdesl/canvas-sketch/blob/30c7094c511778658dd5cf9e5e102966d658488c/examples/canvas-generative-silhouette.js#L11-L17

[julienes]

Thanks Matt, yes my bad, it's right, it's the same hash if I don't change code. I will add the suffix. It's more about the message error in the consol. I don't know why I have this message since few days.

[kgolinski]

Hi,

I get this error every time I use the cmd+K feature. I am using node v14.15.1

  → Committing latest changes...  
[master 89ba1dd] [test.js] 2020.12.02-09.52.58
 1 file changed, 1 insertion(+), 1 deletion(-)


  Error: Error [ERR_HTTP_HEADERS_SENT]: Cannot set headers after they are sent to the client

    at ServerResponse.setHeader (_http_outgoing.js:558:11)
    at respond (/usr/local/lib/node_modules/canvas-sketch-cli/src/middleware.js:64:9)
    at /usr/local/lib/node_modules/canvas-sketch-cli/src/middleware.js:146:7
    at processTicksAndRejections (internal/process/task_queues.js:93:5)

events.js:292
      throw er; // Unhandled 'error' event
      ^

Error [ERR_STREAM_WRITE_AFTER_END]: write after end
    at writeAfterEnd (_http_outgoing.js:668:15)
    at ServerResponse.end (_http_outgoing.js:788:7)
    at sendError (/usr/local/lib/node_modules/canvas-sketch-cli/src/middleware.js:32:9)
    at /usr/local/lib/node_modules/canvas-sketch-cli/src/middleware.js:148:7
    at processTicksAndRejections (internal/process/task_queues.js:93:5)
Emitted 'error' event on ServerResponse instance at:
    at writeAfterEndNT (_http_outgoing.js:727:7)
    at processTicksAndRejections (internal/process/task_queues.js:81:21) {
  code: 'ERR_STREAM_WRITE_AFTER_END'
}

Changes are added and commited but the error is always triggered and canvas-sketch quits. I tried to investigate but failed for now 🙂

[kgolinski]

I think I figured it out. Correct me if I'm wrong. The culprit seems to be this line in canvas-sketch-cli. respond function does res.end() so no need to do it in handleCommit. Or am I missing something?

[mattdesl]

Good catch! Thanks for looking. I think you might be right.

[aaronpenne]

I am experiencing the same issue as @kgolinski so I figured I would add some details to help troubleshoot.

Using a new sketch created with > canvas-sketch sketches/new.js --new --open in Firefox 85.0 on a Macbook running Catalina 10.15.7.

Doing cmd+s gives this success message in the Firefox console and I can see the file in the Downloads dir:

[canvas-sketch-cli] Exported Downloads/2021.02.28-15.20.49.png SketchManager.js:436:16

However, doing cmd+k after making small change in the script gives this error message in the Firefox console:

TypeError: NetworkError when attempting to fetch resource. client.js:40:14
    saveBlob client.js:40
    (Async: promise callback)
    saveBlob client.js:37
    saveBlob save.js:94
    saveBlob save.js:87
    saveDataURL save.js:83
    (Async: promise callback)
    saveDataURL save.js:83
    _doExportFrame SketchManager.js:405
    _doExportFrame SketchManager.js:371
    exportFrame SketchManager.js:322
    (Async: promise callback)
    exportFrame SketchManager.js:321
    commit SketchManager.js:50
    handler keyboardShortcuts.js:19
    (Async: EventListener.handleEvent)
    attach keyboardShortcuts.js:24
    load SketchManager.js:978
    (Async: promise callback)
    load SketchManager.js:972
    loadAndRun SketchManager.js:878
    canvasSketch canvas-sketch.js:94
    (Async: promise callback)
    canvasSketch canvas-sketch.js:80
    [2]< new.js:15
    o _prelude.js:1
    r _prelude.js:1
    <anonymous> _prelude.js:1

and canvas-sketch terminates with this output in the terminal:

[0015] 0ms           0B GET    200 /new.js (middleware)

  → Committing latest changes...
[main fd8aab3] [sketches/new.js] 2021.02.28-15.26.30
 1 file changed, 1 insertion(+), 1 deletion(-)


  Error: Error [ERR_HTTP_HEADERS_SENT]: Cannot set headers after they are sent to the client

    at new NodeError (node:internal/errors:329:5)
    at ServerResponse.setHeader (node:_http_outgoing:573:11)
    at respond (/usr/local/lib/node_modules/canvas-sketch-cli/src/middleware.js:64:9)
    at /usr/local/lib/node_modules/canvas-sketch-cli/src/middleware.js:146:7
    at processTicksAndRejections (node:internal/process/task_queues:94:5)

node:events:355
      throw er; // Unhandled 'error' event
      ^

Error [ERR_STREAM_WRITE_AFTER_END]: write after end
    at new NodeError (node:internal/errors:329:5)
    at ServerResponse.end (node:_http_outgoing:826:15)
    at sendError (/usr/local/lib/node_modules/canvas-sketch-cli/src/middleware.js:32:9)
    at /usr/local/lib/node_modules/canvas-sketch-cli/src/middleware.js:148:7
    at processTicksAndRejections (node:internal/process/task_queues:94:5)
Emitted 'error' event on ServerResponse instance at:
    at emitErrorNt (node:_http_outgoing:706:9)
    at processTicksAndRejections (node:internal/process/task_queues:82:21) {
  code: 'ERR_STREAM_WRITE_AFTER_END'
}

The git add/commit works and is visible in the git log:

> git log --pretty=oneline
fd8aab358e60def2a32cd2113954c1d5282b3513 (HEAD -> main) [sketches/new.js] 2021.02.28-15.26.30
109003b761b33253f948bb04e32d4bcf5c2abc3c [sketches/new.js] 2021.02.28-15.25.50
736ee1e047610561c73ed15847f072077d0b6b6a [sketches/new.js] 2021.02.28-15.24.35

but the expected image is not created in the Downloads dir or current dir.

In summary: when doing cmd+k the git component works, the filename with hash is created, the image is not downloaded, and canvas-sketch exits with an error.

Would love to help troubleshoot this one but I have basically zero experience with Node. Happy to provide any detail or run tests.

[mattdesl]

@aaronpenne Can you try npm install [email protected] --global and then re-run and let me know if the error persists?

(If you're using the tool locally e.g. in package.json scripts just use --save instead of --global)

[aaronpenne]

@mattdesl That resolved it! 🚀

I see the commit in the git log and the file in Downloads.

For completeness, Firefox console gives:

[git] a9e22ea Committed changes client.js:99:16
[canvas-sketch-cli] Exported Downloads/2021.02.28-15.57.40-a9e22ea.png SketchManager.js:436:16

and the terminal gives:

[0002] 0ms           0B GET    200 /new.js (middleware)

  → Committing latest changes...
[main a9e22ea] [sketches/new.js] 2021.02.28-15.57.40
 1 file changed, 1 insertion(+), 1 deletion(-)

Fantastic, thank you for the quick fix!