diff --git a/src/includes/troubleshooting/older-browser-support/javascript.mdx b/src/includes/troubleshooting/older-browser-support/javascript.mdx new file mode 100644 index 00000000000000..066c6022f1df39 --- /dev/null +++ b/src/includes/troubleshooting/older-browser-support/javascript.mdx @@ -0,0 +1,50 @@ +For example, if you're using Webpack and Babel, and you have the following code in your `webpack.config.js`, you'll want to modify `exclude` so it doesn't block the SDK. + +Before: + +```javascript {filename:webpack.config.js} +module: { + rules: [ + { + test: /\.(js)$/, + exclude: /node_modules/, + use: ['babel-loader'] + } + ] +}, +``` + +After: + +```javascript {filename:webpack.config.js} +module: { + rules: [ + { + test: /\.(js)$/, + // Make sure to include all `@sentry` packages, not just the main SDK package + exclude: filepath => filepath.includes("node_modules") && !filepath.includes("@sentry"), + use: ['babel-loader'] + } + ] +}, +``` + +Though the above example is Webpack-specific, similar changes can be made to configuraton for Rollup, esbuild, and the like. + + + +As an alternative, you can use one of our ES5-specific CDN bundles. + + diff --git a/src/includes/troubleshooting/older-browser-support/javascript.nextjs.mdx b/src/includes/troubleshooting/older-browser-support/javascript.nextjs.mdx new file mode 100644 index 00000000000000..1b59485258b640 --- /dev/null +++ b/src/includes/troubleshooting/older-browser-support/javascript.nextjs.mdx @@ -0,0 +1,21 @@ +In order to do this, set the `sentry.transpileClientSDK` option in your `next.config.js`: + +```javascript {filename:next.config.js} +const { withSentryConfig } = require("@sentry/nextjs"); + +const moduleExports = { + // < other nextjs config > + + sentry: { + transpileClientSDK: true, + }, +}; + +const sentryWebpackPluginOptions = { + // < webpack plugin config > +}; + +module.exports = withSentryConfig(moduleExports, sentryWebpackPluginOptions); +``` + +For more information, please see [Extend Next.js Configuration](../manual-setup/#extend-nextjs-configuration). diff --git a/src/platforms/javascript/common/troubleshooting/index.mdx b/src/platforms/javascript/common/troubleshooting/index.mdx index 805e7c49c17a56..e93d85990bcc68 100644 --- a/src/platforms/javascript/common/troubleshooting/index.mdx +++ b/src/platforms/javascript/common/troubleshooting/index.mdx @@ -70,7 +70,7 @@ To fix this, change the `tracingOrigins` option during SDK initialization. For m ## `instrument.js` Line Numbers for Console Log statements -If `instrument.js` displays in your console while debugging, add Sentry to your [Framework Ignore List](https://developer.chrome.com/docs/devtools/javascript/ignore-chrome-extension-scripts/) by adding this pattern: `/@sentry/` +If `instrument.js` displays in your console while debugging, add Sentry to your [Framework Ignore List](https://developer.chrome.com/docs/devtools/javascript/ignore-chrome-extension-scripts/) by adding this pattern: `/@sentry/` Chrome then ignores the SDK stack frames when debugging. @@ -421,3 +421,9 @@ document.body.addEventListener( ``` Remember to pass in `true` as the second parameter to `addEventListener()`. Without it, the event handler won't be called, since it's being added to the event target's ancestor rather than the event target itself, and unlike JavaScript runtime errors, `error` events resulting from load failures don't bubble, and therefore must be captured during the `capture` phase. For more information, see [the W3C spec](https://www.w3.org/TR/2003/NOTE-DOM-Level-3-Events-20031107/events.html#Events-phases). + +## Supporting Older Browsers + +Starting with version 7.0.0, the Sentry JavaScript SDK uses ES6 syntax, along with a few other ES6+ language features, like object spread. If you are down-compiling your code in order to target older browsers that don't support such syntax, you'll need to include the Sentry SDK in that process. + + diff --git a/src/platforms/javascript/guides/nextjs/configuration/build/index.mdx b/src/platforms/javascript/guides/nextjs/configuration/build/index.mdx new file mode 100644 index 00000000000000..dbcd54629b1bb5 --- /dev/null +++ b/src/platforms/javascript/guides/nextjs/configuration/build/index.mdx @@ -0,0 +1,19 @@ +--- +title: Build Options +sidebar_order: 5 +description: "Learn about configuration options used in `next.config.js` to control your app's build process." +keywords: + [ + "next.js", + "nextjs", + "next.config", + "sourcemaps", + "source maps", + "build", + "compatibility", + "ES6", + "ES5", + ] +--- + +The Sentry Next.js SDK supports automatic code injection and source map upload during your app's build process using the `withSentryConfig` wrapper in `next.config.js`. For information on the available configuration options, see [Extend Next.js Configuration](../../manual-setup/#extend-nextjs-configuration). diff --git a/src/platforms/javascript/guides/nextjs/manual-setup.mdx b/src/platforms/javascript/guides/nextjs/manual-setup.mdx index 0fabeb1298ff95..f5fa54f96fc49d 100644 --- a/src/platforms/javascript/guides/nextjs/manual-setup.mdx +++ b/src/platforms/javascript/guides/nextjs/manual-setup.mdx @@ -4,7 +4,7 @@ sidebar_order: 1 description: "Learn how to set up the SDK manually." --- -If you can’t (or prefer not to) run the [configuration step](/platforms/javascript/guides/nextjs/#configure), you can follow the instructions below to configure your application. +If you can't (or prefer not to) run the [configuration step](/platforms/javascript/guides/nextjs/#configure), you can follow the instructions below to configure your application. ## Create Initialization Config Files @@ -161,6 +161,17 @@ const { withSentryConfig } = require("@sentry/nextjs"); const moduleExports = { // your existing module.exports + + // Optional build-time configuration options + sentry: { + // See the 'Configure Source Maps' and 'Configure Legacy Browser Support' + // sections below for information on the following options: + // - disableServerWebpackPlugin + // - disableClientWebpackPlugin + // - hideSourceMaps + // - widenClientFileUpload + // - transpileClientSDK + }, }; const sentryWebpackPluginOptions = { @@ -287,3 +298,19 @@ Alternatively, the cli can be configured using environment variables. | `defaults.org` | `SENTRY_ORG` | | `defaults.project` | `SENTRY_PROJECT` | | `auth.token` | `SENTRY_AUTH_TOKEN` | + +## Configure Legacy Browser Support + +_(New in version 7.8.0)_ + +The `@sentry/nextjs` SDK is designed to run in browsers which support ES6 (and certain ES6+ language features like object spread). If you need to support older browsers, and have configured Next.js to down-compile your code, you can apply the same down-compilation to the injected SDK code by using the `transpileClientSDK` option in your `next.config.js`: + +```javascript {filename:next.config.js} +const moduleExports = { + sentry: { + transpileClientSDK: true, + }, +}; +``` + +(This assumes you are using [the `next.config.js` setup shown above](#extend-nextjs-configuration).)