From 20af254da7fa9965d983293fa783650b5a3d4935 Mon Sep 17 00:00:00 2001 From: Francesco Novy Date: Thu, 4 May 2023 14:32:34 +0200 Subject: [PATCH 1/9] feat: Minor cleanup of browser JS docs --- .../before-breadcrumb-hint/javascript.mdx | 1 - .../before-send-fingerprint/javascript.mdx | 1 - .../before-send-hint/javascript.mdx | 1 - .../before-breadcrumb/javascript.mdx | 1 - .../example-widget/javascript.mdx | 10 --- .../getting-started-config/javascript.mdx | 14 +++- .../getting-started-install/javascript.mdx | 10 +-- .../configure-sample-rate/javascript.mdx | 11 +-- .../javascript.react.mdx | 5 +- .../configure-sample-rate/javascript.vue.mdx | 9 ++- .../javascript.mdx | 2 +- .../performance/enable-tracing/javascript.mdx | 2 +- .../database-connection/javascript.mdx | 2 +- .../set-fingerprint/rpc/javascript.mdx | 2 +- .../common/configuration/options.mdx | 4 - .../data-management/sensitive-data/index.mdx | 4 +- .../common/enriching-events/context.mdx | 2 +- .../common/enriching-events/scopes.mdx | 29 ++++---- .../common/enriching-events/user-feedback.mdx | 4 +- .../common/usage/sdk-fingerprinting.mdx | 6 +- .../configuration/integrations/custom.mdx | 1 - .../configuration/integrations/default.mdx | 1 - .../configuration/sentry-testkit/index.mdx | 8 +- .../configuration/tree-shaking/index.mdx | 1 - .../javascript/common/install/loader.mdx | 18 +++-- .../troubleshooting/supported-browsers.mdx | 73 ++----------------- .../javascript/guides/nextjs/manual-setup.mdx | 2 - .../performance-onboarding/react/3.verify.md | 1 - 28 files changed, 76 insertions(+), 149 deletions(-) diff --git a/src/platform-includes/configuration/before-breadcrumb-hint/javascript.mdx b/src/platform-includes/configuration/before-breadcrumb-hint/javascript.mdx index 4fa01e182754a..b282ef1ba0320 100644 --- a/src/platform-includes/configuration/before-breadcrumb-hint/javascript.mdx +++ b/src/platform-includes/configuration/before-breadcrumb-hint/javascript.mdx @@ -1,7 +1,6 @@ ```javascript Sentry.init({ // ... - beforeBreadcrumb(breadcrumb, hint) { if (breadcrumb.category === "ui.click") { const { target } = hint.event; diff --git a/src/platform-includes/configuration/before-send-fingerprint/javascript.mdx b/src/platform-includes/configuration/before-send-fingerprint/javascript.mdx index 2c16f715c0e08..3839c0618908f 100644 --- a/src/platform-includes/configuration/before-send-fingerprint/javascript.mdx +++ b/src/platform-includes/configuration/before-send-fingerprint/javascript.mdx @@ -1,7 +1,6 @@ ```javascript Sentry.init({ // ... - beforeSend(event, hint) { const error = hint.originalException; if ( diff --git a/src/platform-includes/configuration/before-send-hint/javascript.mdx b/src/platform-includes/configuration/before-send-hint/javascript.mdx index b6f591024fd8c..7deecd94ad9a5 100644 --- a/src/platform-includes/configuration/before-send-hint/javascript.mdx +++ b/src/platform-includes/configuration/before-send-hint/javascript.mdx @@ -1,7 +1,6 @@ ```javascript Sentry.init({ // ... - beforeSend(event, hint) { const error = hint.originalException; if ( diff --git a/src/platform-includes/enriching-events/breadcrumbs/before-breadcrumb/javascript.mdx b/src/platform-includes/enriching-events/breadcrumbs/before-breadcrumb/javascript.mdx index 21a7619d91882..cfa07d8ca93f8 100644 --- a/src/platform-includes/enriching-events/breadcrumbs/before-breadcrumb/javascript.mdx +++ b/src/platform-includes/enriching-events/breadcrumbs/before-breadcrumb/javascript.mdx @@ -1,7 +1,6 @@ ```javascript Sentry.init({ // ... - beforeBreadcrumb(breadcrumb, hint) { return breadcrumb.category === "ui.click" ? null : breadcrumb; }, diff --git a/src/platform-includes/enriching-events/user-feedback/example-widget/javascript.mdx b/src/platform-includes/enriching-events/user-feedback/example-widget/javascript.mdx index c702395819430..11f6cadbed6c8 100644 --- a/src/platform-includes/enriching-events/user-feedback/example-widget/javascript.mdx +++ b/src/platform-includes/enriching-events/user-feedback/example-widget/javascript.mdx @@ -1,13 +1,3 @@ -Make sure you've got the JavaScript SDK available: - -```html - -``` - If you're using a framework like [React](/platforms/javascript/guides/react/) or [Angular](/platforms/javascript/guides/angular/), the best place to collect user feedback is in your error-handling component. (Please see platform-specific docs for examples.) If you're not using a framework, you can collect feedback right before the event is sent, using `beforeSend`: ```html diff --git a/src/platform-includes/getting-started-config/javascript.mdx b/src/platform-includes/getting-started-config/javascript.mdx index 9bb1921d46f14..16d66160cdfbd 100644 --- a/src/platform-includes/getting-started-config/javascript.mdx +++ b/src/platform-includes/getting-started-config/javascript.mdx @@ -1,4 +1,4 @@ -Once this is done, Sentry's JavaScript SDK captures all unhandled exceptions and transactions. +Once this is done, Sentry's JavaScript SDK captures all unhandled exceptions, transactions, as well as Session Replays. ```javascript import * as Sentry from "@sentry/browser"; @@ -8,12 +8,20 @@ Sentry.init({ // Alternatively, use `process.env.npm_package_version` for a dynamic release version // if your build tool supports it. - release: "my-project-name@2.3.12", - integrations: [new Sentry.BrowserTracing()], + release: 'my-project-name@2.3.12', + integrations: [ + new Sentry.BrowserTracing(), + new Sentry.Replay() + ], // Set tracesSampleRate to 1.0 to capture 100% // of transactions for performance monitoring. // We recommend adjusting this value in production tracesSampleRate: 1.0, + + // Capture Replay for 10% of all sessions, + // plus for 100% of sessions with an error + replaysSessionSampleRate: 0.1, + replaysOnErrorSampleRate: 1.0, }); ``` diff --git a/src/platform-includes/getting-started-install/javascript.mdx b/src/platform-includes/getting-started-install/javascript.mdx index 55aad846e0fb1..48a7c713021b2 100644 --- a/src/platform-includes/getting-started-install/javascript.mdx +++ b/src/platform-includes/getting-started-install/javascript.mdx @@ -1,14 +1,14 @@ -```bash {tabTitle: yarn} -yarn add @sentry/browser +```bash {tabTitle:npm} +npm install --save @sentry/browser ``` -```bash {tabTitle: npm} -npm install --save @sentry/browser +```bash {tabTitle:yarn} +yarn add @sentry/browser ``` -We also support alternate [installation methods](/platforms/javascript/install/) such as a CDN and lazy loading. +We also support alternate [installation methods](/platforms/javascript/install/) such as the Loader Script or via CDN bundles. diff --git a/src/platform-includes/performance/configure-sample-rate/javascript.mdx b/src/platform-includes/performance/configure-sample-rate/javascript.mdx index df7c17fee9550..3e1f660a25e82 100644 --- a/src/platform-includes/performance/configure-sample-rate/javascript.mdx +++ b/src/platform-includes/performance/configure-sample-rate/javascript.mdx @@ -1,15 +1,16 @@ ```javascript -// If you're using one of our framework SDK packages, like `@sentry/angular`, +// If you're using one of our framework SDK packages, like `@sentry/react`, // substitute its name for `@sentry/browser` here import * as Sentry from "@sentry/browser"; Sentry.init({ dsn: "___PUBLIC_DSN___", - // This enables automatic instrumentation (highly recommended), but is not - // necessary for purely manual usage. - // If you only want to use manual instrumentation, remove the BrowserTracing integration and add - // Sentry.addTracingExtensions() above your Sentry.init() call. + // This enables automatic instrumentation (highly recommended), + // but is not necessary for purely manual usage + // If you only want to use manually: + // * Remove the `BrowserTracing` integration + // * add `Sentry.addTracingExtensions()` above your Sentry.init() call integrations: [new Sentry.BrowserTracing()], // We recommend adjusting this value in production, or using tracesSampler diff --git a/src/platform-includes/performance/configure-sample-rate/javascript.react.mdx b/src/platform-includes/performance/configure-sample-rate/javascript.react.mdx index 967bd11e41b93..eb713c7fa9969 100644 --- a/src/platform-includes/performance/configure-sample-rate/javascript.react.mdx +++ b/src/platform-includes/performance/configure-sample-rate/javascript.react.mdx @@ -6,8 +6,9 @@ Sentry.init({ // This enables automatic instrumentation (highly recommended), but is not // necessary for purely manual usage. - // If you only want to use manually, remove the BrowserTracing integration and add - // Sentry.addTracingExtensions() above your Sentry.init() call. + // If you only want to use manually: + // * Remove the `BrowserTracing` integration + // * add `Sentry.addTracingExtensions()` above your Sentry.init() call integrations: [new Sentry.BrowserTracing()], // We recommend adjusting this value in production, or using tracesSampler diff --git a/src/platform-includes/performance/configure-sample-rate/javascript.vue.mdx b/src/platform-includes/performance/configure-sample-rate/javascript.vue.mdx index a280b53025e60..b0245372023ac 100644 --- a/src/platform-includes/performance/configure-sample-rate/javascript.vue.mdx +++ b/src/platform-includes/performance/configure-sample-rate/javascript.vue.mdx @@ -7,10 +7,11 @@ Sentry.init({ Vue: Vue, dsn: "___PUBLIC_DSN___", - // This enables automatic instrumentation (highly recommended), but is not - // necessary for purely manual usage - // If you only want to use manually, remove the BrowserTracing integration and add - // Sentry.addTracingExtensions() above your Sentry.init() call. + // This enables automatic instrumentation (highly recommended), + // but is not necessary for purely manual usage + // If you only want to use manually: + // * Remove the `BrowserTracing` integration + // * add `Sentry.addTracingExtensions()` above your Sentry.init() call integrations: [new Sentry.BrowserTracing()], // We recommend adjusting this value in production, or using tracesSampler diff --git a/src/platform-includes/performance/enable-automatic-instrumentation/javascript.mdx b/src/platform-includes/performance/enable-automatic-instrumentation/javascript.mdx index e0bcd4d699cf6..aee545a0d63ea 100644 --- a/src/platform-includes/performance/enable-automatic-instrumentation/javascript.mdx +++ b/src/platform-includes/performance/enable-automatic-instrumentation/javascript.mdx @@ -3,7 +3,7 @@ To enable tracing, include the `BrowserTracing` integration in your SDK configur After configuration, you will see both `pageload` and `navigation` transactions in the Sentry UI. ```javascript -// If you're using one of our framework SDK packages, like `@sentry/angular`, +// If you're using one of our framework SDK packages, like `@sentry/react`, // substitute its name for `@sentry/browser` here import * as Sentry from "@sentry/browser"; diff --git a/src/platform-includes/performance/enable-tracing/javascript.mdx b/src/platform-includes/performance/enable-tracing/javascript.mdx index 7fc060b7c8ab5..8a42856311a19 100644 --- a/src/platform-includes/performance/enable-tracing/javascript.mdx +++ b/src/platform-includes/performance/enable-tracing/javascript.mdx @@ -1,4 +1,4 @@ -Tracing is included by default in the Sentry JavaScript npm packages. +Tracing is available by default in the Sentry JavaScript npm packages. If you are using the Loader Script, make sure to enable "Performance" under **Settings > Projects > Client Keys (DSN)**. diff --git a/src/platform-includes/set-fingerprint/database-connection/javascript.mdx b/src/platform-includes/set-fingerprint/database-connection/javascript.mdx index 14977d527a45e..d955a7cc4cd27 100644 --- a/src/platform-includes/set-fingerprint/database-connection/javascript.mdx +++ b/src/platform-includes/set-fingerprint/database-connection/javascript.mdx @@ -2,7 +2,7 @@ class DatabaseConnectionError extends Error {} Sentry.init({ - ..., + // ... beforeSend: function(event, hint) { const exception = hint.originalException; diff --git a/src/platform-includes/set-fingerprint/rpc/javascript.mdx b/src/platform-includes/set-fingerprint/rpc/javascript.mdx index abcb7fbe129dc..6c3a501845293 100644 --- a/src/platform-includes/set-fingerprint/rpc/javascript.mdx +++ b/src/platform-includes/set-fingerprint/rpc/javascript.mdx @@ -12,7 +12,7 @@ class MyRPCError extends Error { } Sentry.init({ - ..., + // ... beforeSend: function(event, hint) { const exception = hint.originalException; diff --git a/src/platforms/common/configuration/options.mdx b/src/platforms/common/configuration/options.mdx index a57ee1693993f..7f651b4bd03f0 100644 --- a/src/platforms/common/configuration/options.mdx +++ b/src/platforms/common/configuration/options.mdx @@ -437,8 +437,6 @@ Sentry SDKs normalize any contextual data to a given depth. Any data beyond this -_(New in version 6.19.1)_ - This is the maximum number of properties or entries that will be included in any given object or array when the SDK is normalizing contextual data. Any data beyond this depth will be dropped. (defaults to 1000) @@ -615,8 +613,6 @@ This function is called with an SDK-specific transaction event object, and can r -_(New in version 7.18.0)_ - diff --git a/src/platforms/common/data-management/sensitive-data/index.mdx b/src/platforms/common/data-management/sensitive-data/index.mdx index 219caf09e36c8..1a03b2b57dd68 100644 --- a/src/platforms/common/data-management/sensitive-data/index.mdx +++ b/src/platforms/common/data-management/sensitive-data/index.mdx @@ -59,7 +59,7 @@ You can use the configuration param -### `before_send` +### & SDKs provide a hook, which is invoked before an error or message event is sent and can be used to modify event data to remove sensitive information. Some SDKs also provide a hook which does the same thing for transactions. We recommend using and in the SDKs to **scrub any data before it is sent**, to ensure that sensitive data never leaves the local environment. @@ -67,7 +67,7 @@ SDKs provide a hook, which is invoked Sensitive data may appear in the following areas: -- Stack-locals → Some SDKs (Python and PHP) will pick up variable values within the stacktrace. These can be scrubbed, or this behavior can be disabled altogether if necessary. +- Stack-locals → Some SDKs (Python, PHP and Node) will pick up variable values within the stacktrace. These can be scrubbed, or this behavior can be disabled altogether if necessary. - Breadcrumbs → Some SDKs (JavaScript and the Java logging integrations, for example) will pick up previously executed log statements. **Do not log PII** if using this feature and including log statements as breadcrumbs in the event. Some backend SDKs will also record database queries, which may need to be scrubbed. - User context → Automated behavior is controlled via . - HTTP context → Query strings may be picked up in some frameworks as part of the HTTP request context. diff --git a/src/platforms/common/enriching-events/context.mdx b/src/platforms/common/enriching-events/context.mdx index f537a527c9abc..42dc2e43ab5dc 100644 --- a/src/platforms/common/enriching-events/context.mdx +++ b/src/platforms/common/enriching-events/context.mdx @@ -79,7 +79,7 @@ The Sentry SDK will try its best to accommodate the data you send and trim large ## Passing Context Directly -Starting in version 5.16.0 of our JavaScript SDKs, some of the contextual data can be provided directly to `captureException` and `captureMessage` calls. Provided data will be merged with the one that is already stored inside the current scope, unless explicitly cleared using a callback method. +Some contextual data can be provided directly to `captureException` and `captureMessage` calls. Provided data will be merged with the one that is already stored inside the current scope, unless explicitly cleared using a callback method. This functionality works in three different variations: diff --git a/src/platforms/common/enriching-events/scopes.mdx b/src/platforms/common/enriching-events/scopes.mdx index fccbf220c70a1..37d34b60aa9a0 100644 --- a/src/platforms/common/enriching-events/scopes.mdx +++ b/src/platforms/common/enriching-events/scopes.mdx @@ -42,10 +42,11 @@ routes or controllers. As you start using an SDK, a scope and hub are automatically created for you out of the box. It's unlikely that you'll interact with the hub directly unless you're writing an integration or you want to create or destroy scopes. Scopes, on the -other hand are more user facing. You can call `configure-scope` at any point in +other hand are more user facing. You can call at any point in time to modify data stored on the scope. This is useful for doing things like [modifying the context](../context/). + If you are very curious about how thread locality works: On platforms such as .NET or on Python 3.7 and later we will use "ambient data" to have either the hub flow @@ -56,8 +57,9 @@ not suppressed all the context you have bound to the scope in Sentry will flow a If however you suppress the flow, you get new scope data. + -When you call a global function such as `capture_event` internally Sentry +When you call a global function such as internally Sentry discovers the current hub and asks it to capture an event. Internally the hub will then merge the event with the topmost scope's data. @@ -74,7 +76,7 @@ For details on how this affects performance monitoring, check out the [Connect E ## Configuring the Scope -The most useful operation when working with scopes is the `configure-scope` function. It can be used to reconfigure the current scope. +The most useful operation when working with scopes is the function. It can be used to reconfigure the current scope. @@ -108,32 +110,29 @@ To learn what useful information can be associated with scopes see ## Local Scopes We also support pushing and configuring a scope within a single call. This is typically -called `with-scope`, `push-scope` or implemented as a function parameter on the capture methods, depending on the SDK. It's very helpful if +called , or implemented as a function parameter on the capture methods, depending on the SDK. It's very helpful if you only want to send data for one specific event. -### Using `with-scope` +### Using -In the following example we use -`with-scope` to attach a `level` and a `tag` to only one specific error: +In the following example we use to attach a `level` and a `tag` to only one specific error: -While this example looks similar to `configure-scope`, it is actually very different. -Calls to `configure-scope` change the current active scope; all successive calls -to `configure-scope` will maintain previously set changes unless they are explicitly -unset. +While this example looks similar to , it is actually very different. +Calls to change the current active scope; all successive calls to will maintain previously set changes unless they are explicitly unset. -On the other hand, `with-scope` creates a clone of the current scope, and the changes -made will stay isolated within the `with-scope` callback function. This allows you to +On the other hand, creates a clone of the current scope, and the changes +made will stay isolated within the callback function. This allows you to more easily isolate pieces of context information to specific locations in your code or -even call `clear` to briefly remove all context information. +even call to briefly remove all context information. -Any exceptions that occur within the callback function for `with-scope` will not be +Any exceptions that occur within the callback function for will not be caught, and all errors that occur will be silently ignored and **not** reported. diff --git a/src/platforms/common/enriching-events/user-feedback.mdx b/src/platforms/common/enriching-events/user-feedback.mdx index 18428b3ed9f7a..25a1bd3195788 100644 --- a/src/platforms/common/enriching-events/user-feedback.mdx +++ b/src/platforms/common/enriching-events/user-feedback.mdx @@ -80,7 +80,7 @@ The screenshot below provides an example of the User Feedback widget, though you ### Integration -To integrate the widget, you'll need to be running version 2.1 or newer of our JavaScript SDK. The widget authenticates with your public DSN, then passes in the Event ID that was generated on your backend. +The widget authenticates with your public DSN, then passes in the Event ID that was generated on your backend. @@ -131,7 +131,7 @@ The screenshot below provides an example of the User Feedback widget, though you ### Integration -To integrate the widget, you'll need to be running version 2.1 or newer of our JavaScript SDK. The widget authenticates with your public DSN, then passes in the Event ID that was generated on your backend. +The widget authenticates with your public DSN, then passes in the Event ID that was generated on your backend. diff --git a/src/platforms/common/usage/sdk-fingerprinting.mdx b/src/platforms/common/usage/sdk-fingerprinting.mdx index 204d986385f4f..2421b072ff1aa 100644 --- a/src/platforms/common/usage/sdk-fingerprinting.mdx +++ b/src/platforms/common/usage/sdk-fingerprinting.mdx @@ -33,7 +33,7 @@ You can use variable substitution to fill dynamic values into the fingerprint ge ## Group Errors With Greater Granularity -Your application queries a Remote Procedure Call Model (RPC) interface or external Application Programming Interface (API) service, so the stack trace is generally the same (even if the outgoing request is very different). +Let's imagine your application queries a Remote Procedure Call Model (RPC) interface or external Application Programming Interface (API) service, so the stack trace is generally the same (even if the outgoing request is very different). The following example will split up the default group Sentry would create (represented by `{{ default }}`) further, taking some attributes on the error object into account: @@ -41,8 +41,6 @@ The following example will split up the default group Sentry would create (repre ## Group Errors More Aggressively -A generic error, such as a database connection error, has many different stack traces and never groups together. - -The following example will completely overwrite Sentry's grouping by omitting `{{ default }}` from the array: +If a generic error, such as a database connection error, has many different stack traces and never groups together, you can completely overwrite Sentry's grouping by omitting `{{ default }}` from the array: diff --git a/src/platforms/javascript/common/configuration/integrations/custom.mdx b/src/platforms/javascript/common/configuration/integrations/custom.mdx index 360026240356d..b7de6e0d8ea79 100644 --- a/src/platforms/javascript/common/configuration/integrations/custom.mdx +++ b/src/platforms/javascript/common/configuration/integrations/custom.mdx @@ -14,7 +14,6 @@ Add a custom integration to your JavaScript using the following format: Sentry.init({ // ... - integrations: [new MyAwesomeIntegration()], }); ``` diff --git a/src/platforms/javascript/common/configuration/integrations/default.mdx b/src/platforms/javascript/common/configuration/integrations/default.mdx index fc5f89f6d2c28..7a214f5e7c063 100644 --- a/src/platforms/javascript/common/configuration/integrations/default.mdx +++ b/src/platforms/javascript/common/configuration/integrations/default.mdx @@ -208,7 +208,6 @@ This example removes the default-enabled integration for adding breadcrumbs to t ```javascript Sentry.init({ // ... - integrations: function (integrations) { // integrations will be all default integrations return integrations.filter(function (integration) { diff --git a/src/platforms/javascript/common/configuration/sentry-testkit/index.mdx b/src/platforms/javascript/common/configuration/sentry-testkit/index.mdx index a459941b40069..92a9158dec320 100644 --- a/src/platforms/javascript/common/configuration/sentry-testkit/index.mdx +++ b/src/platforms/javascript/common/configuration/sentry-testkit/index.mdx @@ -10,14 +10,18 @@ When building tests for your application, you want to assert that the right flow ## Installation +```bash {tabTitle:npm} +npm install --save-dev sentry-testkit ``` -npm install sentry-testkit --save-dev + +```bash {tabTitle:yarn} +yarn add sentry-testkit --dev ``` ### Using in tests ```javascript -const sentryTestkit = require("sentry-testkit"); +import sentryTestkit from 'sentry-testkit'; const { testkit, sentryTransport } = sentryTestkit(); diff --git a/src/platforms/javascript/common/configuration/tree-shaking/index.mdx b/src/platforms/javascript/common/configuration/tree-shaking/index.mdx index da45e7d79934f..4f9c6bb8bc539 100644 --- a/src/platforms/javascript/common/configuration/tree-shaking/index.mdx +++ b/src/platforms/javascript/common/configuration/tree-shaking/index.mdx @@ -128,7 +128,6 @@ const client = new BrowserClient({ // all options you normally pass to Sentry.init dsn: "your DSN", // ... - transport: makeFetchTransport, stackParser: defaultStackParser, // Only the integrations listed here will be used diff --git a/src/platforms/javascript/common/install/loader.mdx b/src/platforms/javascript/common/install/loader.mdx index d743e5ee3ad98..ee72e6211d41f 100644 --- a/src/platforms/javascript/common/install/loader.mdx +++ b/src/platforms/javascript/common/install/loader.mdx @@ -202,7 +202,16 @@ Our CDN hosts a variety of bundles: - `@sentry/browser` with error, performance monitoring and session replay (named `bundle.tracing.replay..js`) - each of the integrations in `@sentry/integrations` (named `..js`) -Each bundle is offered in both ES6 and ES5 versions, and for each version there are three bundle varieties: unminified, minified, and minified with debug logging. (That last version can be helpful for times when you need to debug an issue which only occurs in production. In a development environment, it makes most sense to use the unminified bundle, which always includes logging.) +Each bundle is offered in both ES6 and ES5 versions - the bundles are ES6 by default since v7 of the SDK. If you want to use the ES5 bundle, add the `.es5` modifier. + +For each version there are three bundle varieties: + +* minified (`.min`) +* unminified (no `.min`) - includes debug logging +* minified with debug logging (`.debug.min`) + +Bundles that include debug logging will allow to output more detailed log messages, which can be helpful for debugging problems. Make sure to enable debug to see the debug messages in the console. +Unminified & debug logging bundles have a greater bundle size than the minified ones. For example: @@ -210,13 +219,6 @@ For example: - `rewriteframes.es5.min.js` is the `RewriteFrames` integration, compiled to ES5 and minified, with no debug logging - `bundle.tracing.es5.debug.min.js` is `@sentry/browser` with performance monitoring enabled, compiled to ES5 and minified, with debug logging included - - -Version 7 of the Sentry JavaScript SDKs changed the bundles to be ES6 by default. -Previously, the default bundles were compiled to ES5. If you need to support ES5, see [Available Bundles](#available-bundles) or the [Migration Guide to Version 7](https://github.com/getsentry/sentry-javascript/blob/master/MIGRATION.md#upgrading-from-6x-to-7x). - - - ## Additional Configuration diff --git a/src/platforms/javascript/common/troubleshooting/supported-browsers.mdx b/src/platforms/javascript/common/troubleshooting/supported-browsers.mdx index 403c9bf4c7478..5d1cdfe1a2ef7 100644 --- a/src/platforms/javascript/common/troubleshooting/supported-browsers.mdx +++ b/src/platforms/javascript/common/troubleshooting/supported-browsers.mdx @@ -36,81 +36,18 @@ Sentry's JavaScript SDK supports the following browsers: 4.4 latest latest - IE 10 + IE 11* iOS12 latest latest - - 5.0 - - - IE 11 - iOS13 - - - - - 6.0 - - - - - - - - - 7.1 - - - - - - - - - 8.1 - - - - - - - - - 9.0 - - - - - - - - - 10.0 - - - - - - - -## Support for <= IE 11 - -Prior to version 5.7.0, our JavaScript SDK needed some polyfills for older browsers like IE 11 and lower. If you are using it, please upgrade to the latest version or add the script tag below before loading our SDK. - -```html - -``` +## Support for IE11 / ES5 -We need the following polyfill: +The Sentry JavaScript SDK use ES6 syntax & functionality in order to provide the best possible user experience. If you want to provide support for IE11 (or other environments that do not support ES6), you need to make sure to transpile your code accordingly - this can be done in all bundlers like Webpack, Vite, Rollup, etc. -- `Promise` -- `Object.assign` -- `Number.isNaN` -- `String.prototype.includes` +Please note that we do use some ES6-only features that you'll need to provide polyfills for if you want to use them in ES5. You can view examples for this [here](https://github.com/getsentry/sentry-javascript/blob/develop/rollup/polyfills/es5.js). -Additionally, remember to define a valid HTML doctype on top of your HTML page to make sure IE does not go into compatibility mode. +Alternatively, you can also use our ES5 CDN bundles. diff --git a/src/platforms/javascript/guides/nextjs/manual-setup.mdx b/src/platforms/javascript/guides/nextjs/manual-setup.mdx index 8298febe31595..36408bfbc202d 100644 --- a/src/platforms/javascript/guides/nextjs/manual-setup.mdx +++ b/src/platforms/javascript/guides/nextjs/manual-setup.mdx @@ -173,8 +173,6 @@ Note that this only applies to client-side builds, and requires the `SentryWebpa ### Widen the Upload Scope -_(New in version 6.19.1)_ - If you find that there are in-app frames in your client-side stack traces that aren't getting source-mapped even when most others are, it's likely because they are from files in `static/chunks/` rather than `static/chunks/pages/`. By default, such files aren't uploaded because the majority of the files in `static/chunks/` only contain Next.js or third-party code, and are named in such a way that it's hard to distinguish between relevant files (ones containing your code) and irrelevant ones. To upload all of the files in `static/chunks/` anyway, add a `sentry` object to `nextConfig` above, and set the `widenClientFileUpload` option to `true`: diff --git a/src/wizard/javascript/performance-onboarding/react/3.verify.md b/src/wizard/javascript/performance-onboarding/react/3.verify.md index d068ee1128de5..cacd80b29826d 100644 --- a/src/wizard/javascript/performance-onboarding/react/3.verify.md +++ b/src/wizard/javascript/performance-onboarding/react/3.verify.md @@ -26,7 +26,6 @@ import * as Sentry from "@sentry/react"; function App(props) { // ... - return
; } From 9e2b12623f016d56a8fd9bd2f94a2f58981ee7a1 Mon Sep 17 00:00:00 2001 From: Francesco Novy Date: Thu, 4 May 2023 14:59:41 +0200 Subject: [PATCH 2/9] style(lint): Auto commit lint changes style(lint): Auto commit lint changes style(lint): Auto commit lint changes style(lint): Auto commit lint changes style(lint): Auto commit lint changes style(lint): Auto commit lint changes style(lint): Auto commit lint changes style(lint): Auto commit lint changes style(lint): Auto commit lint changes style(lint): Auto commit lint changes style(lint): Auto commit lint changes style(lint): Auto commit lint changes style(lint): Auto commit lint changes --- .../getting-started-config/javascript.mdx | 9 +++------ .../performance/configure-sample-rate/javascript.mdx | 2 +- .../configure-sample-rate/javascript.vue.mdx | 2 +- .../database-connection/javascript.mdx | 4 ++-- .../set-fingerprint/rpc/javascript.mdx | 6 +++--- src/platforms/javascript/common/install/loader.mdx | 12 ++++++------ 6 files changed, 16 insertions(+), 19 deletions(-) diff --git a/src/platform-includes/getting-started-config/javascript.mdx b/src/platform-includes/getting-started-config/javascript.mdx index 16d66160cdfbd..8e828cb5e520d 100644 --- a/src/platform-includes/getting-started-config/javascript.mdx +++ b/src/platform-includes/getting-started-config/javascript.mdx @@ -9,17 +9,14 @@ Sentry.init({ // Alternatively, use `process.env.npm_package_version` for a dynamic release version // if your build tool supports it. release: 'my-project-name@2.3.12', - integrations: [ - new Sentry.BrowserTracing(), - new Sentry.Replay() - ], + integrations: [new Sentry.BrowserTracing(), new Sentry.Replay()], // Set tracesSampleRate to 1.0 to capture 100% // of transactions for performance monitoring. // We recommend adjusting this value in production tracesSampleRate: 1.0, - - // Capture Replay for 10% of all sessions, + + // Capture Replay for 10% of all sessions, // plus for 100% of sessions with an error replaysSessionSampleRate: 0.1, replaysOnErrorSampleRate: 1.0, diff --git a/src/platform-includes/performance/configure-sample-rate/javascript.mdx b/src/platform-includes/performance/configure-sample-rate/javascript.mdx index 3e1f660a25e82..7e91f2de9243c 100644 --- a/src/platform-includes/performance/configure-sample-rate/javascript.mdx +++ b/src/platform-includes/performance/configure-sample-rate/javascript.mdx @@ -6,7 +6,7 @@ import * as Sentry from "@sentry/browser"; Sentry.init({ dsn: "___PUBLIC_DSN___", - // This enables automatic instrumentation (highly recommended), + // This enables automatic instrumentation (highly recommended), // but is not necessary for purely manual usage // If you only want to use manually: // * Remove the `BrowserTracing` integration diff --git a/src/platform-includes/performance/configure-sample-rate/javascript.vue.mdx b/src/platform-includes/performance/configure-sample-rate/javascript.vue.mdx index b0245372023ac..795e79319dddc 100644 --- a/src/platform-includes/performance/configure-sample-rate/javascript.vue.mdx +++ b/src/platform-includes/performance/configure-sample-rate/javascript.vue.mdx @@ -7,7 +7,7 @@ Sentry.init({ Vue: Vue, dsn: "___PUBLIC_DSN___", - // This enables automatic instrumentation (highly recommended), + // This enables automatic instrumentation (highly recommended), // but is not necessary for purely manual usage // If you only want to use manually: // * Remove the `BrowserTracing` integration diff --git a/src/platform-includes/set-fingerprint/database-connection/javascript.mdx b/src/platform-includes/set-fingerprint/database-connection/javascript.mdx index d955a7cc4cd27..eaf95d2b51ecf 100644 --- a/src/platform-includes/set-fingerprint/database-connection/javascript.mdx +++ b/src/platform-includes/set-fingerprint/database-connection/javascript.mdx @@ -3,7 +3,7 @@ class DatabaseConnectionError extends Error {} Sentry.init({ // ... - beforeSend: function(event, hint) { + beforeSend: function (event, hint) { const exception = hint.originalException; if (exception instanceof DatabaseConnectionError) { @@ -11,6 +11,6 @@ Sentry.init({ } return event; - } + }, }); ``` diff --git a/src/platform-includes/set-fingerprint/rpc/javascript.mdx b/src/platform-includes/set-fingerprint/rpc/javascript.mdx index 6c3a501845293..0e846f76f4ed9 100644 --- a/src/platform-includes/set-fingerprint/rpc/javascript.mdx +++ b/src/platform-includes/set-fingerprint/rpc/javascript.mdx @@ -13,18 +13,18 @@ class MyRPCError extends Error { Sentry.init({ // ... - beforeSend: function(event, hint) { + beforeSend: function (event, hint) { const exception = hint.originalException; if (exception instanceof MyRPCError) { event.fingerprint = [ '{{ default }}', String(exception.functionName), - String(exception.errorCode) + String(exception.errorCode), ]; } return event; - } + }, }); ``` diff --git a/src/platforms/javascript/common/install/loader.mdx b/src/platforms/javascript/common/install/loader.mdx index ee72e6211d41f..296ea2f4400f9 100644 --- a/src/platforms/javascript/common/install/loader.mdx +++ b/src/platforms/javascript/common/install/loader.mdx @@ -202,15 +202,15 @@ Our CDN hosts a variety of bundles: - `@sentry/browser` with error, performance monitoring and session replay (named `bundle.tracing.replay..js`) - each of the integrations in `@sentry/integrations` (named `..js`) -Each bundle is offered in both ES6 and ES5 versions - the bundles are ES6 by default since v7 of the SDK. If you want to use the ES5 bundle, add the `.es5` modifier. +Each bundle is offered in both ES6 and ES5 versions - the bundles are ES6 by default since v7 of the SDK. If you want to use the ES5 bundle, add the `.es5` modifier. -For each version there are three bundle varieties: +For each version there are three bundle varieties: -* minified (`.min`) -* unminified (no `.min`) - includes debug logging -* minified with debug logging (`.debug.min`) +- minified (`.min`) +- unminified (no `.min`) - includes debug logging +- minified with debug logging (`.debug.min`) -Bundles that include debug logging will allow to output more detailed log messages, which can be helpful for debugging problems. Make sure to enable debug to see the debug messages in the console. +Bundles that include debug logging will allow to output more detailed log messages, which can be helpful for debugging problems. Make sure to enable debug to see the debug messages in the console. Unminified & debug logging bundles have a greater bundle size than the minified ones. For example: From b81a308ffcfe238f7d5c2dce4f7abf7fc95a6a7d Mon Sep 17 00:00:00 2001 From: Francesco Novy Date: Thu, 4 May 2023 15:09:04 +0200 Subject: [PATCH 3/9] fix broken links --- src/platform-includes/getting-started-install/javascript.mdx | 2 +- .../troubleshooting/older-browser-support/javascript.mdx | 2 +- .../javascript/common/troubleshooting/supported-browsers.mdx | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/platform-includes/getting-started-install/javascript.mdx b/src/platform-includes/getting-started-install/javascript.mdx index 48a7c713021b2..f234e189b224f 100644 --- a/src/platform-includes/getting-started-install/javascript.mdx +++ b/src/platform-includes/getting-started-install/javascript.mdx @@ -8,7 +8,7 @@ yarn add @sentry/browser -We also support alternate [installation methods](/platforms/javascript/install/) such as the Loader Script or via CDN bundles. +We also support alternate [installation methods](/platforms/javascript/install/) such as the [Loader Script](/platforms/javascript/install/loader/) or via [CDN bundles](/platforms/javascript/install/loader/#cdn). diff --git a/src/platform-includes/troubleshooting/older-browser-support/javascript.mdx b/src/platform-includes/troubleshooting/older-browser-support/javascript.mdx index f08421daff06d..38fb03fb37a36 100644 --- a/src/platform-includes/troubleshooting/older-browser-support/javascript.mdx +++ b/src/platform-includes/troubleshooting/older-browser-support/javascript.mdx @@ -47,6 +47,6 @@ Though the above example is Webpack-specific, similar changes can be made to con "javascript.wasm", ]}> -As an alternative, you can use one of our ES5-specific CDN bundles. +As an alternative, you can use one of our [ES5 CDN bundles](/platforms/javascript/install/loader/#available-bundles). diff --git a/src/platforms/javascript/common/troubleshooting/supported-browsers.mdx b/src/platforms/javascript/common/troubleshooting/supported-browsers.mdx index 5d1cdfe1a2ef7..6e5c712c84fb3 100644 --- a/src/platforms/javascript/common/troubleshooting/supported-browsers.mdx +++ b/src/platforms/javascript/common/troubleshooting/supported-browsers.mdx @@ -50,4 +50,4 @@ The Sentry JavaScript SDK use ES6 syntax & functionality in order to provide the Please note that we do use some ES6-only features that you'll need to provide polyfills for if you want to use them in ES5. You can view examples for this [here](https://github.com/getsentry/sentry-javascript/blob/develop/rollup/polyfills/es5.js). -Alternatively, you can also use our ES5 CDN bundles. +Alternatively, you can also use our [ES5 CDN bundles](/platforms/javascript/install/loader/#available-bundles). From 24fe4b703c0a9be306db0e7169994d88e997842d Mon Sep 17 00:00:00 2001 From: Francesco Novy Date: Fri, 5 May 2023 08:59:16 +0200 Subject: [PATCH 4/9] rename to Yarn --- src/platform-includes/getting-started-install/javascript.mdx | 2 +- .../getting-started-install/javascript.remix.mdx | 2 +- .../getting-started-install/javascript.svelte.mdx | 2 +- .../performance/opentelemetry-install/javascript.nextjs.mdx | 2 +- .../performance/opentelemetry-install/node.mdx | 2 +- src/platform-includes/sourcemaps/upload/webpack/javascript.mdx | 2 +- .../javascript/common/configuration/sentry-testkit/index.mdx | 2 +- .../javascript/common/sourcemaps/uploading/angular-webpack.mdx | 2 +- 8 files changed, 8 insertions(+), 8 deletions(-) diff --git a/src/platform-includes/getting-started-install/javascript.mdx b/src/platform-includes/getting-started-install/javascript.mdx index f234e189b224f..19353e22c5e04 100644 --- a/src/platform-includes/getting-started-install/javascript.mdx +++ b/src/platform-includes/getting-started-install/javascript.mdx @@ -2,7 +2,7 @@ npm install --save @sentry/browser ``` -```bash {tabTitle:yarn} +```bash {tabTitle:Yarn} yarn add @sentry/browser ``` diff --git a/src/platform-includes/getting-started-install/javascript.remix.mdx b/src/platform-includes/getting-started-install/javascript.remix.mdx index 83b359837a2f6..fec7751e1b4ab 100644 --- a/src/platform-includes/getting-started-install/javascript.remix.mdx +++ b/src/platform-includes/getting-started-install/javascript.remix.mdx @@ -2,6 +2,6 @@ npm install --save @sentry/remix ``` -```bash {tabTitle:yarn} +```bash {tabTitle:Yarn} yarn add @sentry/remix ``` diff --git a/src/platform-includes/getting-started-install/javascript.svelte.mdx b/src/platform-includes/getting-started-install/javascript.svelte.mdx index a98085fbd28f9..6385387054bf0 100644 --- a/src/platform-includes/getting-started-install/javascript.svelte.mdx +++ b/src/platform-includes/getting-started-install/javascript.svelte.mdx @@ -2,6 +2,6 @@ npm install --save @sentry/svelte ``` -```bash {tabTitle:yarn} +```bash {tabTitle:Yarn} yarn add @sentry/svelte ``` diff --git a/src/platform-includes/performance/opentelemetry-install/javascript.nextjs.mdx b/src/platform-includes/performance/opentelemetry-install/javascript.nextjs.mdx index a698ab8b2f6d6..0e4ac8c1469b0 100644 --- a/src/platform-includes/performance/opentelemetry-install/javascript.nextjs.mdx +++ b/src/platform-includes/performance/opentelemetry-install/javascript.nextjs.mdx @@ -8,7 +8,7 @@ OpenTelemetry support is only supported for server-side instrumentation. npm install @sentry/nextjs @sentry/opentelemetry-node ``` -```bash {tabTitle:yarn} +```bash {tabTitle:Yarn} yarn add @sentry/nextjs @sentry/opentelemetry-node ``` diff --git a/src/platform-includes/performance/opentelemetry-install/node.mdx b/src/platform-includes/performance/opentelemetry-install/node.mdx index d43c722d34dcf..d422b0b64eae4 100644 --- a/src/platform-includes/performance/opentelemetry-install/node.mdx +++ b/src/platform-includes/performance/opentelemetry-install/node.mdx @@ -2,7 +2,7 @@ npm install @sentry/node @sentry/opentelemetry-node ``` -```bash {tabTitle:yarn} +```bash {tabTitle:Yarn} yarn add @sentry/node @sentry/opentelemetry-node ``` diff --git a/src/platform-includes/sourcemaps/upload/webpack/javascript.mdx b/src/platform-includes/sourcemaps/upload/webpack/javascript.mdx index 003689ea107fd..4e93f2e7a4182 100644 --- a/src/platform-includes/sourcemaps/upload/webpack/javascript.mdx +++ b/src/platform-includes/sourcemaps/upload/webpack/javascript.mdx @@ -7,7 +7,7 @@ You can use the Sentry Webpack plugin to automatically create releases and uploa npm install --save-dev @sentry/webpack-plugin ``` -```shell {tabTitle:yarn} +```shell {tabTitle:Yarn} yarn add --dev @sentry/webpack-plugin ``` diff --git a/src/platforms/javascript/common/configuration/sentry-testkit/index.mdx b/src/platforms/javascript/common/configuration/sentry-testkit/index.mdx index 92a9158dec320..101c1039641a5 100644 --- a/src/platforms/javascript/common/configuration/sentry-testkit/index.mdx +++ b/src/platforms/javascript/common/configuration/sentry-testkit/index.mdx @@ -14,7 +14,7 @@ When building tests for your application, you want to assert that the right flow npm install --save-dev sentry-testkit ``` -```bash {tabTitle:yarn} +```bash {tabTitle:Yarn} yarn add sentry-testkit --dev ``` diff --git a/src/platforms/javascript/common/sourcemaps/uploading/angular-webpack.mdx b/src/platforms/javascript/common/sourcemaps/uploading/angular-webpack.mdx index bc14d08be0732..8c8586f9b4d2b 100644 --- a/src/platforms/javascript/common/sourcemaps/uploading/angular-webpack.mdx +++ b/src/platforms/javascript/common/sourcemaps/uploading/angular-webpack.mdx @@ -24,7 +24,7 @@ Install the custom Webpack builder for Angular and the Sentry Webpack plugin: npm install --save-dev @angular-builders/custom-webpack @sentry/webpack-plugin ``` -```shell {tabTitle:yarn} +```shell {tabTitle:Yarn} yarn add --dev @angular-builders/custom-webpack @sentry/webpack-plugin ``` From fe0f710c4bf8adc5ce076c4dc63851392b133693 Mon Sep 17 00:00:00 2001 From: Francesco Novy Date: Fri, 5 May 2023 09:03:43 +0200 Subject: [PATCH 5/9] Apply suggestions from code review Co-authored-by: Shana Matthews --- .../getting-started-config/javascript.mdx | 2 +- .../performance/configure-sample-rate/javascript.mdx | 2 +- .../configure-sample-rate/javascript.react.mdx | 2 +- .../configure-sample-rate/javascript.vue.mdx | 2 +- src/platforms/common/usage/sdk-fingerprinting.mdx | 2 +- src/platforms/javascript/common/install/loader.mdx | 10 +++++----- .../common/troubleshooting/supported-browsers.mdx | 8 ++++---- 7 files changed, 14 insertions(+), 14 deletions(-) diff --git a/src/platform-includes/getting-started-config/javascript.mdx b/src/platform-includes/getting-started-config/javascript.mdx index 8e828cb5e520d..728b70ac3d638 100644 --- a/src/platform-includes/getting-started-config/javascript.mdx +++ b/src/platform-includes/getting-started-config/javascript.mdx @@ -1,4 +1,4 @@ -Once this is done, Sentry's JavaScript SDK captures all unhandled exceptions, transactions, as well as Session Replays. +Once this is done, Sentry's JavaScript SDK captures all unhandled exceptions, transactions, and Session Replays, based on the sample rates set. ```javascript import * as Sentry from "@sentry/browser"; diff --git a/src/platform-includes/performance/configure-sample-rate/javascript.mdx b/src/platform-includes/performance/configure-sample-rate/javascript.mdx index 7e91f2de9243c..80a6cbd31dcec 100644 --- a/src/platform-includes/performance/configure-sample-rate/javascript.mdx +++ b/src/platform-includes/performance/configure-sample-rate/javascript.mdx @@ -8,7 +8,7 @@ Sentry.init({ // This enables automatic instrumentation (highly recommended), // but is not necessary for purely manual usage - // If you only want to use manually: + // If you only want to use manual instrumentation: // * Remove the `BrowserTracing` integration // * add `Sentry.addTracingExtensions()` above your Sentry.init() call integrations: [new Sentry.BrowserTracing()], diff --git a/src/platform-includes/performance/configure-sample-rate/javascript.react.mdx b/src/platform-includes/performance/configure-sample-rate/javascript.react.mdx index eb713c7fa9969..8ca3da77f0579 100644 --- a/src/platform-includes/performance/configure-sample-rate/javascript.react.mdx +++ b/src/platform-includes/performance/configure-sample-rate/javascript.react.mdx @@ -6,7 +6,7 @@ Sentry.init({ // This enables automatic instrumentation (highly recommended), but is not // necessary for purely manual usage. - // If you only want to use manually: + // If you only want to use manual instrumentation: // * Remove the `BrowserTracing` integration // * add `Sentry.addTracingExtensions()` above your Sentry.init() call integrations: [new Sentry.BrowserTracing()], diff --git a/src/platform-includes/performance/configure-sample-rate/javascript.vue.mdx b/src/platform-includes/performance/configure-sample-rate/javascript.vue.mdx index 795e79319dddc..d38d719460244 100644 --- a/src/platform-includes/performance/configure-sample-rate/javascript.vue.mdx +++ b/src/platform-includes/performance/configure-sample-rate/javascript.vue.mdx @@ -9,7 +9,7 @@ Sentry.init({ // This enables automatic instrumentation (highly recommended), // but is not necessary for purely manual usage - // If you only want to use manually: + // If you only want to use manual instrumentation: // * Remove the `BrowserTracing` integration // * add `Sentry.addTracingExtensions()` above your Sentry.init() call integrations: [new Sentry.BrowserTracing()], diff --git a/src/platforms/common/usage/sdk-fingerprinting.mdx b/src/platforms/common/usage/sdk-fingerprinting.mdx index 2421b072ff1aa..a0ee6711a7d0e 100644 --- a/src/platforms/common/usage/sdk-fingerprinting.mdx +++ b/src/platforms/common/usage/sdk-fingerprinting.mdx @@ -41,6 +41,6 @@ The following example will split up the default group Sentry would create (repre ## Group Errors More Aggressively -If a generic error, such as a database connection error, has many different stack traces and never groups together, you can completely overwrite Sentry's grouping by omitting `{{ default }}` from the array: +If a generic error, such as a database connection error, has many different stack traces and never groups them together, you can overwrite Sentry's grouping by omitting `{{ default }}` from the array: diff --git a/src/platforms/javascript/common/install/loader.mdx b/src/platforms/javascript/common/install/loader.mdx index 296ea2f4400f9..09c5cb82aabb8 100644 --- a/src/platforms/javascript/common/install/loader.mdx +++ b/src/platforms/javascript/common/install/loader.mdx @@ -202,16 +202,16 @@ Our CDN hosts a variety of bundles: - `@sentry/browser` with error, performance monitoring and session replay (named `bundle.tracing.replay..js`) - each of the integrations in `@sentry/integrations` (named `..js`) -Each bundle is offered in both ES6 and ES5 versions - the bundles are ES6 by default since v7 of the SDK. If you want to use the ES5 bundle, add the `.es5` modifier. +Each bundle is offered in both ES6 and ES5 versions. Since v7 of the SDK, the bundles are ES6 by default. To use the ES5 bundle, add the `.es5` modifier. -For each version there are three bundle varieties: +Each version has three bundle varieties: - minified (`.min`) -- unminified (no `.min`) - includes debug logging +- unminified (no `.min`), includes debug logging - minified with debug logging (`.debug.min`) -Bundles that include debug logging will allow to output more detailed log messages, which can be helpful for debugging problems. Make sure to enable debug to see the debug messages in the console. -Unminified & debug logging bundles have a greater bundle size than the minified ones. +Bundles that include debug logging output more detailed log messages, which can be helpful for debugging problems. Make sure to enable debug to see debug messages in the console. +Unminified and debug logging bundles have a greater bundle size than minified ones. For example: diff --git a/src/platforms/javascript/common/troubleshooting/supported-browsers.mdx b/src/platforms/javascript/common/troubleshooting/supported-browsers.mdx index 6e5c712c84fb3..4c23c7f540f22 100644 --- a/src/platforms/javascript/common/troubleshooting/supported-browsers.mdx +++ b/src/platforms/javascript/common/troubleshooting/supported-browsers.mdx @@ -36,7 +36,7 @@ Sentry's JavaScript SDK supports the following browsers: 4.4 latest latest - IE 11* + IE 11 iOS12 latest latest @@ -46,8 +46,8 @@ Sentry's JavaScript SDK supports the following browsers: ## Support for IE11 / ES5 -The Sentry JavaScript SDK use ES6 syntax & functionality in order to provide the best possible user experience. If you want to provide support for IE11 (or other environments that do not support ES6), you need to make sure to transpile your code accordingly - this can be done in all bundlers like Webpack, Vite, Rollup, etc. +The Sentry JavaScript SDK uses ES6 syntax and functionality to provide the best possible user experience. If you want to support IE11 (or other environments that do not support ES6), you need to transpile your code using a bundler like Webpack, Vite, Rollup, etc. -Please note that we do use some ES6-only features that you'll need to provide polyfills for if you want to use them in ES5. You can view examples for this [here](https://github.com/getsentry/sentry-javascript/blob/develop/rollup/polyfills/es5.js). +We do use some ES6-only features. If you want to use them in ES5, you'll need to provide polyfills. [Here is an example](https://github.com/getsentry/sentry-javascript/blob/develop/rollup/polyfills/es5.js) of how to do this. -Alternatively, you can also use our [ES5 CDN bundles](/platforms/javascript/install/loader/#available-bundles). +Alternatively, you can use our [ES5 CDN bundles](/platforms/javascript/install/loader/#available-bundles). From 4859ec323f479af7b912b68356d6ffedffaf984a Mon Sep 17 00:00:00 2001 From: Francesco Novy Date: Fri, 5 May 2023 09:46:39 +0200 Subject: [PATCH 6/9] streamline npm/yarn install scripts --- .../getting-started-install/javascript.electron.mdx | 10 +++++----- .../getting-started-install/javascript.react.mdx | 6 +++--- src/platform-includes/getting-started-install/node.mdx | 9 +++++---- .../common/configuration/webworkers/index.mdx | 10 +++++----- src/platforms/javascript/guides/angular/angular1.mdx | 10 +++++----- src/platforms/javascript/guides/wasm/index.mdx | 10 +++++----- .../integrations/pluggable-integrations.mdx | 9 +++++---- src/platforms/node/common/profiling/index.mdx | 10 +++++----- 8 files changed, 38 insertions(+), 36 deletions(-) diff --git a/src/platform-includes/getting-started-install/javascript.electron.mdx b/src/platform-includes/getting-started-install/javascript.electron.mdx index 5660d8cde27cd..521ab1ca8df45 100644 --- a/src/platform-includes/getting-started-install/javascript.electron.mdx +++ b/src/platform-includes/getting-started-install/javascript.electron.mdx @@ -1,7 +1,7 @@ -```bash -# Using yarn -yarn add @sentry/electron +```bash {tabTitle:npm} +npm install --save @sentry/electron +``` -# Using npm -npm install @sentry/electron +```bash {tabTitle:Yarn} +yarn add @sentry/electron ``` diff --git a/src/platform-includes/getting-started-install/javascript.react.mdx b/src/platform-includes/getting-started-install/javascript.react.mdx index b63cc7e333945..80038bf5da6b9 100644 --- a/src/platform-includes/getting-started-install/javascript.react.mdx +++ b/src/platform-includes/getting-started-install/javascript.react.mdx @@ -1,7 +1,7 @@ -```bash -# Using npm +```bash {tabTitle:npm} npm install --save @sentry/react +``` -# Using yarn +```bash {tabTitle:Yarn} yarn add @sentry/react ``` diff --git a/src/platform-includes/getting-started-install/node.mdx b/src/platform-includes/getting-started-install/node.mdx index b4147aace30d1..0745c7e6e2700 100644 --- a/src/platform-includes/getting-started-install/node.mdx +++ b/src/platform-includes/getting-started-install/node.mdx @@ -1,6 +1,7 @@ -```bash -# Using yarn -yarn add @sentry/node -# Using npm +```bash {tabTitle:npm} npm install --save @sentry/node ``` + +```bash {tabTitle:Yarn} +yarn add @sentry/node +``` \ No newline at end of file diff --git a/src/platforms/javascript/common/configuration/webworkers/index.mdx b/src/platforms/javascript/common/configuration/webworkers/index.mdx index f337e7e55dce4..7d205fdabbeb9 100644 --- a/src/platforms/javascript/common/configuration/webworkers/index.mdx +++ b/src/platforms/javascript/common/configuration/webworkers/index.mdx @@ -21,14 +21,14 @@ Sentry's Browser SDK supports [Web Workers API](https://developer.mozilla.org/en Install `@sentry/browser` using `yarn` or `npm`: -```bash -# Using yarn -yarn add @sentry/browser - -# Using npm +```bash {tabTitle:npm} npm install --save @sentry/browser ``` +```bash {tabTitle:Yarn} +yarn add @sentry/browser +``` + Then you can use it: ```javascript {filename:index.js} diff --git a/src/platforms/javascript/guides/angular/angular1.mdx b/src/platforms/javascript/guides/angular/angular1.mdx index afeff1d128a62..8f96b7f3722d0 100644 --- a/src/platforms/javascript/guides/angular/angular1.mdx +++ b/src/platforms/javascript/guides/angular/angular1.mdx @@ -17,12 +17,12 @@ From version 7 onwards, the Sentry JavaScript SDK will not support AngularJS 1.x Install `@sentry/browser` and `@sentry/integrations` using `yarn` or `npm`: -```bash -# Using yarn -yarn add @sentry/browser@6 @sentry/integrations@6 +```bash {tabTitle:npm} +npm install --save @sentry/browser@6 @sentry/intergations@6 +``` -# Using npm -npm install --save @sentry/browser@6 @sentry/integrations@6 +```bash {tabTitle:Yarn} +yarn add @sentry/browser@6 @sentry/integrations@6 ``` and afterwards using it like this: diff --git a/src/platforms/javascript/guides/wasm/index.mdx b/src/platforms/javascript/guides/wasm/index.mdx index db9068287e218..e9106d06a2e9f 100644 --- a/src/platforms/javascript/guides/wasm/index.mdx +++ b/src/platforms/javascript/guides/wasm/index.mdx @@ -11,14 +11,14 @@ Sentry's Wasm integration enhances the Browser SDK, and allows it to provide mor Install `@sentry/browser` and `@sentry/wasm` using `yarn` or `npm`: -```bash -# Using yarn -yarn add @sentry/browser @sentry/wasm - -# Using npm +```bash {tabTitle:npm} npm install --save @sentry/browser @sentry/wasm ``` +```bash {tabTitle:Yarn} +yarn add @sentry/browser @sentry/wasm +``` + and afterwards use it like this: ```javascript diff --git a/src/platforms/node/common/configuration/integrations/pluggable-integrations.mdx b/src/platforms/node/common/configuration/integrations/pluggable-integrations.mdx index 012955c819f06..15cc0c3865c6d 100644 --- a/src/platforms/node/common/configuration/integrations/pluggable-integrations.mdx +++ b/src/platforms/node/common/configuration/integrations/pluggable-integrations.mdx @@ -12,13 +12,14 @@ Pluggable integrations are integrations that can be additionally enabled to prov To enable pluggable integrations, install the package `@sentry/integrations`. -```shell -# Using yarn -yarn add @sentry/integrations -# Using npm +```bash {tabTitle:npm} npm install --save @sentry/integrations ``` +```bash {tabTitle:Yarn} +yarn add @sentry/integrations +``` + ## Configure After installation, you can import the integration and provide a new instance with your config to the `integrations` option. diff --git a/src/platforms/node/common/profiling/index.mdx b/src/platforms/node/common/profiling/index.mdx index e4cd7bd48df0e..93dfbcdc4f2b2 100644 --- a/src/platforms/node/common/profiling/index.mdx +++ b/src/platforms/node/common/profiling/index.mdx @@ -20,14 +20,14 @@ You have to have the `@sentry/node` (minimum version `7.44.1`) package installed -```bash -# Using yarn -yarn add @sentry/node @sentry/profiling-node - -# Using npm +```bash {tabTitle:npm} npm install --save @sentry/node @sentry/profiling-node ``` +```bash {tabTitle:Yarn} +yarn add @sentry/node @sentry/profiling-node +``` + ## Enabling Profiling To enable profiling, import @sentry/profiling-node, add ProfilingIntegration to your integrations, and set the profilesSampleRate. From b828aa56d1062eff2e4b32c6d1c0080654cc6945 Mon Sep 17 00:00:00 2001 From: Francesco Novy Date: Fri, 5 May 2023 09:46:54 +0200 Subject: [PATCH 7/9] show loader as default installation for browser --- .../getting-started-install/javascript.mdx | 15 ++++++++++++++- 1 file changed, 14 insertions(+), 1 deletion(-) diff --git a/src/platform-includes/getting-started-install/javascript.mdx b/src/platform-includes/getting-started-install/javascript.mdx index 19353e22c5e04..625a2a8003f24 100644 --- a/src/platform-includes/getting-started-install/javascript.mdx +++ b/src/platform-includes/getting-started-install/javascript.mdx @@ -1,3 +1,16 @@ +In order to get started using the Sentry JavaScript SDK, add the following code to the top of your application, before all other scripts: + +```html + +``` + +The Loader Script allows you to configure some SDK features from the Sentry UI, without having to redeploy your application. The [Loader Script documentation](/platforms/javascript/install/loader/) shows more information about how to use it. + +Alternatively, you can also install the SDK via a package manager: + ```bash {tabTitle:npm} npm install --save @sentry/browser ``` @@ -8,7 +21,7 @@ yarn add @sentry/browser -We also support alternate [installation methods](/platforms/javascript/install/) such as the [Loader Script](/platforms/javascript/install/loader/) or via [CDN bundles](/platforms/javascript/install/loader/#cdn). +We also support installation via [CDN bundles](/platforms/javascript/install/loader/#cdn). From c75f3b7596a694f735b3bb50320bf8dc8bf753ae Mon Sep 17 00:00:00 2001 From: Francesco Novy Date: Fri, 5 May 2023 09:47:12 +0200 Subject: [PATCH 8/9] add replay to default config --- .../javascript.angular.mdx | 8 ++++ .../javascript.ember.mdx | 6 +++ .../javascript.react.mdx | 12 +++-- .../javascript.remix.mdx | 44 +++++++++++++++++-- .../javascript.svelte.mdx | 7 ++- .../getting-started-config/javascript.vue.mdx | 7 +++ .../javascript/guides/gatsby/index.mdx | 23 ++++------ .../javascript/guides/nextjs/manual-setup.mdx | 42 +++++++++++++++--- 8 files changed, 120 insertions(+), 29 deletions(-) diff --git a/src/platform-includes/getting-started-config/javascript.angular.mdx b/src/platform-includes/getting-started-config/javascript.angular.mdx index decaf89458a97..3cd76c6476fbf 100644 --- a/src/platform-includes/getting-started-config/javascript.angular.mdx +++ b/src/platform-includes/getting-started-config/javascript.angular.mdx @@ -16,12 +16,20 @@ Sentry.init({ tracePropagationTargets: ["localhost", "https://yourserver.io/api"], routingInstrumentation: Sentry.routingInstrumentation, }), + // Registers the Replay integration, + // which automatically captures Session Replays + new Sentry.Replay(), ], // Set tracesSampleRate to 1.0 to capture 100% // of transactions for performance monitoring. // We recommend adjusting this value in production tracesSampleRate: 1.0, + + // Capture Replay for 10% of all sessions, + // plus for 100% of sessions with an error + replaysSessionSampleRate: 0.1, + replaysOnErrorSampleRate: 1.0, }); platformBrowserDynamic() diff --git a/src/platform-includes/getting-started-config/javascript.ember.mdx b/src/platform-includes/getting-started-config/javascript.ember.mdx index a0ab61652701d..8542c7a206a31 100644 --- a/src/platform-includes/getting-started-config/javascript.ember.mdx +++ b/src/platform-includes/getting-started-config/javascript.ember.mdx @@ -10,11 +10,17 @@ import * as Sentry from "@sentry/ember"; Sentry.init({ dsn: "___PUBLIC_DSN___", + integrations: [new Sentry.Replay()], // Set tracesSampleRate to 1.0 to capture 100% // of transactions for performance monitoring. // We recommend adjusting this value in production, tracesSampleRate: 1.0, + + // Capture Replay for 10% of all sessions, + // plus for 100% of sessions with an error + replaysSessionSampleRate: 0.1, + replaysOnErrorSampleRate: 1.0, }); export default class App extends Application { diff --git a/src/platform-includes/getting-started-config/javascript.react.mdx b/src/platform-includes/getting-started-config/javascript.react.mdx index 8006e60e720b8..5ee89872c26a1 100644 --- a/src/platform-includes/getting-started-config/javascript.react.mdx +++ b/src/platform-includes/getting-started-config/javascript.react.mdx @@ -6,11 +6,17 @@ import App from "./App"; Sentry.init({ dsn: "___PUBLIC_DSN___", - integrations: [new Sentry.BrowserTracing()], + integrations: [new Sentry.BrowserTracing(), new Sentry.Replay()], - // We recommend adjusting this value in production, or using tracesSampler - // for finer control + // Set tracesSampleRate to 1.0 to capture 100% + // of transactions for performance monitoring. + // We recommend adjusting this value in production tracesSampleRate: 1.0, + + // Capture Replay for 10% of all sessions, + // plus for 100% of sessions with an error + replaysSessionSampleRate: 0.1, + replaysOnErrorSampleRate: 1.0, }); const container = document.getElementById(“app”); diff --git a/src/platform-includes/getting-started-config/javascript.remix.mdx b/src/platform-includes/getting-started-config/javascript.remix.mdx index 70113b02f1160..4683c8feb80ad 100644 --- a/src/platform-includes/getting-started-config/javascript.remix.mdx +++ b/src/platform-includes/getting-started-config/javascript.remix.mdx @@ -1,13 +1,16 @@ To use this SDK, initialize Sentry in your Remix entry points for both the client and server. -```typescript {filename: entry.client.tsx} +Create two files in the root directory of your project, `entry.client.tsx` and `entry.server.tsx` (if they don't exist yet). In these files, add your initialization code for the client-side SDK and server-side SDK, respectively. + +The two configuration types are mostly the same, except that some configuration, like the one for Session Replay, only works in `entry.client.tsx`. + +```typescript {tabTitle:Client} {filename: entry.client.tsx} import { useLocation, useMatches } from "@remix-run/react"; import * as Sentry from "@sentry/remix"; import { useEffect } from "react"; Sentry.init({ dsn: "___DSN___", - tracesSampleRate: 1, integrations: [ new Sentry.BrowserTracing({ routingInstrumentation: Sentry.remixRouterInstrumentation( @@ -16,8 +19,43 @@ Sentry.init({ useMatches ), }), + // Replay is only available in the client + new Sentry.Replay(), ], - // ... + + // Set tracesSampleRate to 1.0 to capture 100% + // of transactions for performance monitoring. + // We recommend adjusting this value in production + tracesSampleRate: 1.0, + + // Capture Replay for 10% of all sessions, + // plus for 100% of sessions with an error + replaysSessionSampleRate: 0.1, + replaysOnErrorSampleRate: 1.0, +}); +``` + +```typescript {tabTitle:Server} {filename: entry.server.tsx} +import { useLocation, useMatches } from "@remix-run/react"; +import * as Sentry from "@sentry/remix"; +import { useEffect } from "react"; + +Sentry.init({ + dsn: "___DSN___", + integrations: [ + new Sentry.BrowserTracing({ + routingInstrumentation: Sentry.remixRouterInstrumentation( + useEffect, + useLocation, + useMatches + ), + }), + ], + + // Set tracesSampleRate to 1.0 to capture 100% + // of transactions for performance monitoring. + // We recommend adjusting this value in production + tracesSampleRate: 1.0, }); ``` diff --git a/src/platform-includes/getting-started-config/javascript.svelte.mdx b/src/platform-includes/getting-started-config/javascript.svelte.mdx index ebe0d2cd07447..d50ab798578ac 100644 --- a/src/platform-includes/getting-started-config/javascript.svelte.mdx +++ b/src/platform-includes/getting-started-config/javascript.svelte.mdx @@ -9,12 +9,17 @@ import * as Sentry from "@sentry/svelte"; // Initialize the Sentry SDK here Sentry.init({ dsn: "___PUBLIC_DSN___", - integrations: [new Sentry.BrowserTracing()], + integrations: [new Sentry.BrowserTracing(), new Sentry.Replay()], // Set tracesSampleRate to 1.0 to capture 100% // of transactions for performance monitoring. // We recommend adjusting this value in production tracesSampleRate: 1.0, + + // Capture Replay for 10% of all sessions, + // plus for 100% of sessions with an error + replaysSessionSampleRate: 0.1, + replaysOnErrorSampleRate: 1.0, }); const app = new App({ diff --git a/src/platform-includes/getting-started-config/javascript.vue.mdx b/src/platform-includes/getting-started-config/javascript.vue.mdx index 3aea77ebb4cef..70e7c2396b18b 100644 --- a/src/platform-includes/getting-started-config/javascript.vue.mdx +++ b/src/platform-includes/getting-started-config/javascript.vue.mdx @@ -20,11 +20,18 @@ Sentry.init({ new Sentry.BrowserTracing({ routingInstrumentation: Sentry.vueRouterInstrumentation(router), }), + new Sentry.Replay(), ], + // Set tracesSampleRate to 1.0 to capture 100% // of transactions for performance monitoring. // We recommend adjusting this value in production tracesSampleRate: 1.0, + + // Capture Replay for 10% of all sessions, + // plus for 100% of sessions with an error + replaysSessionSampleRate: 0.1, + replaysOnErrorSampleRate: 1.0, }); // ... diff --git a/src/platforms/javascript/guides/gatsby/index.mdx b/src/platforms/javascript/guides/gatsby/index.mdx index 6ae190bd3b1cc..6833985be6229 100644 --- a/src/platforms/javascript/guides/gatsby/index.mdx +++ b/src/platforms/javascript/guides/gatsby/index.mdx @@ -36,28 +36,21 @@ module.exports = { Then, configure your `Sentry.init`: -```javascript {filename:sentry.config.js} +```javascript {filename:sentry.config.(js|ts)} import * as Sentry from "@sentry/gatsby"; Sentry.init({ dsn: "___PUBLIC_DSN___", + integrations: [new Sentry.Replay()], // Set tracesSampleRate to 1.0 to capture 100% // of transactions for performance monitoring. // We recommend adjusting this value in production tracesSampleRate: 1.0, + + // Capture Replay for 10% of all sessions, + // plus for 100% of sessions with an error + replaysSessionSampleRate: 0.1, + replaysOnErrorSampleRate: 1.0, }); -``` - -```typescript {filename:sentry.config.ts} -import * as Sentry from "@sentry/gatsby"; - -Sentry.init({ - dsn: "___PUBLIC_DSN___", - - // Set tracesSampleRate to 1.0 to capture 100% - // of transactions for performance monitoring. - // We recommend adjusting this value in production - tracesSampleRate: 1.0, -}); -``` +``` \ No newline at end of file diff --git a/src/platforms/javascript/guides/nextjs/manual-setup.mdx b/src/platforms/javascript/guides/nextjs/manual-setup.mdx index 36408bfbc202d..352cc7ab8554b 100644 --- a/src/platforms/javascript/guides/nextjs/manual-setup.mdx +++ b/src/platforms/javascript/guides/nextjs/manual-setup.mdx @@ -26,17 +26,25 @@ If you're updating your Sentry SDK to the latest version, check out our [migrati Create three files in the root directory of your project, `sentry.client.config.js`, `sentry.server.config.js` and `sentry.edge.config.js`. In these files, add your initialization code for the client-side SDK and server-side SDK, respectively. We've included some examples below. -For each configuration: +The three configuration types are mostly the same, except that some configuration, like the one for Session Replay, only works in `sentry.client.config.js`. -```javascript {filename:sentry.(client|server|edge).js} +```javascript {tabTitle:Client} {filename:sentry.client.config.(js|ts)} import * as Sentry from "@sentry/nextjs"; Sentry.init({ dsn: "___PUBLIC_DSN___", + // Replay may only be enabled for the client-side + integrations: [new Sentry.Replay()], - // We recommend adjusting this value in production, or using tracesSampler - // for finer control + // Set tracesSampleRate to 1.0 to capture 100% + // of transactions for performance monitoring. + // We recommend adjusting this value in production tracesSampleRate: 1.0, + + // Capture Replay for 10% of all sessions, + // plus for 100% of sessions with an error + replaysSessionSampleRate: 0.1, + replaysOnErrorSampleRate: 1.0, // ... @@ -46,14 +54,34 @@ Sentry.init({ }); ``` -```typescript {filename:sentry.(client|server|edge).ts} +```javascript {tabTitle:Server} {filename:sentry.server.config.(js|ts)} import * as Sentry from "@sentry/nextjs"; Sentry.init({ dsn: "___PUBLIC_DSN___", - // We recommend adjusting this value in production, or using tracesSampler - // for finer control + // Set tracesSampleRate to 1.0 to capture 100% + // of transactions for performance monitoring. + // We recommend adjusting this value in production + tracesSampleRate: 1.0, + + // ... + + // Note: if you want to override the automatic release value, do not set a + // `release` value here - use the environment variable `SENTRY_RELEASE`, so + // that it will also get attached to your source maps +}); +``` + +```javascript {tabTitle:Edge} {filename:sentry.edge.config.(js|ts)} +import * as Sentry from "@sentry/nextjs"; + +Sentry.init({ + dsn: "___PUBLIC_DSN___", + + // Set tracesSampleRate to 1.0 to capture 100% + // of transactions for performance monitoring. + // We recommend adjusting this value in production tracesSampleRate: 1.0, // ... From c4f1c83fb766409bd7ccd278ae0caf34bad247b4 Mon Sep 17 00:00:00 2001 From: Francesco Novy Date: Mon, 8 May 2023 10:45:19 +0200 Subject: [PATCH 9/9] Apply suggestions from code review --- .../getting-started-config/javascript.angular.mdx | 2 +- .../getting-started-config/javascript.ember.mdx | 2 +- .../getting-started-config/javascript.mdx | 2 +- .../getting-started-config/javascript.react.mdx | 2 +- .../getting-started-config/javascript.remix.mdx | 8 ++++---- .../getting-started-config/javascript.svelte.mdx | 2 +- .../getting-started-config/javascript.vue.mdx | 4 ++-- src/platform-includes/getting-started-install/node.mdx | 2 +- .../set-fingerprint/database-connection/javascript.mdx | 2 +- src/platform-includes/set-fingerprint/rpc/javascript.mdx | 2 +- src/platforms/common/usage/sdk-fingerprinting.mdx | 8 ++++++-- .../common/configuration/sentry-testkit/index.mdx | 2 +- src/platforms/javascript/guides/gatsby/index.mdx | 4 ++-- src/platforms/javascript/guides/nextjs/manual-setup.mdx | 4 ++-- 14 files changed, 25 insertions(+), 21 deletions(-) diff --git a/src/platform-includes/getting-started-config/javascript.angular.mdx b/src/platform-includes/getting-started-config/javascript.angular.mdx index 3cd76c6476fbf..e30eb4b0fca32 100644 --- a/src/platform-includes/getting-started-config/javascript.angular.mdx +++ b/src/platform-includes/getting-started-config/javascript.angular.mdx @@ -25,7 +25,7 @@ Sentry.init({ // of transactions for performance monitoring. // We recommend adjusting this value in production tracesSampleRate: 1.0, - + // Capture Replay for 10% of all sessions, // plus for 100% of sessions with an error replaysSessionSampleRate: 0.1, diff --git a/src/platform-includes/getting-started-config/javascript.ember.mdx b/src/platform-includes/getting-started-config/javascript.ember.mdx index 8542c7a206a31..2dcfd2a373b25 100644 --- a/src/platform-includes/getting-started-config/javascript.ember.mdx +++ b/src/platform-includes/getting-started-config/javascript.ember.mdx @@ -16,7 +16,7 @@ Sentry.init({ // of transactions for performance monitoring. // We recommend adjusting this value in production, tracesSampleRate: 1.0, - + // Capture Replay for 10% of all sessions, // plus for 100% of sessions with an error replaysSessionSampleRate: 0.1, diff --git a/src/platform-includes/getting-started-config/javascript.mdx b/src/platform-includes/getting-started-config/javascript.mdx index 728b70ac3d638..5f387eb22b732 100644 --- a/src/platform-includes/getting-started-config/javascript.mdx +++ b/src/platform-includes/getting-started-config/javascript.mdx @@ -8,7 +8,7 @@ Sentry.init({ // Alternatively, use `process.env.npm_package_version` for a dynamic release version // if your build tool supports it. - release: 'my-project-name@2.3.12', + release: "my-project-name@2.3.12", integrations: [new Sentry.BrowserTracing(), new Sentry.Replay()], // Set tracesSampleRate to 1.0 to capture 100% diff --git a/src/platform-includes/getting-started-config/javascript.react.mdx b/src/platform-includes/getting-started-config/javascript.react.mdx index 5ee89872c26a1..0ce5cbe9db6ed 100644 --- a/src/platform-includes/getting-started-config/javascript.react.mdx +++ b/src/platform-includes/getting-started-config/javascript.react.mdx @@ -12,7 +12,7 @@ Sentry.init({ // of transactions for performance monitoring. // We recommend adjusting this value in production tracesSampleRate: 1.0, - + // Capture Replay for 10% of all sessions, // plus for 100% of sessions with an error replaysSessionSampleRate: 0.1, diff --git a/src/platform-includes/getting-started-config/javascript.remix.mdx b/src/platform-includes/getting-started-config/javascript.remix.mdx index 4683c8feb80ad..d5463ce2b2173 100644 --- a/src/platform-includes/getting-started-config/javascript.remix.mdx +++ b/src/platform-includes/getting-started-config/javascript.remix.mdx @@ -2,7 +2,7 @@ To use this SDK, initialize Sentry in your Remix entry points for both the clien Create two files in the root directory of your project, `entry.client.tsx` and `entry.server.tsx` (if they don't exist yet). In these files, add your initialization code for the client-side SDK and server-side SDK, respectively. -The two configuration types are mostly the same, except that some configuration, like the one for Session Replay, only works in `entry.client.tsx`. +The two configuration types are mostly the same, except that some configuration features, like Session Replay, only work in `entry.client.tsx`. ```typescript {tabTitle:Client} {filename: entry.client.tsx} import { useLocation, useMatches } from "@remix-run/react"; @@ -22,12 +22,12 @@ Sentry.init({ // Replay is only available in the client new Sentry.Replay(), ], - + // Set tracesSampleRate to 1.0 to capture 100% // of transactions for performance monitoring. // We recommend adjusting this value in production tracesSampleRate: 1.0, - + // Capture Replay for 10% of all sessions, // plus for 100% of sessions with an error replaysSessionSampleRate: 0.1, @@ -51,7 +51,7 @@ Sentry.init({ ), }), ], - + // Set tracesSampleRate to 1.0 to capture 100% // of transactions for performance monitoring. // We recommend adjusting this value in production diff --git a/src/platform-includes/getting-started-config/javascript.svelte.mdx b/src/platform-includes/getting-started-config/javascript.svelte.mdx index d50ab798578ac..a5b1eb0bd7604 100644 --- a/src/platform-includes/getting-started-config/javascript.svelte.mdx +++ b/src/platform-includes/getting-started-config/javascript.svelte.mdx @@ -15,7 +15,7 @@ Sentry.init({ // of transactions for performance monitoring. // We recommend adjusting this value in production tracesSampleRate: 1.0, - + // Capture Replay for 10% of all sessions, // plus for 100% of sessions with an error replaysSessionSampleRate: 0.1, diff --git a/src/platform-includes/getting-started-config/javascript.vue.mdx b/src/platform-includes/getting-started-config/javascript.vue.mdx index 70e7c2396b18b..f21fcde710716 100644 --- a/src/platform-includes/getting-started-config/javascript.vue.mdx +++ b/src/platform-includes/getting-started-config/javascript.vue.mdx @@ -22,12 +22,12 @@ Sentry.init({ }), new Sentry.Replay(), ], - + // Set tracesSampleRate to 1.0 to capture 100% // of transactions for performance monitoring. // We recommend adjusting this value in production tracesSampleRate: 1.0, - + // Capture Replay for 10% of all sessions, // plus for 100% of sessions with an error replaysSessionSampleRate: 0.1, diff --git a/src/platform-includes/getting-started-install/node.mdx b/src/platform-includes/getting-started-install/node.mdx index 0745c7e6e2700..f4bb7ac1dedb0 100644 --- a/src/platform-includes/getting-started-install/node.mdx +++ b/src/platform-includes/getting-started-install/node.mdx @@ -4,4 +4,4 @@ npm install --save @sentry/node ```bash {tabTitle:Yarn} yarn add @sentry/node -``` \ No newline at end of file +``` diff --git a/src/platform-includes/set-fingerprint/database-connection/javascript.mdx b/src/platform-includes/set-fingerprint/database-connection/javascript.mdx index eaf95d2b51ecf..bac259a85679a 100644 --- a/src/platform-includes/set-fingerprint/database-connection/javascript.mdx +++ b/src/platform-includes/set-fingerprint/database-connection/javascript.mdx @@ -7,7 +7,7 @@ Sentry.init({ const exception = hint.originalException; if (exception instanceof DatabaseConnectionError) { - event.fingerprint = ['database-connection-error']; + event.fingerprint = ["database-connection-error"]; } return event; diff --git a/src/platform-includes/set-fingerprint/rpc/javascript.mdx b/src/platform-includes/set-fingerprint/rpc/javascript.mdx index 0e846f76f4ed9..b9ea3f64e4c57 100644 --- a/src/platform-includes/set-fingerprint/rpc/javascript.mdx +++ b/src/platform-includes/set-fingerprint/rpc/javascript.mdx @@ -18,7 +18,7 @@ Sentry.init({ if (exception instanceof MyRPCError) { event.fingerprint = [ - '{{ default }}', + "{{ default }}", String(exception.functionName), String(exception.errorCode), ]; diff --git a/src/platforms/common/usage/sdk-fingerprinting.mdx b/src/platforms/common/usage/sdk-fingerprinting.mdx index a0ee6711a7d0e..1e4e9c9701cf2 100644 --- a/src/platforms/common/usage/sdk-fingerprinting.mdx +++ b/src/platforms/common/usage/sdk-fingerprinting.mdx @@ -33,7 +33,9 @@ You can use variable substitution to fill dynamic values into the fingerprint ge ## Group Errors With Greater Granularity -Let's imagine your application queries a Remote Procedure Call Model (RPC) interface or external Application Programming Interface (API) service, so the stack trace is generally the same (even if the outgoing request is very different). +In some scenarios, you'll want to group errors more granularly. + +For example, if your application queries a Remote Procedure Call Model (RPC) interface or external Application Programming Interface (API) service, the stack trace is generally the same, even if the outgoing request is very different. The following example will split up the default group Sentry would create (represented by `{{ default }}`) further, taking some attributes on the error object into account: @@ -41,6 +43,8 @@ The following example will split up the default group Sentry would create (repre ## Group Errors More Aggressively -If a generic error, such as a database connection error, has many different stack traces and never groups them together, you can overwrite Sentry's grouping by omitting `{{ default }}` from the array: +You can also overwrite Sentry's grouping entirely. + +For example, if a generic error, such as a database connection error, has many different stack traces and never groups them together, you can overwrite Sentry's grouping by omitting `{{ default }}` from the array: diff --git a/src/platforms/javascript/common/configuration/sentry-testkit/index.mdx b/src/platforms/javascript/common/configuration/sentry-testkit/index.mdx index 101c1039641a5..b840c01799b40 100644 --- a/src/platforms/javascript/common/configuration/sentry-testkit/index.mdx +++ b/src/platforms/javascript/common/configuration/sentry-testkit/index.mdx @@ -21,7 +21,7 @@ yarn add sentry-testkit --dev ### Using in tests ```javascript -import sentryTestkit from 'sentry-testkit'; +import sentryTestkit from "sentry-testkit"; const { testkit, sentryTransport } = sentryTestkit(); diff --git a/src/platforms/javascript/guides/gatsby/index.mdx b/src/platforms/javascript/guides/gatsby/index.mdx index 6833985be6229..3d13f502f569d 100644 --- a/src/platforms/javascript/guides/gatsby/index.mdx +++ b/src/platforms/javascript/guides/gatsby/index.mdx @@ -47,10 +47,10 @@ Sentry.init({ // of transactions for performance monitoring. // We recommend adjusting this value in production tracesSampleRate: 1.0, - + // Capture Replay for 10% of all sessions, // plus for 100% of sessions with an error replaysSessionSampleRate: 0.1, replaysOnErrorSampleRate: 1.0, }); -``` \ No newline at end of file +``` diff --git a/src/platforms/javascript/guides/nextjs/manual-setup.mdx b/src/platforms/javascript/guides/nextjs/manual-setup.mdx index 352cc7ab8554b..1c5c6520aac75 100644 --- a/src/platforms/javascript/guides/nextjs/manual-setup.mdx +++ b/src/platforms/javascript/guides/nextjs/manual-setup.mdx @@ -26,7 +26,7 @@ If you're updating your Sentry SDK to the latest version, check out our [migrati Create three files in the root directory of your project, `sentry.client.config.js`, `sentry.server.config.js` and `sentry.edge.config.js`. In these files, add your initialization code for the client-side SDK and server-side SDK, respectively. We've included some examples below. -The three configuration types are mostly the same, except that some configuration, like the one for Session Replay, only works in `sentry.client.config.js`. +Please note that there are slight differences between these files since they run in different places (browser, server, edge), so copy them carefully! ```javascript {tabTitle:Client} {filename:sentry.client.config.(js|ts)} import * as Sentry from "@sentry/nextjs"; @@ -40,7 +40,7 @@ Sentry.init({ // of transactions for performance monitoring. // We recommend adjusting this value in production tracesSampleRate: 1.0, - + // Capture Replay for 10% of all sessions, // plus for 100% of sessions with an error replaysSessionSampleRate: 0.1,