Merge branch 'master' into abhi/circular-dep

Author: AbhiPrasad

packages/angular/src/errorhandler.ts

@@ -2,6 +2,19 @@ import { HttpErrorResponse } from '@angular/common/http';
 import { ErrorHandler as AngularErrorHandler, Injectable } from '@angular/core';
 import * as Sentry from '@sentry/browser';
 
+// That's the `global.Zone` exposed when the `zone.js` package is used.
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+declare const Zone: any;
+
+// There're 2 types of Angular applications:
+// 1) zone-full (by default)
+// 2) zone-less
+// The developer can avoid importing the `zone.js` package and tells Angular that
+// he is responsible for running the change detection by himself. This is done by
+// "nooping" the zone through `CompilerOptions` when bootstrapping the root module.
+// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+const isNgZoneEnabled = typeof Zone !== 'undefined' && !!Zone.current;
+
 /**
  * Options used to configure the behavior of the Angular ErrorHandler.
  */
@@ -38,7 +51,16 @@ class SentryErrorHandler implements AngularErrorHandler {
     const extractedError = this._extractError(error) || 'Handled unknown error';
 
     // Capture handled exception and send it to Sentry.
-    const eventId = Sentry.captureException(extractedError);
+    const eventId = isNgZoneEnabled
+      ? // The `Zone.root.run` basically will capture the exception in the most parent zone.
+        // The Angular's zone is forked from the `Zone.root`. In this case, `zone.js` won't
+        // trigger change detection, and `ApplicationRef.tick()` will not be run.
+        // Caretaker note: we're using `Zone.root` except `NgZone.runOutsideAngular` since this
+        // will require injecting the `NgZone` facade. That will create a breaking change for
+        // projects already using the `SentryErrorHandler`.
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+        Zone.root.run(() => Sentry.captureException(extractedError))
+      : Sentry.captureException(extractedError);
 
     // When in development mode, log the error to console for immediate feedback.
     if (this._options.logErrors) {

packages/angular/src/tracing.ts

@@ -6,6 +6,19 @@ import { logger, stripUrlQueryAndFragment, timestampWithMs } from '@sentry/utils
 import { Observable, Subscription } from 'rxjs';
 import { filter, tap } from 'rxjs/operators';
 
+// That's the `global.Zone` exposed when the `zone.js` package is used.
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+declare const Zone: any;
+
+// There're 2 types of Angular applications:
+// 1) zone-full (by default)
+// 2) zone-less
+// The developer can avoid importing the `zone.js` package and tells Angular that
+// he is responsible for running the change detection by himself. This is done by
+// "nooping" the zone through `CompilerOptions` when bootstrapping the root module.
+// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+const isNgZoneEnabled = typeof Zone !== 'undefined' && !!Zone.current;
+
 let instrumentationInitialized: boolean;
 let stashedStartTransaction: (context: TransactionContext) => Transaction | undefined;
 let stashedStartTransactionOnLocationChange: boolean;
@@ -93,13 +106,27 @@ export class TraceService implements OnDestroy {
     filter(event => event instanceof NavigationEnd),
     tap(() => {
       if (this._routingSpan) {
-        this._routingSpan.finish();
-        delete this._routingSpan;
+        if (isNgZoneEnabled) {
+          // The `Zone.root.run` basically will finish the transaction in the most parent zone.
+          // The Angular's zone is forked from the `Zone.root`. In this case, `zone.js` won't
+          // trigger change detection, and `ApplicationRef.tick()` will not be run.
+          // Caretaker note: we're using `Zone.root` except `NgZone.runOutsideAngular` since this
+          // will require injecting the `NgZone` facade. That will create a breaking change for
+          // projects already using the `TraceService`.
+          // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+          Zone.root.run(() => {
+            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+            this._routingSpan!.finish();
+          });
+        } else {
+          this._routingSpan.finish();
+        }
+        this._routingSpan = null;
       }
     }),
   );
 
