chore(build): Upgrade to Prettier 2.x (#4452)

This upgrades all of our packages to use the latest version of Prettier, which is currently 2.5.1, in order to have support for linting of code written in typescript 3.8 and above.

When Prettier went to 2.0, it introduced some changes to its defaults[1], most notably:

- casting between two unlike types, with a cast to `unknown` in between, no longer requires parentheses around the first cast,
- inline functions defined with the `function` keyword now have a space after the word `function`, and
- indentation of multi-line expressions and statements is adjusted, sometimes to make more lines, sometimes fewer.

All three of these have been applied to all of the code in the repo.

The final change to defaults - to make it so that parameter lists in arrow functions always have parentheses around them, even if they only consist of one parameter - led to a lot of visual noise, so it's been overridden to preserve the current formatting.

[1] https://prettier.io/blog/2020/03/21/2.0.0.html

Author: lobsterkatie

.prettierrc.json

@@ -1,4 +1,5 @@
 {
+  "arrowParens": "avoid",
   "printWidth": 120,
   "proseWrap": "always",
   "singleQuote": true,

package.json

@@ -68,7 +68,7 @@
     "madge": "4.0.2",
     "mocha": "^6.1.4",
     "npm-run-all": "^4.1.5",
-    "prettier": "1.19.1",
+    "prettier": "2.5.1",
     "replace-in-file": "^4.0.0",
     "rimraf": "^3.0.2",
     "sinon": "^7.3.2",

packages/angular/src/tracing.ts

@@ -183,7 +183,7 @@ export function TraceClassDecorator(): ClassDecorator {
   return target => {
     const originalOnInit = target.prototype.ngOnInit;
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    target.prototype.ngOnInit = function(...args: any[]): ReturnType<typeof originalOnInit> {
+    target.prototype.ngOnInit = function (...args: any[]): ReturnType<typeof originalOnInit> {
       const activeTransaction = getActiveTransaction();
       if (activeTransaction) {
         tracingSpan = activeTransaction.startChild({
@@ -198,7 +198,7 @@ export function TraceClassDecorator(): ClassDecorator {
 
     const originalAfterViewInit = target.prototype.ngAfterViewInit;
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    target.prototype.ngAfterViewInit = function(...args: any[]): ReturnType<typeof originalAfterViewInit> {
+    target.prototype.ngAfterViewInit = function (...args: any[]): ReturnType<typeof originalAfterViewInit> {
       if (tracingSpan) {
         tracingSpan.finish();
       }
@@ -218,7 +218,7 @@ export function TraceMethodDecorator(): MethodDecorator {
   return (target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor) => {
     const originalMethod = descriptor.value;
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    descriptor.value = function(...args: any[]): ReturnType<typeof originalMethod> {
+    descriptor.value = function (...args: any[]): ReturnType<typeof originalMethod> {
       const now = timestampWithMs();
       const activeTransaction = getActiveTransaction();
       if (activeTransaction) {

packages/browser/src/helpers.ts

@@ -80,7 +80,7 @@ export function wrap(
 
   /* eslint-disable prefer-rest-params */
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const sentryWrapped: WrappedFunction = function(this: any): void {
+  const sentryWrapped: WrappedFunction = function (this: any): void {
     const args = Array.prototype.slice.call(arguments);
 
     try {

packages/browser/src/integrations/breadcrumbs.ts

@@ -121,7 +121,7 @@ function _domBreadcrumb(dom: BreadcrumbsOptions['dom']): (handlerData: { [key: s
     try {
       target = handlerData.event.target
         ? htmlTreeAsString(handlerData.event.target as Node, keyAttrs)
-        : htmlTreeAsString((handlerData.event as unknown) as Node, keyAttrs);
+        : htmlTreeAsString(handlerData.event as unknown as Node, keyAttrs);
     } catch (e) {
       target = '<unknown>';
     }

packages/browser/src/integrations/globalhandlers.ts

@@ -181,7 +181,8 @@ function _eventFromRejectionWithPrimitive(reason: Primitive): Event {
  */
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 function _eventFromIncompleteOnError(msg: any, url: any, line: any, column: any): Event {
-  const ERROR_TYPES_RE = /^(?:[Uu]ncaught (?:exception: )?)?(?:((?:Eval|Internal|Range|Reference|Syntax|Type|URI|)Error): )?(.*)$/i;
+  const ERROR_TYPES_RE =
+    /^(?:[Uu]ncaught (?:exception: )?)?(?:((?:Eval|Internal|Range|Reference|Syntax|Type|URI|)Error): )?(.*)$/i;
 
   // If 'message' is ErrorEvent, get real message from inside
   let message = isErrorEvent(msg) ? msg.message : msg;

packages/browser/src/integrations/trycatch.ts

@@ -109,7 +109,7 @@ export class TryCatch implements Integration {
 /** JSDoc */
 function _wrapTimeFunction(original: () => void): () => number {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  return function(this: any, ...args: any[]): number {
+  return function (this: any, ...args: any[]): number {
     const originalCallback = args[0];
     args[0] = wrap(originalCallback, {
       mechanism: {
@@ -126,7 +126,7 @@ function _wrapTimeFunction(original: () => void): () => number {
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 function _wrapRAF(original: any): (callback: () => void) => any {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  return function(this: any, callback: () => void): () => void {
+  return function (this: any, callback: () => void): () => void {
     // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
     return original.call(
       this,
@@ -147,15 +147,15 @@ function _wrapRAF(original: any): (callback: () => void) => any {
 /** JSDoc */
 function _wrapXHR(originalSend: () => void): () => void {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  return function(this: XMLHttpRequest, ...args: any[]): void {
+  return function (this: XMLHttpRequest, ...args: any[]): void {
     // eslint-disable-next-line @typescript-eslint/no-this-alias
     const xhr = this;
     const xmlHttpRequestProps: XMLHttpRequestProp[] = ['onload', 'onerror', 'onprogress', 'onreadystatechange'];
 
     xmlHttpRequestProps.forEach(prop => {
       if (prop in xhr && typeof xhr[prop] === 'function') {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        fill(xhr, prop, function(original: WrappedFunction): () => any {
+        fill(xhr, prop, function (original: WrappedFunction): () => any {
           const wrapOptions = {
             mechanism: {
               data: {
@@ -195,10 +195,12 @@ function _wrapEventTarget(target: string): void {
     return;
   }
 
-  fill(proto, 'addEventListener', function(
-    original: () => void,
-  ): (eventName: string, fn: EventListenerObject, options?: boolean | AddEventListenerOptions) => void {
-    return function(
+  fill(proto, 'addEventListener', function (original: () => void): (
+    eventName: string,
+    fn: EventListenerObject,
+    options?: boolean | AddEventListenerOptions,
+  ) => void {
+    return function (
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
       this: any,
       eventName: string,
@@ -227,7 +229,7 @@ function _wrapEventTarget(target: string): void {
         this,
         eventName,
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        wrap((fn as any) as WrappedFunction, {
+        wrap(fn as any as WrappedFunction, {
           mechanism: {
             data: {
               function: 'addEventListener',
@@ -243,44 +245,48 @@ function _wrapEventTarget(target: string): void {
     };
   });
 
-  fill(proto, 'removeEventListener', function(
-    originalRemoveEventListener: () => void,
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  ): (this: any, eventName: string, fn: EventListenerObject, options?: boolean | EventListenerOptions) => () => void {
-    return function(
+  fill(
+    proto,
+    'removeEventListener',
+    function (
+      originalRemoveEventListener: () => void,
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      this: any,
-      eventName: string,
-      fn: EventListenerObject,
-      options?: boolean | EventListenerOptions,
-    ): () => void {
-      /**
-       * There are 2 possible scenarios here:
-       *
-       * 1. Someone passes a callback, which was attached prior to Sentry initialization, or by using unmodified
-       * method, eg. `document.addEventListener.call(el, name, handler). In this case, we treat this function
-       * as a pass-through, and call original `removeEventListener` with it.
-       *
-       * 2. Someone passes a callback, which was attached after Sentry was initialized, which means that it was using
-       * our wrapped version of `addEventListener`, which internally calls `wrap` helper.
-       * This helper "wraps" whole callback inside a try/catch statement, and attached appropriate metadata to it,
-       * in order for us to make a distinction between wrapped/non-wrapped functions possible.
-       * If a function was wrapped, it has additional property of `__sentry_wrapped__`, holding the handler.
-       *
-       * When someone adds a handler prior to initialization, and then do it again, but after,
-       * then we have to detach both of them. Otherwise, if we'd detach only wrapped one, it'd be impossible
-       * to get rid of the initial handler and it'd stick there forever.
-       */
-      const wrappedEventHandler = (fn as unknown) as WrappedFunction;
-      try {
-        const originalEventHandler = wrappedEventHandler && wrappedEventHandler.__sentry_wrapped__;
-        if (originalEventHandler) {
-          originalRemoveEventListener.call(this, eventName, originalEventHandler, options);
+    ): (this: any, eventName: string, fn: EventListenerObject, options?: boolean | EventListenerOptions) => () => void {
+      return function (
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        this: any,
+        eventName: string,
+        fn: EventListenerObject,
+        options?: boolean | EventListenerOptions,
+      ): () => void {
+        /**
+         * There are 2 possible scenarios here:
+         *
+         * 1. Someone passes a callback, which was attached prior to Sentry initialization, or by using unmodified
+         * method, eg. `document.addEventListener.call(el, name, handler). In this case, we treat this function
+         * as a pass-through, and call original `removeEventListener` with it.
+         *
+         * 2. Someone passes a callback, which was attached after Sentry was initialized, which means that it was using
+         * our wrapped version of `addEventListener`, which internally calls `wrap` helper.
+         * This helper "wraps" whole callback inside a try/catch statement, and attached appropriate metadata to it,
+         * in order for us to make a distinction between wrapped/non-wrapped functions possible.
+         * If a function was wrapped, it has additional property of `__sentry_wrapped__`, holding the handler.
+         *
+         * When someone adds a handler prior to initialization, and then do it again, but after,
+         * then we have to detach both of them. Otherwise, if we'd detach only wrapped one, it'd be impossible
+         * to get rid of the initial handler and it'd stick there forever.
+         */
+        const wrappedEventHandler = fn as unknown as WrappedFunction;
+        try {
+          const originalEventHandler = wrappedEventHandler && wrappedEventHandler.__sentry_wrapped__;
+          if (originalEventHandler) {
+            originalRemoveEventListener.call(this, eventName, originalEventHandler, options);
+          }
+        } catch (e) {
+          // ignore, accessing __sentry_wrapped__ will throw in some Selenium environments
         }
-      } catch (e) {
-        // ignore, accessing __sentry_wrapped__ will throw in some Selenium environments
-      }
-      return originalRemoveEventListener.call(this, eventName, wrappedEventHandler, options);
-    };
-  });
+        return originalRemoveEventListener.call(this, eventName, wrappedEventHandler, options);
+      };
+    },
+  );
 }

packages/browser/src/tracekit.ts

@@ -42,12 +42,15 @@ export interface StackTrace {
 const UNKNOWN_FUNCTION = '?';
 
 // Chromium based browsers: Chrome, Brave, new Opera, new Edge
-const chrome = /^\s*at (?:(.*?) ?\()?((?:file|https?|blob|chrome-extension|address|native|eval|webpack|<anonymous>|[-a-z]+:|.*bundle|\/).*?)(?::(\d+))?(?::(\d+))?\)?\s*$/i;
+const chrome =
+  /^\s*at (?:(.*?) ?\()?((?:file|https?|blob|chrome-extension|address|native|eval|webpack|<anonymous>|[-a-z]+:|.*bundle|\/).*?)(?::(\d+))?(?::(\d+))?\)?\s*$/i;
 // gecko regex: `(?:bundle|\d+\.js)`: `bundle` is for react native, `\d+\.js` also but specifically for ram bundles because it
 // generates filenames without a prefix like `file://` the filenames in the stacktrace are just 42.js
 // We need this specific case for now because we want no other regex to match.
-const gecko = /^\s*(.*?)(?:\((.*?)\))?(?:^|@)?((?:file|https?|blob|chrome|webpack|resource|moz-extension|capacitor).*?:\/.*?|\[native code\]|[^@]*(?:bundle|\d+\.js)|\/[\w\-. /=]+)(?::(\d+))?(?::(\d+))?\s*$/i;
-const winjs = /^\s*at (?:((?:\[object object\])?.+) )?\(?((?:file|ms-appx|https?|webpack|blob):.*?):(\d+)(?::(\d+))?\)?\s*$/i;
+const gecko =
+  /^\s*(.*?)(?:\((.*?)\))?(?:^|@)?((?:file|https?|blob|chrome|webpack|resource|moz-extension|capacitor).*?:\/.*?|\[native code\]|[^@]*(?:bundle|\d+\.js)|\/[\w\-. /=]+)(?::(\d+))?(?::(\d+))?\s*$/i;
+const winjs =
+  /^\s*at (?:((?:\[object object\])?.+) )?\(?((?:file|ms-appx|https?|webpack|blob):.*?):(\d+)(?::(\d+))?\)?\s*$/i;
 const geckoEval = /(\S+) line (\d+)(?: > eval line \d+)* > eval/i;
 const chromeEval = /\((\S*)(?::(\d+))(?::(\d+))\)/;
 // Based on our own mapping pattern - https://github.com/getsentry/sentry/blob/9f08305e09866c8bd6d0c24f5b0aabdd7dd6c59c/src/sentry/lang/javascript/errormapping.py#L83-L108
@@ -204,7 +207,8 @@ function computeStackTraceFromStacktraceProp(ex: any): StackTrace | null {
   // reliably in other circumstances.
   const stacktrace = ex.stacktrace;
   const opera10Regex = / line (\d+).*script (?:in )?(\S+)(?:: in function (\S+))?$/i;
-  const opera11Regex = / line (\d+), column (\d+)\s*(?:in (?:<anonymous function: ([^>]+)>|([^)]+))\((.*)\))? in (.*):\s*$/i;
+  const opera11Regex =
+    / line (\d+), column (\d+)\s*(?:in (?:<anonymous function: ([^>]+)>|([^)]+))\((.*)\))? in (.*):\s*$/i;
   const lines = stacktrace.split('\n');
   const stack = [];
   let parts;

packages/browser/test/unit/index.test.ts

@@ -325,7 +325,7 @@ describe('wrap()', () => {
 
   it('should allow for passing this and arguments through binding', () => {
     const result = wrap(
-      function(this: unknown, a: string, b: number): unknown[] {
+      function (this: unknown, a: string, b: number): unknown[] {
         return [this, a, b];
       }.bind({ context: 'this' }, 'b', 42),
     );
@@ -335,7 +335,7 @@ describe('wrap()', () => {
     expect((result as unknown[])[2]).toBe(42);
 
     const result2 = wrap(
-      function(this: { x: number }): number {
+      function (this: { x: number }): number {
         return this.x;
       }.bind({ x: 42 }),
     );

packages/browser/test/unit/integrations/helpers.test.ts

@@ -135,7 +135,7 @@ describe('internal wrap()', () => {
       },
     };
     // @ts-ignore eventFn does not have property handleEvent
-    context.eventFn.handleEvent = function(): void {
+    context.eventFn.handleEvent = function (): void {
       expect(this).toBe(context);
     };
 

packages/browser/test/unit/tracekit/custom.test.ts

@@ -186,32 +186,28 @@ describe('Tracekit - Custom Tests', () => {
     const stacktrace = computeStackTrace(REACT_NATIVE_EXPO_EXCEPTION);
     expect(stacktrace.stack).toEqual([
       {
-        url:
-          '/data/user/0/com.sentrytest/files/.expo-internal/bundle-613EDD44F3305B9D75D4679663900F2BCDDDC326F247CA3202A3A4219FD412D3',
+        url: '/data/user/0/com.sentrytest/files/.expo-internal/bundle-613EDD44F3305B9D75D4679663900F2BCDDDC326F247CA3202A3A4219FD412D3',
         func: 'onPress',
         args: [],
         line: 595,
         column: 658,
       },
       {
-        url:
-          '/data/user/0/com.sentrytest/files/.expo-internal/bundle-613EDD44F3305B9D75D4679663900F2BCDDDC326F247CA3202A3A4219FD412D3',
+        url: '/data/user/0/com.sentrytest/files/.expo-internal/bundle-613EDD44F3305B9D75D4679663900F2BCDDDC326F247CA3202A3A4219FD412D3',
         func: 'value',
         args: [],
         line: 221,
         column: 7656,
       },
       {
-        url:
-          '/data/user/0/com.sentrytest/files/.expo-internal/bundle-613EDD44F3305B9D75D4679663900F2BCDDDC326F247CA3202A3A4219FD412D3',
+        url: '/data/user/0/com.sentrytest/files/.expo-internal/bundle-613EDD44F3305B9D75D4679663900F2BCDDDC326F247CA3202A3A4219FD412D3',
         func: 'onResponderRelease',
         args: [],
         line: 221,
         column: 5666,
       },
       {
-        url:
-          '/data/user/0/com.sentrytest/files/.expo-internal/bundle-613EDD44F3305B9D75D4679663900F2BCDDDC326F247CA3202A3A4219FD412D3',
+        url: '/data/user/0/com.sentrytest/files/.expo-internal/bundle-613EDD44F3305B9D75D4679663900F2BCDDDC326F247CA3202A3A4219FD412D3',
         func: 'p',
         args: [],
         line: 96,

packages/browser/test/unit/tracekit/original.test.ts

@@ -881,8 +881,7 @@ describe('Tracekit - Original Tests', () => {
       column: 24,
     });
     expect(stackFrames.stack[7]).toEqual({
-      url:
-        '/home/username/sample-workspace/sampleapp.collect.react/node_modules/react-native/Libraries/Renderer/src/renderers/native/ReactNativeBaseComponent.js',
+      url: '/home/username/sample-workspace/sampleapp.collect.react/node_modules/react-native/Libraries/Renderer/src/renderers/native/ReactNativeBaseComponent.js',
       func: 'this',
       args: [],
       line: 74,

packages/browser/test/unit/transports/base.test.ts

@@ -14,7 +14,7 @@ describe('BaseTransport', () => {
       navigator.sendBeacon = sendBeaconSpy;
       Object.defineProperty(document, 'visibilityState', {
         configurable: true,
-        get: function() {
+        get: function () {
           return visibilityState;
         },
       });

packages/core/src/integrations/functiontostring.ts

@@ -23,7 +23,7 @@ export class FunctionToString implements Integration {
     originalFunctionToString = Function.prototype.toString;
 
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    Function.prototype.toString = function(this: WrappedFunction, ...args: any[]): string {
+    Function.prototype.toString = function (this: WrappedFunction, ...args: any[]): string {
       const context = getOriginalFunction(this) || this;
       return originalFunctionToString.apply(context, args);
     };