From ab0bf0883a5898314442d14d5f4a554e25db6524 Mon Sep 17 00:00:00 2001 From: Fiona Artiaga Date: Tue, 22 Sep 2020 17:38:34 -0700 Subject: [PATCH 01/19] Update JS index page and JS includes --- src/includes/capture-error/javascript.mdx | 6 + .../getting-started-config/javascript.mdx | 17 ++- .../getting-started-install/javascript.mdx | 20 ++- .../getting-started-next-steps/javascript.mdx | 12 +- .../getting-started-verify/javascript.mdx | 8 +- src/platforms/common/usage/index.mdx | 12 ++ src/platforms/javascript/index.mdx | 121 +++--------------- 7 files changed, 66 insertions(+), 130 deletions(-) diff --git a/src/includes/capture-error/javascript.mdx b/src/includes/capture-error/javascript.mdx index 58f48d18b96b1..5837790a6a985 100644 --- a/src/includes/capture-error/javascript.mdx +++ b/src/includes/capture-error/javascript.mdx @@ -1,3 +1,7 @@ +By including and configuring Sentry, our JavaScript SDK automatically attaches global handlers to _capture_ uncaught exceptions and unhandled promise rejections, as described in the official ECMAScript 6 standard. You can disable this default behavior by changing the `onunhandledrejection` option to `false` in your GlobalHandlers integration and manually hook into each event handler, then call `Sentry.captureException` or `Sentry.captureMessage` directly. + +You may also need to manage your configuration if you are using a third-party library to implement promises. Also, remember that browsers often implement security measures that can block error reporting when serving script files from different origins. + In JavaScript you can pass an error object to `captureException()` to get it captured as event. It's possible to throw strings as errors in which case no traceback can be recorded. @@ -9,3 +13,5 @@ try { Sentry.captureException(err); } ``` + +Learn more about how to manually capture errors or enable message capture with Sentry's JavaScript SDK in [our documentation on Usage](/platforms/javascript/usage/). diff --git a/src/includes/getting-started-config/javascript.mdx b/src/includes/getting-started-config/javascript.mdx index af2b62918e1be..1c8f80c23634f 100644 --- a/src/includes/getting-started-config/javascript.mdx +++ b/src/includes/getting-started-config/javascript.mdx @@ -1,15 +1,14 @@ -You should `init` the Sentry Browser SDK as soon as possible during your page load: +This snippet includes: +- the [release](/product/releases/) of your application, using `process.env.npm_package_version`, which both enables [source maps](/platforms/javascript/sourcemaps/) as well as tracking of regressions and suspect commits. +- our [performance monitoring](/product/performance/) package. -```javascript {tabTitle:ESM} +```javascript {tabTitle: ESM} import * as Sentry from "@sentry/browser"; - -Sentry.init({ - dsn: "___PUBLIC_DSN___", -}); -``` - -```javascript {tabTitle:CDN} +import { Integrations } from "@sentry/tracing"; Sentry.init({ dsn: "___PUBLIC_DSN___", + release: "my-project-name@" + process.env.npm_package_version, // To set your release version + integrations: [new Integrations.BrowserTracing()], + tracesSampleRate: 1.0, // Remember to lower this in production }); ``` diff --git a/src/includes/getting-started-install/javascript.mdx b/src/includes/getting-started-install/javascript.mdx index b5ce94007e4b5..f8da6f974bca8 100644 --- a/src/includes/getting-started-install/javascript.mdx +++ b/src/includes/getting-started-install/javascript.mdx @@ -1,17 +1,13 @@ -Add the `@sentry/browser` dependency: - ```bash {tabTitle: ESM} # Using yarn -$ yarn add @sentry/browser - +$ yarn add @sentry/browser @sentry/tracing # Using npm -$ npm install @sentry/browser +$ npm install --save @sentry/browser @sentry/tracing ``` + + -```html {tabTitle: CDN} - -``` +If prefer to use CDN to install our SDK, please see our documentation for [installing with CDN](/platforms/javascript/installation/cdn). + + + diff --git a/src/includes/getting-started-next-steps/javascript.mdx b/src/includes/getting-started-next-steps/javascript.mdx index 55f224c945e2a..e2664327841b5 100644 --- a/src/includes/getting-started-next-steps/javascript.mdx +++ b/src/includes/getting-started-next-steps/javascript.mdx @@ -1 +1,11 @@ -- [_integrating with the JavaScript ecosystem_](/platforms/javascript/) +- **[Upload Source Maps](/platforms/javascript/sourcemaps/)** + + We **highly recommend** you incorporate source maps to receive the full benefit of error tracking and monitoring. + +- **[Configure `tracesSampleRate`](/platforms/javascript/configuration/filtering/)** + + The example configuration will transmit 100% of captured transactions; lower this value in production to avoid consuming your quota too quickly. + +- **[Learn More About Performance Monitoring](/product/performance/)** + + Performance monitoring gives your team full-stack visibility to trace slow-loading pages back to its API call as well as surface all related errorsand resolve bottlenecks. diff --git a/src/includes/getting-started-verify/javascript.mdx b/src/includes/getting-started-verify/javascript.mdx index 493faaea459b9..0632059044e1c 100644 --- a/src/includes/getting-started-verify/javascript.mdx +++ b/src/includes/getting-started-verify/javascript.mdx @@ -1,9 +1,3 @@ -One way to verify your setup is by intentionally causing an error that breaks your application. - -Calling an undefined function will throw an exception: - -```js +```javascript myUndefinedFunction(); ``` - -You can verify the function caused an error by checking your browser console. diff --git a/src/platforms/common/usage/index.mdx b/src/platforms/common/usage/index.mdx index 25f6834d3ee4f..665d1de5fd345 100644 --- a/src/platforms/common/usage/index.mdx +++ b/src/platforms/common/usage/index.mdx @@ -7,6 +7,18 @@ description: "Learn more about automatically reporting errors, exceptions, and r Sentry's SDK hooks into your runtime environment and automatically reports errors, exceptions, and rejections. + + +Key terms: + +- An _event_ is one instance of sending data to Sentry. Generally, this data is an error or exception. +- An _issue_ is a grouping of similar events. +- The reporting of an event is called _capturing_. + When an event is captured, it’s sent to Sentry. + + + + The most common form of capturing is to capture errors. What can be captured as an error varies by platform. In general, if you have something that looks like an exception it can be captured. For some SDKs you can also omit the argument to `capture_exception` and Sentry will attempt to capture the current exception. It can also be useful to manually report errors or messages to Sentry. Separately to capturing you can also record the breadcrumbs that lead up to an event. Breadcrumbs are different from events: they will not create an event in Sentry, but will be buffered until the next event is sent. Learn more about breadcrumbs in our [Breadcrumbs documentation](/platforms/javascript/enriching-error-data/breadcrumbs/). diff --git a/src/platforms/javascript/index.mdx b/src/platforms/javascript/index.mdx index 77d068eef9a31..052f27ffa2477 100644 --- a/src/platforms/javascript/index.mdx +++ b/src/platforms/javascript/index.mdx @@ -12,127 +12,46 @@ Using a framework? Take a look at our specific guides to get started. -## Install the Package +## Install -Sentry captures data by using an SDK within your application’s runtime. Add the Sentry SDK to your application: +Sentry captures data by using an SDK within your application’s runtime: -```bash {tabTitle: ESM} -# Using yarn -$ yarn add @sentry/browser + -# Using npm -$ npm install --save @sentry/browser -``` +## Initialize - - - -If prefer to use CDN to install our SDK, please see our documentation for [installing with CDN](/platforms/javascript/installation/cdn). - - - - -## Configure and Verify - -`init` Sentry as soon as possible in your app, to make sure it can monitor everything that follows it. Once this is done, all unhandled exceptions are automatically captured by Sentry. - -The snippet below includes an intentional error, so you can test that everything is working as soon as you set it up. To view and resolve the recorded error, log into [sentry.io](https://sentry.io) and open your project. Clicking on the error's title will open a page where you can see detailed information and mark it as resolved. - -```javascript {tabTitle: ESM} -import * as Sentry from "@sentry/browser"; - -Sentry.init({ dsn: "___PUBLIC_DSN___" }); - -myUndefinedFunction(); // To test your setup -``` - -## Capture Errors - - - -Key terms: - -- An _event_ is one instance of sending data to Sentry. Generally, this data is an error or exception. -- An _issue_ is a grouping of similar events. -- The reporting of an event is called _capturing_. - When an event is captured, it’s sent to Sentry. - - - - -By including and configuring Sentry, our JavaScript SDK automatically attaches global handlers to _capture_ uncaught exceptions and unhandled promise rejections, as described in the official ECMAScript 6 standard. You can disable this default behavior by changing the `onunhandledrejection` option to `false` in your GlobalHandlers integration and manually hook into each event handler, then call `Sentry.captureException` or `Sentry.captureMessage` directly. - -You may also need to manage your configuration if you are using a third-party library to implement promises. Also, remember that browsers often implement security measures that can block error reporting when serving script files from different origins. - -Learn more about how to manually capture errors or enable message capture with Sentry's JavaScript SDK in [Advanced Usage](/platforms/javascript/configuration/capture). - -### Automatically Enrich Error Data - -Events sent by the JavaScript SDK to Sentry are enriched with data that helps identify the source of the event. Much of this data is sent automatically - including the error context and environment - as well as the trail of events that led up to the event, which we call breadcrumbs. You don't need to configure these, though you may modify them. - -Learn more about the data sent to with events in [Event Context](/platforms/javascript/enriching-error-data/additional-data/). - -### Set the Release Version - -When you configure Sentry to include the version of your application, Sentry can tell you about regressions as well as detailed information about the suspect commit. You will also need releases for source maps. - -Use the `process.env.npm_package_version`: +`init` Sentry as soon as possible in your app. Once this is done, all unhandled exceptions are automatically captured by Sentry. -```javascript -Sentry.init({ - dsn: "___PUBLIC_DSN___", - release: "my-project-name@" + process.env.npm_package_version, -}); -``` + -Learn more about what releases can do in [our documentation for releases](/product/releases/). + -### Upload Source Maps +We'll automatically assign you a Data Source Name (DSN), which looks like a standard URL. It's required by Sentry and configures the protocol, public key, server address, and project identifier. If you forget it, view _Settings -> Projects -> Client Keys (DSN)_ in sentry.io. -We **highly recommend** you incorporate source maps to receive the full benefit of error tracking and monitoring. See our [source maps documentation](/platforms/javascript/sourcemaps/) to learn more. + -## Monitor Performance +## Test -Install performance monitoring using Sentry’s JavaScript SDK using both the `@sentry/browser` and `@sentry/tracing` packages: +The snippet below includes an intentional error, so you can test that everything is working as soon as you set it up: -```bash {tabTitle: ESM} -# Using yarn -$ yarn add @sentry/browser @sentry/tracing + -# Using npm -$ npm install --save @sentry/browser @sentry/tracing -``` +To view and resolve the recorded error, log into [sentry.io](https://sentry.io) and open your project. Clicking on the error's title will open a page where you can see detailed information and mark it as resolved. Explore [Performance](/product/performance/) by selecting it from the sidebar, then viewing the homepage. - -If you are using our CDN, please see our documentation for [installing with CDN](/platforms/javascript/installation/install/). - - - -Initialize the integration in your call to `Sentry.init`: - -```javascript {tabTitle: ESM} -import * as Sentry from "@sentry/browser"; -import { Integrations } from "@sentry/tracing"; -Sentry.init({ - dsn: "___PUBLIC_DSN___", - release: "my-project-name@" + process.env.npm_package_version, - integrations: [new Integrations.BrowserTracing()], - tracesSampleRate: 1.0, // Be sure to lower this in production -}); -``` +## Next Steps -Performance data is transmitted using a new event type called “transactions”, which you can learn about in [Distributed Tracing](/product/performance/distributed-tracing/). To capture transactions, install the performance package and configure your SDK to set the `tracesSampleRate` configuration to a nonzero value. The example configuration above will transmit 100% of captured transactions; lower this value in production to avoid consuming your quota too quickly. + -Learn more about sampling in [Filtering Events Reported to Sentry](/platforms/javascript/configuration/filtering). +- **[Learn More About Releases](/product/releases/)** -## Next Steps + Releases help you track regressions introduced in a new release, predict which commit caused an issue, and more. Releases are also used for applying source maps to minified JavaScript to view original, untransformed source code. -- **[Manage Configuration Options](./configuration/)** +- **[Learn More About Configuration Options](./configuration/)** Sentry's JavaScript SDK includes many configuration options that are automatically set. You can configure your SDK using the options outlined in these pages. -- **[Enrich Event Data](./enriching-error-data/additional-data/)** +- **[Enrich Event Data](./enriching-events/)** When your SDK sends an event to Sentry, the event is enriched with data. Learn more about the data that helps identify the source of the event and includes information both pertinent to the event as well as a full picture of what led up to it. @@ -140,7 +59,7 @@ Learn more about sampling in [Filtering Events Reported to Sentry](/platforms/ja Integrations extend the functionality of our JavaScript SDK to cover common libraries and environments automatically. Learn more about our default and pluggable integrations. -- **[Troubleshooting](./troubleshooting/)** +- **[Review Troubleshooting](./troubleshooting/)** If you need help solving issues with Sentry's JavaScript SDK, you can read the edge cases documented here. From 51fba7fd749b973ccd6e5721226294f40981963a Mon Sep 17 00:00:00 2001 From: Fiona Artiaga Date: Tue, 22 Sep 2020 18:12:19 -0700 Subject: [PATCH 02/19] Create common page for Getting Started --- src/includes/framework-list/javascript.mdx | 3 +++ src/platforms/{javascript => common}/index.mdx | 16 ++++++---------- 2 files changed, 9 insertions(+), 10 deletions(-) create mode 100644 src/includes/framework-list/javascript.mdx rename src/platforms/{javascript => common}/index.mdx (67%) diff --git a/src/includes/framework-list/javascript.mdx b/src/includes/framework-list/javascript.mdx new file mode 100644 index 0000000000000..5f1a06cdde85c --- /dev/null +++ b/src/includes/framework-list/javascript.mdx @@ -0,0 +1,3 @@ +Using a framework? Take a look at our specific guides to get started. + + diff --git a/src/platforms/javascript/index.mdx b/src/platforms/common/index.mdx similarity index 67% rename from src/platforms/javascript/index.mdx rename to src/platforms/common/index.mdx index 052f27ffa2477..b7c1b3305ca87 100644 --- a/src/platforms/javascript/index.mdx +++ b/src/platforms/common/index.mdx @@ -1,4 +1,4 @@ -On this page, we get you up and running with Sentry's JavaScript SDK, so that it will automatically report errors and exceptions in your application. +On this page, we get you up and running with Sentry's SDK, so that it will automatically report errors and exceptions in your application. @@ -8,9 +8,7 @@ If you don't already have an account and Sentry project established, head over t -Using a framework? Take a look at our specific guides to get started. - - + ## Install @@ -45,11 +43,11 @@ To view and resolve the recorded error, log into [sentry.io](https://sentry.io) - **[Learn More About Releases](/product/releases/)** - Releases help you track regressions introduced in a new release, predict which commit caused an issue, and more. Releases are also used for applying source maps to minified JavaScript to view original, untransformed source code. + Releases help you track regressions introduced in a new release, predict which commit caused an issue, and more. - **[Learn More About Configuration Options](./configuration/)** - Sentry's JavaScript SDK includes many configuration options that are automatically set. You can configure your SDK using the options outlined in these pages. + Sentry's SDKs include many configuration options that are automatically set. You can configure your SDK using the options outlined in these pages. - **[Enrich Event Data](./enriching-events/)** @@ -57,10 +55,8 @@ To view and resolve the recorded error, log into [sentry.io](https://sentry.io) - **[Review and Manage Integrations](./integrations/)** - Integrations extend the functionality of our JavaScript SDK to cover common libraries and environments automatically. Learn more about our default and pluggable integrations. + Integrations extend the functionality of our SDKs to cover common libraries and environments automatically. Learn more about our default and pluggable integrations. - **[Review Troubleshooting](./troubleshooting/)** - If you need help solving issues with Sentry's JavaScript SDK, you can read the edge cases documented here. - -For a deep dive into our JavaScript SDK, [check out our GitHub repo](https://getsentry.github.io/sentry-javascript/). + If you need help solving issues with Sentry's SDK, you can read the edge cases documented her. From b7d94dd0c90c680777891184060e8583f58006f1 Mon Sep 17 00:00:00 2001 From: Fiona Artiaga Date: Tue, 22 Sep 2020 18:31:26 -0700 Subject: [PATCH 03/19] Add Angular includes and remove Angular getting ststarted index page --- .../getting-started-config/angular.mdx | 100 +++++++++++ .../getting-started-install/angular.mdx | 7 + .../javascript/guides/angular/config.yml | 10 ++ .../javascript/guides/angular/index.mdx | 160 ------------------ 4 files changed, 117 insertions(+), 160 deletions(-) create mode 100644 src/includes/getting-started-config/angular.mdx create mode 100644 src/includes/getting-started-install/angular.mdx create mode 100644 src/platforms/javascript/guides/angular/config.yml delete mode 100644 src/platforms/javascript/guides/angular/index.mdx diff --git a/src/includes/getting-started-config/angular.mdx b/src/includes/getting-started-config/angular.mdx new file mode 100644 index 0000000000000..5cb5e354b5de2 --- /dev/null +++ b/src/includes/getting-started-config/angular.mdx @@ -0,0 +1,100 @@ +This snippet includes our [performance monitoring](/product/performance/) package, which registers and configures the Tracing integration, including custom Angular routing instrumentation: + +```javascript +import { enableProdMode } from "@angular/core"; +import { platformBrowserDynamic } from "@angular/platform-browser-dynamic"; +import * as Sentry from "@sentry/angular"; +import { Integrations } from "@sentry/tracing"; +import { AppModule } from "./app/app.module"; +Sentry.init({ + dsn: "___PUBLIC_DSN___" , + integrations: [ + new Integrations.BrowserTracing({ + tracingOrigins: ["localhost", "https://yourserver.io/api"], + routingInstrumentation: Sentry.routingInstrumentation, + }), + ], + tracesSampleRate: 1.0, // Be sure to lower this in production +enableProdMode(); +platformBrowserDynamic() + .bootstrapModule(AppModule) + .then(success => console.log(`Bootstrap success`)) + .catch(err => console.error(err)); +``` + +You can also configure `@sentry/angular` to catch any Angular-specific exceptions reported through the [@angular/core/ErrorHandler](https://angular.io/api/core/ErrorHandler) provider. + +`@sentry/angular` exports a Trace Service, Directive, and Decorators that leverages the `@sentry/tracing`, Sentry's Tracing integration, to add Angular-related spans to transactions. The service itself tracks route changes and durations, where directive and decorators are tracking component initializations. + +### Automatically Send Errors with `ErrorHandler` + +`@sentry/angular` exports a function to instantiate an `ErrorHandler` provider that will automatically send JavaScript errors captured by the Angular's error handler. + +```javascript +import { NgModule, ErrorHandler } from "@angular/core"; +import * as Sentry from "@sentry/angular"; +@NgModule({ + // ... + providers: [ + { + provide: ErrorHandler, + useValue: Sentry.createErrorHandler({ + showDialog: true, + }), + }, + ], + // ... +}) +export class AppModule {} +``` + +You can configure the behavior of `createErrorHandler`. For more details see the `ErrorHandlerOptions` interface in [our repository](https://github.com/getsentry/sentry-javascript/blob/master/packages/angular/src/errorhandler.ts). + +### Register `TraceService` + +In Angular's DI system, register `TraceService` as a provider with a `Router` as its dependency: + +```javascript +import { NgModule } from "@angular/core"; +import { Router } from "@angular/router"; +import * as Sentry from "@sentry/angular"; +@NgModule({ + // ... + providers: [ + { + provide: Sentry.TraceService, + deps: [Router], + }, + ], + // ... +}) +export class AppModule {} +``` +Then, either require the `TraceService` from inside `AppModule` or use `APP_INITIALIZER` to force instantiate Tracing. +```javascript +@NgModule({ + // ... +}) +export class AppModule { + constructor(trace: Sentry.TraceService) {} +} +``` + +or + +```javascript +import { APP_INITIALIZER } from "@angular/core"; +@NgModule({ + // ... + providers: [ + { + provide: APP_INITIALIZER, + useFactory: () => () => {}, + deps: [Sentry.TraceService], + multi: true, + }, + ], + // ... +}) +export class AppModule {} +``` diff --git a/src/includes/getting-started-install/angular.mdx b/src/includes/getting-started-install/angular.mdx new file mode 100644 index 0000000000000..ebf23b59a47fc --- /dev/null +++ b/src/includes/getting-started-install/angular.mdx @@ -0,0 +1,7 @@ +```bash {tabTitle:npm} +npm install --save @sentry/angular +``` + +```bash {tabTitle:Yarn} +yarn add @sentry/angular +``` diff --git a/src/platforms/javascript/guides/angular/config.yml b/src/platforms/javascript/guides/angular/config.yml new file mode 100644 index 0000000000000..d4830ccbdcc27 --- /dev/null +++ b/src/platforms/javascript/guides/angular/config.yml @@ -0,0 +1,10 @@ +title: Angular +caseStyle: camelCase +supportLevel: production +sdk: "sentry.javascript.browser" +categories: + - browser +redirect_from: + - /clients/javascript/integrations/angular2/ + - /clients/javascript/integrations/angularjs/ + - /platforms/javascript/angular/ diff --git a/src/platforms/javascript/guides/angular/index.mdx b/src/platforms/javascript/guides/angular/index.mdx deleted file mode 100644 index 26e3b58611bc4..0000000000000 --- a/src/platforms/javascript/guides/angular/index.mdx +++ /dev/null @@ -1,160 +0,0 @@ ---- -title: Angular -sdk: "sentry.javascript.angular" -redirect_from: - - /clients/javascript/integrations/angular2/ - - /clients/javascript/integrations/angularjs/ - - /platforms/javascript/angular/ ---- - -On this page, we provide concise information to use Sentry with your Angular application. You will need to use `@sentry/angular` (Sentry’s Browser Angular SDK). - - - -If you don't already have an account and Sentry project established, head over to [sentry.io](https://sentry.io/signup/), then return to this page. - - - -## Install - -Sentry captures data by using an SDK within your application’s runtime. Add the Sentry SDK as a dependency using `yarn` or `npm`: - -```bash {tabTitle:npm} -npm install --save @sentry/angular -``` - -```bash {tabTitle:Yarn} -yarn add @sentry/angular -``` - -## Configure - -`init` the Sentry browser SDK as soon as possible during your application load up, before initializing Angular: - -```javascript -import { enableProdMode } from "@angular/core"; -import { platformBrowserDynamic } from "@angular/platform-browser-dynamic"; -import * as Sentry from "@sentry/angular"; - -import { AppModule } from "./app/app.module"; - -Sentry.init({ dsn: "___PUBLIC_DSN___" }); - -enableProdMode(); -platformBrowserDynamic() - .bootstrapModule(AppModule) - .then(success => console.log(`Bootstrap success`)) - .catch(err => console.error(err)); -``` - -Once this is done, all uncaught exceptions are automatically reported to Sentry. Additionally, you can configure `@sentry/angular` to catch any Angular-specific exceptions reported through the [@angular/core/ErrorHandler](https://angular.io/api/core/ErrorHandler) provider. - -**Important:** Note your DSN. The _DSN_ (Data Source Name) tells the SDK where to send events. If you forget it, view _Settings -> Projects -> Client Keys (DSN)_ in the Sentry web UI. - -### Automatically Send Errors with `ErrorHandler` - -`@sentry/angular` exports a function to instantiate an `ErrorHandler` provider that will automatically send JavaScript errors captured by the Angular's error handler. - -```javascript -import { NgModule, ErrorHandler } from "@angular/core"; -import * as Sentry from "@sentry/angular"; - -@NgModule({ - // ... - providers: [ - { - provide: ErrorHandler, - useValue: Sentry.createErrorHandler({ - showDialog: true, - }), - }, - ], - // ... -}) -export class AppModule {} -``` - -Additionally, `createErrorHandler` accepts a set of options that allows you to configure its behavior. For more details see the `ErrorHandlerOptions` interface in [our repository](https://github.com/getsentry/sentry-javascript/blob/master/packages/angular/src/errorhandler.ts). - -## Monitor Performance - -`@sentry/angular` exports a Trace Service, Directive, and Decorators that leverages the `@sentry/tracing`, Sentry's Tracing integration, to add Angular-related spans to transactions. The service itself tracks route changes and durations, where directive and decorators are tracking component initializations. - - - -If the Tracing integration is not enabled, this functionality will not work. - - - -### Install - -Install a Trace Service with these three steps: - -1. Register and configure the Tracing integration, including custom Angular routing instrumentation: - -```javascript -import * as Sentry from "@sentry/angular"; -import { Integrations } from "@sentry/tracing"; - -Sentry.init({ - dsn: "___PUBLIC_DSN___", - integrations: [ - new Integrations.BrowserTracing({ - tracingOrigins: ["localhost", "https://yourserver.io/api"], - routingInstrumentation: Sentry.routingInstrumentation, - }), - ], - tracesSampleRate: 1.0, // Be sure to lower this in production -}); -``` - -2. Register `TraceService` as a provider in Angular's DI system, with a `Router` as its dependency: - -```javascript -import { NgModule } from "@angular/core"; -import { Router } from "@angular/router"; -import * as Sentry from "@sentry/angular"; - -@NgModule({ - // ... - providers: [ - { - provide: Sentry.TraceService, - deps: [Router], - }, - ], - // ... -}) -export class AppModule {} -``` - -3. Either require the `TraceService` from inside `AppModule` or use `APP_INITIALIZER` to force instantiate Tracing. - -```javascript -@NgModule({ - // ... -}) -export class AppModule { - constructor(trace: Sentry.TraceService) {} -} -``` - -or - -```javascript -import { APP_INITIALIZER } from "@angular/core"; - -@NgModule({ - // ... - providers: [ - { - provide: APP_INITIALIZER, - useFactory: () => () => {}, - deps: [Sentry.TraceService], - multi: true, - }, - ], - // ... -}) -export class AppModule {} -``` From 5851d76c5ecbbb40c52b16aeca20f85fb9ecab40 Mon Sep 17 00:00:00 2001 From: Fiona <61481573+PeloWriter@users.noreply.github.com> Date: Wed, 23 Sep 2020 15:15:25 -0700 Subject: [PATCH 04/19] Update src/platforms/common/usage/index.mdx Co-authored-by: David Cramer --- src/platforms/common/usage/index.mdx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/platforms/common/usage/index.mdx b/src/platforms/common/usage/index.mdx index 665d1de5fd345..8d6de7b766f55 100644 --- a/src/platforms/common/usage/index.mdx +++ b/src/platforms/common/usage/index.mdx @@ -9,6 +9,7 @@ Sentry's SDK hooks into your runtime environment and automatically reports error + Key terms: - An _event_ is one instance of sending data to Sentry. Generally, this data is an error or exception. From ee98e1d31d8d3935a5df596b44eb9176ab9ebb50 Mon Sep 17 00:00:00 2001 From: David Cramer Date: Wed, 23 Sep 2020 14:59:46 -0700 Subject: [PATCH 05/19] fix: Dont error in GuideGrid when using a guide itself --- src/components/guideGrid.tsx | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/components/guideGrid.tsx b/src/components/guideGrid.tsx index d94b4db1bb2d4..7ba66415789e9 100644 --- a/src/components/guideGrid.tsx +++ b/src/components/guideGrid.tsx @@ -10,6 +10,10 @@ type Props = { export default ({ platform }: Props): JSX.Element => { const currentPlatform = getPlatform(platform) as Platform; + // platform might actually not be a platform, so lets handle that case gracefully + if (!currentPlatform.guides) { + return null; + } return (
    From d4632afd5fa965b479624769f8ef40a26e05da10 Mon Sep 17 00:00:00 2001 From: Fiona Artiaga Date: Thu, 24 Sep 2020 09:02:36 -0700 Subject: [PATCH 06/19] create test content, apply code review comments --- src/includes/framework-list/_default.mdx | 1 + src/includes/getting-started-next-steps/angular.mdx | 11 +++++++++++ src/includes/getting-started-verify/angular.mdx | 1 + src/platforms/common/index.mdx | 2 +- 4 files changed, 14 insertions(+), 1 deletion(-) create mode 100644 src/includes/framework-list/_default.mdx create mode 100644 src/includes/getting-started-next-steps/angular.mdx create mode 100644 src/includes/getting-started-verify/angular.mdx diff --git a/src/includes/framework-list/_default.mdx b/src/includes/framework-list/_default.mdx new file mode 100644 index 0000000000000..8bd9093e2d966 --- /dev/null +++ b/src/includes/framework-list/_default.mdx @@ -0,0 +1 @@ + diff --git a/src/includes/getting-started-next-steps/angular.mdx b/src/includes/getting-started-next-steps/angular.mdx new file mode 100644 index 0000000000000..e2664327841b5 --- /dev/null +++ b/src/includes/getting-started-next-steps/angular.mdx @@ -0,0 +1,11 @@ +- **[Upload Source Maps](/platforms/javascript/sourcemaps/)** + + We **highly recommend** you incorporate source maps to receive the full benefit of error tracking and monitoring. + +- **[Configure `tracesSampleRate`](/platforms/javascript/configuration/filtering/)** + + The example configuration will transmit 100% of captured transactions; lower this value in production to avoid consuming your quota too quickly. + +- **[Learn More About Performance Monitoring](/product/performance/)** + + Performance monitoring gives your team full-stack visibility to trace slow-loading pages back to its API call as well as surface all related errorsand resolve bottlenecks. diff --git a/src/includes/getting-started-verify/angular.mdx b/src/includes/getting-started-verify/angular.mdx new file mode 100644 index 0000000000000..d670460b4b4ae --- /dev/null +++ b/src/includes/getting-started-verify/angular.mdx @@ -0,0 +1 @@ +test content diff --git a/src/platforms/common/index.mdx b/src/platforms/common/index.mdx index b7c1b3305ca87..08925fb90b98e 100644 --- a/src/platforms/common/index.mdx +++ b/src/platforms/common/index.mdx @@ -28,7 +28,7 @@ We'll automatically assign you a Data Source Name (DSN), which looks like a stan -## Test +## Verify The snippet below includes an intentional error, so you can test that everything is working as soon as you set it up: From 0d602ef90f851b0ba4869721011f972e4e5bcbc2 Mon Sep 17 00:00:00 2001 From: Fiona Artiaga Date: Thu, 24 Sep 2020 12:29:29 -0700 Subject: [PATCH 07/19] update angular includes --- .../{angular.mdx => javascript.angular.mdx} | 0 .../{angular.mdx => javascript.angular.mdx} | 0 .../{angular.mdx => javascript.angular.mdx} | 0 .../{angular.mdx => javascript.angular.mdx} | 0 4 files changed, 0 insertions(+), 0 deletions(-) rename src/includes/getting-started-config/{angular.mdx => javascript.angular.mdx} (100%) rename src/includes/getting-started-install/{angular.mdx => javascript.angular.mdx} (100%) rename src/includes/getting-started-next-steps/{angular.mdx => javascript.angular.mdx} (100%) rename src/includes/getting-started-verify/{angular.mdx => javascript.angular.mdx} (100%) diff --git a/src/includes/getting-started-config/angular.mdx b/src/includes/getting-started-config/javascript.angular.mdx similarity index 100% rename from src/includes/getting-started-config/angular.mdx rename to src/includes/getting-started-config/javascript.angular.mdx diff --git a/src/includes/getting-started-install/angular.mdx b/src/includes/getting-started-install/javascript.angular.mdx similarity index 100% rename from src/includes/getting-started-install/angular.mdx rename to src/includes/getting-started-install/javascript.angular.mdx diff --git a/src/includes/getting-started-next-steps/angular.mdx b/src/includes/getting-started-next-steps/javascript.angular.mdx similarity index 100% rename from src/includes/getting-started-next-steps/angular.mdx rename to src/includes/getting-started-next-steps/javascript.angular.mdx diff --git a/src/includes/getting-started-verify/angular.mdx b/src/includes/getting-started-verify/javascript.angular.mdx similarity index 100% rename from src/includes/getting-started-verify/angular.mdx rename to src/includes/getting-started-verify/javascript.angular.mdx From 9300fe388725d4dbacf1fbcbd8f5e4954e7b6f9e Mon Sep 17 00:00:00 2001 From: Fiona Artiaga Date: Thu, 24 Sep 2020 14:20:41 -0700 Subject: [PATCH 08/19] move content into troubleshooting --- src/includes/capture-error/javascript.mdx | 4 ---- src/platforms/javascript/common/troubleshooting/index.mdx | 6 ++++++ 2 files changed, 6 insertions(+), 4 deletions(-) diff --git a/src/includes/capture-error/javascript.mdx b/src/includes/capture-error/javascript.mdx index 5837790a6a985..67920ef347725 100644 --- a/src/includes/capture-error/javascript.mdx +++ b/src/includes/capture-error/javascript.mdx @@ -1,7 +1,3 @@ -By including and configuring Sentry, our JavaScript SDK automatically attaches global handlers to _capture_ uncaught exceptions and unhandled promise rejections, as described in the official ECMAScript 6 standard. You can disable this default behavior by changing the `onunhandledrejection` option to `false` in your GlobalHandlers integration and manually hook into each event handler, then call `Sentry.captureException` or `Sentry.captureMessage` directly. - -You may also need to manage your configuration if you are using a third-party library to implement promises. Also, remember that browsers often implement security measures that can block error reporting when serving script files from different origins. - In JavaScript you can pass an error object to `captureException()` to get it captured as event. It's possible to throw strings as errors in which case no traceback can be recorded. diff --git a/src/platforms/javascript/common/troubleshooting/index.mdx b/src/platforms/javascript/common/troubleshooting/index.mdx index 337ecd4f85c8f..3d8336d29da5d 100644 --- a/src/platforms/javascript/common/troubleshooting/index.mdx +++ b/src/platforms/javascript/common/troubleshooting/index.mdx @@ -221,3 +221,9 @@ hub2.run(currentHub => { }); }); ``` + +### Third Party Promise Libraries + +When you include and configure Sentry, our JavaScript SDK automatically attaches global handlers to _capture_ uncaught exceptions and unhandled promise rejections. You can disable this default behavior by changing the `onunhandledrejection` option to `false` in your GlobalHandlers integration and manually hook into each event handler, then call `Sentry.captureException` or `Sentry.captureMessage` directly. + +You may also need to manage your configuration if you are using a third-party library to implement promises. Also, remember that browsers often implement security measures that can block error reporting when serving script files from different origins. From 560580a700f948cc402a025a503ff13593983a09 Mon Sep 17 00:00:00 2001 From: Fiona <61481573+PeloWriter@users.noreply.github.com> Date: Fri, 25 Sep 2020 08:57:20 -0700 Subject: [PATCH 09/19] Update src/includes/getting-started-config/javascript.angular.mdx Co-authored-by: Daniel Griesser --- .../getting-started-config/javascript.angular.mdx | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/src/includes/getting-started-config/javascript.angular.mdx b/src/includes/getting-started-config/javascript.angular.mdx index 5cb5e354b5de2..6852406a614b1 100644 --- a/src/includes/getting-started-config/javascript.angular.mdx +++ b/src/includes/getting-started-config/javascript.angular.mdx @@ -6,6 +6,7 @@ import { platformBrowserDynamic } from "@angular/platform-browser-dynamic"; import * as Sentry from "@sentry/angular"; import { Integrations } from "@sentry/tracing"; import { AppModule } from "./app/app.module"; + Sentry.init({ dsn: "___PUBLIC_DSN___" , integrations: [ @@ -15,12 +16,17 @@ Sentry.init({ }), ], tracesSampleRate: 1.0, // Be sure to lower this in production -enableProdMode(); +}); + +if (environment.production) { + enableProdMode(); +} + platformBrowserDynamic() .bootstrapModule(AppModule) .then(success => console.log(`Bootstrap success`)) .catch(err => console.error(err)); -``` + You can also configure `@sentry/angular` to catch any Angular-specific exceptions reported through the [@angular/core/ErrorHandler](https://angular.io/api/core/ErrorHandler) provider. From bf5e9b2d11fb994bbe0f48a4d7a6cc05610d1143 Mon Sep 17 00:00:00 2001 From: Fiona Artiaga Date: Fri, 25 Sep 2020 09:25:38 -0700 Subject: [PATCH 10/19] fix heading --- src/platforms/javascript/common/troubleshooting/index.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/platforms/javascript/common/troubleshooting/index.mdx b/src/platforms/javascript/common/troubleshooting/index.mdx index 3d8336d29da5d..1f3cd65048a95 100644 --- a/src/platforms/javascript/common/troubleshooting/index.mdx +++ b/src/platforms/javascript/common/troubleshooting/index.mdx @@ -222,7 +222,7 @@ hub2.run(currentHub => { }); ``` -### Third Party Promise Libraries +## Third Party Promise Libraries When you include and configure Sentry, our JavaScript SDK automatically attaches global handlers to _capture_ uncaught exceptions and unhandled promise rejections. You can disable this default behavior by changing the `onunhandledrejection` option to `false` in your GlobalHandlers integration and manually hook into each event handler, then call `Sentry.captureException` or `Sentry.captureMessage` directly. From 857d1121d815505df44c4daae4b041a314f59480 Mon Sep 17 00:00:00 2001 From: Fiona Artiaga Date: Mon, 28 Sep 2020 17:27:49 -0700 Subject: [PATCH 11/19] Create tabs to allow selection of errors or errors and performance --- .../getting-started-config/javascript.mdx | 16 ++++++++++++---- .../getting-started-install/javascript.mdx | 10 +++++++++- .../getting-started-verify/javascript.mdx | 6 +++++- 3 files changed, 26 insertions(+), 6 deletions(-) diff --git a/src/includes/getting-started-config/javascript.mdx b/src/includes/getting-started-config/javascript.mdx index 1c8f80c23634f..6e9b75a15fdfe 100644 --- a/src/includes/getting-started-config/javascript.mdx +++ b/src/includes/getting-started-config/javascript.mdx @@ -1,14 +1,22 @@ This snippet includes: -- the [release](/product/releases/) of your application, using `process.env.npm_package_version`, which both enables [source maps](/platforms/javascript/sourcemaps/) as well as tracking of regressions and suspect commits. -- our [performance monitoring](/product/performance/) package. +- the [release](/product/releases/) of your application, using `process.env.npm_package_version`, which both enables [source maps](/platforms/javascript/sourcemaps/) and tracking of regressions as well as suspect commits. +- our [performance monitoring](/product/performance/) package, if you select the tab to instrument both error and performance monitoring. -```javascript {tabTitle: ESM} +```javascript {tabTitle: ESM Errors} +import * as Sentry from "@sentry/browser"; +Sentry.init({ + dsn: "___PUBLIC_DSN___", + release: "my-project-name@" + process.env.npm_package_version, // To set your release version +}); +``` + +```javascript {tabTitle: ESM Errors and Performance} import * as Sentry from "@sentry/browser"; import { Integrations } from "@sentry/tracing"; Sentry.init({ dsn: "___PUBLIC_DSN___", release: "my-project-name@" + process.env.npm_package_version, // To set your release version integrations: [new Integrations.BrowserTracing()], - tracesSampleRate: 1.0, // Remember to lower this in production + tracesSampleRate: 1.0, // We recommend adjusting this in production }); ``` diff --git a/src/includes/getting-started-install/javascript.mdx b/src/includes/getting-started-install/javascript.mdx index f8da6f974bca8..f4d9a6982d584 100644 --- a/src/includes/getting-started-install/javascript.mdx +++ b/src/includes/getting-started-install/javascript.mdx @@ -1,9 +1,17 @@ -```bash {tabTitle: ESM} +```bash {tabTitle: ESM Errors} +# Using yarn +$ yarn add @sentry/browser +# Using npm +$ npm install --save @sentry/browser +``` + +```bash {tabTitle: ESM Errors and Performance} # Using yarn $ yarn add @sentry/browser @sentry/tracing # Using npm $ npm install --save @sentry/browser @sentry/tracing ``` + diff --git a/src/includes/getting-started-verify/javascript.mdx b/src/includes/getting-started-verify/javascript.mdx index 0632059044e1c..37e0f802a6ded 100644 --- a/src/includes/getting-started-verify/javascript.mdx +++ b/src/includes/getting-started-verify/javascript.mdx @@ -1,3 +1,7 @@ -```javascript +```javascript {tabTitle: ESM Errors} myUndefinedFunction(); ``` + +```javascript {tabTitle: ESM Errors and Performance} +TBD +``` From b0173d317a8a87e03438f2927a7702fd53c9ce6c Mon Sep 17 00:00:00 2001 From: Fiona Artiaga Date: Mon, 28 Sep 2020 17:54:18 -0700 Subject: [PATCH 12/19] Add sample rate configuration note --- src/includes/getting-started-config/javascript.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/includes/getting-started-config/javascript.mdx b/src/includes/getting-started-config/javascript.mdx index 6e9b75a15fdfe..22fbaea36bc8b 100644 --- a/src/includes/getting-started-config/javascript.mdx +++ b/src/includes/getting-started-config/javascript.mdx @@ -1,6 +1,6 @@ This snippet includes: - the [release](/product/releases/) of your application, using `process.env.npm_package_version`, which both enables [source maps](/platforms/javascript/sourcemaps/) and tracking of regressions as well as suspect commits. -- our [performance monitoring](/product/performance/) package, if you select the tab to instrument both error and performance monitoring. +- if you select the tab to instrument both our error and [performance monitoring](/product/performance/) packages, the configuration captures both error and performance data. **Note:** To reduce the volume of performance data captured, or disable it entirely, change `tracesSampleRate` to a value between 0 and 1. ```javascript {tabTitle: ESM Errors} import * as Sentry from "@sentry/browser"; From 5a4f573ef5d19c39c092e5d3fe3570aab2e64f24 Mon Sep 17 00:00:00 2001 From: Fiona Artiaga Date: Mon, 28 Sep 2020 17:57:32 -0700 Subject: [PATCH 13/19] update configuration of sample rate --- src/includes/getting-started-next-steps/javascript.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/includes/getting-started-next-steps/javascript.mdx b/src/includes/getting-started-next-steps/javascript.mdx index e2664327841b5..79c5be0b4801e 100644 --- a/src/includes/getting-started-next-steps/javascript.mdx +++ b/src/includes/getting-started-next-steps/javascript.mdx @@ -4,7 +4,7 @@ - **[Configure `tracesSampleRate`](/platforms/javascript/configuration/filtering/)** - The example configuration will transmit 100% of captured transactions; lower this value in production to avoid consuming your quota too quickly. + Learn how to reduce the volume of performance data captured, or disable it entirely, by changing `tracesSampleRate` to a value between 0 and 1. - **[Learn More About Performance Monitoring](/product/performance/)** From ca38199c63dab39bcc0a52bf555bebb72b043061 Mon Sep 17 00:00:00 2001 From: Fiona Artiaga Date: Mon, 28 Sep 2020 18:56:07 -0700 Subject: [PATCH 14/19] Remove tab idea as the design won't scale --- src/includes/getting-started-config/javascript.mdx | 12 ++---------- src/includes/getting-started-install/javascript.mdx | 9 +-------- src/includes/getting-started-verify/javascript.mdx | 6 +----- 3 files changed, 4 insertions(+), 23 deletions(-) diff --git a/src/includes/getting-started-config/javascript.mdx b/src/includes/getting-started-config/javascript.mdx index 22fbaea36bc8b..672be9c02e4e9 100644 --- a/src/includes/getting-started-config/javascript.mdx +++ b/src/includes/getting-started-config/javascript.mdx @@ -1,16 +1,8 @@ This snippet includes: - the [release](/product/releases/) of your application, using `process.env.npm_package_version`, which both enables [source maps](/platforms/javascript/sourcemaps/) and tracking of regressions as well as suspect commits. -- if you select the tab to instrument both our error and [performance monitoring](/product/performance/) packages, the configuration captures both error and performance data. **Note:** To reduce the volume of performance data captured, or disable it entirely, change `tracesSampleRate` to a value between 0 and 1. +- our [performance monitoring](/product/performance/) package, which captures performance data. **Note:** To reduce the volume of performance data captured, or disable it entirely, change `tracesSampleRate` to a value between 0 and 1. -```javascript {tabTitle: ESM Errors} -import * as Sentry from "@sentry/browser"; -Sentry.init({ - dsn: "___PUBLIC_DSN___", - release: "my-project-name@" + process.env.npm_package_version, // To set your release version -}); -``` - -```javascript {tabTitle: ESM Errors and Performance} +```javascript {tabTitle: ESM} import * as Sentry from "@sentry/browser"; import { Integrations } from "@sentry/tracing"; Sentry.init({ diff --git a/src/includes/getting-started-install/javascript.mdx b/src/includes/getting-started-install/javascript.mdx index f4d9a6982d584..59b87cc920e1b 100644 --- a/src/includes/getting-started-install/javascript.mdx +++ b/src/includes/getting-started-install/javascript.mdx @@ -1,17 +1,10 @@ -```bash {tabTitle: ESM Errors} +```bash {tabTitle: ESM} # Using yarn $ yarn add @sentry/browser # Using npm $ npm install --save @sentry/browser ``` -```bash {tabTitle: ESM Errors and Performance} -# Using yarn -$ yarn add @sentry/browser @sentry/tracing -# Using npm -$ npm install --save @sentry/browser @sentry/tracing -``` - diff --git a/src/includes/getting-started-verify/javascript.mdx b/src/includes/getting-started-verify/javascript.mdx index 37e0f802a6ded..8a69e417ed88b 100644 --- a/src/includes/getting-started-verify/javascript.mdx +++ b/src/includes/getting-started-verify/javascript.mdx @@ -1,7 +1,3 @@ -```javascript {tabTitle: ESM Errors} +```javascript {tabTitle: ESM} myUndefinedFunction(); ``` - -```javascript {tabTitle: ESM Errors and Performance} -TBD -``` From 1bffcb58ac76f0e39e653ed0d2450a01f706958f Mon Sep 17 00:00:00 2001 From: Daniel Griesser Date: Tue, 29 Sep 2020 10:10:11 +0200 Subject: [PATCH 15/19] fix: Angular verify --- .../getting-started-config/javascript.angular.mdx | 4 +++- .../getting-started-verify/javascript.angular.mdx | 8 +++++++- src/includes/getting-started-verify/javascript.mdx | 2 +- 3 files changed, 11 insertions(+), 3 deletions(-) diff --git a/src/includes/getting-started-config/javascript.angular.mdx b/src/includes/getting-started-config/javascript.angular.mdx index 6852406a614b1..060f8baaf92eb 100644 --- a/src/includes/getting-started-config/javascript.angular.mdx +++ b/src/includes/getting-started-config/javascript.angular.mdx @@ -26,7 +26,7 @@ platformBrowserDynamic() .bootstrapModule(AppModule) .then(success => console.log(`Bootstrap success`)) .catch(err => console.error(err)); - +``` You can also configure `@sentry/angular` to catch any Angular-specific exceptions reported through the [@angular/core/ErrorHandler](https://angular.io/api/core/ErrorHandler) provider. @@ -39,6 +39,7 @@ You can also configure `@sentry/angular` to catch any Angular-specific exception ```javascript import { NgModule, ErrorHandler } from "@angular/core"; import * as Sentry from "@sentry/angular"; + @NgModule({ // ... providers: [ @@ -64,6 +65,7 @@ In Angular's DI system, register `TraceService` as a provider with a `Router` as import { NgModule } from "@angular/core"; import { Router } from "@angular/router"; import * as Sentry from "@sentry/angular"; + @NgModule({ // ... providers: [ diff --git a/src/includes/getting-started-verify/javascript.angular.mdx b/src/includes/getting-started-verify/javascript.angular.mdx index d670460b4b4ae..a767ab4bc992f 100644 --- a/src/includes/getting-started-verify/javascript.angular.mdx +++ b/src/includes/getting-started-verify/javascript.angular.mdx @@ -1 +1,7 @@ -test content +One way to verify your setup is by intentionally causing an error that breaks your application. + +Calling an undefined function will throw an exception: + +```js +myUndefinedFunction(); +``` \ No newline at end of file diff --git a/src/includes/getting-started-verify/javascript.mdx b/src/includes/getting-started-verify/javascript.mdx index 8a69e417ed88b..0632059044e1c 100644 --- a/src/includes/getting-started-verify/javascript.mdx +++ b/src/includes/getting-started-verify/javascript.mdx @@ -1,3 +1,3 @@ -```javascript {tabTitle: ESM} +```javascript myUndefinedFunction(); ``` From afa5a539d8c5acebf934d2c708aeaf72b1c46ca9 Mon Sep 17 00:00:00 2001 From: Fiona Artiaga Date: Tue, 29 Sep 2020 13:14:34 -0700 Subject: [PATCH 16/19] edits to clarify --- src/includes/getting-started-config/javascript.angular.mdx | 6 ++++-- src/includes/getting-started-config/javascript.mdx | 4 ++-- src/includes/getting-started-install/javascript.mdx | 6 +++--- src/includes/getting-started-verify/javascript.angular.mdx | 4 ++-- src/platforms/common/index.mdx | 6 +++--- 5 files changed, 14 insertions(+), 12 deletions(-) diff --git a/src/includes/getting-started-config/javascript.angular.mdx b/src/includes/getting-started-config/javascript.angular.mdx index 060f8baaf92eb..27443770b351e 100644 --- a/src/includes/getting-started-config/javascript.angular.mdx +++ b/src/includes/getting-started-config/javascript.angular.mdx @@ -1,4 +1,6 @@ -This snippet includes our [performance monitoring](/product/performance/) package, which registers and configures the Tracing integration, including custom Angular routing instrumentation: +This snippet includes automatic instrumentation to [monitor the performance](/platforms/javascript/performance/) of your application, which registers and configures the Tracing integration, including custom Angular routing instrumentation. + +**Note:** To reduce the volume of performance data captured, or disable it entirely, change `tracesSampleRate` to a value between 0 and 1 in production. ```javascript import { enableProdMode } from "@angular/core"; @@ -15,7 +17,7 @@ Sentry.init({ routingInstrumentation: Sentry.routingInstrumentation, }), ], - tracesSampleRate: 1.0, // Be sure to lower this in production + tracesSampleRate: 1.0, // We recommend adjusting this in production }); if (environment.production) { diff --git a/src/includes/getting-started-config/javascript.mdx b/src/includes/getting-started-config/javascript.mdx index 672be9c02e4e9..1e3ed32e5cce2 100644 --- a/src/includes/getting-started-config/javascript.mdx +++ b/src/includes/getting-started-config/javascript.mdx @@ -1,6 +1,6 @@ This snippet includes: -- the [release](/product/releases/) of your application, using `process.env.npm_package_version`, which both enables [source maps](/platforms/javascript/sourcemaps/) and tracking of regressions as well as suspect commits. -- our [performance monitoring](/product/performance/) package, which captures performance data. **Note:** To reduce the volume of performance data captured, or disable it entirely, change `tracesSampleRate` to a value between 0 and 1. +- The [release](/product/releases/) of your application, using `process.env.npm_package_version`, which enables both [source maps](/platforms/javascript/sourcemaps/) and tracking of regressions and suspect commits. +- Automatic instrumentation to [monitor the performance](/platforms/javascript/performance/) of browser applications. **Note:** To reduce the volume of performance data captured, or disable it entirely, change `tracesSampleRate` to a value between 0 and 1 in production. ```javascript {tabTitle: ESM} import * as Sentry from "@sentry/browser"; diff --git a/src/includes/getting-started-install/javascript.mdx b/src/includes/getting-started-install/javascript.mdx index 59b87cc920e1b..81e9105315442 100644 --- a/src/includes/getting-started-install/javascript.mdx +++ b/src/includes/getting-started-install/javascript.mdx @@ -1,14 +1,14 @@ ```bash {tabTitle: ESM} # Using yarn -$ yarn add @sentry/browser +$ yarn add @sentry/browser @sentry/tracing # Using npm -$ npm install --save @sentry/browser +$ npm install --save @sentry/browser @sentry/tracing ``` -If prefer to use CDN to install our SDK, please see our documentation for [installing with CDN](/platforms/javascript/installation/cdn). +We also support alternate [installation methods](/platforms/javascript/install/). diff --git a/src/includes/getting-started-verify/javascript.angular.mdx b/src/includes/getting-started-verify/javascript.angular.mdx index a767ab4bc992f..472e54d9b83a2 100644 --- a/src/includes/getting-started-verify/javascript.angular.mdx +++ b/src/includes/getting-started-verify/javascript.angular.mdx @@ -2,6 +2,6 @@ One way to verify your setup is by intentionally causing an error that breaks yo Calling an undefined function will throw an exception: -```js +```javascript myUndefinedFunction(); -``` \ No newline at end of file +``` diff --git a/src/platforms/common/index.mdx b/src/platforms/common/index.mdx index 08925fb90b98e..f8ddb52def6c6 100644 --- a/src/platforms/common/index.mdx +++ b/src/platforms/common/index.mdx @@ -18,7 +18,7 @@ Sentry captures data by using an SDK within your application’s runtime: ## Initialize -`init` Sentry as soon as possible in your app. Once this is done, all unhandled exceptions are automatically captured by Sentry. +`init` Sentry as soon as possible in your app. Once this is done, the Sentry SDK captures all unhandled exceptions. @@ -30,11 +30,11 @@ We'll automatically assign you a Data Source Name (DSN), which looks like a stan ## Verify -The snippet below includes an intentional error, so you can test that everything is working as soon as you set it up: +This snippet includes an intentional error, so you can test that everything is working as soon as you set it up: -To view and resolve the recorded error, log into [sentry.io](https://sentry.io) and open your project. Clicking on the error's title will open a page where you can see detailed information and mark it as resolved. Explore [Performance](/product/performance/) by selecting it from the sidebar, then viewing the homepage. +To view and resolve the recorded error, log into [sentry.io](https://sentry.io) and open your project. Clicking on the error's title will open a page where you can see detailed information and mark it as resolved. ## Next Steps From 9042cb44e173dfbb462c06a535633d504fe08e0a Mon Sep 17 00:00:00 2001 From: Fiona Artiaga Date: Tue, 29 Sep 2020 14:39:31 -0700 Subject: [PATCH 17/19] edits to enable next step page display --- .../javascript.angular.mdx | 4 --- src/platforms/common/index.mdx | 25 +------------------ .../javascript/common/install/index.mdx | 1 + .../javascript/common/integrations/index.mdx | 1 + .../javascript/common/performance/index.mdx | 2 +- .../common/troubleshooting/index.mdx | 1 + .../javascript/guides/angular/angular1.mdx | 1 + .../guides/angular/components/index.mdx | 3 ++- 8 files changed, 8 insertions(+), 30 deletions(-) diff --git a/src/includes/getting-started-verify/javascript.angular.mdx b/src/includes/getting-started-verify/javascript.angular.mdx index 472e54d9b83a2..0632059044e1c 100644 --- a/src/includes/getting-started-verify/javascript.angular.mdx +++ b/src/includes/getting-started-verify/javascript.angular.mdx @@ -1,7 +1,3 @@ -One way to verify your setup is by intentionally causing an error that breaks your application. - -Calling an undefined function will throw an exception: - ```javascript myUndefinedFunction(); ``` diff --git a/src/platforms/common/index.mdx b/src/platforms/common/index.mdx index f8ddb52def6c6..75e1ae7b38882 100644 --- a/src/platforms/common/index.mdx +++ b/src/platforms/common/index.mdx @@ -36,27 +36,4 @@ This snippet includes an intentional error, so you can test that everything is w To view and resolve the recorded error, log into [sentry.io](https://sentry.io) and open your project. Clicking on the error's title will open a page where you can see detailed information and mark it as resolved. - -## Next Steps - - - -- **[Learn More About Releases](/product/releases/)** - - Releases help you track regressions introduced in a new release, predict which commit caused an issue, and more. - -- **[Learn More About Configuration Options](./configuration/)** - - Sentry's SDKs include many configuration options that are automatically set. You can configure your SDK using the options outlined in these pages. - -- **[Enrich Event Data](./enriching-events/)** - - When your SDK sends an event to Sentry, the event is enriched with data. Learn more about the data that helps identify the source of the event and includes information both pertinent to the event as well as a full picture of what led up to it. - -- **[Review and Manage Integrations](./integrations/)** - - Integrations extend the functionality of our SDKs to cover common libraries and environments automatically. Learn more about our default and pluggable integrations. - -- **[Review Troubleshooting](./troubleshooting/)** - - If you need help solving issues with Sentry's SDK, you can read the edge cases documented her. + diff --git a/src/platforms/javascript/common/install/index.mdx b/src/platforms/javascript/common/install/index.mdx index 5d2beca8decf1..9fe5f0e83e9d9 100644 --- a/src/platforms/javascript/common/install/index.mdx +++ b/src/platforms/javascript/common/install/index.mdx @@ -1,6 +1,7 @@ --- title: Installation Methods sidebar_order: 1 +description: "Review our alternate installation methods." --- diff --git a/src/platforms/javascript/common/integrations/index.mdx b/src/platforms/javascript/common/integrations/index.mdx index 729220db7305b..4a45bccee779d 100644 --- a/src/platforms/javascript/common/integrations/index.mdx +++ b/src/platforms/javascript/common/integrations/index.mdx @@ -1,6 +1,7 @@ --- title: Integrations sidebar_order: 200 +description: "Learn more about how integrations extend the functionality of our SDK to cover common libraries and environments automatically." --- diff --git a/src/platforms/javascript/common/performance/index.mdx b/src/platforms/javascript/common/performance/index.mdx index 35ce2c3e5d3b7..46c24a46eb5e6 100644 --- a/src/platforms/javascript/common/performance/index.mdx +++ b/src/platforms/javascript/common/performance/index.mdx @@ -1,7 +1,7 @@ --- title: Performance Monitoring sidebar_order: 20 -description: "Learn more about how to configure our Performance integrations to get the best experience out of it." +description: "Learn more about configuring Performance Monitoring to suit the needs of your organization." redirect_from: - /platforms/javascript/performance/apm-to-tracing/ --- diff --git a/src/platforms/javascript/common/troubleshooting/index.mdx b/src/platforms/javascript/common/troubleshooting/index.mdx index 1f3cd65048a95..0059815f4d5d3 100644 --- a/src/platforms/javascript/common/troubleshooting/index.mdx +++ b/src/platforms/javascript/common/troubleshooting/index.mdx @@ -1,5 +1,6 @@ --- title: Troubleshooting +description: "Troubleshoot and resolve edge cases." excerpt: "" sidebar_order: 1000 --- diff --git a/src/platforms/javascript/guides/angular/angular1.mdx b/src/platforms/javascript/guides/angular/angular1.mdx index e22a9f34df64b..ec8645aa136fb 100644 --- a/src/platforms/javascript/guides/angular/angular1.mdx +++ b/src/platforms/javascript/guides/angular/angular1.mdx @@ -1,5 +1,6 @@ --- title: AngularJS 1.x +description: "Learn how to use Sentry's AngularJS integration if you're using AngularJS 1.x." redirect_from: - /clients/javascript/integrations/angular/ --- diff --git a/src/platforms/javascript/guides/angular/components/index.mdx b/src/platforms/javascript/guides/angular/components/index.mdx index bd01cfbcbc340..6d58d53aaa5ef 100644 --- a/src/platforms/javascript/guides/angular/components/index.mdx +++ b/src/platforms/javascript/guides/angular/components/index.mdx @@ -1,9 +1,10 @@ --- title: Components +description: "Learn more about how to track Angular components as part of your transactions." excerpt: "" --- -The Sentry React SDK exposes custom components for first class integration with the React framework. +The Sentry SDK exposes custom components for first class integration with the framework. - **[Trace Helpers](./tracehelpers/)** From 15ace5226577107a9638f86980ccc4b0b68ec30a Mon Sep 17 00:00:00 2001 From: Fiona Artiaga Date: Tue, 29 Sep 2020 17:51:05 -0700 Subject: [PATCH 18/19] edits from review --- src/includes/capture-error/javascript.mdx | 2 +- src/includes/getting-started-config/javascript.mdx | 14 +++++++++++--- .../javascript.angular.mdx | 11 ----------- .../getting-started-next-steps/javascript.mdx | 11 ----------- .../getting-started-verify/javascript.angular.mdx | 3 --- src/platforms/common/index.mdx | 4 ++-- src/platforms/javascript/guides/angular/config.yml | 3 --- 7 files changed, 14 insertions(+), 34 deletions(-) delete mode 100644 src/includes/getting-started-next-steps/javascript.angular.mdx delete mode 100644 src/includes/getting-started-next-steps/javascript.mdx delete mode 100644 src/includes/getting-started-verify/javascript.angular.mdx diff --git a/src/includes/capture-error/javascript.mdx b/src/includes/capture-error/javascript.mdx index 67920ef347725..80ca454ce665b 100644 --- a/src/includes/capture-error/javascript.mdx +++ b/src/includes/capture-error/javascript.mdx @@ -10,4 +10,4 @@ try { } ``` -Learn more about how to manually capture errors or enable message capture with Sentry's JavaScript SDK in [our documentation on Usage](/platforms/javascript/usage/). +Learn more about how to manually capture errors or enable message capture with Sentry's SDK in our documentation on Usage. diff --git a/src/includes/getting-started-config/javascript.mdx b/src/includes/getting-started-config/javascript.mdx index 1e3ed32e5cce2..ad3282c63b589 100644 --- a/src/includes/getting-started-config/javascript.mdx +++ b/src/includes/getting-started-config/javascript.mdx @@ -1,6 +1,14 @@ -This snippet includes: -- The [release](/product/releases/) of your application, using `process.env.npm_package_version`, which enables both [source maps](/platforms/javascript/sourcemaps/) and tracking of regressions and suspect commits. -- Automatic instrumentation to [monitor the performance](/platforms/javascript/performance/) of browser applications. **Note:** To reduce the volume of performance data captured, or disable it entirely, change `tracesSampleRate` to a value between 0 and 1 in production. +This snippet: +- Uses `process.env.npm_package_version` to configure the version of your application. Learn more about [releases](/product/releases/) and how they are used with [source maps](/platforms/javascript/sourcemaps/). +- Instruments your SDK to [monitor the performance](/platforms/javascript/performance/) of browser applications. + + + + +To reduce the volume of performance data captured, or disable it entirely, change `tracesSampleRate` to a value between 0 and 1 in production. + + + ```javascript {tabTitle: ESM} import * as Sentry from "@sentry/browser"; diff --git a/src/includes/getting-started-next-steps/javascript.angular.mdx b/src/includes/getting-started-next-steps/javascript.angular.mdx deleted file mode 100644 index e2664327841b5..0000000000000 --- a/src/includes/getting-started-next-steps/javascript.angular.mdx +++ /dev/null @@ -1,11 +0,0 @@ -- **[Upload Source Maps](/platforms/javascript/sourcemaps/)** - - We **highly recommend** you incorporate source maps to receive the full benefit of error tracking and monitoring. - -- **[Configure `tracesSampleRate`](/platforms/javascript/configuration/filtering/)** - - The example configuration will transmit 100% of captured transactions; lower this value in production to avoid consuming your quota too quickly. - -- **[Learn More About Performance Monitoring](/product/performance/)** - - Performance monitoring gives your team full-stack visibility to trace slow-loading pages back to its API call as well as surface all related errorsand resolve bottlenecks. diff --git a/src/includes/getting-started-next-steps/javascript.mdx b/src/includes/getting-started-next-steps/javascript.mdx deleted file mode 100644 index 79c5be0b4801e..0000000000000 --- a/src/includes/getting-started-next-steps/javascript.mdx +++ /dev/null @@ -1,11 +0,0 @@ -- **[Upload Source Maps](/platforms/javascript/sourcemaps/)** - - We **highly recommend** you incorporate source maps to receive the full benefit of error tracking and monitoring. - -- **[Configure `tracesSampleRate`](/platforms/javascript/configuration/filtering/)** - - Learn how to reduce the volume of performance data captured, or disable it entirely, by changing `tracesSampleRate` to a value between 0 and 1. - -- **[Learn More About Performance Monitoring](/product/performance/)** - - Performance monitoring gives your team full-stack visibility to trace slow-loading pages back to its API call as well as surface all related errorsand resolve bottlenecks. diff --git a/src/includes/getting-started-verify/javascript.angular.mdx b/src/includes/getting-started-verify/javascript.angular.mdx deleted file mode 100644 index 0632059044e1c..0000000000000 --- a/src/includes/getting-started-verify/javascript.angular.mdx +++ /dev/null @@ -1,3 +0,0 @@ -```javascript -myUndefinedFunction(); -``` diff --git a/src/platforms/common/index.mdx b/src/platforms/common/index.mdx index 75e1ae7b38882..ef9b31b5080d7 100644 --- a/src/platforms/common/index.mdx +++ b/src/platforms/common/index.mdx @@ -22,11 +22,11 @@ Sentry captures data by using an SDK within your application’s runtime: - + We'll automatically assign you a Data Source Name (DSN), which looks like a standard URL. It's required by Sentry and configures the protocol, public key, server address, and project identifier. If you forget it, view _Settings -> Projects -> Client Keys (DSN)_ in sentry.io. - + ## Verify diff --git a/src/platforms/javascript/guides/angular/config.yml b/src/platforms/javascript/guides/angular/config.yml index d4830ccbdcc27..97e2ca1eacddf 100644 --- a/src/platforms/javascript/guides/angular/config.yml +++ b/src/platforms/javascript/guides/angular/config.yml @@ -1,7 +1,4 @@ title: Angular -caseStyle: camelCase -supportLevel: production -sdk: "sentry.javascript.browser" categories: - browser redirect_from: From 0312f999b6bad2e66bc8568005a62a9e039ba2fe Mon Sep 17 00:00:00 2001 From: Fiona <61481573+PeloWriter@users.noreply.github.com> Date: Thu, 1 Oct 2020 09:04:46 -0700 Subject: [PATCH 19/19] Update src/includes/getting-started-config/javascript.angular.mdx Co-authored-by: Daniel Griesser --- src/includes/getting-started-config/javascript.angular.mdx | 3 --- 1 file changed, 3 deletions(-) diff --git a/src/includes/getting-started-config/javascript.angular.mdx b/src/includes/getting-started-config/javascript.angular.mdx index 27443770b351e..91f75be86ef11 100644 --- a/src/includes/getting-started-config/javascript.angular.mdx +++ b/src/includes/getting-started-config/javascript.angular.mdx @@ -20,9 +20,6 @@ Sentry.init({ tracesSampleRate: 1.0, // We recommend adjusting this in production }); -if (environment.production) { - enableProdMode(); -} platformBrowserDynamic() .bootstrapModule(AppModule)