gatsby-plugin-load-script
Add external libraries to your Gatsby website
Installation
npm install gatsby-plugin-load-script
or
yarn add gatsby-plugin-load-script
Usage
SENTRY
Add the following plugin to your gatsby-config.js
module.exports = {
plugins: [
{
resolve: 'gatsby-plugin-load-script',
options: {
disable: !process.env.SENTRY_DSN,
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',
},
},
Inspired by: load-script