diff --git a/src/includes/configuration/config-intro/javascript.ember.mdx b/src/includes/configuration/config-intro/javascript.ember.mdx new file mode 100644 index 0000000000000..55259ef883002 --- /dev/null +++ b/src/includes/configuration/config-intro/javascript.ember.mdx @@ -0,0 +1,12 @@ +Options are passed to `sentry` inside your environment: + +```javascript +ENV['@sentry/ember'] = { + sentry: { + dsn: '___PUBLIC_DSN___', + tracesSampleRate: 1.0, // We recommend adjusting this in production + maxBreadcrumbs: 50, + debug: true, + } +}; +``` diff --git a/src/includes/getting-started-config/javascript.ember.mdx b/src/includes/getting-started-config/javascript.ember.mdx new file mode 100644 index 0000000000000..c50693d47e885 --- /dev/null +++ b/src/includes/getting-started-config/javascript.ember.mdx @@ -0,0 +1,40 @@ + +This snippet includes automatic instrumentation to monitor the performance of your application, which registers and configures the Tracing integration, including custom [Ember instrumentation](./configuration/ember-options/). + +```javascript +import Application from '@ember/application'; +import Resolver from 'ember-resolver'; +import loadInitializers from 'ember-load-initializers'; +import config from './config/environment'; + +import { InitSentryForEmber } from '@sentry/ember'; + +InitSentryForEmber(); + +export default class App extends Application { + modulePrefix = config.modulePrefix; + podModulePrefix = config.podModulePrefix; + Resolver = Resolver; +} +``` + +Then add the following config to your `config/environment.js`: + +```javascript +ENV['@sentry/ember'] = { + sentry: { + 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, + } +}; +``` + + + +This SDK uses Ember configuration conventions to manage its automatic instrumentation and other Sentry options, this additional configuration can be found under Ember options. + + diff --git a/src/includes/getting-started-install/javascript.ember.mdx b/src/includes/getting-started-install/javascript.ember.mdx new file mode 100644 index 0000000000000..89515011d2da4 --- /dev/null +++ b/src/includes/getting-started-install/javascript.ember.mdx @@ -0,0 +1,3 @@ +```bash {tabTitle:ember-cli} +ember install @sentry/ember +``` diff --git a/src/includes/getting-started-primer/javascript.ember.mdx b/src/includes/getting-started-primer/javascript.ember.mdx new file mode 100644 index 0000000000000..804ee1b6317e2 --- /dev/null +++ b/src/includes/getting-started-primer/javascript.ember.mdx @@ -0,0 +1,7 @@ + + + +_Sentry's Ember addon enables automatic reporting of errors, exceptions, and transactions._ + + + diff --git a/src/platforms/javascript/guides/ember/config.yml b/src/platforms/javascript/guides/ember/config.yml new file mode 100644 index 0000000000000..c903a997a1e24 --- /dev/null +++ b/src/platforms/javascript/guides/ember/config.yml @@ -0,0 +1,6 @@ +title: Ember +categories: + - browser +redirect_from: + - /clients/javascript/integrations/ember/ + - /platforms/javascript/ember/ diff --git a/src/platforms/javascript/guides/ember/configuration/ember-options.mdx b/src/platforms/javascript/guides/ember/configuration/ember-options.mdx new file mode 100644 index 0000000000000..ee04045d7cac5 --- /dev/null +++ b/src/platforms/javascript/guides/ember/configuration/ember-options.mdx @@ -0,0 +1,77 @@ +--- +title: Ember Options +description: "Additional configuration options for the Ember addon." +sidebar_order: 1 +--- + +The `@sentry/ember` addon includes options to manage Ember specific instrumentation; these options are set on the addon config directly. All Sentry SDK options that would be passed to `init` should instead be set in the `sentry` key inside your addon config as in this example: + +```javascript +ENV['@sentry/ember'] = { + // Ember specific options + sentry: { + // Sentry options + } +}; +``` + +The following documentation is for Ember specific configuration, for Sentry options, [see basic options](/platforms/javascript/guides/ember/configuration/options) + +### 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: + +```javascript +ENV['@sentry/ember'] = { + disablePerformance: true +}; +``` + +### Routes + +If you would like to capture timings for the `beforeModel`, `model`, `afterModel` hooks as well as `setupController` in one of your Routes, `@sentry/ember` exports a `instrumentRoutePerformance` function which can be used by replacing the default export with a wrapped Route. + +```javascript +import Route from '@ember/routing/route'; +import { instrumentRoutePerformance } from '@sentry/ember'; + +class MyRoute extends Route { + model() { + //... + } +} + +export default instrumentRoutePerformance(MyRoute); +``` + +### Classic Components +The render times of classic components are also enabled by default, with a setting to capture render timings only above a certain duration. To change this minimum, you can modify `minimumComponentRenderDuration` in your config. + +```javascript + ENV['@sentry/ember'] = { + minimumComponentRenderDuration: 0, // Setting this to zero will capture all classic components. + }; +``` + +To disable component instrumentation you can set `disableInstrumentComponents` in your config. +```javascript +ENV['@sentry/ember'] = { + disableInstrumentComponents: true +}; +``` + +### Runloop +The duration of each queue in your application's runloop is instrumented by default, as long as the duration of the queue is longer than a threshold defined in your config by `minimumRunloopQueueDuration` + +```javascript + ENV['@sentry/ember'] = { + minimumRunloopQueueDuration: 0, // Setting this to zero will capture all runloop queue durations + }; +``` + +If you would like to disable runloop instrumentation you can set `disableRunloopPerformance` in your config. +```javascript +ENV['@sentry/ember'] = { + disableRunloopPerformance: true +}; +``` diff --git a/src/platforms/javascript/guides/ember/configuration/other-versions/ember2.mdx b/src/platforms/javascript/guides/ember/configuration/other-versions/ember2.mdx new file mode 100644 index 0000000000000..8b38a9abf1f0e --- /dev/null +++ b/src/platforms/javascript/guides/ember/configuration/other-versions/ember2.mdx @@ -0,0 +1,41 @@ +--- +title: Ember 2.x +description: "Learn how to use Sentry's Emberjs integration if you're using Ember 2.x." +redirect_from: + - /clients/javascript/integrations/ember/ +--- + +If you're using `Ember 2.x`, you can use Sentry's Ember integration. + +To use Sentry with your Ember application, you will need to use Sentry’s browser JavaScript SDK: `@sentry/browser`. + +On its own, `@sentry/browser` will report any uncaught exceptions triggered from your application. +To use ESM imports without any additional configuration, you can use `ember-auto-import` +by installing it with `ember install ember-auto-import`. + +Starting with version `5.x` our `Ember` integration lives in its own `@sentry/integrations` package. +Install the package using either `npm` or `yarn`: + +```bash {tabTitle:npm} +npm install --save @sentry/integrations +``` + +```bash {tabTitle:yarn} +yarn add @sentry/integrations +``` + +Then add to your `app.js`: + +```javascript +import * as Sentry from "@sentry/browser"; +import { Ember as EmberIntegration } from "@sentry/integrations"; + +Sentry.init({ + dsn: "___PUBLIC_DSN___", + integrations: [new EmberIntegration()], +}); +``` + +If you are using the CDN version or the Loader, we provide a standalone file for every integration, to set it up [check out our CDN documentation](/platforms/javascript/install/cdn) + + diff --git a/src/platforms/javascript/guides/ember/configuration/other-versions/index.mdx b/src/platforms/javascript/guides/ember/configuration/other-versions/index.mdx new file mode 100644 index 0000000000000..8cfa7f54ecbd6 --- /dev/null +++ b/src/platforms/javascript/guides/ember/configuration/other-versions/index.mdx @@ -0,0 +1,6 @@ +--- +title: Other Versions +sidebar_order: 2 +--- + + diff --git a/src/platforms/javascript/guides/ember/index.mdx b/src/platforms/javascript/guides/ember/index.mdx deleted file mode 100644 index bd71ccb3dc961..0000000000000 --- a/src/platforms/javascript/guides/ember/index.mdx +++ /dev/null @@ -1,65 +0,0 @@ ---- -title: Ember -sidebar_order: 3000 -redirect_from: - - /platforms/javascript/ember/ - - /clients/javascript/integrations/ember/ ---- - -To use Sentry with your Ember application, you will need to use Sentry’s browser JavaScript SDK: `@sentry/browser`. - -On its own, `@sentry/browser` will report any uncaught exceptions triggered from your application. -In order to use ESM imports without any additional configuration, you can use `ember-auto-import` -by installing it with `ember install ember-auto-import`. - -Starting with version `5.x` our `Ember` integration lives in it's own package `@sentry/integrations`. -You can install it with `npm` / `yarn` like: - -```bash {tabTitle:npm} -npm install --save @sentry/browser @sentry/integrations -``` - -```bash {tabTitle:Yarn} -yarn add @sentry/browser @sentry/integrations -``` - -Then add this to your `app.js`: - -```javascript -import * as Sentry from "@sentry/browser"; -import { Ember as EmberIntegration } from "@sentry/integrations"; - -Sentry.init({ - dsn: "___PUBLIC_DSN___", - integrations: [new EmberIntegration()], -}); -``` - -In case you are using the CDN version or the Loader, we provide a standalone file for every integration, you can use it -like this: - -```html - - - - - - - - -``` - - diff --git a/src/wizard/javascript/ember.md b/src/wizard/javascript/ember.md index c674a0b3fd24d..bb7d894c5b33d 100644 --- a/src/wizard/javascript/ember.md +++ b/src/wizard/javascript/ember.md @@ -5,60 +5,46 @@ support_level: production type: framework --- -To use Sentry with your Ember application, you will need to use Sentry’s browser JavaScript SDK: `@sentry/browser`. - -On its own, `@sentry/browser` will report any uncaught exceptions triggered from your application. -In order to use ESM imports without any additional configuration, you can use `ember-auto-import` -by installing it with `ember install ember-auto-import`. - -Starting with version `5.x` our `Ember` integration lives in it's own package `@sentry/integrations`. -You can install it with `npm` / `yarn` like: +To use Sentry with your Ember application, you will need to use Sentry’s Ember addon: `@sentry/ember`. ```bash -# Using yarn -yarn add @sentry/browser @sentry/integrations - -# Using npm -npm install --save @sentry/browser @sentry/integrations +# Using ember-cli +ember install @sentry/ember ``` -Then add this to your `app.js`: +You should `init` the Sentry SDK as soon as possible during your application load up in `app.js`, before initializing Ember: ```javascript -import * as Sentry from "@sentry/browser"; -import { Ember as EmberIntegration } from "@sentry/integrations"; +import Application from '@ember/application'; +import Resolver from 'ember-resolver'; +import loadInitializers from 'ember-load-initializers'; +import config from './config/environment'; -Sentry.init({ - dsn: "___PUBLIC_DSN___", - integrations: [new EmberIntegration()], -}); -``` +import { InitSentryForEmber } from '@sentry/ember'; -In case you are using the CDN version or the Loader, we provide a standalone file for every integration, you can use it -like this: +InitSentryForEmber(); -```html - - - +export default class App extends Application { + modulePrefix = config.modulePrefix; + podModulePrefix = config.podModulePrefix; + Resolver = Resolver; +} +``` - - +Then add the following config to your `config/environment.js`: - +```javascript +ENV['@sentry/ember'] = { + sentry: { + dsn: '___PUBLIC_DSN___', + + // Set tracesSampleRate to 1.0 to capture 100% + // of transactions for performance monitoring. + // We recommend adjusting this value in production, or using tracesSampler + // for finer control + tracesSampleRate: 1.0, + } +}; ``` - +The above configuration captures both error and performance data. To reduce the volume of performance data captured, change `tracesSampleRate` to a value between 0 and 1.