Gatsby ❤️ New Relic Webinar

Using Gatsby to deliver large websites can speed up end users’ experiences. However, as those projects scale, many development teams are slowed down by long build times.

What if we could give developers more (easily accessible) visibility into the build process? Learn how the New Relic team built a plugin that provides instant observability into the entire Gatsby build process, exporting vital telemetry data from within the belly of the beast. With events, metrics, logs, and traces, we are able to contextualize and identify performance issues within our plugins, 3rd party APIs, and other parts of our website.

Follow along with us as we instrument a demo website with gatsby-build-newrelic

Getting Started

1. Sign up for a free New Relic One account

2. Fork and Clone this Repo

3. Install Dependencies

npm install

Installing the Plugin (Check out this branch to see the final result)

4. Run npm install gatsby-build-newrelic to install our plugin

5. Add the code snippet to gatsby-config.js under plugins: [ ...

 {
      resolve: "gatsby-build-newrelic",
      options: {
        NR_LICENSE_KEY: process.env.NEW_RELIC_LICENSE_KEY,
        NR_ACCOUNT_ID: process.env.NEW_RELIC_ACCOUNT_ID,
        SITE_NAME: process.env.SITE_NAME,
        customTags: {
          featureFlag: process.env.JANKY_SITE,
        }
      }
    },

6. Change the npm build command in package.json to

"build": "gatsby build --open-tracing-config-file ./node_modules/gatsby-build-newrelic/zipkin-local.js --graphql-tracing",

✅ This is how we did it

7. Set environmental Variables You will need two environmental variables NEW RELIC INGEST LICENSE KEY and Account ID. Head to New Relic One, click on the account dropdown menu on the top right, and select API KEYS

Then, head to .env and fill out the fields for

NEW_RELIC_LICENSE_KEY=
NEW_RELIC_ACCOUNT_ID= 
SITE_NAME= <This can be anything>

8. You are all set to ✨ DEPLOY ✨ run npm run build locally to build and ship your data to New Relic One.

🎨 Visualizing your builds

Head over to the Gatsby Builds Quickstart to get prepopulated dashboards. To get started, click the + Install quickstart button. Click on Begin Installation Since we already instrumented our Gatsby site, we can Skip the installation process. Click Skip this step When you click See your data you should be dropped into your new ✨ beautiful ✨ Gatsby Build dashboard

Deploying the non janky version of the website

🚨 Very important: Before you do another build make sure to run gatsby clean 🚨

9. Run gatsby clean

10. Change the JANKY_SITE environment variable in .env to false

11. Go ahead and look at the changes in build times for this build in your Gatsby Builds Dashboard in New Relic One