gatsby icon indicating copy to clipboard operation
gatsby copied to clipboard

Async console.log output doesn't update in SSR rendering when imported

Open xaviemirmon opened this issue 3 years ago • 4 comments

Preliminary Checks

  • [X] This issue is not a duplicate. Before opening a new issue, please search existing issues: https://github.com/gatsbyjs/gatsby/issues
  • [X] This issue is not a question, feature request, RFC, or anything other than a bug report directly related to Gatsby. Please post those things in GitHub Discussions: https://github.com/gatsbyjs/gatsby/discussions

Description

When using the SSR rendering mode, I've been debugging using console.log functions that live in an imported file which outputs to the terminal when the develop process is running. When using SSR, I'm often doing a fetch request and then traversing the object of the result and debugging to the console.

For example, I might have something like console.log(result.data) in my code so I can interrogate further. If I update my code to something like console.log(result.data.field) the output doesn't change it still shows my original console.log(). It's possible to output the updated console.log() but only after a complete restart of the develop service.

When working with larger amounts of data in the startup processes it's making it really cumbersome to use.

Reproduction Link

https://github.com/xaviemirmon/repro-console-log-ssr

Steps to Reproduce

  1. Clone repro repo
  2. Start gatsby develop
  3. Change const res = await fetch('https://dog.ceo/api/breed/hound/images/random') to const res = await fetch('https://dog.ceo/api/breed/terrier/images/random') on https://github.com/xaviemirmon/repro-console-log-ssr/blob/5830ea0070b97f07bb59fa2667c9db68b1842262/src/utils/consoleLog.js#L2
  4. Observe output on terminal

Expected Result

The resulting URL of import.message should contain "terrier". Note: if you use the function clientside as exemplified on https://github.com/xaviemirmon/repro-console-log-ssr/blob/5830ea0070b97f07bb59fa2667c9db68b1842262/src/pages/index.js#L132, it works as expected

Actual Result

The resulting URL of import.message still contains "hound"

Environment

System:
    OS: macOS 12.4
    CPU: (10) arm64 Apple M1 Pro
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 16.15.0 - /usr/local/bin/node
    Yarn: 1.22.19 - ~/.yarn/bin/yarn
    npm: 8.11.0 - /usr/local/bin/npm
  Browsers:
    Chrome: 103.0.5060.114
    Firefox: 100.0.1
    Safari: 15.5
  npmPackages:
    gatsby: ^4.17.2 => 4.17.2
  npmGlobalPackages:
    gatsby-cli: 4.15.0

Config Flags

No response

xaviemirmon avatar Jul 08 '22 12:07 xaviemirmon

Hey @xaviemirmon ! Thanks for filing the issue, and thanks for the minimal reproduction. I'm able to repro consistently and this is indeed a bug. I'll see what I can dig up...

imjoshin avatar Jul 13 '22 18:07 imjoshin

Thanks @j0sh77! Not sure if it's helpful or not but in earlier versions of V4 I had to restart the develop process for SSR console.log changes regardless of where it lived.

xaviemirmon avatar Jul 18 '22 13:07 xaviemirmon

Thanks @j0sh77! Not sure if it's helpful or not but in earlier versions of V4 I had to restart the develop process for SSR console.log changes regardless of where it lived.

Yeah, that's not ideal. Thanks for bringing this up - I'll try to spend some more time on this soon. 😄

imjoshin avatar Jul 28 '22 13:07 imjoshin

@j0sh77 Any luck trying to dig into this yet?

xaviemirmon avatar Oct 13 '22 08:10 xaviemirmon