-  private _routingSpan?: Span;
+  private _routingSpan: Span | null = null;
   private _subscription: Subscription = new Subscription();
 
   public constructor(private readonly _router: Router) {

packages/nextjs/vercel/instructions.md

@@ -1,4 +1,14 @@
-### To prepare branch for deploying on Vercel:
+# Testing an SDK Branch on Vercel
+
+Follow the instructions below to test a branch of the SDK against a test app deployed to Vercel. This assumes you
+already have such an app set up, and modifies both it and the SDK branch such that the dependency installation process
+run on Vercel includes cloning the repo, building the current branch of the SDK, and setting the test app's
+`@sentry/next` dependency to point to the newly-built local version.
+
+(The clone-build-link step is necessary because you can't point a `package.json` dependency to a sub-folder of a git
+repo, only a full repo itself. Since we run a monorepo, this won't work in our case.)
+
+### To prepare your SDK branch for deploying on Vercel
 
 From `packages/nextjs`, run
 
@@ -7,7 +17,7 @@ From `packages/nextjs`, run
 This will delete unneeded packages (angular, vue, etc) in order to speed up deployment. It will then commit that change.
 When your branch is ready to PR, just rebase and drop that commit.
 
-### To prepare test app for using current branch:
+### To prepare your test app for using current SDK branch
 
 First, make sure the branch you want to test is checked out in your `sentry-javascript` repo, and that all changes you
 want to test are pushed to GitHub.
@@ -16,9 +26,10 @@ From `packages/nextjs`, run
 
   `yarn vercel:project <path/to/testapp>`.
 
-This will copy a script into a `.sentry` folder at the root level of your test app,and create a second one. (The first
-script is the one you'll run on Vercel. The second is a helper to the first, so that it knows which branch to use.) It
-will then commit (but not push) this change.
+This will copy the `install-sentry-from-branch.sh` script into a `.sentry` folder at the root level of your test app,
+and create a `set-branch-name.sh` script in the same location. (The first script is the one you'll run on Vercel. The
+second is called by the first, and just sets an environment variable with the current (SDK) branch name.) It will then
+commit (but not push) this change.
 
 Go into your project settings on Vercel and change the install command to
 
@@ -30,9 +41,12 @@ If you're using bundle analyzer, change the build command to
 
 The bundle visualizations will be available on your deployed site at `/client.html` and `/server.html`.
 
-### To test the SDK:
+NOTE: You don't need to change the `@sentry/nextjs` dependency in your project's `package.json` file. That will happen
+on the fly each time your app is deployed.
+
+### To test the SDK
 
-Once you have pushed the changes made by `yarn vercel:project` to GitHub, just make changes and push, and Vercel will
-always use the latest version of both the SDK and your test app. Pushing changes to your test app will trigger a new
-build in Vercel; for changes to the SDK, you'll need to manually redeploy, either by kicking off a new build or simply
-choosing 'Redeploy' on your most recent existing build.
+Once you have pushed the changes made by `yarn vercel:project` to GitHub, just make changes (either to the SDK or your
+test app) and push them. Vercel will always use the latest version of both the SDK and your test app each time it
+deploys. Pushing changes to your test app will trigger a new build in Vercel; for changes to the SDK, you'll need to
+manually redeploy, either by kicking off a new build or simply choosing 'Redeploy' on your most recent existing build.

packages/nextjs/vercel/make-project-use-current-branch.sh

@@ -19,7 +19,7 @@ yarn vercel:branch
 
 cd $PROJECT_DIR
 
-# make sure we're dealing with a clean repo
+# make sure we're dealing with a clean test app repo
 STASHED_CHANGES=$(git status --porcelain)
 if [ -n "${STASHED_CHANGES}" ]; then
   echo "Found uncommitted changes in your project. Stashing them."

packages/nextjs/vercel/set-up-branch-for-test-app-use.sh

@@ -9,7 +9,7 @@ NEXTJS_SDK_DIR=$(pwd)
 # this puts us in the repo root
 cd ../..
 
-# make sure we're dealing with a clean repo
+# make sure we're dealing with a clean SDK repo
 STASHED_CHANGES=$(git status --porcelain)
 if [ -n "${STASHED_CHANGES}" ]; then
   echo "Found uncommitted changes. Stashing them."

packages/node/src/integrations/console.ts

@@ -19,9 +19,8 @@ export class Console implements Integration {
    * @inheritDoc
    */
   public setupOnce(): void {
-    const consoleModule = require('console');
     for (const level of ['debug', 'info', 'warn', 'error', 'log']) {
-      fill(consoleModule, level, createConsoleWrapper(level));
+      fill(console, level, createConsoleWrapper(level));
     }
   }
 }