Package Exports

gatsby-plugin-load-script

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (gatsby-plugin-load-script) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

gatsby-plugin-load-script

Add external libraries to your Gatsby website

Installation

npm install gatsby-plugin-load-script

yarn add gatsby-plugin-load-script

Usage

SENTRY

Add the following plugin to your `gatsby-config.js`

// gatsby-config.js
module.exports = {
  plugins: [
    // ...
    {
      resolve: 'gatsby-plugin-load-script',
      options: {
        disable: !process.env.SENTRY_DSN, // When do you want to disable it ?
        src: 'https://browser.sentry-cdn.com/5.15.4/bundle.min.js',
        integrity:
          'sha384-Nrg+xiw+qRl3grVrxJtWazjeZmUwoSt0FAVsbthlJ5OMpx0G08bqIq3b/v0hPjhB',
        crossorigin: 'anonymous',
        onLoad: `() => Sentry.init({dsn:"${process.env.SENTRY_DSN}"})`,
      },
    },
  ],
}

More configuration options on sentry.io

Obtain a SENTRY DSN

Click here to create a new organisation on sentry.io and obtain a DSN

Add SENTRY_DSN to your environment variables

Learn how to use environment variables with Gatsby ?

In development, create a .env.development file and add your own key obtained on sentry.io

SENTRY_DSN=https://<your-sentry-dsn-key>@sentry.io/<project>

Add dotenv to your gatsby-config.js

require('dotenv').config({
  path: `.env.${process.env.NODE_ENV}`,
})

/!\ You Probably don't want to use sentry during development, so be sure to remove SENTRY_DSN from your development environment variables once you are sure it works correctly.

In production, add the env variable to your netlify site / docker container.

More information on Sentry SDK

https://docs.sentry.io/error-reporting/quickstart/?platform=browser

Local script from static folder

Create a folder named static at the root of your gatsby app
Place your script in it
Add the following configuration in gatsby-config.js

    {
      resolve: 'gatsby-plugin-load-script',
      options: {
        src: '/test-script.js', // Change to the script filename
      },
    },

Inspired by: load-script