diff --git a/src/platform-includes/getting-started-config/javascript.angular.mdx b/src/platform-includes/getting-started-config/javascript.angular.mdx index 5d87429ee5f34..decaf89458a97 100644 --- a/src/platform-includes/getting-started-config/javascript.angular.mdx +++ b/src/platform-includes/getting-started-config/javascript.angular.mdx @@ -4,7 +4,6 @@ Once this is done, Sentry's Angular SDK captures all unhandled exceptions and tr import { enableProdMode } from "@angular/core"; import { platformBrowserDynamic } from "@angular/platform-browser-dynamic"; import * as Sentry from "@sentry/angular-ivy"; -import { BrowserTracing } from "@sentry/tracing"; import { AppModule } from "./app/app.module"; Sentry.init({ @@ -13,7 +12,7 @@ Sentry.init({ // Registers and configures the Tracing integration, // which automatically instruments your application to monitor its // performance, including custom Angular routing instrumentation - new BrowserTracing({ + new Sentry.BrowserTracing({ tracePropagationTargets: ["localhost", "https://yourserver.io/api"], routingInstrumentation: Sentry.routingInstrumentation, }), @@ -35,7 +34,6 @@ platformBrowserDynamic() import { enableProdMode } from "@angular/core"; import { platformBrowserDynamic } from "@angular/platform-browser-dynamic"; import * as Sentry from "@sentry/angular"; -import { BrowserTracing } from "@sentry/tracing"; import { AppModule } from "./app/app.module"; Sentry.init({ @@ -44,7 +42,7 @@ Sentry.init({ // Registers and configures the Tracing integration, // which automatically instruments your application to monitor its // performance, including custom Angular routing instrumentation - new BrowserTracing({ + new Sentry.BrowserTracing({ tracePropagationTargets: ["localhost", "https://yourserver.io/api"], routingInstrumentation: Sentry.routingInstrumentation, }), diff --git a/src/platform-includes/getting-started-config/javascript.mdx b/src/platform-includes/getting-started-config/javascript.mdx index 2ee1196d78437..324ed409499e4 100644 --- a/src/platform-includes/getting-started-config/javascript.mdx +++ b/src/platform-includes/getting-started-config/javascript.mdx @@ -2,7 +2,6 @@ Once this is done, Sentry's JavaScript SDK captures all unhandled exceptions and ```javascript {tabTitle: ESM} import * as Sentry from "@sentry/browser"; -import { BrowserTracing } from "@sentry/tracing"; Sentry.init({ dsn: "___PUBLIC_DSN___", @@ -10,7 +9,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", - integrations: [new BrowserTracing()], + integrations: [new Sentry.BrowserTracing()], // Set tracesSampleRate to 1.0 to capture 100% // of transactions for performance monitoring. diff --git a/src/platform-includes/getting-started-config/javascript.react.mdx b/src/platform-includes/getting-started-config/javascript.react.mdx index 12a20c8625fb9..8d9d02eabe493 100644 --- a/src/platform-includes/getting-started-config/javascript.react.mdx +++ b/src/platform-includes/getting-started-config/javascript.react.mdx @@ -2,12 +2,11 @@ import React from "react"; import ReactDOM from "react-dom"; import * as Sentry from "@sentry/react"; -import { BrowserTracing } from "@sentry/tracing"; import App from "./App"; Sentry.init({ dsn: "___PUBLIC_DSN___", - integrations: [new BrowserTracing()], + integrations: [new Sentry.BrowserTracing()], // We recommend adjusting this value in production, or using tracesSampler // for finer control diff --git a/src/platform-includes/getting-started-config/javascript.svelte.mdx b/src/platform-includes/getting-started-config/javascript.svelte.mdx index db6e2aeb2e3f2..ebe0d2cd07447 100644 --- a/src/platform-includes/getting-started-config/javascript.svelte.mdx +++ b/src/platform-includes/getting-started-config/javascript.svelte.mdx @@ -5,12 +5,11 @@ import "./app.css"; import App from "./App.svelte"; import * as Sentry from "@sentry/svelte"; -import { BrowserTracing } from "@sentry/tracing"; // Initialize the Sentry SDK here Sentry.init({ dsn: "___PUBLIC_DSN___", - integrations: [new BrowserTracing()], + integrations: [new Sentry.BrowserTracing()], // Set tracesSampleRate to 1.0 to capture 100% // of transactions for performance monitoring. @@ -30,12 +29,11 @@ import "./app.css"; import App from "./App.svelte"; import * as Sentry from "@sentry/svelte"; -import { BrowserTracing } from "@sentry/tracing"; // Initialize the Sentry SDK here Sentry.init({ dsn: "___PUBLIC_DSN___", - integrations: [new BrowserTracing()], + integrations: [new Sentry.BrowserTracing()], // Set tracesSampleRate to 1.0 to capture 100% // of transactions for performance monitoring. diff --git a/src/platform-includes/getting-started-config/javascript.vue.mdx b/src/platform-includes/getting-started-config/javascript.vue.mdx index 293ddd69c8f4c..83ad13f92a236 100644 --- a/src/platform-includes/getting-started-config/javascript.vue.mdx +++ b/src/platform-includes/getting-started-config/javascript.vue.mdx @@ -6,7 +6,6 @@ To initialize Sentry in your Vue application, add this to your `app.js`: import Vue from "vue"; import Router from "vue-router"; import * as Sentry from "@sentry/vue"; -import { BrowserTracing } from "@sentry/tracing"; Vue.use(Router); @@ -18,7 +17,7 @@ Sentry.init({ Vue, dsn: "___PUBLIC_DSN___", integrations: [ - new BrowserTracing({ + new Sentry.BrowserTracing({ routingInstrumentation: Sentry.vueRouterInstrumentation(router), tracePropagationTargets: ["localhost", "my-site-url.com", /^\//], }), @@ -43,7 +42,6 @@ new Vue({ import { createApp } from "vue"; import { createRouter } from "vue-router"; import * as Sentry from "@sentry/vue"; -import { BrowserTracing } from "@sentry/tracing"; const app = createApp({ // ... @@ -56,7 +54,7 @@ Sentry.init({ app, dsn: "___PUBLIC_DSN___", integrations: [ - new BrowserTracing({ + new Sentry.BrowserTracing({ routingInstrumentation: Sentry.vueRouterInstrumentation(router), tracePropagationTargets: ["localhost", "my-site-url.com", /^\//], }), diff --git a/src/platform-includes/getting-started-install/javascript.angular.mdx b/src/platform-includes/getting-started-install/javascript.angular.mdx index 115ac9462765d..a061c7d9ee626 100644 --- a/src/platform-includes/getting-started-install/javascript.angular.mdx +++ b/src/platform-includes/getting-started-install/javascript.angular.mdx @@ -1,17 +1,17 @@ ```bash {tabTitle:npm} # Angular 12 and newer: -npm install --save @sentry/angular-ivy @sentry/tracing +npm install --save @sentry/angular-ivy # Angular 10 and 11: -npm install --save @sentry/angular @sentry/tracing +npm install --save @sentry/angular ``` ```bash {tabTitle:Yarn} # Angular 12 and newer: -yarn add @sentry/angular-ivy @sentry/tracing +yarn add @sentry/angular-ivy # Angular 10 and 11: -yarn add @sentry/angular @sentry/tracing +yarn add @sentry/angular ``` ### Angular Version Compatibility diff --git a/src/platform-includes/getting-started-install/javascript.mdx b/src/platform-includes/getting-started-install/javascript.mdx index cd2841d854465..55aad846e0fb1 100644 --- a/src/platform-includes/getting-started-install/javascript.mdx +++ b/src/platform-includes/getting-started-install/javascript.mdx @@ -1,9 +1,9 @@ ```bash {tabTitle: yarn} -yarn add @sentry/browser @sentry/tracing +yarn add @sentry/browser ``` ```bash {tabTitle: npm} -npm install --save @sentry/browser @sentry/tracing +npm install --save @sentry/browser ``` diff --git a/src/platform-includes/getting-started-install/javascript.react.mdx b/src/platform-includes/getting-started-install/javascript.react.mdx index 8ac717be27ca6..f2d9d4db2d7a9 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 {tabTitle: ESM} # Using npm -npm install --save @sentry/react @sentry/tracing +npm install --save @sentry/react # Using yarn -yarn add @sentry/react @sentry/tracing +yarn add @sentry/react ``` diff --git a/src/platform-includes/getting-started-install/javascript.svelte.mdx b/src/platform-includes/getting-started-install/javascript.svelte.mdx index ebe41c67152b1..a98085fbd28f9 100644 --- a/src/platform-includes/getting-started-install/javascript.svelte.mdx +++ b/src/platform-includes/getting-started-install/javascript.svelte.mdx @@ -1,7 +1,7 @@ ```bash {tabTitle:npm} -npm install --save @sentry/svelte @sentry/tracing +npm install --save @sentry/svelte ``` ```bash {tabTitle:yarn} -yarn add @sentry/svelte @sentry/tracing +yarn add @sentry/svelte ``` diff --git a/src/platform-includes/getting-started-install/javascript.vue.mdx b/src/platform-includes/getting-started-install/javascript.vue.mdx index 4954194201946..7ceea0f06b239 100644 --- a/src/platform-includes/getting-started-install/javascript.vue.mdx +++ b/src/platform-includes/getting-started-install/javascript.vue.mdx @@ -1,7 +1,7 @@ ```bash {tabTitle:npm} -npm install --save @sentry/vue @sentry/tracing +npm install --save @sentry/vue ``` ```bash {tabTitle:Yarn} -yarn add @sentry/vue @sentry/tracing +yarn add @sentry/vue ``` diff --git a/src/platform-includes/performance/automatic-instrumentation-intro/javascript.mdx b/src/platform-includes/performance/automatic-instrumentation-intro/javascript.mdx index 5954d16564a35..40e340ae7858f 100644 --- a/src/platform-includes/performance/automatic-instrumentation-intro/javascript.mdx +++ b/src/platform-includes/performance/automatic-instrumentation-intro/javascript.mdx @@ -1 +1 @@ -The `@sentry/tracing` package provides a `BrowserTracing` integration to add automatic instrumentation for monitoring the performance of browser applications. +The Sentry SDK provides a `BrowserTracing` integration to add automatic instrumentation for monitoring the performance of browser applications. diff --git a/src/platform-includes/performance/beforeNavigate-example/javascript.mdx b/src/platform-includes/performance/beforeNavigate-example/javascript.mdx index 06d0fbccc6149..f1874d9e15c03 100644 --- a/src/platform-includes/performance/beforeNavigate-example/javascript.mdx +++ b/src/platform-includes/performance/beforeNavigate-example/javascript.mdx @@ -4,7 +4,7 @@ One common use case is parameterizing transaction names. For both `pageload` and Sentry.init({ // ... integrations: [ - new BrowserTracing({ + new Sentry.BrowserTracing({ beforeNavigate: context => { return { ...context, diff --git a/src/platform-includes/performance/beforeNavigate-example/javascript.nextjs.mdx b/src/platform-includes/performance/beforeNavigate-example/javascript.nextjs.mdx index fd406e5d905ac..c267dbb87ea8e 100644 --- a/src/platform-includes/performance/beforeNavigate-example/javascript.nextjs.mdx +++ b/src/platform-includes/performance/beforeNavigate-example/javascript.nextjs.mdx @@ -2,7 +2,7 @@ Sentry.init({ // ... integrations: [ - new BrowserTracing({ + new Sentry.BrowserTracing({ beforeNavigate: context => { return { ...context, diff --git a/src/platform-includes/performance/configure-sample-rate/javascript.mdx b/src/platform-includes/performance/configure-sample-rate/javascript.mdx index f140ce658ede4..162097522f15c 100644 --- a/src/platform-includes/performance/configure-sample-rate/javascript.mdx +++ b/src/platform-includes/performance/configure-sample-rate/javascript.mdx @@ -3,18 +3,14 @@ // substitute its name for `@sentry/browser` here import * as Sentry from "@sentry/browser"; -// If taking advantage of automatic instrumentation (highly recommended) -import { BrowserTracing } from "@sentry/tracing"; -// Or, if only manually tracing -// import * as _ from "@sentry/tracing" -// Note: You MUST import the package in some way for tracing to work - Sentry.init({ dsn: "___PUBLIC_DSN___", // This enables automatic instrumentation (highly recommended), but is not - // necessary for purely manual usage - integrations: [new BrowserTracing()], + // 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. + integrations: [new Sentry.BrowserTracing()], // We recommend adjusting this value in production, or using tracesSampler // for finer control 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 44aed3cf2f0db..967bd11e41b93 100644 --- a/src/platform-includes/performance/configure-sample-rate/javascript.react.mdx +++ b/src/platform-includes/performance/configure-sample-rate/javascript.react.mdx @@ -1,18 +1,14 @@ ```javascript import * as Sentry from "@sentry/react"; -// If taking advantage of automatic instrumentation (highly recommended) -import { BrowserTracing } from "@sentry/tracing"; -// Or, if only manually tracing -// import * as _ from "@sentry/tracing" -// Note: You MUST import the package in some way for tracing to work - Sentry.init({ dsn: "___PUBLIC_DSN___", // This enables automatic instrumentation (highly recommended), but is not - // necessary for purely manual usage - integrations: [new BrowserTracing()], + // 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. + integrations: [new Sentry.BrowserTracing()], // We recommend adjusting this value in production, or using tracesSampler // for finer control 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 b7e449163492a..4efb7e265c875 100644 --- a/src/platform-includes/performance/configure-sample-rate/javascript.vue.mdx +++ b/src/platform-includes/performance/configure-sample-rate/javascript.vue.mdx @@ -2,12 +2,6 @@ import Vue from "vue"; import * as Sentry from "@sentry/vue"; -// If taking advantage of automatic instrumentation (highly recommended) -import { BrowserTracing } from "@sentry/tracing"; -// Or, if only manually tracing -// import * as _ from "@sentry/tracing" -// Note: You MUST import the package in some way for tracing to work - Sentry.init({ // Passing in `Vue` is optional, if you do not pass it `window.Vue` must be present. Vue: Vue, @@ -15,7 +9,9 @@ Sentry.init({ // This enables automatic instrumentation (highly recommended), but is not // necessary for purely manual usage - integrations: [new BrowserTracing()], + // If you only want to use manually, remove the BrowserTracing integration and add + // Sentry.addTracingExtensions() above your Sentry.init() call. + integrations: [new Sentry.BrowserTracing()], // We recommend adjusting this value in production, or using tracesSampler // for finer control diff --git a/src/platform-includes/performance/enable-automatic-instrumentation/javascript.mdx b/src/platform-includes/performance/enable-automatic-instrumentation/javascript.mdx index cba71fba6d5da..99e1bf0914a88 100644 --- a/src/platform-includes/performance/enable-automatic-instrumentation/javascript.mdx +++ b/src/platform-includes/performance/enable-automatic-instrumentation/javascript.mdx @@ -1,4 +1,4 @@ -To enable tracing, include the `BrowserTracing` integration in your SDK configuration options. (Note that when using ESM modules, the main `@sentry/*` import must come before the `@sentry/tracing` import.) +To enable tracing, include the `BrowserTracing` integration in your SDK configuration options. After configuration, you will see both `pageload` and `navigation` transactions in the Sentry UI. @@ -6,13 +6,12 @@ After configuration, you will see both `pageload` and `navigation` transactions // If you're using one of our framework SDK packages, like `@sentry/angular`, // substitute its name for `@sentry/browser` here import * as Sentry from "@sentry/browser"; -import { BrowserTracing } from "@sentry/tracing"; // Must import second Sentry.init({ dsn: "___PUBLIC_DSN___", integrations: [ - new BrowserTracing({ + new Sentry.BrowserTracing({ tracePropagationTargets: ["localhost", "my-site-url.com", /^\//], // ... other options }), diff --git a/src/platform-includes/performance/enable-automatic-instrumentation/javascript.react.mdx b/src/platform-includes/performance/enable-automatic-instrumentation/javascript.react.mdx index 058bcd20d2cf0..11ea14dd940a5 100644 --- a/src/platform-includes/performance/enable-automatic-instrumentation/javascript.react.mdx +++ b/src/platform-includes/performance/enable-automatic-instrumentation/javascript.react.mdx @@ -1,13 +1,12 @@ -To enable tracing, include the `BrowserTracing` integration in your SDK configuration options. (Note that when using ESM modules, the main `@sentry/react` import must come before the `@sentry/tracing` import.) +To enable tracing, include the `BrowserTracing` integration in your SDK configuration options. To use `react-router` integration, import and set a custom routing instrumentation using a custom history. Make sure you use a `Router` component combined with `createBrowserHistory` (or equivalent). ```javascript -import { Router } from 'react-router-dom'; -import { createBrowserHistory } from 'history'; +import { Router } from "react-router-dom"; +import { createBrowserHistory } from "history"; import * as Sentry from "@sentry/react"; -import { BrowserTracing } from "@sentry/tracing"; // Must import after @sentry/react const history = createBrowserHistory(); @@ -15,7 +14,7 @@ Sentry.init({ dsn: "___PUBLIC_DSN___", integrations: [ - new BrowserTracing({ + new Sentry.BrowserTracing({ tracePropagationTargets: ["localhost", "my-site-url.com", /^\//], // Can also use reactRouterV3Instrumentation or reactRouterV4Instrumentation diff --git a/src/platform-includes/performance/enable-tracing/javascript.mdx b/src/platform-includes/performance/enable-tracing/javascript.mdx index 82eeab254f704..f3d28be14c607 100644 --- a/src/platform-includes/performance/enable-tracing/javascript.mdx +++ b/src/platform-includes/performance/enable-tracing/javascript.mdx @@ -1,22 +1,3 @@ -Install the tracing package: +Tracing is included by default in the Sentry JavaScript npm packages. -```bash {tabTitle: ESM} -# Using yarn -yarn add @sentry/tracing - -# Using npm -npm install --save @sentry/tracing -``` - -```html {tabTitle: CDN} - -``` +If you are using the CDN, make sure you are using a [CDN bundle that has performance monitoring enabled](/platforms/javascript/install/cdn/#default-bundle). diff --git a/src/platform-includes/performance/filter-span-example/javascript.mdx b/src/platform-includes/performance/filter-span-example/javascript.mdx index d421c424638ad..6ccf4c52d3854 100644 --- a/src/platform-includes/performance/filter-span-example/javascript.mdx +++ b/src/platform-includes/performance/filter-span-example/javascript.mdx @@ -2,7 +2,7 @@ Sentry.init({ // ... integrations: [ - new BrowserTracing({ + new Sentry.BrowserTracing({ shouldCreateSpanForRequest: url => { // Do not create spans for outgoing requests to a `/health/` endpoint return !url.match(/\/health\/?$/); diff --git a/src/platform-includes/performance/filter-span-example/javascript.nextjs.mdx b/src/platform-includes/performance/filter-span-example/javascript.nextjs.mdx index d421c424638ad..6ccf4c52d3854 100644 --- a/src/platform-includes/performance/filter-span-example/javascript.nextjs.mdx +++ b/src/platform-includes/performance/filter-span-example/javascript.nextjs.mdx @@ -2,7 +2,7 @@ Sentry.init({ // ... integrations: [ - new BrowserTracing({ + new Sentry.BrowserTracing({ shouldCreateSpanForRequest: url => { // Do not create spans for outgoing requests to a `/health/` endpoint return !url.match(/\/health\/?$/); diff --git a/src/platform-includes/performance/group-transaction-example/javascript.mdx b/src/platform-includes/performance/group-transaction-example/javascript.mdx index f60c5c2ec9635..8229c6a937098 100644 --- a/src/platform-includes/performance/group-transaction-example/javascript.mdx +++ b/src/platform-includes/performance/group-transaction-example/javascript.mdx @@ -15,12 +15,11 @@ For browser JavaScript applications using the `BrowserTracing` integration, the ```javascript import * as Sentry from "@sentry/browser"; -import { BrowserTracing } from "@sentry/tracing"; Sentry.init({ // ... integrations: [ - new BrowserTracing({ + new Sentry.BrowserTracing({ beforeNavigate: context => { return { ...context, diff --git a/src/platform-includes/performance/tracePropagationTargets-example/javascript.mdx b/src/platform-includes/performance/tracePropagationTargets-example/javascript.mdx index fcbefddb20091..22d25755fb442 100644 --- a/src/platform-includes/performance/tracePropagationTargets-example/javascript.mdx +++ b/src/platform-includes/performance/tracePropagationTargets-example/javascript.mdx @@ -10,7 +10,7 @@ For example: Sentry.init({ // ... integrations: [ - new BrowserTracing({ + new Sentry.BrowserTracing({ tracePropagationTargets: ["api.example.com"], }), ], diff --git a/src/platforms/javascript/common/configuration/tree-shaking/index.mdx b/src/platforms/javascript/common/configuration/tree-shaking/index.mdx index 368574a606331..e20658a451102 100644 --- a/src/platforms/javascript/common/configuration/tree-shaking/index.mdx +++ b/src/platforms/javascript/common/configuration/tree-shaking/index.mdx @@ -24,8 +24,7 @@ To make optional code eligible for tree shaking, you can replace various flags i `__SENTRY_TRACING__` : Replacing this flag with `false` will tree shake all code in the SDK that is related to performance monitoring. -**Attention:** `__SENTRY_TRACING__` must not be replaced with `false` when you're directly using the `@sentry/tracing` package, or when you're using any performance monitoring related SDK features (e.g. `Sentry.startTransaction()`). -This flag is intended to be used in combination with packages like `@sentry/next` where the `@sentry/tracing` package is used implicitly. +**Attention:** `__SENTRY_TRACING__` must not be replaced with `false` when you're using any performance monitoring-related SDK features (e.g. `Sentry.startTransaction()`). This flag is intended to be used in combination with packages like `@sentry/next` or `@sentry/sveltekit`, which automatically include performance monitoring functionality. diff --git a/src/platforms/javascript/common/configuration/webworkers/index.mdx b/src/platforms/javascript/common/configuration/webworkers/index.mdx index 4474e6fd2c261..9895c2664d364 100644 --- a/src/platforms/javascript/common/configuration/webworkers/index.mdx +++ b/src/platforms/javascript/common/configuration/webworkers/index.mdx @@ -85,7 +85,7 @@ self.onmessage = message => { ### Integrations -Using non-default integrations such as [@sentry/tracing](/platforms/javascript/performance/) inside Web Workers may not work as expected. Non-default integrations enabled outside workers' scope are not affected by worker-level configurations and will still work as expected. +Note, that if you use non-default integrations inside web workers, they may not function as expected. But non-default integrations that are enabled outside of a worker’s scope won’t be affected and will function as expected. ### Source Maps diff --git a/src/platforms/javascript/common/install/cdn.mdx b/src/platforms/javascript/common/install/cdn.mdx index 4da77e42ab246..ee1abc5c4bb62 100644 --- a/src/platforms/javascript/common/install/cdn.mdx +++ b/src/platforms/javascript/common/install/cdn.mdx @@ -77,8 +77,8 @@ Sentry.init({ Our CDN hosts a variety of bundles: -- `@sentry/browser` (named `bundle..js`) -- `@sentry/browser` and `@sentry/tracing` together (named `bundle.tracing..js`) +- `@sentry/browser` with error monitoring only (named `bundle..js`) +- `@sentry/browser` with error and performance monitoring (named `bundle.tracing..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.) diff --git a/src/platforms/javascript/guides/ember/configuration/ember-options.mdx b/src/platforms/javascript/guides/ember/configuration/ember-options.mdx index aad45fb0d0556..130538cc3ff9c 100644 --- a/src/platforms/javascript/guides/ember/configuration/ember-options.mdx +++ b/src/platforms/javascript/guides/ember/configuration/ember-options.mdx @@ -27,7 +27,7 @@ The following documentation is for Ember specific configuration, for Sentry opti ### Performance Monitoring Considerations -The Sentry tracing integration is already set up via the Ember addon with custom Ember instrumentation for routing, components, and the runloop. It sideloads `@sentry/tracing` as a chunk to instrument your application. If you would like to disable this automatic instrumentation and no longer receive the associated transactions, you can set `disablePerformance` in your config as in this example: +The Sentry tracing integration is already set up via the Ember add on with custom Ember instrumentation for routing, components, and the runloop. It sideloads Sentry performance monitoring as a chunk to instrument your application. If you'd like to disable this automatic instrumentation and stop receiving the associated transactions, set `disablePerformance` in your config. See example below: ```javascript ENV["@sentry/ember"] = { diff --git a/src/platforms/javascript/guides/react/configuration/integrations/react-router.mdx b/src/platforms/javascript/guides/react/configuration/integrations/react-router.mdx index a9cded273d188..c0b8f1218761f 100644 --- a/src/platforms/javascript/guides/react/configuration/integrations/react-router.mdx +++ b/src/platforms/javascript/guides/react/configuration/integrations/react-router.mdx @@ -11,13 +11,14 @@ React Router support is included in the `@sentry/react` package since version `5 -The React Router integration is designed to work with our Tracing SDK, `@sentry/tracing`. Please see [Getting Started with React Performance](/product/performance/getting-started/?platform=react) for more details on how to set up and install the SDK. +The React Router integration is designed to work with Sentry Performance Monitoring. Please see [Getting Started with React Performance](/product/performance/getting-started/?platform=react) for more details on how to set up and install the SDK. We support integrations for React Router 3, 4, 5, and 6. ## React Router v6 + _(Available in version 7 and above)_ To use React Router v6 with Sentry: @@ -30,38 +31,36 @@ Initialize `Sentry.reactRouterV6Instrumentation` as your routing instrumentation -Make sure `Sentry.reactRouterV6Instrumentation` is initialized by your `Sentry.init` call, before you wrap `` component or `useRoutes` hook. Otherwise, the routing instrumentation may not work properly. +Make sure `Sentry.reactRouterV6Instrumentation` is initialized by your `Sentry.init` call, before you wrap `` component or `useRoutes` hook. Otherwise, the routing instrumentation may not work properly. ### Usage with React Router 6.4 Data API -_(Available in version 7.21.0 and above)_ +_(Available in version 7.21.0 and above)_ If you choose to create your router instance with [`createBrowserRouter`](https://reactrouter.com/en/main/routers/create-browser-router) from the `react-router-dom` package, you can use `Sentry.wrapCreateBrowserRouter` to wrap it with the instrumentation: ```javascript -import { createBrowserRouter } from 'react-router-dom'; -import * as Sentry from '@sentry/react'; -import { BrowserTracing } from '@sentry/tracing'; +import { createBrowserRouter } from "react-router-dom"; +import * as Sentry from "@sentry/react"; Sentry.init({ - dsn: '___PUBLIC_DSN___', + dsn: "___PUBLIC_DSN___", integrations: [ - new BrowserTracing({ + new Sentry.BrowserTracing({ routingInstrumentation: Sentry.reactRouterV6Instrumentation( - React.useEffect, - useLocation, - useNavigationType, - createRoutesFromChildren, - matchRoutes, + React.useEffect, + useLocation, + useNavigationType, + createRoutesFromChildren, + matchRoutes ), }), ], tracesSampleRate: 1.0, }); - const sentryCreateBrowserRouter = Sentry.wrapCreateBrowserRouter( createBrowserRouter ); @@ -69,7 +68,6 @@ const sentryCreateBrowserRouter = Sentry.wrapCreateBrowserRouter( const router = sentryCreateBrowserRouter([ // ... ]); - ``` @@ -78,52 +76,51 @@ While [`createHashRouter`](https://reactrouter.com/en/main/routers/create-hash-r - ### Usage With `` Component If you use the `` component from `react-router-dom` to define your routes, wrap [`Routes`](https://reactrouter.com/docs/en/v6/api#routes-and-route) using `Sentry.withSentryReactRouterV6Routing`. This creates a higher order component, which will enable Sentry to reach your router context, as in the example below: ```javascript -import React from 'react'; +import React from "react"; import ReactDOM from "react-dom"; import { - Routes, - BrowserRouter, - useLocation, - useNavigationType, - createRoutesFromChildren, - matchRoutes, + Routes, + BrowserRouter, + useLocation, + useNavigationType, + createRoutesFromChildren, + matchRoutes, } from "react-router-dom"; import * as Sentry from "@sentry/react"; -import { BrowserTracing } from "@sentry/tracing"; Sentry.init({ - integrations: [ - new BrowserTracing({ - routingInstrumentation: Sentry.reactRouterV6Instrumentation( - React.useEffect, - useLocation, - useNavigationType, - createRoutesFromChildren, - matchRoutes, - ), - }), - ], - tracesSampleRate: 1.0, + integrations: [ + new Sentry.BrowserTracing({ + routingInstrumentation: Sentry.reactRouterV6Instrumentation( + React.useEffect, + useLocation, + useNavigationType, + createRoutesFromChildren, + matchRoutes + ), + }), + ], + tracesSampleRate: 1.0, }); -const SentryRoutes = Sentry.withSentryReactRouterV6Routing(Routes) +const SentryRoutes = Sentry.withSentryReactRouterV6Routing(Routes); ReactDOM.render( - - - Home} /> - - , + + + Home} /> + + ); ``` ### Usage With `useRoutes` Hook + _(Available in version 7.12.1 and above)_ If you specify your route definitions as an object to the [`useRoutes` hook](https://reactrouter.com/en/main/hooks/use-routes), use `Sentry.wrapUseRoutes` to create a patched `useRoutes` hook that instruments your routes with Sentry. @@ -136,52 +133,49 @@ If you specify your route definitions as an object to the [`useRoutes` hook](htt ```javascript import { - createRoutesFromChildren, - matchRoutes, - useLocation, - useNavigationType, - useRoutes, + createRoutesFromChildren, + matchRoutes, + useLocation, + useNavigationType, + useRoutes, } from "react-router-dom"; import { wrapUseRoutes } from "@sentry/react"; import { useEffect } from "react"; -import { BrowserTracing } from "@sentry/tracing"; Sentry.init({ - dsn: "___DSN___", - integrations: [ - new BrowserTracing({ - routingInstrumentation: Sentry.reactRouterV6Instrumentation( - useEffect, - useLocation, - useNavigationType, - createRoutesFromChildren, - matchRoutes, - ), - }), - ], - tracesSampleRate: 1.0, + dsn: "___DSN___", + integrations: [ + new Sentry.BrowserTracing({ + routingInstrumentation: Sentry.reactRouterV6Instrumentation( + useEffect, + useLocation, + useNavigationType, + createRoutesFromChildren, + matchRoutes + ), + }), + ], + tracesSampleRate: 1.0, }); const useSentryRoutes = wrapUseRoutes(useRoutes); function App() { - return useSentryRoutes([ - // ... - ]); + return useSentryRoutes([ + // ... + ]); } ReactDOM.render( - - - , - document.getElementById("root"), + + + , + document.getElementById("root") ); ``` - Now, Sentry should generate `pageload`/`navigation` transactions with parameterized transaction names (for example, `/teams/:teamid/user/:userid`), where applicable. - ## React Router v4/v5 The React router instrumentation uses the React router library to create `pageload/navigation` transactions and paramaterize transaction names. Make sure you use a `Router` component combined with `createBrowserHistory` (or equivalent). @@ -197,7 +191,6 @@ import {Route, Router, Switch } from 'react-router-dom'; import { createBrowserHistory } from 'history'; import * as Sentry from '@sentry/react'; -import { BrowserTracing } from '@sentry/tracing'; // Create Custom Sentry Route component const SentryRoute = Sentry.withSentryRouting(Route); @@ -206,7 +199,7 @@ const history = createBrowserHistory(); Sentry.init({ integrations: [ - new BrowserTracing({ + new Sentry.BrowserTracing({ routingInstrumentation: Sentry.reactRouterV5Instrumentation(history), }), ], @@ -236,7 +229,6 @@ import { Route, Router, Switch, matchPath } from 'react-router-dom'; import { createBrowserHistory } from 'history'; import * as Sentry from '@sentry/react'; -import { BrowserTracing } from '@sentry/tracing'; const history = createBrowserHistory(); @@ -246,7 +238,7 @@ const routes = [{ path: '/users/:userid' }, { path: '/users' }, { path: '/' }]; Sentry.init({ integrations: [ - new BrowserTracing({ + new Sentry.BrowserTracing({ routingInstrumentation: Sentry.reactRouterV5Instrumentation(history, routes, matchPath), }), ], @@ -278,7 +270,6 @@ To use the router integration, import and set a custom routing instrumentation a import * as Router from "react-router"; import * as Sentry from "@sentry/react"; -import { BrowserTracing } from "@sentry/tracing"; // Routes looks like this: const routes = ( @@ -292,7 +283,7 @@ const routes = ( Sentry.init({ integrations: [ - new BrowserTracing({ + new Sentry.BrowserTracing({ routingInstrumentation: Sentry.reactRouterV3Instrumentation( Router.browserHistory, // Must be Plain Routes. diff --git a/src/platforms/javascript/guides/vue/configuration/integrations/vue-router.mdx b/src/platforms/javascript/guides/vue/configuration/integrations/vue-router.mdx index 7a18a8e6a6a91..5a135f65346bd 100644 --- a/src/platforms/javascript/guides/vue/configuration/integrations/vue-router.mdx +++ b/src/platforms/javascript/guides/vue/configuration/integrations/vue-router.mdx @@ -15,7 +15,6 @@ Here is a full example of how to use it: import Vue from "vue"; import App from "./App"; import * as Sentry from "@sentry/vue"; -import { BrowserTracing } from "@sentry/tracing"; import Router from "vue-router"; import HelloWorld from "@/components/HelloWorld"; import Foo from "@/components/Foo"; @@ -32,7 +31,7 @@ Sentry.init({ dsn: "___PUBLIC_DSN___", tracesSampleRate: 1.0, integrations: [ - new BrowserTracing({ + new Sentry.BrowserTracing({ routingInstrumentation: Sentry.vueRouterInstrumentation(router), }), ], @@ -51,13 +50,13 @@ new Vue({ You can pass an optional configuration object as second argument to the router instrumentation: ```javascript -vueRouterInstrumentation(vueRouter, { - routeLabel: "path" +vueRouterInstrumentation(vueRouter, { + routeLabel: "path", }); ``` The available options are: -| Key | Type | Default | Description | -| ------------ | ------ | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| Key | Type | Default | Description | +| ---------- | ------ | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | routeLabel | string | `name` | The label to use for the route transactions. Can be either `name` or `path`. When this is `name`, the transaction will use `route.name`, if it is set, and else use the path of the route. By setting this to `path` you can opt-out of this and always use the path. | diff --git a/src/wizard/javascript/angular.md b/src/wizard/javascript/angular.md index 978f4b366864f..674dd76d2e009 100644 --- a/src/wizard/javascript/angular.md +++ b/src/wizard/javascript/angular.md @@ -14,14 +14,14 @@ Add the Sentry SDK as a dependency using `yarn` or `npm`: ```bash # Using yarn (Angular 12+) -yarn add @sentry/angular-ivy @sentry/tracing +yarn add @sentry/angular-ivy # Using yarn (Angular 10 and 11) -yarn add @sentry/angular @sentry/tracing +yarn add @sentry/angular # Using npm (Angular 12+) -npm install --save @sentry/angular-ivy @sentry/tracing +npm install --save @sentry/angular-ivy # Using npm (Angular 10 and 11) -npm install --save @sentry/angular @sentry/tracing +npm install --save @sentry/angular ``` You should `init` the Sentry browser SDK in your `main.ts` file as soon as possible during application load up, before initializing Angular: @@ -31,14 +31,13 @@ import { enableProdMode } from "@angular/core"; import { platformBrowserDynamic } from "@angular/platform-browser-dynamic"; // import * as Sentry from "@sentry/angular" // for Angular 10/11 instead import * as Sentry from "@sentry/angular-ivy"; -import { BrowserTracing } from "@sentry/tracing"; import { AppModule } from "./app/app.module"; Sentry.init({ dsn: "___PUBLIC_DSN___", integrations: [ - new BrowserTracing({ + new Sentry.BrowserTracing({ tracePropagationTargets: ["localhost", "https://yourserver.io/api"], routingInstrumentation: Sentry.routingInstrumentation, }), diff --git a/src/wizard/javascript/angularjs.md b/src/wizard/javascript/angularjs.md index 860b60065091a..fb490cf7825c7 100644 --- a/src/wizard/javascript/angularjs.md +++ b/src/wizard/javascript/angularjs.md @@ -22,14 +22,13 @@ npm install --save @sentry/browser @sentry/integrations ```javascript import angular from "angular"; import * as Sentry from "@sentry/browser"; -import { BrowserTracing } from "@sentry/tracing"; import { Angular as AngularIntegration } from "@sentry/integrations"; Sentry.init({ dsn: "___PUBLIC_DSN___", integrations: [ new AngularIntegration(), - new BrowserTracing({ + new Sentry.BrowserTracing({ tracePropagationTargets: ["localhost", "https://yourserver.io/api"], }), ], diff --git a/src/wizard/javascript/backbone.md b/src/wizard/javascript/backbone.md index f88f87b2c973e..81afe81957a0c 100644 --- a/src/wizard/javascript/backbone.md +++ b/src/wizard/javascript/backbone.md @@ -9,9 +9,9 @@ Install our JavaScript browser SDK using either `yarn` or `npm`: ```bash {tabTitle: ESM} # Using yarn -yarn add @sentry/browser @sentry/tracing +yarn add @sentry/browser # Using npm -npm install --save @sentry/browser @sentry/tracing +npm install --save @sentry/browser ``` We also support alternate [installation methods](/platforms/javascript/install/). @@ -20,11 +20,10 @@ We also support alternate [installation methods](/platforms/javascript/install/) ```javascript import * as Sentry from "@sentry/browser"; -import { BrowserTracing } from "@sentry/tracing"; Sentry.init({ dsn: "___PUBLIC_DSN___", - integrations: [new BrowserTracing()], + integrations: [new Sentry.BrowserTracing()], // Set tracesSampleRate to 1.0 to capture 100% // of transactions for performance monitoring. diff --git a/src/wizard/javascript/index.md b/src/wizard/javascript/index.md index d0891c381020e..64ef9c3f56b75 100644 --- a/src/wizard/javascript/index.md +++ b/src/wizard/javascript/index.md @@ -9,9 +9,9 @@ Install our JavaScript browser SDK using either `yarn` or `npm`: ```bash {tabTitle: ESM} # Using yarn -yarn add @sentry/browser @sentry/tracing +yarn add @sentry/browser # Using npm -npm install --save @sentry/browser @sentry/tracing +npm install --save @sentry/browser ``` We also support alternate [installation methods](/platforms/javascript/install/). @@ -20,11 +20,10 @@ We also support alternate [installation methods](/platforms/javascript/install/) ```javascript import * as Sentry from "@sentry/browser"; -import { BrowserTracing } from "@sentry/tracing"; Sentry.init({ dsn: "___PUBLIC_DSN___", - integrations: [new BrowserTracing()], + integrations: [new Sentry.BrowserTracing()], // Set tracesSampleRate to 1.0 to capture 100% // of transactions for performance monitoring. @@ -43,4 +42,4 @@ myUndefinedFunction(); If you're new to Sentry, use the email alert to access your account and complete a product tour. -If you're an existing user and have disabled alerts, you won't receive this email. \ No newline at end of file +If you're an existing user and have disabled alerts, you won't receive this email. diff --git a/src/wizard/javascript/performance-onboarding/javascript/1.install.md b/src/wizard/javascript/performance-onboarding/javascript/1.install.md index 4964e1ce0f2d9..5d7fe4f449df0 100644 --- a/src/wizard/javascript/performance-onboarding/javascript/1.install.md +++ b/src/wizard/javascript/performance-onboarding/javascript/1.install.md @@ -11,8 +11,8 @@ Install our JavaScript browser SDK using either `yarn` or `npm`: ```bash # Using yarn -yarn add @sentry/browser @sentry/tracing +yarn add @sentry/browser # Using npm -npm install --save @sentry/browser @sentry/tracing +npm install --save @sentry/browser ``` diff --git a/src/wizard/javascript/performance-onboarding/javascript/2.configure.md b/src/wizard/javascript/performance-onboarding/javascript/2.configure.md index 9035a97282308..dfe596a9b7dfb 100644 --- a/src/wizard/javascript/performance-onboarding/javascript/2.configure.md +++ b/src/wizard/javascript/performance-onboarding/javascript/2.configure.md @@ -13,11 +13,10 @@ Once this is done, Sentry's JavaScript SDK captures all unhandled exceptions and ```javascript import * as Sentry from "@sentry/browser"; -import { BrowserTracing } from "@sentry/tracing"; Sentry.init({ dsn: "___PUBLIC_DSN___", - integrations: [new BrowserTracing()], + integrations: [new Sentry.BrowserTracing()], // Set tracesSampleRate to 1.0 to capture 100% // of transactions for performance monitoring. diff --git a/src/wizard/javascript/performance-onboarding/react/1.install.md b/src/wizard/javascript/performance-onboarding/react/1.install.md index 1c37d18b2b7fe..c02e3c2a10906 100644 --- a/src/wizard/javascript/performance-onboarding/react/1.install.md +++ b/src/wizard/javascript/performance-onboarding/react/1.install.md @@ -11,8 +11,8 @@ Install our JavaScript browser SDK using either `yarn` or `npm`: ```bash # Using yarn -yarn add @sentry/react @sentry/tracing +yarn add @sentry/react # Using npm -npm install --save @sentry/react @sentry/tracing +npm install --save @sentry/react ``` diff --git a/src/wizard/javascript/performance-onboarding/react/2.configure.md b/src/wizard/javascript/performance-onboarding/react/2.configure.md index b52c123dc576e..1d986314daaf7 100644 --- a/src/wizard/javascript/performance-onboarding/react/2.configure.md +++ b/src/wizard/javascript/performance-onboarding/react/2.configure.md @@ -13,12 +13,11 @@ Next, import and initialize the Sentry module as early as possible, before initi import React from "react"; import ReactDOM from "react-dom"; import * as Sentry from "@sentry/react"; -import { BrowserTracing } from "@sentry/tracing"; import App from "./App"; Sentry.init({ dsn: "___PUBLIC_DSN___", - integrations: [new BrowserTracing()], + integrations: [new Sentry.BrowserTracing()], // Set tracesSampleRate to 1.0 to capture 100% // of transactions for performance monitoring. diff --git a/src/wizard/javascript/react/index.md b/src/wizard/javascript/react/index.md index 74efa4ec8e05a..f7a07a41adacb 100644 --- a/src/wizard/javascript/react/index.md +++ b/src/wizard/javascript/react/index.md @@ -4,36 +4,36 @@ doc_link: https://docs.sentry.io/platforms/javascript/guides/react/ support_level: production type: framework --- -In this quick guide you’ll set up: -- `@sentry/react` for [error monitoring](https://docs.sentry.io/platforms/javascript/guides/react/) -- `@sentry/tracing` for [performance monitoring](https://docs.sentry.io/platforms/javascript/guides/react/performance/) + +In this quick guide you’ll set up `@sentry/react` for [error monitoring](https://docs.sentry.io/platforms/javascript/guides/react/) and [performance monitoring](https://docs.sentry.io/platforms/javascript/guides/react/performance/) --- ## Install + Sentry captures data by using an SDK within your application’s runtime. ```bash # Using yarn -yarn add @sentry/react @sentry/tracing +yarn add @sentry/react # Using npm -npm install --save @sentry/react @sentry/tracing +npm install --save @sentry/react ``` ## Configure + Initialize Sentry as early as possible in your application's lifecycle. ```javascript import { createRoot } React from "react-dom/client"; -import React from "react"; +import React from "react"; import * as Sentry from "@sentry/react"; -import { BrowserTracing } from "@sentry/tracing"; import App from "./App"; Sentry.init({ dsn: "___PUBLIC_DSN___", - integrations: [new BrowserTracing()], + integrations: [new Sentry.BrowserTracing()], tracesSampleRate: 1.0, }); @@ -46,6 +46,7 @@ root.render() > The above setting ensures that 100% of transactions will be sent to Sentry, but we recommend lowering this number in production. ## Verify + This snippet contains an intentional error and can be used as a test to make sure that everything's working as expected. ```javascript @@ -53,7 +54,9 @@ return ; ``` --- + ## Next Steps + - [Source Maps](https://docs.sentry.io/platforms/javascript/guides/react/sourcemaps/): Learn how to enable readable stack traces in your Sentry errors. - [React Features](https://docs.sentry.io/platforms/javascript/guides/react/features/): Learn about our first class integration with the React framework. - [Session Replay](https://docs.sentry.io/platforms/javascript/guides/react/session-replay/): Get to the root cause of an error or latency issue faster by seeing all the technical details related to that issue in one visual replay on your web application. \ No newline at end of file diff --git a/src/wizard/javascript/svelte.md b/src/wizard/javascript/svelte.md index 4699aeedf5343..777496d9a0b4c 100644 --- a/src/wizard/javascript/svelte.md +++ b/src/wizard/javascript/svelte.md @@ -5,14 +5,14 @@ support_level: production type: framework --- -To instrument your Svelte application with Sentry, first install the `@sentry/svelte` and `@sentry/tracing` packages: +To instrument your Svelte application with Sentry, first install the `@sentry/svelte` package: ```bash # Using yarn -yarn add @sentry/svelte @sentry/tracing +yarn add @sentry/svelte # Using npm -npm install --save @sentry/svelte @sentry/tracing +npm install --save @sentry/svelte ``` Next, import and initialize initialize Sentry in your Svelte app's entry point (`main.ts/js`): @@ -22,12 +22,11 @@ import "./app.css"; import App from "./App.svelte"; import * as Sentry from "@sentry/svelte"; -import { BrowserTracing } from "@sentry/tracing"; // Initialize the Sentry SDK here Sentry.init({ dsn: "___PUBLIC_DSN___", - integrations: [new BrowserTracing()], + integrations: [new Sentry.BrowserTracing()], // Set tracesSampleRate to 1.0 to capture 100% // of transactions for performance monitoring. diff --git a/src/wizard/javascript/vue.md b/src/wizard/javascript/vue.md index 251fc09b3202e..84fbfdb447582 100644 --- a/src/wizard/javascript/vue.md +++ b/src/wizard/javascript/vue.md @@ -7,12 +7,7 @@ type: framework ## Instrument your application -To begin collecting error and performance data from your Vue application, you'll need the following packages: - -- `@sentry/vue` (Sentry's Vue SDK) -- `@sentry/tracing` (instruments performance data) - -Below are instructions for using your favorite package manager, or alternatively loaded directly from our CDN. +To begin collecting error and performance data from your Vue application, you'll need to install the `@sentry/vue` package (Sentry's Vue SDK). ### Using yarn or npm @@ -20,10 +15,10 @@ Install the dependencies: ```bash # Using yarn -yarn add @sentry/vue @sentry/tracing +yarn add @sentry/vue # Using npm -npm install --save @sentry/vue @sentry/tracing +npm install --save @sentry/vue ``` Next, initialize Sentry in your app entry point before you initialize your root component. @@ -34,7 +29,6 @@ Next, initialize Sentry in your app entry point before you initialize your root import Vue from "vue"; import Router from "vue-router"; import * as Sentry from "@sentry/vue"; -import { BrowserTracing } from "@sentry/tracing"; Vue.use(Router); @@ -46,7 +40,7 @@ Sentry.init({ Vue, dsn: "___PUBLIC_DSN___", integrations: [ - new BrowserTracing({ + new Sentry.BrowserTracing({ routingInstrumentation: Sentry.vueRouterInstrumentation(router), tracePropagationTargets: ["localhost", "my-site-url.com", /^\//], }), @@ -71,7 +65,6 @@ new Vue({ import { createApp } from "vue"; import { createRouter } from "vue-router"; import * as Sentry from "@sentry/vue"; -import { BrowserTracing } from "@sentry/tracing"; const app = createApp({ // ... @@ -84,7 +77,7 @@ Sentry.init({ app, dsn: "___PUBLIC_DSN___", integrations: [ - new BrowserTracing({ + new Sentry.BrowserTracing({ routingInstrumentation: Sentry.vueRouterInstrumentation(router), tracePropagationTargets: ["localhost", "my-site-url.com", /^\//], }),