[Public Catalog] Gatsby 4 + SSR exploration

[jpvajda]

To prepare for possible integration with the DevEx sort / popularity service we want to test out gatsby 4 with support for SSR to validate this approach is viable.

Assumption

The I/O external site would be able to use this DevEx service to power our sort and popularity functionality instead of rebuilding that ourselves on the external site. This would then allow us to only rely on 1 single service to provide that both the internal and external I/O catalogs.

Acceptance Criteria

This exploration is just for the DevSite

• Confirm when Gatsby4 will go GA
• Deploy Gatsby4 with SSR on the devsite on a feature branch
• setup test function to pull from the openInstallation or the nr1Catalog nerdgraph endpoints
• Identify Gameday type issues we need to consider for SLO / SLI metrics.
• Confirm that environment variables can be passed to SSR functions
• Confirm that PR previews can still be used (Might be able to point it at staging for previews)
• Determine what kind of error reporting Gatsby Cloud provides
• Can the NodeJS agent be used for monitoring?
• Discuss with DevEx their service used for sort and popularity and plan for that integration which our next epic for I/O Follow up with @jerelmiller for more info Being handled in the planning for the next epic

Gameday considerations

a. sort /popularity service is down
b. gatsby functions are down, which support SSR
c. other

Docs

• https://www.gatsbyjs.com/blog/whats-new-in-gatsby-4/
• https://www.gatsbyjs.com/docs/reference/release-notes/migrating-from-v3-to-v4/

Some takeaways

• In order to use an env var set in Gatsby Cloud site settings, it must be prefixed with GATSBY_ (similar how the new relic browser agent reads the env set in GATSBY_NEWRELIC_ENV. In the test-ssr.js page we used for testing, that env var for the new relic api key is passed along to the SSR function that fetched nerdgraph data. And i did not see any trace of that call in Network requests in the browser.
• We can read query params and pass those along to the SSR function (if we want to pass along a quickstart ID to only return data for a specific quickstart)
• tessen events still fired. if we do use query params, we may want to amend tessen properties so it's clear what's being viewed on the page
• If there's an error in the getServerData SSR function, i didn't see a clear way to see any logs. perhaps we just catch the error and console log the msg?

[aswanson-nr]

The build is currently running into some issues during the "Validating Rendering Engines" step. I believe it may have something to do with the mockGlobals file in our SDK plugin, but I haven't been able to prove that yet.

[aswanson-nr]

The error above was generated when doing a full yarn build of the site. I was able to render the test page on another Gatsby site that I created to test this with, so the issue is definitely within the dev site.

[aswanson-nr]

Removing the test-ssr page and keeping gatsby 4, caused a different error:

I'm not sure if this is caused by theme plugins or code within the developer repo.

[aswanson-nr]

I also tested changing the globalMocks file in the sdk plugin to not override the global object and that did not work. However, removing the plugin completely does allow the site to build. So, the issue appears to be around the gatsby-source-newrelic-sdk plugin and the upgrade to Gatsby 4.

[roadlittledawn]

Re: gatsby v4 ssr. Here's what I did to try and read the new relic api key from node env vars. initially didn't work, but then @nr-kkenney changed the NEW_RELIC_API_KEY in the GC Site Settings to prepend GATSBY_ that's being referenced in the test-ssr.js file and it works.

not 100% sure why though. i tested initially using the same env var names and got same error re: no api key. ¯_(ツ)_/¯

802747f...d89b14a

Gatsby doc on env vars: https://www.gatsbyjs.com/docs/how-to/local-development/environment-variables/

[moonlight-komorebi]

we were able to get our test page to work. we also added the ability to supply an id as a query param, and for that quickstart to be fetched and displayed.

for example: https://developerwebsitecampfiretestv4.gatsbyjs.io/test-ssr/?id=29bd9a4a-1c19-4219-9694-0942f6411ce7
and if you remove the id, you just see the initial page.

this should mean its possible for us to proceed with our upcoming work.

[jpvajda]

This is awesome! I'm curious will this SSR implementation have any impacts to tessen events or analytics we should be aware of? 🤔

[roadlittledawn]

@jpvajda for now, tessen events fired as expected. depending on implementation down the road (e.g., if a quickstart page URL uses query params to fetch quickstart by id), we may want to tweak the tessen properties so there's enough data in the event to tell what quickstart the page contains, etc.