From 85c186728d68dca0c316e225f150aa0900cb8e50 Mon Sep 17 00:00:00 2001 From: Lukas Stracke Date: Thu, 21 Apr 2022 15:51:19 +0200 Subject: [PATCH 1/5] feat(angular): update Angular docs for v7 release add information about compatibility of our SDK with different Angular versions add information about `TraceDirective` compatibility --- .../javascript.angular.mdx | 14 +++ .../angular/components/tracehelpers.mdx | 87 +++++++++---------- 2 files changed, 57 insertions(+), 44 deletions(-) diff --git a/src/includes/getting-started-install/javascript.angular.mdx b/src/includes/getting-started-install/javascript.angular.mdx index a566b35794549..0846423588df2 100644 --- a/src/includes/getting-started-install/javascript.angular.mdx +++ b/src/includes/getting-started-install/javascript.angular.mdx @@ -1,7 +1,21 @@ + + + Starting with v7 of the Angular SDK, only Angular versions 10 and newer are supported. For older Angular versions, please keep using v6 as shown below until you upgrade your Angular version. + + + ```bash {tabTitle:npm} +# for Angular 10 and newer npm install --save @sentry/angular @sentry/tracing + +# for Angular 9 and older +npm install --save @sentry/angular^6.x @sentry/tracing^6.x ``` ```bash {tabTitle:Yarn} +# for Angular 10 and newer +yarn add @sentry/angular @sentry/tracing + +# for Angular 9 and older yarn add @sentry/angular @sentry/tracing ``` diff --git a/src/platforms/javascript/guides/angular/components/tracehelpers.mdx b/src/platforms/javascript/guides/angular/components/tracehelpers.mdx index 5f3047f4b9500..d88b5eed03d84 100644 --- a/src/platforms/javascript/guides/angular/components/tracehelpers.mdx +++ b/src/platforms/javascript/guides/angular/components/tracehelpers.mdx @@ -4,7 +4,42 @@ title: Track Angular Components To track Angular components as part of your transactions, use any of these three options: -1. `TraceClassDecorator` tracks a duration between `OnInit` and `AfterViewInit` lifecycle hooks in components: +1. `TraceDirective` tracks a duration between `OnInit` and `AfterViewInit` lifecycle hooks in template: + + + +If you're using version 6 of the Angular SDK, using `TraceDirective` or `TraceModule` causes a +compiler error at application compile time of your Angular application. This is a [known issue](https://github.com/getsentry/sentry-javascript/issues/3282) +of our Angular SDK v6 and it was [fixed](https://github.com/getsentry/sentry-javascript/issues/4644) +in v7 of our Angular SDK. We recommend upgrading to the latest Angular SDK version if you are using Angular 10 or newer. +Otherwise, please use options 2 (`TraceClassDecorator`) and 3 (`TraceMethodDecorator`) +below to track your Angular components. + + + +Import `TraceModule` either globally in your application's `app.module.ts` file or locally in the module(s) +you want to track your components: + +```javascript +import * as Sentry from "@sentry/angular"; + +@NgModule({ + // ... + imports: [Sentry.TraceModule], + // ... +}) +export class AppModule {} +``` + +Then, inside your components template, (remember that the directive name attribute is required): + +```html + + + +``` + +2. `TraceClassDecorator` tracks a duration between `OnInit` and `AfterViewInit` lifecycle hooks in components: ```javascript import { Component } from "@angular/core"; @@ -20,7 +55,7 @@ export class HeaderComponent { } ``` -2. `TraceMethodDecorator` tracks a specific lifecycle hooks as point-in-time spans in components: +3. `TraceMethodDecorator` tracks a specific lifecycle hooks as point-in-time spans in components: ```javascript import { Component, OnInit } from "@angular/core"; @@ -40,11 +75,11 @@ You can also add your own custom spans by attaching them to the current active t helper. For example, to track the duration of the Angular bootstraping process: ```javascript -import { enableProdMode } from '@angular/core'; -import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; -import * as Sentry from '@sentry/angular'; +import { enableProdMode } from "@angular/core"; +import { platformBrowserDynamic } from "@angular/platform-browser-dynamic"; +import * as Sentry from "@sentry/angular"; -import { AppModule } from './app/app.module'; +import { AppModule } from "./app/app.module"; // ... @@ -52,8 +87,8 @@ const activeTransaction = Sentry.getActiveTransaction(); const bootstrapSpan = activeTransaction && activeTransaction.startChild({ - description: 'platform-browser-dynamic', - op: 'ui.angular.bootstrap', + description: "platform-browser-dynamic", + op: "ui.angular.bootstrap", }); platformBrowserDynamic() @@ -66,39 +101,3 @@ platformBrowserDynamic() } }); ``` - -3. `TraceDirective` tracks a duration between `OnInit` and `AfterViewInit` lifecycle hooks in template: - - - -Using `TraceDirective` or `TraceModule` currently causes a compiler error at application compile -time of your Angular application if AOT compilation is enabled in your application config (which it is by default). -This is a [known limitation](https://github.com/getsentry/sentry-javascript/issues/3282) of our current -Angular SDK (v6.*) and it will be [adressed and fixed](https://github.com/getsentry/sentry-javascript/issues/4644) -in our next major Angular SDK release (v7). -In the meantime, please use options 1 (`TraceClassDecorator`) and 2 (`TraceMethodDecorator`) -above to track your Angular components. - - - -Import `TraceModule` either globally in your application's `app.module.ts` file or locally in the module(s) -you want to track your components: - -```javascript -import * as Sentry from "@sentry/angular"; - -@NgModule({ - // ... - imports: [Sentry.TraceModule], - // ... -}) -export class AppModule {} -``` - -Then, inside your components template, (remember that the directive name attribute is required): - -```html - - - -``` From 41b364dd5f02f13ac5fb47d6af6d1af72fe0af40 Mon Sep 17 00:00:00 2001 From: Lukas Stracke Date: Fri, 22 Apr 2022 14:10:35 +0200 Subject: [PATCH 2/5] update installation instructions and TraceDirective v6 warning --- .../getting-started-install/javascript.angular.mdx | 12 +++--------- .../guides/angular/components/tracehelpers.mdx | 2 +- 2 files changed, 4 insertions(+), 10 deletions(-) diff --git a/src/includes/getting-started-install/javascript.angular.mdx b/src/includes/getting-started-install/javascript.angular.mdx index 0846423588df2..512f6e637277e 100644 --- a/src/includes/getting-started-install/javascript.angular.mdx +++ b/src/includes/getting-started-install/javascript.angular.mdx @@ -1,21 +1,15 @@ - Starting with v7 of the Angular SDK, only Angular versions 10 and newer are supported. For older Angular versions, please keep using v6 as shown below until you upgrade your Angular version. +The latest version of the Sentry Angular SDK officially supports Angular 10 and newer. +If you are using an older Angular version and you experience problems with the SDK, you can +try using version 6 (at your own risk) until you upgrade your Angular version. ```bash {tabTitle:npm} -# for Angular 10 and newer npm install --save @sentry/angular @sentry/tracing - -# for Angular 9 and older -npm install --save @sentry/angular^6.x @sentry/tracing^6.x ``` ```bash {tabTitle:Yarn} -# for Angular 10 and newer -yarn add @sentry/angular @sentry/tracing - -# for Angular 9 and older yarn add @sentry/angular @sentry/tracing ``` diff --git a/src/platforms/javascript/guides/angular/components/tracehelpers.mdx b/src/platforms/javascript/guides/angular/components/tracehelpers.mdx index d88b5eed03d84..d875ff3ab6271 100644 --- a/src/platforms/javascript/guides/angular/components/tracehelpers.mdx +++ b/src/platforms/javascript/guides/angular/components/tracehelpers.mdx @@ -11,7 +11,7 @@ To track Angular components as part of your transactions, use any of these three If you're using version 6 of the Angular SDK, using `TraceDirective` or `TraceModule` causes a compiler error at application compile time of your Angular application. This is a [known issue](https://github.com/getsentry/sentry-javascript/issues/3282) of our Angular SDK v6 and it was [fixed](https://github.com/getsentry/sentry-javascript/issues/4644) -in v7 of our Angular SDK. We recommend upgrading to the latest Angular SDK version if you are using Angular 10 or newer. +in v7 of our Angular SDK. We recommend upgrading to the latest Angular SDK version. Otherwise, please use options 2 (`TraceClassDecorator`) and 3 (`TraceMethodDecorator`) below to track your Angular components. From a28c919d88515172dcf8e9cd9a7c85b5cb5f0c74 Mon Sep 17 00:00:00 2001 From: Lukas Stracke Date: Mon, 25 Apr 2022 10:23:52 +0200 Subject: [PATCH 3/5] Update version compatibility and positions --- .../javascript.angular.mdx | 19 +++++++++------- .../angular/components/tracehelpers.mdx | 22 +++++++++---------- 2 files changed, 22 insertions(+), 19 deletions(-) diff --git a/src/includes/getting-started-install/javascript.angular.mdx b/src/includes/getting-started-install/javascript.angular.mdx index 512f6e637277e..b2e1ef40ab43f 100644 --- a/src/includes/getting-started-install/javascript.angular.mdx +++ b/src/includes/getting-started-install/javascript.angular.mdx @@ -1,11 +1,3 @@ - - -The latest version of the Sentry Angular SDK officially supports Angular 10 and newer. -If you are using an older Angular version and you experience problems with the SDK, you can -try using version 6 (at your own risk) until you upgrade your Angular version. - - - ```bash {tabTitle:npm} npm install --save @sentry/angular @sentry/tracing ``` @@ -13,3 +5,14 @@ npm install --save @sentry/angular @sentry/tracing ```bash {tabTitle:Yarn} yarn add @sentry/angular @sentry/tracing ``` + + + +The latest version of the Sentry Angular SDK officially supports Angular 10 and newer. +If you need to use Angular 9 or older and you experience problems with the latest version of the Sentry SDK, +try downgrading the SDK to version 6 (`@sentry/angular@^6.x`). If you are using Sentry Tracing, +be sure to also downgrade it to the same version (`@sentry/tracing@^6.x`). +Version 6 of the Sentry SDK was compiled differently and might work with older versions of Angular. +Please note, that this combination of packages is not being maintained and tested. + + diff --git a/src/platforms/javascript/guides/angular/components/tracehelpers.mdx b/src/platforms/javascript/guides/angular/components/tracehelpers.mdx index d875ff3ab6271..a3424941c649b 100644 --- a/src/platforms/javascript/guides/angular/components/tracehelpers.mdx +++ b/src/platforms/javascript/guides/angular/components/tracehelpers.mdx @@ -6,17 +6,6 @@ To track Angular components as part of your transactions, use any of these three 1. `TraceDirective` tracks a duration between `OnInit` and `AfterViewInit` lifecycle hooks in template: - - -If you're using version 6 of the Angular SDK, using `TraceDirective` or `TraceModule` causes a -compiler error at application compile time of your Angular application. This is a [known issue](https://github.com/getsentry/sentry-javascript/issues/3282) -of our Angular SDK v6 and it was [fixed](https://github.com/getsentry/sentry-javascript/issues/4644) -in v7 of our Angular SDK. We recommend upgrading to the latest Angular SDK version. -Otherwise, please use options 2 (`TraceClassDecorator`) and 3 (`TraceMethodDecorator`) -below to track your Angular components. - - - Import `TraceModule` either globally in your application's `app.module.ts` file or locally in the module(s) you want to track your components: @@ -39,6 +28,17 @@ Then, inside your components template, (remember that the directive name attribu ``` + + +If you're using version 6 of the Angular SDK, using `TraceDirective` or `TraceModule` causes a +compiler error at application compile time of your Angular application. This is a [known issue](https://github.com/getsentry/sentry-javascript/issues/3282) +of our Angular SDK v6 and it was [fixed](https://github.com/getsentry/sentry-javascript/issues/4644) +in v7 of our Angular SDK. We recommend upgrading to the latest Angular SDK version. +Otherwise, please use options 2 (`TraceClassDecorator`) and 3 (`TraceMethodDecorator`) +below to track your Angular components. + + + 2. `TraceClassDecorator` tracks a duration between `OnInit` and `AfterViewInit` lifecycle hooks in components: ```javascript From 1abb5a9d3ad2c8e929bfbcc52d84fd002b98714e Mon Sep 17 00:00:00 2001 From: Lukas Stracke Date: Mon, 25 Apr 2022 10:29:07 +0200 Subject: [PATCH 4/5] fix wrong comma --- src/includes/getting-started-install/javascript.angular.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/includes/getting-started-install/javascript.angular.mdx b/src/includes/getting-started-install/javascript.angular.mdx index b2e1ef40ab43f..76defa8c35930 100644 --- a/src/includes/getting-started-install/javascript.angular.mdx +++ b/src/includes/getting-started-install/javascript.angular.mdx @@ -13,6 +13,6 @@ If you need to use Angular 9 or older and you experience problems with the lates try downgrading the SDK to version 6 (`@sentry/angular@^6.x`). If you are using Sentry Tracing, be sure to also downgrade it to the same version (`@sentry/tracing@^6.x`). Version 6 of the Sentry SDK was compiled differently and might work with older versions of Angular. -Please note, that this combination of packages is not being maintained and tested. +Please note that this combination of packages is not being maintained and tested. From 37ffe51530c62e95af2f6e2a0f69bb894ac9e3c8 Mon Sep 17 00:00:00 2001 From: Lukas Stracke Date: Mon, 25 Apr 2022 10:29:31 +0200 Subject: [PATCH 5/5] fix wording --- src/includes/getting-started-install/javascript.angular.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/includes/getting-started-install/javascript.angular.mdx b/src/includes/getting-started-install/javascript.angular.mdx index 76defa8c35930..dcba832babb2e 100644 --- a/src/includes/getting-started-install/javascript.angular.mdx +++ b/src/includes/getting-started-install/javascript.angular.mdx @@ -13,6 +13,6 @@ If you need to use Angular 9 or older and you experience problems with the lates try downgrading the SDK to version 6 (`@sentry/angular@^6.x`). If you are using Sentry Tracing, be sure to also downgrade it to the same version (`@sentry/tracing@^6.x`). Version 6 of the Sentry SDK was compiled differently and might work with older versions of Angular. -Please note that this combination of packages is not being maintained and tested. +Please note that this combination of packages is not being maintained or tested.