feedback with attachment (#263)

src/NuGetTrends.Web/Portal/package.json

@@ -20,8 +20,8 @@
     "@angular/platform-browser": "^17.1.3",
     "@angular/platform-browser-dynamic": "^17.1.3",
     "@angular/router": "^17.1.3",
-    "@sentry/angular-ivy": "^7.100.1",
-    "@sentry/integrations": "^7.100.1",
+    "@sentry/angular-ivy": "^8.0.0-alpha.4",
+    "@sentry-internal/feedback": "^8.0.0-alpha.4",
     "@types/chart.js": "2.9.32",
     "bulma": "^0.9.4",
     "bulma-start": "^0.0.5",

src/NuGetTrends.Web/Portal/src/app/app.module.ts

@@ -5,6 +5,7 @@ import { DatePipe } from '@angular/common';
 import { HttpClientModule } from '@angular/common/http';
 import { Router } from '@angular/router';
 import * as Sentry from '@sentry/angular-ivy';
+import { feedbackIntegration, feedbackModalIntegration, feedbackScreenshotIntegration } from "@sentry-internal/feedback";
 
 import { AppComponent } from './app.component';
 import { AppRoutingModule } from './app-routes.module';
@@ -41,7 +42,7 @@ Sentry.init({
       networkResponseHeaders: ["Server"],
     }),
     Sentry.replayCanvasIntegration(),
-    Sentry.feedbackIntegration({
+    feedbackIntegration({
       colorScheme: "light", // no dark theme yet
       themeLight: {
         submitBackground: '#215C84',
@@ -51,17 +52,12 @@ Sentry.init({
         inputForeground: '#374151',
       },
     }),
-    new Sentry.BrowserTracing({
-      routingInstrumentation: Sentry.instrumentAngularRouting,
+    feedbackModalIntegration(),
+    feedbackScreenshotIntegration(),
+    Sentry.browserTracingIntegration({
       idleTimeout: 30000,
-      heartbeatInterval:10000,
-      _experiments: {
-        enableInteractions: true,
-        // If you want automatic route transactions in react or similar
-        onStartRouteTransaction: Sentry.onProfilingStartRouteTransaction,
-      }
     }),
-    new Sentry.BrowserProfilingIntegration(),
+    Sentry.browserProfilingIntegration(),
   ],
 });
 

src/NuGetTrends.Web/Portal/src/app/packages/packages.component.ts

@@ -16,7 +16,7 @@ import { IPackageDownloadHistory, IDownloadStats } from '../shared/models/packag
   styleUrls: ['./packages.component.scss'],
   animations: [AppAnimations.slideInOutAnimation]
 })
-@Sentry.TraceClassDecorator()
+@Sentry.TraceClass({ name: 'HeaderComponent' })
 export class PackagesComponent implements OnInit, OnDestroy {
 
   private trendChart!: Chart;

src/NuGetTrends.Web/Portal/src/app/shared/components/loading-indicator/loading-indicator.component.ts

@@ -10,7 +10,7 @@ import { LoadingIndicatorService } from './loading-indicator.service';
   templateUrl: './loading-indicator.component.html',
   styleUrls: ['./loading-indicator.component.scss']
 })
-@Sentry.TraceClassDecorator()
+@Sentry.TraceClass({ name: 'LoadingIndicatorComponent' })
 export class LoadingIndicatorComponent implements AfterViewInit, OnDestroy {
 
   loadingSubscription?: Subscription;

src/NuGetTrends.Web/Portal/src/app/shared/components/package-list/package-list.component.ts

@@ -11,7 +11,7 @@ import * as Sentry from "@sentry/angular-ivy";
   templateUrl: './package-list.component.html',
   styleUrls: ['./package-list.component.scss']
 })
-@Sentry.TraceClassDecorator()
+@Sentry.TraceClass({ name: 'HeaderComponent' })
 export class PackageListComponent implements OnDestroy {
   packageList: Array<IPackageColor>;
 

src/NuGetTrends.Web/Portal/src/app/shared/components/search-input/search-input.component.ts

@@ -16,7 +16,7 @@ import { PackagesService, PackageInteractionService } from '../../../core';
   styleUrls: ['./search-input.component.scss'],
   encapsulation: ViewEncapsulation.None,
 })
-@Sentry.TraceClassDecorator()
+@Sentry.TraceClass({ name: 'SearchInputComponent' })
 export class SearchInputComponent implements AfterViewInit {
   @ViewChild(MatAutocomplete) autoComplete!: MatAutocomplete;
   @ViewChild('searchBox') searchBox!: ElementRef;

src/NuGetTrends.Web/Portal/src/app/shared/components/share-popover/share-popover.component.ts

@@ -9,7 +9,7 @@ import { SocialShareService } from 'src/app/core/services/social-share.service';
   templateUrl: './share-popover.component.html',
   styleUrls: ['./share-popover.component.scss']
 })
-@Sentry.TraceClassDecorator()
+@Sentry.TraceClass({ name: 'SharePopoverComponent' })
 export class SharePopoverComponent {
   @Input() buttonText = '';
   @Output() shared = new EventEmitter();

src/NuGetTrends.Web/Portal/src/main.ts

@@ -9,20 +9,12 @@ if (environment.production) {
   enableProdMode();
 }
 
-const activeTransaction = Sentry.getActiveTransaction();
-const bootstrapSpan =
-  activeTransaction &&
-  activeTransaction.startChild({
-    description: "platform-browser-dynamic",
-    op: "ui.angular.bootstrap",
-  });
+const span = Sentry.startInactiveSpan({ name: 'platform-browser-dynamic', op: 'ui.angular.bootstrap' });
 
 platformBrowserDynamic()
   .bootstrapModule(AppModule)
   .then(() => console.log(`Bootstrap success`))
   .catch(err => console.error(err))
   .finally(() => {
-    if (bootstrapSpan) {
-      bootstrapSpan.finish();
-    }
+    span.end();
   });