{WIP} Focus getting started content

src/includes/capture-error/javascript.mdx

@@ -1,6 +1,8 @@
-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.
+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.
 
 ```javascript
 try {

src/includes/initialize-configure/angular.mdx

@@ -0,0 +1,108 @@
+This snippet includes our [performance monitoring](/product/performance/) package, which register 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 {}
+```

src/includes/initialize-configure/javascript.mdx

@@ -0,0 +1,10 @@
+```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, // To set your release version
+  integrations: [new Integrations.BrowserTracing()],
+  tracesSampleRate: 1.0, // Remember to lower this in production
+});
+```

src/includes/install-package/angular.mdx

@@ -0,0 +1,7 @@
+```bash {tabTitle:npm}
+npm install --save @sentry/angular
+```
+
+```bash {tabTitle:Yarn}
+yarn add @sentry/angular
+```

src/includes/install-package/javascript.mdx

@@ -0,0 +1,7 @@
+```bash {tabTitle: ESM}
+# Using yarn
+$ yarn add @sentry/browser @sentry/tracing
+
+# Using npm
+$ npm install --save @sentry/browser @sentry/tracing
+```

src/includes/test-verify/javascript.mdx

@@ -0,0 +1,3 @@
+```JavaScript {tabTitle: ESM}
+myUndefinedFunction(); // To test your setup
+```

src/platforms/common/configuration/capture.mdx

@@ -7,6 +7,19 @@ 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.
 
+
+<Note>
+<markdown>
+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.
+
+</markdown>
+</Note>
+
 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/).

src/platforms/javascript/index.mdx

@@ -21,121 +21,59 @@ Using a framework? Take a look at our specific guides to get started.
 
 <GuideGrid platform="javascript" />
 
-## 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
+<PlatformContent includePath="install-package" />
 
-# Using npm
-$ npm install --save @sentry/browser
-```
-
-<Note>
-<markdown>
-
-If prefer to use CDN to install our SDK, please see our documentation for [installing with CDN](/platforms/javascript/configuration/install-cdn).
-
-</markdown>
-</Note>
-
-## 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
-
-<Note>
-<markdown>
-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.
-
-</markdown>
-</Note>
-
-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).
+<Alert level="note" title="Note"><markdown>
 
-### Automatically Enrich Error Data
+If you are using our CDN, please see our documentation for [installing with CDN](/platforms/javascript/configuration/install-cdn).
 
-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.
+</markdown></Alert>
 
-Learn more about the data sent to with events in [Event Context](/platforms/javascript/enriching-error-data/additional-data/).
+## Initialize
 
-### Set the Release Version
+`init` Sentry as soon as possible in your app. Once this is done, all unhandled exceptions are automatically captured by Sentry.
 
-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.
+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.
 
-Use the `process.env.npm_package_version`:
+<PlatformContent includePath="initialize-configure" />
 
-```JavaScript
-Sentry.init({
-  dsn: '___PUBLIC_DSN___',
-  release: 'my-project-name@' + process.env.npm_package_version,
-});
-```
+<Alert level="note" title="Note"><markdown>
 
-Learn more about what releases can do in [our documentation for releases](/product/releases/).
+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.
 
-### Upload Source Maps
+</markdown></Alert>
 
-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.
+## Test
 
-## Monitor Performance
+The snippet below includes an intentional error, so you can test that everything is working as soon as you set it up.
 
-Install performance monitoring using Sentry’s JavaScript SDK using both the `@sentry/browser` and `@sentry/tracing` packages:
+<PlatformContent includePath="test-verify" />
 
-```bash {tabTitle: ESM}
-# Using yarn
-$ yarn add @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.
 
-# Using npm
-$ npm install --save @sentry/browser @sentry/tracing
-```
+## Next Steps
 
-<Alert level="note" title="Note"><markdown>
+- **[Upload Source Maps](/platforms/javascript/sourcemaps/)**
 
-If you are using our CDN, please see our documentation for [installing with CDN](/platforms/javascript/configuration/install-cdn).
+  We **highly recommend** you incorporate source maps to receive the full benefit of error tracking and monitoring.
 
-</markdown></Alert>
+- **[Configure `tracesSampleRate`](/platforms/javascript/configuration/filtering/)**
 
-Initialize the integration in your call to `Sentry.init`:
+  The example configuration will transmit 100% of captured transactions; lower this value in production to avoid consuming your quota too quickly.
 
-```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
-});
-```
+- **[Learn More About Releases](/product/releases/)**
 
-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.
+  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.
 
-Learn more about sampling in [Filtering Events Reported to Sentry](/platforms/javascript/configuration/filtering).
+- **[Learn More About Performance Monitoring](/product/performance/)**
 
-## Next Steps
+  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.
 
 - **[Manage Configuration Options](./configuration/)**
 
@@ -149,7 +87,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.