Address review comments.

Author: onurtemizkan

packages/angular/package.json

@@ -28,7 +28,6 @@
   },
   "devDependencies": {
     "@angular-devkit/build-angular": "~0.1002.4",
-    "@angular/animations": "~10.2.5",
     "@angular/cli": "^10.2.4",
     "@angular/common": "~10.2.5",
     "@angular/compiler": "^10.2.5",

packages/angular/test/tracing.test.ts

@@ -120,6 +120,7 @@ describe('Angular Tracing', () => {
 
       expect(transaction.setName).toHaveBeenCalledTimes(0);
       expect(transaction.name).toEqual(url);
+      expect(transaction.metadata.source).toBe('custom');
 
       env.destroy();
     });
@@ -167,9 +168,6 @@ describe('Angular Tracing', () => {
         [
           'handles the root URL correctly',
           '/',
-          {
-            root: { firstChild: { routeConfig: null } },
-          },
           '/',
           [
             {
@@ -181,9 +179,6 @@ describe('Angular Tracing', () => {
         [
           'does not alter static routes',
           '/books',
-          {
-            root: { firstChild: { routeConfig: { path: 'books' } } },
-          },
           '/books/',
           [
             {
@@ -195,9 +190,6 @@ describe('Angular Tracing', () => {
         [
           'parameterizes IDs in the URL',
           '/books/1/details',
-          {
-            root: { firstChild: { routeConfig: { path: 'books/:bookId/details' } } },
-          },
           '/books/:bookId/details/',
           [
             {
@@ -209,9 +201,6 @@ describe('Angular Tracing', () => {
         [
           'parameterizes multiple IDs in the URL',
           '/org/sentry/projects/1234/events/04bc6846-4a1e-4af5-984a-003258f33e31',
-          {
-            root: { firstChild: { routeConfig: { path: 'org/:orgId/projects/:projId/events/:eventId' } } },
-          },
           '/org/:orgId/projects/:projId/events/:eventId/',
           [
             {
@@ -223,17 +212,6 @@ describe('Angular Tracing', () => {
         [
           'parameterizes URLs from route with child routes',
           '/org/sentry/projects/1234/events/04bc6846-4a1e-4af5-984a-003258f33e31',
-          {
-            root: {
-              firstChild: {
-                routeConfig: { path: 'org/:orgId' },
-                firstChild: {
-                  routeConfig: { path: 'projects/:projId' },
-                  firstChild: { routeConfig: { path: 'events/:eventId' } },
-                },
-              },
-            },
-          },
           '/org/:orgId/projects/:projId/events/:eventId/',
           [
             {
@@ -254,15 +232,15 @@ describe('Angular Tracing', () => {
             },
           ],
         ],
-      ])('%s and sets the source to `route`', async (_, url, routerState, result, routes) => {
+      ])('%s and sets the source to `route`', async (_, url, result, routes) => {
         const customStartTransaction = jest.fn(defaultStartTransaction);
         const env = await TestEnv.setup({
           customStartTransaction,
           routes,
           startTransactionOnPageLoad: false,
         });
 
-        await env.navigateInAngular(url, routerState);
+        await env.navigateInAngular(url);
 
         expect(customStartTransaction).toHaveBeenCalledWith({
           name: url,
@@ -304,6 +282,32 @@ describe('Angular Tracing', () => {
       env.destroy();
     });
 
+    it('should use component name as span description', async () => {
+      const directive = new TraceDirective();
+      const finishMock = jest.fn();
+      const customStartTransaction = jest.fn(defaultStartTransaction);
+
+      const env = await TestEnv.setup({
+        components: [TraceDirective],
+        customStartTransaction,
+        useTraceService: false,
+      });
+
+      transaction.startChild = jest.fn(() => ({
+        finish: finishMock,
+      }));
+
+      directive.componentName = 'test-component';
+      directive.ngOnInit();
+
+      expect(transaction.startChild).toHaveBeenCalledWith({
+        op: 'ui.angular.init',
+        description: '<test-component>',
+      });
+
+      env.destroy();
+    });
+
     it('should finish tracingSpan after view init', async () => {
       const directive = new TraceDirective();
       const finishMock = jest.fn();

packages/angular/test/utils/index.ts

@@ -75,13 +75,18 @@ export class TestEnv {
     return new TestEnv(router, fixture, traceService);
   }
 
-  public async navigateInAngular(url: string, routerState?: { [k: string]: any }): Promise<void> {
+  public async navigateInAngular(url: string): Promise<void> {
     return new Promise(resolve => {
       return this.fixture.ngZone?.run(() => {
-        void this.router.navigateByUrl(url, { state: routerState }).then(() => {
-          this.fixture.detectChanges();
-          resolve();
-        });
+        void this.router
+          .navigateByUrl(
+            url,
+            //{ state: routerState }
+          )
+          .then(() => {
+            this.fixture.detectChanges();
+            resolve();
+          });
       });
     });
   }

packages/remix/src/utils/errorBoundary.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+
+import { ErrorBoundaryComponent } from './types';
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export const withSentry = (OrigErrorBoundary: ErrorBoundaryComponent): ErrorBoundaryComponent => {
+  return props => {
+    const caught = props.error;
+    console.log('CAUGHT', caught);
+
+    return <OrigErrorBoundary {...props} />;
+  };
+};

yarn.lock

@@ -128,13 +128,6 @@
     ora "5.0.0"
     rxjs "6.6.2"
 
-"@angular/animations@~10.2.5":
-  version "10.2.5"
-  resolved "https://registry.yarnpkg.com/@angular/animations/-/animations-10.2.5.tgz#9b4aaa2a2f88f848decb5a03f2ddaa2aed37642d"
-  integrity sha512-lIMwjY1pAqpCM4Ayndf2RsvOWRUc5QV7W82XNou6pIBv2T1i1XV6H72I5Sk9Z4sxxBYCWncEaEub+C6NcS8QRg==
-  dependencies:
-    tslib "^2.0.0"
-
 "@angular/cli@^10.2.4":
   version "10.2.4"
   resolved "https://registry.yarnpkg.com/@angular/cli/-/cli-10.2.4.tgz#f8899eee8f774cd805b1831a8f2f865024e9f4e1"