From 7f0367c9db0234df86b76bc0b5909bc111ecba53 Mon Sep 17 00:00:00 2001
From: Francesco Novy <francesco.novy@sentry.io>
Date: Wed, 24 Jan 2024 11:32:50 -0500
Subject: [PATCH] feat(angular): Expose custom `browserTracingIntegration`

This way, Angular users do not need to provide a `routingInstrumentation` but can just import & use this directly from their angular package.
---
 packages/angular/README.md      |  5 ++---
 packages/angular/src/index.ts   |  1 +
 packages/angular/src/tracing.ts | 20 ++++++++++++++++++--
 3 files changed, 21 insertions(+), 5 deletions(-)

diff --git a/packages/angular/README.md b/packages/angular/README.md
index 302b060bdb39..62c6edd1ec85 100644
--- a/packages/angular/README.md
+++ b/packages/angular/README.md
@@ -93,14 +93,13 @@ Registering a Trace Service is a 3-step process.
    instrumentation:
 
 ```javascript
-import { init, instrumentAngularRouting, BrowserTracing } from '@sentry/angular';
+import { init, browserTracingIntegration } from '@sentry/angular';
 
 init({
   dsn: '__DSN__',
   integrations: [
-    new BrowserTracing({
+    browserTracingIntegration({
       tracingOrigins: ['localhost', 'https://yourserver.io/api'],
-      routingInstrumentation: instrumentAngularRouting,
     }),
   ],
   tracesSampleRate: 1,
diff --git a/packages/angular/src/index.ts b/packages/angular/src/index.ts
index f7f0536463a2..d1b3ae9b7207 100644
--- a/packages/angular/src/index.ts
+++ b/packages/angular/src/index.ts
@@ -10,6 +10,7 @@ export {
   // TODO `instrumentAngularRouting` is just an alias for `routingInstrumentation`; deprecate the latter at some point
   instrumentAngularRouting, // new name
   routingInstrumentation, // legacy name
+  browserTracingIntegration,
   TraceClassDecorator,
   TraceMethodDecorator,
   TraceDirective,
diff --git a/packages/angular/src/tracing.ts b/packages/angular/src/tracing.ts
index efd2c840420b..961fc212c8da 100644
--- a/packages/angular/src/tracing.ts
+++ b/packages/angular/src/tracing.ts
@@ -7,9 +7,13 @@ import type { ActivatedRouteSnapshot, Event, RouterState } from '@angular/router
 // eslint-disable-next-line @typescript-eslint/consistent-type-imports
 import { NavigationCancel, NavigationError, Router } from '@angular/router';
 import { NavigationEnd, NavigationStart, ResolveEnd } from '@angular/router';
-import { WINDOW, getCurrentScope } from '@sentry/browser';
+import {
+  WINDOW,
+  browserTracingIntegration as originalBrowserTracingIntegration,
+  getCurrentScope,
+} from '@sentry/browser';
 import { SEMANTIC_ATTRIBUTE_SENTRY_SOURCE, spanToJSON } from '@sentry/core';
-import type { Span, Transaction, TransactionContext } from '@sentry/types';
+import type { Integration, Span, Transaction, TransactionContext } from '@sentry/types';
 import { logger, stripUrlQueryAndFragment, timestampInSeconds } from '@sentry/utils';
 import type { Observable } from 'rxjs';
 import { Subscription } from 'rxjs';
@@ -49,6 +53,18 @@ export function routingInstrumentation(
 
 export const instrumentAngularRouting = routingInstrumentation;
 
+/**
+ * A custom BrowserTracing integration for Angular.
+ */
+export function browserTracingIntegration(
+  options?: Parameters<typeof originalBrowserTracingIntegration>[0],
+): Integration {
+  return originalBrowserTracingIntegration({
+    routingInstrumentation: instrumentAngularRouting,
+    ...options,
+  });
+}
+
 /**
  * Grabs active transaction off scope.
  *