Global Getting Started

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 (
     <ul>

src/includes/capture-error/javascript.mdx

@@ -9,3 +9,5 @@ try {
   Sentry.captureException(err);
 }
 ```
+
+Learn more about how to manually capture errors or enable message capture with Sentry's SDK in <PlatformLink to="/usage/">our documentation on Usage</PlatformLink>.

src/includes/framework-list/_default.mdx

@@ -0,0 +1 @@
+<GuideGrid />

src/includes/framework-list/javascript.mdx

@@ -0,0 +1,3 @@
+Using a framework? Take a look at our specific guides to get started.
+
+<GuideGrid platform="javascript" />

src/includes/getting-started-config/javascript.angular.mdx

@@ -0,0 +1,107 @@
+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";
+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, // We recommend adjusting this in production
+});
+
+
+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/getting-started-config/javascript.mdx

@@ -1,15 +1,22 @@
-You should `init` the Sentry Browser SDK as soon as possible during your page load:
+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.
 
-```javascript {tabTitle:ESM}
-import * as Sentry from "@sentry/browser";
+<Note>
+<markdown>
 
-Sentry.init({
-  dsn: "___PUBLIC_DSN___",
-});
-```
+To reduce the volume of performance data captured, or disable it entirely, change `tracesSampleRate` to a value between 0 and 1 in production.
+
+</markdown>
+</Note>
 
-```javascript {tabTitle:CDN}
+```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, // We recommend adjusting this in production
 });
 ```

src/includes/getting-started-install/javascript.angular.mdx

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

src/includes/getting-started-install/javascript.mdx

@@ -1,17 +1,14 @@
-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}
-<script
-  src="https://browser.sentry-cdn.com/{{ packages.version('sentry.javascript.browser') }}/bundle.min.js"
-  integrity="sha384-{{ packages.checksum('sentry.javascript.browser', 'bundle.min.js', 'sha384-base64') }}"
-  crossorigin="anonymous"
-></script>
-```
+<Note>
+<markdown>
+
+We also support alternate [installation methods](/platforms/javascript/install/).
+
+</markdown>
+</Note>

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.

src/platforms/common/index.mdx

@@ -0,0 +1,39 @@
+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.
+
+<Note>
+<markdown>
+
+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.
+
+</markdown>
+</Note>
+
+<PlatformContent includePath="framework-list" />
+
+## Install
+
+Sentry captures data by using an SDK within your application’s runtime:
+
+<PlatformContent includePath="getting-started-install" />
+
+## Initialize
+
+`init` Sentry as soon as possible in your app. Once this is done, the Sentry SDK captures all unhandled exceptions.
+
+<PlatformContent includePath="getting-started-config" />
+
+<Note><markdown>
+
+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.
+
+</markdown></Note>
+
+## Verify
+
+This snippet includes an intentional error, so you can test that everything is working as soon as you set it up:
+
+<PlatformContent includePath="getting-started-verify" />
+
+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.
+
+<PageGrid header="Next Steps" nextSteps />

src/platforms/common/usage/index.mdx

@@ -12,6 +12,19 @@ notSupported:
 
 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-events/breadcrumbs/).

src/platforms/javascript/common/install/index.mdx

@@ -1,6 +1,7 @@
 ---
 title: Installation Methods
 sidebar_order: 1
+description: "Review our alternate installation methods."
 ---
 
 <PageGrid />

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."
 ---
 
 <PageGrid />

src/platforms/javascript/common/troubleshooting/index.mdx

@@ -1,5 +1,6 @@
 ---
 title: Troubleshooting
+description: "Troubleshoot and resolve edge cases."
 excerpt: ""
 sidebar_order: 1000
 ---
@@ -221,3 +222,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.

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/
 ---

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/)**
 

src/platforms/javascript/guides/angular/config.yml

@@ -0,0 +1,7 @@
+title: Angular
+categories:
+  - browser
+redirect_from:
+  - /clients/javascript/integrations/angular2/
+  - /clients/javascript/integrations/angularjs/
+  - /platforms/javascript/angular/