ref(tracing): Make tracing integrations tree shakeable (#4204)

Cuts ~2kb for nextjs client gzip + minified bundle.

Previously we expected users to import tracing integrations like

```js
import { Integrations } from '@sentry/tracing';
const instance = new Integrations.BrowserTracing();
```

This makes the integrations unable to be treeshaken though. To address this, we now have
this individual export. We now expect users to consume BrowserTracing like so:

```js
import { BrowserTracing } from '@sentry/tracing';
const instance = new BrowserTracing();
```

This works because we avoid the object spread in the index, we instead just take advantage of js exporting the object correctly.

Author: AbhiPrasad

packages/nextjs/src/index.client.ts

@@ -1,5 +1,5 @@
 import { configureScope, init as reactInit, Integrations as BrowserIntegrations } from '@sentry/react';
-import { defaultRequestInstrumentationOptions, Integrations as TracingIntegrations } from '@sentry/tracing';
+import { BrowserTracing, defaultRequestInstrumentationOptions } from '@sentry/tracing';
 
 import { nextRouterInstrumentation } from './performance/client';
 import { MetadataBuilder } from './utils/metadataBuilder';
@@ -9,7 +9,6 @@ import { addIntegration, UserIntegrations } from './utils/userIntegrations';
 export * from '@sentry/react';
 export { nextRouterInstrumentation } from './performance/client';
 
-const { BrowserTracing } = TracingIntegrations;
 export const Integrations = { ...BrowserIntegrations, BrowserTracing };
 
 /** Inits the Sentry NextJS SDK on the browser with the React SDK. */

packages/tracing/src/index.ts

@@ -1,10 +1,26 @@
-import { BrowserTracing } from './browser';
 import { addExtensionMethods } from './hubextensions';
-import * as TracingIntegrations from './integrations';
-
-const Integrations = { ...TracingIntegrations, BrowserTracing };
+import * as Integrations from './integrations';
 
 export { Integrations };
+
+// This is already exported as part of `Integrations` above (and for the moment will remain so for
+// backwards compatibility), but that interferes with treeshaking, so we also export it separately
+// here.
+//
+// Previously we expected users to import tracing integrations like
+//
+// import { Integrations } from '@sentry/tracing';
+// const instance = new Integrations.BrowserTracing();
+//
+// This makes the integrations unable to be treeshaken though. To address this, we now have
+// this individual export. We now expect users to consume BrowserTracing like so:
+//
+// import { BrowserTracing } from '@sentry/tracing';
+// const instance = new BrowserTracing();
+//
+// For an example of of the new usage of BrowserTracing, see @sentry/nextjs index.client.ts
+export { BrowserTracing } from './browser';
+
 export { Span } from './span';
 export { Transaction } from './transaction';
 export {

packages/tracing/src/integrations/index.ts

@@ -2,3 +2,7 @@ export { Express } from './node/express';
 export { Postgres } from './node/postgres';
 export { Mysql } from './node/mysql';
 export { Mongo } from './node/mongo';
+
+// TODO(v7): Remove this export
+// Please see `src/index.ts` for more details.
+export { BrowserTracing } from '../browser';

packages/tracing/test/index.bundle.test.ts

@@ -1,11 +1,9 @@
 import { Integrations } from '../src/index.bundle';
-import { testOnlyIfNodeVersionAtLeast } from './testutils';
 
 describe('Integrations export', () => {
-  // TODO `Object.values` doesn't work on Node < 8
-  testOnlyIfNodeVersionAtLeast(8)('is exported correctly', () => {
-    Object.values(Integrations).forEach(integration => {
-      expect(integration.id).toStrictEqual(expect.any(String));
+  it('is exported correctly', () => {
+    Object.keys(Integrations).forEach(key => {
+      expect(Integrations[key as keyof typeof Integrations].id).toStrictEqual(expect.any(String));
     });
   });
 });

packages/tracing/test/index.test.ts

@@ -0,0 +1,23 @@
+import { getCurrentHub } from '@sentry/hub';
+
+import { BrowserTracing, Integrations } from '../src';
+
+describe('index', () => {
+  it('patches the global hub to add an implementation for `Hub.startTransaction` as a side effect', () => {
+    const hub = getCurrentHub();
+    const transaction = hub.startTransaction({ name: 'test', endTimestamp: 123 });
+    expect(transaction).toBeDefined();
+  });
+
+  describe('Integrations', () => {
+    it('is exported correctly', () => {
+      Object.keys(Integrations).forEach(key => {
+        expect(Integrations[key as keyof typeof Integrations].id).toStrictEqual(expect.any(String));
+      });
+    });
+
+    it('contains BrowserTracing', () => {
+      expect(Integrations.BrowserTracing).toEqual(BrowserTracing);
+    });
+  });
+});