Skip to content

Commit ee1b96b

Browse files
AbhiPrasadAbhiPrasad
authored
feat(v8/gatsby): Update SDK initialization for gatsby (#11292)
This is quite the refactor, I recommend reading through the migration docs to understand what the user facing API should be. 1. Remove deprecated SDK init via options We used to initialize the SDK via Gatsby plugin options in the Gatsby SDK. This is very restrictive though, and due to how Gatsby serializes it's options can lead to bugs. Later on in v7 of the SDK we introduced a `sentry.config.js` approach ([docs](https://docs.sentry.io/platforms/javascript/guides/gatsby/)). This PR removes support for the plugin option deprecation. - Remove automatic adding of `browserTracingIntegration` Because of the plugin option initialization, we used to add `browserTracingIntegration` integration automatically via SDK init. v8 removes this because of bundle size + we don't have good routing instrumentation for gatsby. - Upgrade gatsby webpack plugin to 2.0, and add option to configure it's usage resolves #9837 - I called the option to control this `enableClientWebpackPlugin`.
1 parent a470a4e commit ee1b96b

20 files changed

+182
-519
lines changed

‎.gitignore‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -57,5 +57,4 @@ packages/deno/build-test
5757
packages/deno/lib.deno.d.ts
5858

5959
# gatsby
60-
packages/gatsby/gatsby-browser.d.ts
6160
packages/gatsby/gatsby-node.d.ts

‎MIGRATION.md‎

Lines changed: 115 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,9 @@ New minimum supported browsers:
3939

4040
For IE11 support please transpile your code to ES5 using babel or similar and add required polyfills.
4141

42-
**React**: We no longer support React 15 in version 8 of the React SDK.
42+
**React**: The Next.js SDK now supports React 16+
43+
44+
**Next.js**: The Next.js SDK now supports Next.js 13.2.0+
4345

4446
## 2. Package removal
4547

@@ -979,6 +981,118 @@ const config = {
979981
export default withSentryConfig(config);
980982
```
981983

984+
### Gatsby SDK
985+
986+
#### Removal of Gatsby Initialization via plugin options
987+
988+
In v8, we are removing the ability to initialize the Gatsby SDK via plugin options. Instead, you should create a
989+
`sentry.config.js` file in the root of your project and initialize the SDK there.
990+
991+
```js
992+
// v7 - gatsby-config.js
993+
module.exports = {
994+
// ...
995+
plugins: [
996+
{
997+
resolve: '@sentry/gatsby',
998+
options: {
999+
dsn: process.env.SENTRY_DSN,
1000+
},
1001+
},
1002+
// ...
1003+
],
1004+
};
1005+
```
1006+
1007+
```js
1008+
// v8 - gatsby-config.js
1009+
module.exports = {
1010+
// ...
1011+
plugins: [
1012+
{
1013+
resolve: '@sentry/gatsby',
1014+
},
1015+
// ...
1016+
],
1017+
};
1018+
1019+
// v8 - sentry.config.js
1020+
import * as Sentry from '@sentry/gatsby';
1021+
1022+
Sentry.init({
1023+
dsn: '__PUBLIC_DSN__',
1024+
});
1025+
```
1026+
1027+
We've also added `enableClientWebpackPlugin` which allows you to enable or disable the `@sentry/webpack-plugin` in the
1028+
client-side build. By default, it is enabled.
1029+
1030+
```js
1031+
// v8 - gatsby-config.js
1032+
module.exports = {
1033+
// ...
1034+
plugins: [
1035+
{
1036+
resolve: '@sentry/gatsby',
1037+
options: {
1038+
enableClientWebpackPlugin: false,
1039+
},
1040+
},
1041+
// ...
1042+
],
1043+
};
1044+
```
1045+
1046+
#### Automatic adding of `browserTracingIntegration` for Gatsby
1047+
1048+
The Gatsby SDK no longer adds the `browserTracingIntegration` automatically. If you want to enable tracing in the
1049+
browser, you need to add it manually. Make sure to also configured a `tracePropagationTargets` value.
1050+
1051+
```js
1052+
// v7 - gatsby-config.js
1053+
module.exports = {
1054+
// ...
1055+
plugins: [
1056+
{
1057+
resolve: '@sentry/gatsby',
1058+
options: {
1059+
tracesSampleRate: 1.0,
1060+
},
1061+
},
1062+
// ...
1063+
],
1064+
};
1065+
```
1066+
1067+
```js
1068+
// v8 - gatsby-config.js
1069+
module.exports = {
1070+
// ...
1071+
plugins: [
1072+
{
1073+
resolve: '@sentry/gatsby',
1074+
},
1075+
// ...
1076+
],
1077+
};
1078+
1079+
// v8 - sentry.config.js
1080+
import * as Sentry from '@sentry/gatsby';
1081+
1082+
Sentry.init({
1083+
dsn: '__PUBLIC_DSN__',
1084+
integrations: [Sentry.browserTracingIntegration()],
1085+
1086+
// Set tracesSampleRate to 1.0 to capture 100%
1087+
// of transactions for performance monitoring.
1088+
// We recommend adjusting this value in production
1089+
tracesSampleRate: 1.0,
1090+
1091+
// Set `tracePropagationTargets` to control for which URLs distributed tracing should be enabled
1092+
tracePropagationTargets: ['localhost', /^https:\/\/yourserver\.io\/api/],
1093+
});
1094+
```
1095+
9821096
## 5. Behaviour Changes
9831097

9841098
- [Updated behaviour of `tracePropagationTargets` in the browser](./MIGRATION.md#updated-behaviour-of-tracepropagationtargets-in-the-browser-http-tracing-headers--cors)

‎packages/gatsby/.eslintrc.js‎

Lines changed: 1 addition & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -7,24 +7,14 @@ module.exports = {
77
jsx: true,
88
},
99
// ignore these because they're not covered by a `tsconfig`, which makes eslint throw an error
10-
ignorePatterns: ['gatsby-browser.d.ts', 'gatsby-node.d.ts'],
10+
ignorePatterns: ['gatsby-node.d.ts'],
1111
overrides: [
1212
{
1313
files: ['scripts/**/*.ts'],
1414
parserOptions: {
1515
project: ['../../tsconfig.dev.json'],
1616
},
1717
},
18-
{
19-
files: ['./gatsby-browser.js'],
20-
env: {
21-
browser: true,
22-
node: false,
23-
},
24-
parserOptions: {
25-
sourceType: 'module',
26-
},
27-
},
2818
],
2919
extends: ['../../.eslintrc.js'],
3020
};

‎packages/gatsby/README.md‎

Lines changed: 21 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66

77
# Official Sentry SDK for GatsbyJS
88

9-
Register the package as a plugin in `gatsby-config.js`:
9+
First register the package as a plugin in `gatsby-config.js`:
1010

1111
```javascript
1212
module.exports = {
@@ -23,66 +23,32 @@ module.exports = {
2323
};
2424
```
2525

26-
Options will be passed directly to `Sentry.init`. See all available options in
27-
[our docs](https://docs.sentry.io/error-reporting/configuration/?platform=javascript). The `environment` value defaults
28-
to `NODE_ENV` (or `'development'` if `NODE_ENV` is not set).
29-
30-
## GitHub Actions
31-
32-
The `release` value is inferred from `GITHUB_SHA`.
33-
34-
## Netlify
35-
36-
The `release` value is inferred from `COMMIT_REF`.
37-
38-
## Vercel
39-
40-
To automatically capture the `release` value on Vercel you will need to register appropriate
41-
[system environment variable](https://vercel.com/docs/v2/build-step#system-environment-variables) (e.g.
42-
`VERCEL_GITHUB_COMMIT_SHA`) in your project.
43-
44-
## Sentry Performance
45-
46-
To enable tracing, supply either `tracesSampleRate` or `tracesSampler` to the options. This will turn on the
47-
`BrowserTracing` integration for automatic instrumentation of pageloads and navigations.
26+
Then configure your `Sentry.init` call:
4827

4928
```javascript
50-
module.exports = {
51-
// ...
52-
plugins: [
53-
{
54-
resolve: '@sentry/gatsby',
55-
options: {
56-
dsn: process.env.SENTRY_DSN, // this is the default
29+
import * as Sentry from '@sentry/gatsby';
5730

58-
// A rate of 1 means all traces will be sent, so it's good for testing.
59-
// In production, you'll likely want to either choose a lower rate or use `tracesSampler` instead (see below).
60-
tracesSampleRate: 1,
31+
Sentry.init({
32+
dsn: '__PUBLIC_DSN__',
33+
integrations: [Sentry.browserTracingIntegration(), Sentry.replayIntegration()],
6134

62-
// Alternatively:
63-
tracesSampler: samplingContext => {
64-
// Examine provided context data (along with anything in the global namespace) to decide the sample rate
65-
// for this transaction.
66-
// Can return 0 to drop the transaction entirely.
35+
// Set tracesSampleRate to 1.0 to capture 100%
36+
// of transactions for performance monitoring.
37+
// We recommend adjusting this value in production
38+
tracesSampleRate: 1.0,
6739

68-
if ('...') {
69-
return 0.5; // These are important - take a big sample
70-
} else if ('...') {
71-
return 0.01; // These are less important or happen much more frequently - only take 1% of them
72-
} else if ('...') {
73-
return 0; // These aren't something worth tracking - drop all transactions like this
74-
} else {
75-
return 0.1; // Default sample rate
76-
}
77-
},
78-
},
79-
},
80-
// ...
81-
],
82-
};
40+
// Capture Replay for 10% of all sessions,
41+
// plus for 100% of sessions with an error
42+
replaysSessionSampleRate: 0.1,
43+
replaysOnErrorSampleRate: 1.0,
44+
45+
// Set `tracePropagationTargets` to control for which URLs distributed tracing should be enabled
46+
tracePropagationTargets: ['localhost', /^https:\/\/yourserver\.io\/api/],
47+
});
8348
```
8449

85-
If you want to supply options to the `BrowserTracing` integration, use the `browserTracingOptions` parameter.
50+
The Gatsby SDK also automatically sets up sourcemaps uploading for you. To disable this functionality, set the
51+
`enableClientWebpackPlugin` option to be `false`.
8652

8753
```javascript
8854
module.exports = {
@@ -91,12 +57,7 @@ module.exports = {
9157
{
9258
resolve: '@sentry/gatsby',
9359
options: {
94-
dsn: process.env.SENTRY_DSN, // this is the default
95-
tracesSampleRate: 1, // or tracesSampler (see above)
96-
browserTracingOptions: {
97-
// disable creating spans for XHR requests
98-
traceXHR: false,
99-
},
60+
enableClientWebpackPlugin: false,
10061
},
10162
},
10263
// ...

‎packages/gatsby/gatsby-browser.js‎

Lines changed: 0 additions & 45 deletions
This file was deleted.

‎packages/gatsby/gatsby-node.js‎

Lines changed: 15 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,48 +1,25 @@
11
const fs = require('fs');
22

3-
const SentryWebpackPlugin = require('@sentry/webpack-plugin');
3+
const { sentryWebpackPlugin } = require('@sentry/webpack-plugin');
44

5-
const sentryRelease = JSON.stringify(
6-
// Always read first as Sentry takes this as precedence
7-
process.env.SENTRY_RELEASE ||
8-
// GitHub Actions - https://help.github.com/en/actions/configuring-and-managing-workflows/using-environment-variables#default-environment-variables
9-
process.env.GITHUB_SHA ||
10-
// Netlify - https://docs.netlify.com/configure-builds/environment-variables/#build-metadata
11-
process.env.COMMIT_REF ||
12-
// Vercel - https://vercel.com/docs/v2/build-step#system-environment-variables
13-
process.env.VERCEL_GIT_COMMIT_SHA ||
14-
// Zeit (now known as Vercel)
15-
process.env.ZEIT_GITHUB_COMMIT_SHA ||
16-
process.env.ZEIT_GITLAB_COMMIT_SHA ||
17-
process.env.ZEIT_BITBUCKET_COMMIT_SHA ||
18-
undefined,
19-
);
20-
21-
const sentryDsn = JSON.stringify(process.env.SENTRY_DSN || '');
225
const SENTRY_USER_CONFIG = ['./sentry.config.js', './sentry.config.ts'];
236

24-
exports.onCreateWebpackConfig = ({ plugins, getConfig, actions }) => {
25-
actions.setWebpackConfig({
26-
plugins: [
27-
plugins.define({
28-
__SENTRY_RELEASE__: sentryRelease,
29-
__SENTRY_DSN__: sentryDsn,
30-
}),
31-
],
32-
});
33-
34-
if (process.env.NODE_ENV === 'production') {
7+
exports.onCreateWebpackConfig = ({ getConfig, actions }, options) => {
8+
const enableClientWebpackPlugin = options.enableClientWebpackPlugin !== false;
9+
if (process.env.NODE_ENV === 'production' && enableClientWebpackPlugin) {
3510
actions.setWebpackConfig({
3611
plugins: [
37-
new SentryWebpackPlugin({
38-
// Only include files from the build output directory
39-
include: 'public',
40-
// Ignore files that aren't users' source code related
41-
ignore: [
42-
'polyfill-*', // related to polyfills
43-
'framework-*', // related to the frameworks (e.g. React)
44-
'webpack-runtime-*', // related to Webpack
45-
],
12+
sentryWebpackPlugin({
13+
sourcemaps: {
14+
// Only include files from the build output directory
15+
assets: ['public'],
16+
// Ignore files that aren't users' source code related
17+
ignore: [
18+
'polyfill-*', // related to polyfills
19+
'framework-*', // related to the frameworks (e.g. React)
20+
'webpack-runtime-*', // related to Webpack
21+
],
22+
},
4623
// Handle sentry-cli configuration errors when the user has not done it not to break
4724
// the build.
4825
errorHandler(err, invokeErr) {

‎packages/gatsby/jest.config.js‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ const baseConfig = require('../../jest/jest.config.js');
22

33
module.exports = {
44
...baseConfig,
5-
setupFiles: ['<rootDir>/test/setEnvVars.ts'],
65
testEnvironment: 'jsdom',
76
transform: {
87
'^.+\\.js$': 'ts-jest',

0 commit comments

Comments
 (0)