From 64e3bc57de0ec91c4c07fc0c459ddb4a3b08d83f Mon Sep 17 00:00:00 2001 From: Fiona Artiaga Date: Mon, 7 Dec 2020 17:29:33 -0800 Subject: [PATCH 1/6] initial structure and include statements --- .../beforeNavigate-example/javascript.mdx | 27 ++++ .../configure-tracing-package/javascript.mdx | 41 +++++++ .../control-data-truncation/javascript.mdx | 24 ++++ .../javascript.mdx | 40 ++++++ .../javascript.mdx | 9 ++ .../filter-span-example/javascript.mdx | 19 +++ .../group-transaction-example/javascript.mdx} | 8 -- .../install-tracing-package/javascript.mdx | 20 +++ .../javascript.mdx} | 22 ---- .../retrieve-transaction/javascript.mdx} | 6 - .../tracingOrigins-example/javascript.mdx | 22 ++++ .../performance/capturing/add-to-spans.mdx | 28 +---- .../performance/capturing/automatic.mdx | 116 ++---------------- .../capturing/connect-transaction.mdx | 4 + .../capturing/group-transactions.mdx | 12 ++ .../common/performance/capturing/index.mdx | 3 + .../common/performance/capturing/manual.mdx | 20 +++ .../capturing/retrieve-active-transaction.mdx | 10 ++ .../common/performance/index.mdx | 66 +--------- src/platforms/common/performance/sampling.mdx | 1 + 20 files changed, 268 insertions(+), 230 deletions(-) create mode 100644 src/includes/performance/beforeNavigate-example/javascript.mdx create mode 100644 src/includes/performance/configure-tracing-package/javascript.mdx create mode 100644 src/includes/performance/control-data-truncation/javascript.mdx create mode 100644 src/includes/performance/enable-automatic-instrumentation/javascript.mdx create mode 100644 src/includes/performance/enable-manual-instrumentation/javascript.mdx create mode 100644 src/includes/performance/filter-span-example/javascript.mdx rename src/{platforms/javascript/common/performance/capturing/group-transactions.mdx => includes/performance/group-transaction-example/javascript.mdx} (69%) create mode 100644 src/includes/performance/install-tracing-package/javascript.mdx rename src/{platforms/javascript/common/performance/capturing/manual.mdx => includes/performance/manual-instrumentation-example/javascript.mdx} (66%) rename src/{platforms/javascript/common/performance/capturing/retrieve-active-transaction.mdx => includes/performance/retrieve-transaction/javascript.mdx} (84%) create mode 100644 src/includes/performance/tracingOrigins-example/javascript.mdx rename src/platforms/{javascript => }/common/performance/capturing/add-to-spans.mdx (51%) rename src/platforms/{javascript => }/common/performance/capturing/automatic.mdx (50%) rename src/platforms/{javascript => }/common/performance/capturing/connect-transaction.mdx (98%) create mode 100644 src/platforms/common/performance/capturing/group-transactions.mdx rename src/platforms/{javascript => }/common/performance/capturing/index.mdx (77%) create mode 100644 src/platforms/common/performance/capturing/manual.mdx create mode 100644 src/platforms/common/performance/capturing/retrieve-active-transaction.mdx rename src/platforms/{javascript => }/common/performance/index.mdx (66%) diff --git a/src/includes/performance/beforeNavigate-example/javascript.mdx b/src/includes/performance/beforeNavigate-example/javascript.mdx new file mode 100644 index 00000000000000..8a816ac25bf5b2 --- /dev/null +++ b/src/includes/performance/beforeNavigate-example/javascript.mdx @@ -0,0 +1,27 @@ +```javascript +import * as Sentry from "@sentry/browser"; +import { Integrations } from "@sentry/tracing"; + +Sentry.init({ + dsn: "___PUBLIC_DSN___", + integrations: [ + new Integrations.BrowserTracing({ + beforeNavigate: context => { + return { + ...context, + // You could use your UI's routing library to find the matching + // route template here. We don't have one right now, so do some basic + // parameter replacements. + name: location.pathname + .replace(/\d+/g, "") + .replace(/[a-f0-9]{32}/g, ""), + }; + }, + }), + ], + + // We recommend adjusting this value in production, or using tracesSampler + // for finer control + tracesSampleRate: 1.0, +}); +``` diff --git a/src/includes/performance/configure-tracing-package/javascript.mdx b/src/includes/performance/configure-tracing-package/javascript.mdx new file mode 100644 index 00000000000000..45c3ccdad384ca --- /dev/null +++ b/src/includes/performance/configure-tracing-package/javascript.mdx @@ -0,0 +1,41 @@ +```javascript {tabTitle: ESM} +// If you're using one of our integration packages, like `@sentry/react` or +// `@sentry/angular`, substitute its name for `@sentry/browser` here +import * as Sentry from "@sentry/browser"; + +// If taking advantage of automatic instrumentation (highly recommended) +import { Integrations as TracingIntegrations } 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 TracingIntegrations.BrowserTracing()], + + // To set a uniform sample rate + tracesSampleRate: 0.2 + + // Alternatively, to control sampling dynamically + tracesSampler: samplingContext => { ... } +}); +``` + +```javascript {tabTitle: CDN} +Sentry.init({ + dsn: "___PUBLIC_DSN___", + + // This enables automatic instrumentation (highly recommended), but is not + // necessary for purely manual usage + integrations: [new Sentry.Integrations.BrowserTracing()], + + // To set a uniform sample rate + tracesSampleRate: 0.2 + + // Alternatively, to control sampling dynamically + tracesSampler: samplingContext => { ... } +}); +``` diff --git a/src/includes/performance/control-data-truncation/javascript.mdx b/src/includes/performance/control-data-truncation/javascript.mdx new file mode 100644 index 00000000000000..b5d259810405a2 --- /dev/null +++ b/src/includes/performance/control-data-truncation/javascript.mdx @@ -0,0 +1,24 @@ +Instead, using `span.set_tag` and `span.set_data` preserves the details of this query using structured metadata. This could be done over `baseUrl`, `endpoint`, and `parameters`: + +```javascript +const baseUrl = "https://empowerplant.io"; +const endpoint = "/api/0/projects/ep/setup_form"; +const parameters = { + user_id: 314159265358979323846264338327, + tracking_id: "EasyAsABC123OrSimpleAsDoReMi", + product_name: PlantToHumanTranslator, + product_id: 161803398874989484820458683436563811772030917980576, +}; + +const span = transaction.startChild({ + op: "request", + description: "setup form", +}); + +span.setTag("baseUrl", baseUrl); +span.setTag("endpoint", endpoint); +span.setData("parameters", parameters); +// you may also find some parameters to be valuable as tags +span.setData("user_id", parameters.user_id); +http.get(`${base_url}/${endpoint}/`, (data = parameters)); +``` diff --git a/src/includes/performance/enable-automatic-instrumentation/javascript.mdx b/src/includes/performance/enable-automatic-instrumentation/javascript.mdx new file mode 100644 index 00000000000000..74947356ddcd20 --- /dev/null +++ b/src/includes/performance/enable-automatic-instrumentation/javascript.mdx @@ -0,0 +1,40 @@ +After configuration, you will see both `pageload` and `navigation` when viewing transactions in sentry.io. + +```javascript {tabTitle: ESM} +// If you're using one of our integration packages, like `@sentry/react` or `@sentry/angular`, +// substitute its name for `@sentry/browser` here +import * as Sentry from "@sentry/browser"; +import { Integrations as TracingIntegrations } from "@sentry/tracing"; // Must import second + +Sentry.init({ + dsn: "___PUBLIC_DSN___", + + integrations: [ + new Integrations.BrowserTracing({ + tracingOrigins: ["localhost", "my-site-url.com", /^\//], + // ... other options + }), + ], + + // We recommend adjusting this value in production, or using tracesSampler + // for finer control + tracesSampleRate: 1.0, +}); +``` + +```javascript {tabTitle: CDN} +Sentry.init({ + dsn: "___PUBLIC_DSN___", + + integrations: [ + new Sentry.Integrations.BrowserTracing({ + tracingOrigins: ["localhost", "my-site-url.com", /^\//], + // ... other options + }), + ], + + // We recommend adjusting this value in production, or using tracesSampler + // for finer control + tracesSampleRate: 1.0, +}); +``` diff --git a/src/includes/performance/enable-manual-instrumentation/javascript.mdx b/src/includes/performance/enable-manual-instrumentation/javascript.mdx new file mode 100644 index 00000000000000..58d218ef6fad60 --- /dev/null +++ b/src/includes/performance/enable-manual-instrumentation/javascript.mdx @@ -0,0 +1,9 @@ +This is valid for all JavaScript SDKs (both backend and frontend) and works independently of the `Express`, `Http`, and `BrowserTracing` integrations. + +```javascript +const transaction = Sentry.startTransaction({ name: "test-transaction" }); +const span = transaction.startChild({ op: "functionX" }); // This function returns a Span +// functionCallX +span.finish(); // Remember that only finished spans will be sent with the transaction +transaction.finish(); // Finishing the transaction will send it to Sentry +``` diff --git a/src/includes/performance/filter-span-example/javascript.mdx b/src/includes/performance/filter-span-example/javascript.mdx new file mode 100644 index 00000000000000..4b4f6e55b2387c --- /dev/null +++ b/src/includes/performance/filter-span-example/javascript.mdx @@ -0,0 +1,19 @@ +```javascript +import * as Sentry from "@sentry/browser"; +import { Integrations } from "@sentry/tracing"; +Sentry.init({ + dsn: "___PUBLIC_DSN___", + integrations: [ + new Integrations.BrowserTracing({ + shouldCreateSpanForRequest: url => { + // Do not create spans for outgoing requests to a `/health/` endpoint + return !url.match(/\/health\/?$/); + }, + }), + ], + + // We recommend adjusting this value in production, or using tracesSampler + // for finer control + tracesSampleRate: 1.0, +}); +``` diff --git a/src/platforms/javascript/common/performance/capturing/group-transactions.mdx b/src/includes/performance/group-transaction-example/javascript.mdx similarity index 69% rename from src/platforms/javascript/common/performance/capturing/group-transactions.mdx rename to src/includes/performance/group-transaction-example/javascript.mdx index f3a083d27c283e..57a38a3cf8fe3e 100644 --- a/src/platforms/javascript/common/performance/capturing/group-transactions.mdx +++ b/src/includes/performance/group-transaction-example/javascript.mdx @@ -1,11 +1,3 @@ ---- -title: Group Transactions -sidebar_order: 50 -description: "Learn how to group transactions." ---- - -When Sentry captures transactions, they are assigned a transaction name. This name is generally auto-generated by the Sentry SDK based on the framework integrations you are using. If you can't leverage the automatic transaction generation (or want to customize how transaction names are generated) you can use a global event processor that is registered when you initialize the SDK with your configuration. - An example of doing this in a node.js application: ```javascript diff --git a/src/includes/performance/install-tracing-package/javascript.mdx b/src/includes/performance/install-tracing-package/javascript.mdx new file mode 100644 index 00000000000000..1f8c9a6444ca94 --- /dev/null +++ b/src/includes/performance/install-tracing-package/javascript.mdx @@ -0,0 +1,20 @@ +```bash {tabTitle: ESM} +# Using yarn +yarn add @sentry/tracing + +# Using npm +npm install @sentry/tracing +``` + +```html {tabTitle: CDN} + +``` diff --git a/src/platforms/javascript/common/performance/capturing/manual.mdx b/src/includes/performance/manual-instrumentation-example/javascript.mdx similarity index 66% rename from src/platforms/javascript/common/performance/capturing/manual.mdx rename to src/includes/performance/manual-instrumentation-example/javascript.mdx index fbbf47f6c8a7ca..6a48093672be68 100644 --- a/src/platforms/javascript/common/performance/capturing/manual.mdx +++ b/src/includes/performance/manual-instrumentation-example/javascript.mdx @@ -1,25 +1,3 @@ ---- -title: Manual Instrumentation -sidebar_order: 20 -description: "Learn how to capture performance data on any action in your app." ---- - - - -To _manually_ capture transactions, you must first enable tracing in your app. - - - -To manually instrument certain regions of your code, you can create transactions to capture them. This is valid for all JavaScript SDKs (both backend and frontend) and works independently of the `Express`, `Http`, and `BrowserTracing` integrations. - -```javascript -const transaction = Sentry.startTransaction({ name: "test-transaction" }); -const span = transaction.startChild({ op: "functionX" }); // This function returns a Span -// functionCallX -span.finish(); // Remember that only finished spans will be sent with the transaction -transaction.finish(); // Finishing the transaction will send it to Sentry -``` - For example, if you want to create a transaction for a user interaction on your page: ```javascript diff --git a/src/platforms/javascript/common/performance/capturing/retrieve-active-transaction.mdx b/src/includes/performance/retrieve-transaction/javascript.mdx similarity index 84% rename from src/platforms/javascript/common/performance/capturing/retrieve-active-transaction.mdx rename to src/includes/performance/retrieve-transaction/javascript.mdx index ff3f0e043e0e92..82ad2c02ea7b16 100644 --- a/src/platforms/javascript/common/performance/capturing/retrieve-active-transaction.mdx +++ b/src/includes/performance/retrieve-transaction/javascript.mdx @@ -1,9 +1,3 @@ ---- -title: Retrieve an Active Transaction -sidebar_order: 60 -description: "Learn how to retrieve an active transaction for grouping." ---- - In cases where you want to attach Spans to an already ongoing transaction, such as when grouping transactions, you can use `Sentry.getCurrentHub().getScope().getTransaction()`. This function will return a `Transaction` object when there is a running transaction on the scope, otherwise it returns `undefined`. If you are using our BrowserTracing integration, by default we attach the transaction to the Scope, so you could do something like this: ```javascript diff --git a/src/includes/performance/tracingOrigins-example/javascript.mdx b/src/includes/performance/tracingOrigins-example/javascript.mdx new file mode 100644 index 00000000000000..304a0f40d77556 --- /dev/null +++ b/src/includes/performance/tracingOrigins-example/javascript.mdx @@ -0,0 +1,22 @@ +For example: + +- A frontend application is served from `example.com` +- A backend service is served from `api.example.com` +- The frontend application makes API calls to the backend +- Therefore, the option needs to be configured like this: `new Integrations.BrowserTracing({tracingOrigins: ['api.example.com']})` +- Now outgoing XHR/fetch requests to `api.example.com` will get the `sentry-trace` header attached + +```javascript +Sentry.init({ + dsn: "___PUBLIC_DSN___", + integrations: [ + new Integrations.BrowserTracing({ + tracingOrigins: ["localhost", "my-site-url.com"], + }), + ], + + // We recommend adjusting this value in production, or using tracesSampler + // for finer control + tracesSampleRate: 1.0, +}); +``` diff --git a/src/platforms/javascript/common/performance/capturing/add-to-spans.mdx b/src/platforms/common/performance/capturing/add-to-spans.mdx similarity index 51% rename from src/platforms/javascript/common/performance/capturing/add-to-spans.mdx rename to src/platforms/common/performance/capturing/add-to-spans.mdx index daad4663854d9c..a3d065bed82f3e 100644 --- a/src/platforms/javascript/common/performance/capturing/add-to-spans.mdx +++ b/src/platforms/common/performance/capturing/add-to-spans.mdx @@ -1,6 +1,9 @@ --- title: Control Data Truncation sidebar_order: 40 +supported: + - javascript + - react-native description: "Learn how to add query information and parameters to spans." --- @@ -14,27 +17,4 @@ The 200+ character request above will become truncated to: `https://empowerplant.io/api/0/projects/ep/setup_form/?user_id=314159265358979323846264338327&tracking_id=EasyAsABC123OrSimpleAsDoReMi&product_name=PlantToHumanTranslator&product_id=1618033988749894848` -Instead, using `span.set_tag` and `span.set_data` preserves the details of this query using structured metadata. This could be done over `baseUrl`, `endpoint`, and `parameters`: - -```javascript -const baseUrl = "https://empowerplant.io"; -const endpoint = "/api/0/projects/ep/setup_form"; -const parameters = { - user_id: 314159265358979323846264338327, - tracking_id: "EasyAsABC123OrSimpleAsDoReMi", - product_name: PlantToHumanTranslator, - product_id: 161803398874989484820458683436563811772030917980576, -}; - -const span = transaction.startChild({ - op: "request", - description: "setup form", -}); - -span.setTag("baseUrl", baseUrl); -span.setTag("endpoint", endpoint); -span.setData("parameters", parameters); -// you may also find some parameters to be valuable as tags -span.setData("user_id", parameters.user_id); -http.get(`${base_url}/${endpoint}/`, (data = parameters)); -``` + diff --git a/src/platforms/javascript/common/performance/capturing/automatic.mdx b/src/platforms/common/performance/capturing/automatic.mdx similarity index 50% rename from src/platforms/javascript/common/performance/capturing/automatic.mdx rename to src/platforms/common/performance/capturing/automatic.mdx index 268b9084a49cd7..2a9a45bc9e70e2 100644 --- a/src/platforms/javascript/common/performance/capturing/automatic.mdx +++ b/src/platforms/common/performance/capturing/automatic.mdx @@ -1,6 +1,9 @@ --- title: Automatic Instrumentation sidebar_order: 10 +supported: + - javascript + - react-native description: "Learn how to add automatic instrumentation to captured transactions." --- @@ -20,46 +23,7 @@ The `BrowserTracing` integration creates a new transaction for each page load an To enable this automatic 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.) -After configuration, you will see both `pageload` and `navigation` when viewing transactions in sentry.io. - -```javascript {tabTitle: ESM} -// If you're using one of our integration packages, like `@sentry/react` or `@sentry/angular`, -// substitute its name for `@sentry/browser` here -import * as Sentry from "@sentry/browser"; -import { Integrations as TracingIntegrations } from "@sentry/tracing"; // Must import second - -Sentry.init({ - dsn: "___PUBLIC_DSN___", - - integrations: [ - new Integrations.BrowserTracing({ - tracingOrigins: ["localhost", "my-site-url.com", /^\//], - // ... other options - }), - ], - - // We recommend adjusting this value in production, or using tracesSampler - // for finer control - tracesSampleRate: 1.0, -}); -``` - -```javascript {tabTitle: CDN} -Sentry.init({ - dsn: "___PUBLIC_DSN___", - - integrations: [ - new Sentry.Integrations.BrowserTracing({ - tracingOrigins: ["localhost", "my-site-url.com", /^\//], - // ... other options - }), - ], - - // We recommend adjusting this value in production, or using tracesSampler - // for finer control - tracesSampleRate: 1.0, -}); -``` + ## Configuration Options @@ -69,84 +33,18 @@ You can pass many different options to the `BrowserTracing` integration (as an o The default value of `tracingOrigins` is `['localhost', /^\//]`. The JavaScript SDK will attach the `sentry-trace` header to all outgoing XHR/fetch requests whose destination contains a string in the list or matches a regex in the list. If your frontend is making requests to a different domain, you will need to add it there to propagate the `sentry-trace` header to the backend services, which is required to link transactions together as part of a single trace. **The `tracingOrigins` option matches against the whole request URL, not just the domain. Using stricter regex to match certain parts of the URL ensures that requests do not unnecessarily have the `sentry-trace` header attached.** -For example: - -- A frontend application is served from `example.com` -- A backend service is served from `api.example.com` -- The frontend application makes API calls to the backend -- Therefore, the option needs to be configured like this: `new Integrations.BrowserTracing({tracingOrigins: ['api.example.com']})` -- Now outgoing XHR/fetch requests to `api.example.com` will get the `sentry-trace` header attached - -```javascript -Sentry.init({ - dsn: "___PUBLIC_DSN___", - integrations: [ - new Integrations.BrowserTracing({ - tracingOrigins: ["localhost", "my-site-url.com"], - }), - ], - - // We recommend adjusting this value in production, or using tracesSampler - // for finer control - tracesSampleRate: 1.0, -}); -``` + You will need to configure your web server CORS to allow the `sentry-trace` header. The configuration might look like `"Access-Control-Allow-Headers: sentry-trace"`, but the configuration depends on your set up. If you do not allow the `sentry-trace` header, the request might be blocked. - ### beforeNavigate For `pageload` and `navigation` transactions, the `BrowserTracing` integration uses the browser's `window.location` API to generate a transaction name. To customize the name of the `pageload` and `navigation` transactions, you can supply a `beforeNavigate` option to the `BrowserTracing` integration. This option allows you to modify the transaction name to make it more generic, so that, for example, transactions named `GET /users/12312012` and `GET /users/11212012` can both be renamed `GET /users/:userid`, so that they'll group together. -```javascript -import * as Sentry from "@sentry/browser"; -import { Integrations } from "@sentry/tracing"; - -Sentry.init({ - dsn: "___PUBLIC_DSN___", - integrations: [ - new Integrations.BrowserTracing({ - beforeNavigate: context => { - return { - ...context, - // You could use your UI's routing library to find the matching - // route template here. We don't have one right now, so do some basic - // parameter replacements. - name: location.pathname - .replace(/\d+/g, "") - .replace(/[a-f0-9]{32}/g, ""), - }; - }, - }), - ], - - // We recommend adjusting this value in production, or using tracesSampler - // for finer control - tracesSampleRate: 1.0, -}); -``` + ### shouldCreateSpanForRequest This function can be used to filter out unwanted spans such as XHR's running health checks or something similar. By default `shouldCreateSpanForRequest` already filters out everything but what was defined in `tracingOrigins`. -```javascript -import * as Sentry from "@sentry/browser"; -import { Integrations } from "@sentry/tracing"; -Sentry.init({ - dsn: "___PUBLIC_DSN___", - integrations: [ - new Integrations.BrowserTracing({ - shouldCreateSpanForRequest: url => { - // Do not create spans for outgoing requests to a `/health/` endpoint - return !url.match(/\/health\/?$/); - }, - }), - ], - - // We recommend adjusting this value in production, or using tracesSampler - // for finer control - tracesSampleRate: 1.0, -}); -``` + diff --git a/src/platforms/javascript/common/performance/capturing/connect-transaction.mdx b/src/platforms/common/performance/capturing/connect-transaction.mdx similarity index 98% rename from src/platforms/javascript/common/performance/capturing/connect-transaction.mdx rename to src/platforms/common/performance/capturing/connect-transaction.mdx index 47c05ec64525ba..f0039036721271 100644 --- a/src/platforms/javascript/common/performance/capturing/connect-transaction.mdx +++ b/src/platforms/common/performance/capturing/connect-transaction.mdx @@ -1,6 +1,10 @@ --- title: Connect Backend and Frontend Transactions sidebar_order: 30 +supported: + - javascript +notSupported: + - react-native description: "Learn how to connect backend and frontend transactions." --- diff --git a/src/platforms/common/performance/capturing/group-transactions.mdx b/src/platforms/common/performance/capturing/group-transactions.mdx new file mode 100644 index 00000000000000..f7e8191e111923 --- /dev/null +++ b/src/platforms/common/performance/capturing/group-transactions.mdx @@ -0,0 +1,12 @@ +--- +title: Group Transactions +sidebar_order: 50 +supported: + - javascript + - react-native +description: "Learn how to group transactions." +--- + +When Sentry captures transactions, they are assigned a transaction name. This name is generally auto-generated by the Sentry SDK based on the framework integrations you are using. If you can't leverage the automatic transaction generation (or want to customize how transaction names are generated) you can use a global event processor that is registered when you initialize the SDK with your configuration. + + diff --git a/src/platforms/javascript/common/performance/capturing/index.mdx b/src/platforms/common/performance/capturing/index.mdx similarity index 77% rename from src/platforms/javascript/common/performance/capturing/index.mdx rename to src/platforms/common/performance/capturing/index.mdx index bad47d9304b808..242f00b3c56ae7 100644 --- a/src/platforms/javascript/common/performance/capturing/index.mdx +++ b/src/platforms/common/performance/capturing/index.mdx @@ -1,6 +1,9 @@ --- title: Manage Transactions sidebar_order: 20 +supported: + - javascript + - react-native description: "Learn how to capture transactions both automatically and manually." --- diff --git a/src/platforms/common/performance/capturing/manual.mdx b/src/platforms/common/performance/capturing/manual.mdx new file mode 100644 index 00000000000000..62c819d5b209be --- /dev/null +++ b/src/platforms/common/performance/capturing/manual.mdx @@ -0,0 +1,20 @@ +--- +title: Manual Instrumentation +sidebar_order: 20 +supported: + - javascript + - react-native +description: "Learn how to capture performance data on any action in your app." +--- + + + +To _manually_ capture transactions, you must first enable tracing in your app. + + + +To manually instrument certain regions of your code, you can create transactions to capture them. + + + + diff --git a/src/platforms/common/performance/capturing/retrieve-active-transaction.mdx b/src/platforms/common/performance/capturing/retrieve-active-transaction.mdx new file mode 100644 index 00000000000000..4ddfe5b84f1553 --- /dev/null +++ b/src/platforms/common/performance/capturing/retrieve-active-transaction.mdx @@ -0,0 +1,10 @@ +--- +title: Retrieve an Active Transaction +sidebar_order: 60 +supported: + - javascript + - react-native +description: "Learn how to retrieve an active transaction for grouping." +--- + + diff --git a/src/platforms/javascript/common/performance/index.mdx b/src/platforms/common/performance/index.mdx similarity index 66% rename from src/platforms/javascript/common/performance/index.mdx rename to src/platforms/common/performance/index.mdx index c875c0366e99d2..0fde3cee8c68a9 100644 --- a/src/platforms/javascript/common/performance/index.mdx +++ b/src/platforms/common/performance/index.mdx @@ -1,6 +1,9 @@ --- title: Getting Started sidebar_order: 20 +supported: + - javascript + - react-native description: "Learn how to enable performance monitoring in your app if it is not already set up." redirect_from: - /platforms/javascript/performance/apm-to-tracing/ @@ -28,26 +31,7 @@ By monitoring the performance of your application, you can see how latency in on Install the tracing package: -```bash {tabTitle: ESM} -# Using yarn -yarn add @sentry/tracing - -# Using npm -npm install @sentry/tracing -``` - -```html {tabTitle: CDN} - -``` + ## Configure @@ -56,47 +40,7 @@ Enable performance monitoring in your app by either: 1. Setting a uniform sample rate for all transactions using the option in your SDK config to a number between `0` and `1`. (For example, to send 20% of transactions, set to `0.2`.) 2. Controlling the sample rate dynamically, based on the transaction itself and the context in which it's captured, by providing a function to the config option. -```javascript {tabTitle: ESM} -// If you're using one of our integration packages, like `@sentry/react` or -// `@sentry/angular`, substitute its name for `@sentry/browser` here -import * as Sentry from "@sentry/browser"; - -// If taking advantage of automatic instrumentation (highly recommended) -import { Integrations as TracingIntegrations } 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 TracingIntegrations.BrowserTracing()], - - // To set a uniform sample rate - tracesSampleRate: 0.2 - - // Alternatively, to control sampling dynamically - tracesSampler: samplingContext => { ... } -}); -``` - -```javascript {tabTitle: CDN} -Sentry.init({ - dsn: "___PUBLIC_DSN___", - - // This enables automatic instrumentation (highly recommended), but is not - // necessary for purely manual usage - integrations: [new Sentry.Integrations.BrowserTracing()], - - // To set a uniform sample rate - tracesSampleRate: 0.2 - - // Alternatively, to control sampling dynamically - tracesSampler: samplingContext => { ... } -}); -``` + If either of these options is set, tracing will be enabled in your app. While these options are meant to be mutually exclusive, if you do set both, will take precedence. You can learn more about how they work in Sampling Transactions. diff --git a/src/platforms/common/performance/sampling.mdx b/src/platforms/common/performance/sampling.mdx index 21e034de4ac195..375834e8b0c182 100644 --- a/src/platforms/common/performance/sampling.mdx +++ b/src/platforms/common/performance/sampling.mdx @@ -9,6 +9,7 @@ supported: - python - java - go + - react-native --- You can control the volume of transactions sent to Sentry in two ways. From cb80139250c4c55dd1d96e888d4d1b6ae2ecba33 Mon Sep 17 00:00:00 2001 From: Fiona Artiaga Date: Tue, 8 Dec 2020 09:04:59 -0800 Subject: [PATCH 2/6] disable Automatic for React Native --- src/platforms/common/performance/capturing/automatic.mdx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/platforms/common/performance/capturing/automatic.mdx b/src/platforms/common/performance/capturing/automatic.mdx index 2a9a45bc9e70e2..a509c9c00ef84e 100644 --- a/src/platforms/common/performance/capturing/automatic.mdx +++ b/src/platforms/common/performance/capturing/automatic.mdx @@ -3,7 +3,6 @@ title: Automatic Instrumentation sidebar_order: 10 supported: - javascript - - react-native description: "Learn how to add automatic instrumentation to captured transactions." --- From 42824190bed556a6172c617ae1aee20edfdc94ca Mon Sep 17 00:00:00 2001 From: Fiona Artiaga Date: Tue, 8 Dec 2020 09:27:02 -0800 Subject: [PATCH 3/6] create PlatformSection for automatic instrumentation --- src/platforms/common/performance/index.mdx | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/src/platforms/common/performance/index.mdx b/src/platforms/common/performance/index.mdx index 0fde3cee8c68a9..93e910304c5d05 100644 --- a/src/platforms/common/performance/index.mdx +++ b/src/platforms/common/performance/index.mdx @@ -23,7 +23,16 @@ Customers on legacy plans must add transaction events to their subscription in o -With performance monitoring, Sentry tracks your software performance, measuring metrics like throughput and latency, and displaying the impact of errors across multiple systems. Once tracing is enabled, certain types of operations are measured automatically, and you can also choose to manually measure any operation you like. To learn more, see Add Automatic Instrumentation and Add Manual Instrumentation. +With performance monitoring, Sentry tracks your software performance, measuring metrics like throughput and latency, and displaying the impact of errors across multiple systems. + + + +Once tracing is enabled, certain types of operations are measured automatically in suported SDKs. To learn more, see Add Automatic Instrumentation. + + + +You can choose to manually measure any operation. To learn more, see Add Manual Instrumentation. + By monitoring the performance of your application, you can see how latency in one service may affect another service to pinpoint exactly which parts of a given operation may be responsible. To do this, Sentry captures distributed traces consisting of transactions and spans, which measure individual services and individual operations within those services, respectively. You can learn more about this model in our [Distributed Tracing](/product/performance/distributed-tracing/) docs. From 13c38fbdba9dd28ae83738050b5b6e6ce1fe0cfa Mon Sep 17 00:00:00 2001 From: Fiona Artiaga Date: Tue, 8 Dec 2020 09:43:18 -0800 Subject: [PATCH 4/6] explicitly disable content for React Native and fix syntax --- src/platforms/common/performance/index.mdx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/platforms/common/performance/index.mdx b/src/platforms/common/performance/index.mdx index 93e910304c5d05..2b343839d5b63a 100644 --- a/src/platforms/common/performance/index.mdx +++ b/src/platforms/common/performance/index.mdx @@ -25,13 +25,13 @@ Customers on legacy plans must add transaction events to their subscription in o With performance monitoring, Sentry tracks your software performance, measuring metrics like throughput and latency, and displaying the impact of errors across multiple systems. - + -Once tracing is enabled, certain types of operations are measured automatically in suported SDKs. To learn more, see Add Automatic Instrumentation. +Once tracing is enabled, certain types of operations are measured automatically in suported SDKs. To learn more, see Automatic Instrumentation. - + -You can choose to manually measure any operation. To learn more, see Add Manual Instrumentation. +You can choose to manually measure any operation. To learn more, see Manual Instrumentation. By monitoring the performance of your application, you can see how latency in one service may affect another service to pinpoint exactly which parts of a given operation may be responsible. To do this, Sentry captures distributed traces consisting of transactions and spans, which measure individual services and individual operations within those services, respectively. You can learn more about this model in our [Distributed Tracing](/product/performance/distributed-tracing/) docs. From c809da902030731af402fd23906f1c80e17c4c49 Mon Sep 17 00:00:00 2001 From: jennmueng Date: Wed, 9 Dec 2020 19:21:12 +0700 Subject: [PATCH 5/6] feat: Add configure and install snippets for react native --- .../configure-tracing-package/react-native.mdx | 15 +++++++++++++++ .../install-tracing-package/react-native.mdx | 1 + 2 files changed, 16 insertions(+) create mode 100644 src/includes/performance/configure-tracing-package/react-native.mdx create mode 100644 src/includes/performance/install-tracing-package/react-native.mdx diff --git a/src/includes/performance/configure-tracing-package/react-native.mdx b/src/includes/performance/configure-tracing-package/react-native.mdx new file mode 100644 index 00000000000000..e4442ce69f51c5 --- /dev/null +++ b/src/includes/performance/configure-tracing-package/react-native.mdx @@ -0,0 +1,15 @@ +```javascript +import * as Sentry from "@sentry/react-native"; + +// Unlike Sentry on other platforms, you do not need to import anything to use tracing on React Native + +Sentry.init({ + dsn: "___PUBLIC_DSN___", + + // To set a uniform sample rate + tracesSampleRate: 0.2 + + // Alternatively, to control sampling dynamically + tracesSampler: samplingContext => { ... } +}); +``` \ No newline at end of file diff --git a/src/includes/performance/install-tracing-package/react-native.mdx b/src/includes/performance/install-tracing-package/react-native.mdx new file mode 100644 index 00000000000000..512ade66ed4512 --- /dev/null +++ b/src/includes/performance/install-tracing-package/react-native.mdx @@ -0,0 +1 @@ +As `@sentry/tracing` is already included with our React Native SDK, no action is needed. \ No newline at end of file From c02ede552e27798b7c1480ecb59bba6555834a42 Mon Sep 17 00:00:00 2001 From: jennmueng Date: Wed, 9 Dec 2020 20:45:54 +0700 Subject: [PATCH 6/6] feat: React Native group transactions --- .../group-transaction-example/react-native.mdx | 11 +++++++++++ 1 file changed, 11 insertions(+) create mode 100644 src/includes/performance/group-transaction-example/react-native.mdx diff --git a/src/includes/performance/group-transaction-example/react-native.mdx b/src/includes/performance/group-transaction-example/react-native.mdx new file mode 100644 index 00000000000000..da973083ea29f1 --- /dev/null +++ b/src/includes/performance/group-transaction-example/react-native.mdx @@ -0,0 +1,11 @@ +```javascript +import { addGlobalEventProcessor } from "@sentry/react-native"; + +addGlobalEventProcessor(event => { + // if event is a transaction event + if (event.type === "transaction") { + event.transaction = sanitizeTransactionName(event.transaction); + } + return event; +}); +``` \ No newline at end of file