build: Switch @sentry/react to using eslint

AbhiPrasad · AbhiPrasad · commit 1d4b9cd53414 · 2020-08-11T09:18:00.000-04:00
diff --git a/.eslintignore b/.eslintignore
@@ -1,6 +1,5 @@
 # THIS IS A TEMPORARY FILE
 # THIS WILL BE REMOVED AFTER WE FINISH ESLINT UPGRADE
 
-packages/react/**/*
 packages/tracing/**/*
 packages/typescript/**/*
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -43,7 +43,7 @@ module.exports = {
         // Enforce type annotations to maintain consistency. This is especially important as
         // we have a public API, so we want changes to be very explicit.
         '@typescript-eslint/typedef': ['error', { arrowParameter: false }],
-        '@typescript-eslint/explicit-function-return-type': 'error',
+        '@typescript-eslint/explicit-function-return-type': ['error', { allowExpressions: true }],
 
         // Consistent ordering of fields, methods and constructors for classes should be enforced
         '@typescript-eslint/member-ordering': 'error',
diff --git a/package.json b/package.json
@@ -9,7 +9,6 @@
     "fix": "lerna run --stream --concurrency 1 fix",
     "link:yarn": "lerna run --stream --concurrency 1 link:yarn",
     "lint": "lerna run --stream --concurrency 1 lint",
-    "lint:json": "lerna run --stream --concurrency 1 lint:tslint:json",
     "test": "lerna run --stream --concurrency 1 --sort test",
     "codecov": "codecov",
     "postpublish": "make publish-docs"
diff --git a/packages/integrations/package.json b/packages/integrations/package.json
@@ -32,7 +32,6 @@
     "rollup-plugin-node-resolve": "^4.2.3",
     "rollup-plugin-terser": "^4.0.4",
     "rollup-plugin-typescript2": "^0.21.0",
-    "tslint": "5.16.0",
     "typescript": "3.4.5"
   },
   "scripts": {
diff --git a/packages/node/package.json b/packages/node/package.json
@@ -37,7 +37,6 @@
     "prettier": "^1.17.0",
     "prettier-check": "^2.0.0",
     "rimraf": "^2.6.3",
-    "tslint": "5.16.0",
     "typescript": "3.4.5"
   },
   "scripts": {
diff --git a/packages/react/.eslintrc.js b/packages/react/.eslintrc.js
@@ -0,0 +1,36 @@
+module.exports = {
+  root: true,
+  env: {
+    es6: true,
+    browser: true,
+  },
+  parserOptions: {
+    ecmaVersion: 2018,
+    jsx: true,
+  },
+  extends: ['../../.eslintrc.js', 'plugin:react/recommended', 'plugin:react-hooks/recommended'],
+  ignorePatterns: ['build/**/*', 'dist/**/*', 'esm/**/*', 'examples/**/*', 'scripts/**/*'],
+  overrides: [
+    {
+      files: ['*.ts', '*.tsx', '*.d.ts'],
+      parserOptions: {
+        project: './tsconfig.json',
+      },
+    },
+    {
+      files: ['*.tsx'],
+      rules: {
+        'jsdoc/require-jsdoc': 'off',
+      },
+    },
+    {
+      files: ['test/**/*'],
+      rules: {
+        '@typescript-eslint/no-explicit-any': 'off',
+      },
+    },
+  ],
+  rules: {
+    'react/prop-types': 'off',
+  },
+};
diff --git a/packages/react/package.json b/packages/react/package.json
@@ -37,6 +37,8 @@
     "@types/react-router-3": "npm:@types/react-router@3.0.20",
     "@types/react-router-4": "npm:@types/react-router@5.0.0",
     "@types/react-router-5": "npm:@types/react-router@5.0.0",
+    "eslint-plugin-react": "^7.20.5",
+    "eslint-plugin-react-hooks": "^4.0.8",
     "history-4": "npm:history@4.6.0",
     "history-5": "npm:history@4.9.0",
     "jest": "^24.7.1",
@@ -52,9 +54,6 @@
     "react-test-renderer": "^16.13.1",
     "redux": "^4.0.5",
     "rimraf": "^2.6.3",
-    "tslint": "5.16.0",
-    "tslint-react": "^5.0.0",
-    "tslint-react-hooks": "^2.2.2",
     "typescript": "3.4.5"
   },
   "scripts": {
@@ -66,13 +65,12 @@
     "build:watch:esm": "tsc -p tsconfig.esm.json -w --preserveWatchOutput",
     "clean": "rimraf dist coverage build esm",
     "link:yarn": "yarn link",
-    "lint": "run-s lint:prettier lint:tslint",
-    "lint:prettier": "prettier-check \"{src,test}/**/*.{ts,tsx}\"",
-    "lint:tslint": "tslint -t stylish -p .",
-    "lint:tslint:json": "tslint --format json -p . | tee lint-results.json",
-    "fix": "run-s fix:tslint fix:prettier",
-    "fix:prettier": "prettier --write \"{src,test}/**/*.{ts,tsx}\"",
-    "fix:tslint": "tslint --fix -t stylish -p .",
+    "lint": "run-s lint:prettier lint:eslint",
+    "lint:prettier": "prettier-check \"{src,test}/**/*.ts\"",
+    "lint:eslint": "eslint . --cache --cache-location '../../eslintcache/' --format stylish",
+    "fix": "run-s fix:eslint fix:prettier",
+    "fix:prettier": "prettier --write \"{src,test}/**/*.ts\"",
+    "fix:eslint": "eslint . --format stylish --fix",
     "test": "jest",
     "test:watch": "jest --watch"
   },
diff --git a/packages/react/src/errorboundary.tsx b/packages/react/src/errorboundary.tsx
@@ -7,8 +7,8 @@ export const UNKNOWN_COMPONENT = 'unknown';
 export type FallbackRender = (fallback: {
   error: Error | null;
   componentStack: string | null;
-  resetError(): void;
   eventId: string | null;
+  resetError(): void;
 }) => React.ReactNode;
 
 export type ErrorBoundaryProps = {
@@ -97,7 +97,7 @@ class ErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoundarySta
     }
   }
 
-  public resetErrorBoundary = () => {
+  public resetErrorBoundary: () => void = () => {
     const { onReset } = this.props;
     const { error, componentStack, eventId } = this.state;
     if (onReset) {
@@ -126,7 +126,7 @@ class ErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoundarySta
   }
 }
 
-function withErrorBoundary<P extends object>(
+function withErrorBoundary<P extends Record<string, unknown>>(
   WrappedComponent: React.ComponentType<P>,
   errorBoundaryOptions: ErrorBoundaryProps,
 ): React.FC<P> {
diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts
@@ -1,5 +1,10 @@
 import { addGlobalEventProcessor, SDK_VERSION } from '@sentry/browser';
 
+/**
+ * A global side effect that makes sure Sentry events that user
+ * `@sentry/react` will correctly have Sentry events associated
+ * with it.
+ */
 function createReactEventProcessor(): void {
   if (addGlobalEventProcessor) {
     addGlobalEventProcessor(event => {
diff --git a/packages/react/src/profiler.tsx b/packages/react/src/profiler.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import { getCurrentHub, Hub } from '@sentry/browser';
 import { Integration, IntegrationClass, Span, Transaction } from '@sentry/types';
 import { timestampWithMs } from '@sentry/utils';
@@ -12,7 +13,7 @@ const TRACING_GETTER = ({
 
 let globalTracingIntegration: Integration | null = null;
 /** @deprecated remove when @sentry/apm no longer used */
-const getTracingIntegration = () => {
+const getTracingIntegration = (): Integration | null => {
   if (globalTracingIntegration) {
     return globalTracingIntegration;
   }
@@ -32,7 +33,6 @@ function pushActivity(name: string, op: string): number | null {
     return null;
   }
 
-  // tslint:disable-next-line:no-unsafe-any
   return (globalTracingIntegration as any).constructor.pushActivity(name, {
     description: `<${name}>`,
     op: `react.${op}`,
@@ -50,7 +50,6 @@ function popActivity(activity: number | null): void {
     return;
   }
 
-  // tslint:disable-next-line:no-unsafe-any
   (globalTracingIntegration as any).constructor.popActivity(activity);
 }
 
@@ -93,6 +92,7 @@ class Profiler extends React.Component<ProfilerProps> {
   // The span of the mount activity
   private _mountSpan: Span | undefined = undefined;
 
+  // eslint-disable-next-line @typescript-eslint/member-ordering
   public static defaultProps: Partial<ProfilerProps> = {
     disabled: false,
     includeRender: true,
@@ -108,9 +108,9 @@ class Profiler extends React.Component<ProfilerProps> {
     }
 
     // If they are using @sentry/apm, we need to push/pop activities
-    // tslint:disable-next-line: deprecation
+    // eslint-disable-next-line deprecation/deprecation
     if (getTracingIntegration()) {
-      // tslint:disable-next-line: deprecation
+      // eslint-disable-next-line deprecation/deprecation
       this._mountActivity = pushActivity(name, 'mount');
     } else {
       const activeTransaction = getActiveTransaction();
@@ -128,9 +128,9 @@ class Profiler extends React.Component<ProfilerProps> {
     if (this._mountSpan) {
       this._mountSpan.finish();
     } else {
-      // tslint:disable-next-line: deprecation
+      // eslint-disable-next-line deprecation/deprecation
       this._mountSpan = getActivitySpan(this._mountActivity);
-      // tslint:disable-next-line: deprecation
+      // eslint-disable-next-line deprecation/deprecation
       popActivity(this._mountActivity);
       this._mountActivity = null;
     }
@@ -191,7 +191,7 @@ class Profiler extends React.Component<ProfilerProps> {
  * @param WrappedComponent component that is wrapped by Profiler
  * @param options the {@link ProfilerProps} you can pass into the Profiler
  */
-function withProfiler<P extends object>(
+function withProfiler<P extends Record<string, unknown>>(
   WrappedComponent: React.ComponentType<P>,
   // We do not want to have `updateProps` given in options, it is instead filled through the HOC.
   options?: Pick<Partial<ProfilerProps>, Exclude<keyof ProfilerProps, 'updateProps'>>,
@@ -248,7 +248,7 @@ function useProfiler(
       mountSpan.finish();
     }
 
-    return () => {
+    return (): void => {
       if (mountSpan && options.hasRenderSpan) {
         mountSpan.startChild({
           description: `<${name}>`,
@@ -258,6 +258,8 @@ function useProfiler(
         });
       }
     };
+    // We only want this to run once.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 }
 
diff --git a/packages/react/src/reactrouter.tsx b/packages/react/src/reactrouter.tsx
@@ -1,9 +1,13 @@
 import { Transaction } from '@sentry/types';
 import { getGlobalObject } from '@sentry/utils';
+import hoistNonReactStatics from 'hoist-non-react-statics';
 import * as React from 'react';
 
 import { Action, Location, ReactRouterInstrumentation } from './types';
 
+// We need to disable eslint no-explict-any because any is required for the
+// react-router typings.
+/* eslint-disable @typescript-eslint/no-explicit-any */
 type Match = { path: string; url: string; params: Record<string, any>; isExact: boolean };
 
 export type RouterHistory = {
@@ -12,14 +16,26 @@ export type RouterHistory = {
 } & Record<string, any>;
 
 export type RouteConfig = {
+  [propName: string]: any;
   path?: string | string[];
   exact?: boolean;
   component?: JSX.Element;
   routes?: RouteConfig[];
-  [propName: string]: any;
 };
 
+interface RouteProps {
+  location?: Location;
+  component?: React.ComponentType<any> | React.ComponentType<any>;
+  render?: (props: any) => React.ReactNode;
+  children?: ((props: any) => React.ReactNode) | React.ReactNode;
+  path?: string | string[];
+  exact?: boolean;
+  sensitive?: boolean;
+  strict?: boolean;
+}
+
 type MatchPath = (pathname: string, props: string | string[] | any, parent?: Match | null) => Match | null;
+/* eslint-enable @typescript-eslint/no-explicit-any */
 
 const global = getGlobalObject<Window>();
 
@@ -53,7 +69,7 @@ function reactRouterInstrumentation(
     }
 
     const branches = matchRoutes(allRoutes, pathname, matchPath);
-    // tslint:disable-next-line: prefer-for-of
+    // eslint-disable-next-line @typescript-eslint/prefer-for-of
     for (let x = 0; x < branches.length; x++) {
       if (branches[x].match.isExact) {
         return branches[x].match.path;
@@ -63,7 +79,7 @@ function reactRouterInstrumentation(
     return pathname;
   }
 
-  return (startTransaction, startTransactionOnPageLoad = true, startTransactionOnLocationChange = true) => {
+  return (startTransaction, startTransactionOnPageLoad = true, startTransactionOnLocationChange = true): void => {
     if (startTransactionOnPageLoad && global && global.location) {
       activeTransaction = startTransaction({
         name: getName(global.location.pathname),
@@ -130,9 +146,20 @@ function computeRootMatch(pathname: string): Match {
   return { path: '/', url: '/', params: {}, isExact: pathname === '/' };
 }
 
-export const withSentryRouting = (Route: React.ElementType) => (props: { computedMatch?: Match }) => {
-  if (activeTransaction && props && props.computedMatch && props.computedMatch.isExact) {
-    activeTransaction.setName(props.computedMatch.path);
-  }
-  return <Route {...props} />;
-};
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function withSentryRouting<P extends RouteProps & Record<string, any>>(
+  Route: React.ComponentType<P>,
+): React.FC<P> {
+  const componentDisplayName = Route.displayName || Route.name;
+
+  const WrappedRoute: React.FC<P> = (props: P) => {
+    if (activeTransaction && props && props.computedMatch && props.computedMatch.isExact) {
+      activeTransaction.setName(props.computedMatch.path);
+    }
+    return <Route {...props} />;
+  };
+
+  WrappedRoute.displayName = `sentryRoute(${componentDisplayName})`;
+  hoistNonReactStatics(WrappedRoute, Route);
+  return WrappedRoute;
+}
diff --git a/packages/react/src/reactrouterv3.ts b/packages/react/src/reactrouterv3.ts
@@ -9,6 +9,7 @@ import { Location, ReactRouterInstrumentation } from './types';
 type HistoryV3 = {
   location?: Location;
   listen?(cb: (location: Location) => void): void;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
 } & Record<string, any>;
 
 export type Route = { path?: string; childRoutes?: Route[] };
diff --git a/packages/react/src/redux.ts b/packages/react/src/redux.ts
@@ -1,4 +1,4 @@
-// @flow
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import { configureScope } from '@sentry/minimal';
 import { Scope } from '@sentry/types';
 
@@ -18,7 +18,7 @@ type ExtendState<State, Extension> = [Extension] extends [never] ? State : State
 
 type Unsubscribe = () => void;
 
-interface Store<S = any, A extends Action = AnyAction, StateExt = never, Ext = {}> {
+interface Store<S = any, A extends Action = AnyAction, StateExt = never, Ext = Record<string, unknown>> {
   dispatch: Dispatch<A>;
   getState(): S;
   subscribe(listener: () => void): Unsubscribe;
@@ -35,15 +35,18 @@ type PreloadedState<S> = Required<S> extends {
   [$CombinedState]: undefined;
 }
   ? S extends CombinedState<infer S1>
-    ? { [K in keyof S1]?: S1[K] extends object ? PreloadedState<S1[K]> : S1[K] }
+    ? { [K in keyof S1]?: S1[K] extends Record<string, unknown> ? PreloadedState<S1[K]> : S1[K] }
     : never
   : { [K in keyof S]: S[K] extends string | number | boolean | symbol ? S[K] : PreloadedState<S[K]> };
 
-type StoreEnhancer<Ext = {}, StateExt = never> = (
+type StoreEnhancer<Ext = Record<string, unknown>, StateExt = never> = (
   next: StoreEnhancerStoreCreator<Ext, StateExt>,
 ) => StoreEnhancerStoreCreator<Ext, StateExt>;
 
-type StoreEnhancerStoreCreator<Ext = {}, StateExt = never> = <S = any, A extends Action = AnyAction>(
+type StoreEnhancerStoreCreator<Ext = Record<string, unknown>, StateExt = never> = <
+  S = any,
+  A extends Action = AnyAction
+>(
   reducer: Reducer<S, A>,
   preloadedState?: PreloadedState<S>,
 ) => Store<ExtendState<S, StateExt>, A, StateExt, Ext> & Ext;
@@ -98,7 +101,6 @@ function createReduxEnhancer(enhancerOptions?: Partial<SentryEnhancerOptions>):
       configureScope(scope => {
         /* Action breadcrumbs */
         const transformedAction = options.actionTransformer(action);
-        // tslint:disable-next-line: strict-type-predicates
         if (typeof transformedAction !== 'undefined' && transformedAction !== null) {
           scope.addBreadcrumb({
             category: ACTION_BREADCRUMB_CATEGORY,
@@ -109,9 +111,7 @@ function createReduxEnhancer(enhancerOptions?: Partial<SentryEnhancerOptions>):
 
         /* Set latest state to scope */
         const transformedState = options.stateTransformer(newState);
-        // tslint:disable-next-line: strict-type-predicates
         if (typeof transformedState !== 'undefined' && transformedState !== null) {
-          // tslint:disable-next-line: no-unsafe-any
           scope.setContext(STATE_CONTEXT_KEY, transformedState);
         } else {
           scope.setContext(STATE_CONTEXT_KEY, null);
diff --git a/packages/react/src/types.ts b/packages/react/src/types.ts
diff --git a/packages/react/test/reactrouterv3.test.tsx b/packages/react/test/reactrouterv3.test.tsx
diff --git a/packages/react/test/redux.test.ts b/packages/react/test/redux.test.ts
diff --git a/packages/react/tslint.json b/packages/react/tslint.json
diff --git a/scripts/danger.sh b/scripts/danger.sh
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -7,8 +7,8 @@ export const UNKNOWN_COMPONENT = 'unknown';`
`7`	`7`	`export type FallbackRender = (fallback: {`
`8`	`8`	`error: Error \| null;`
`9`	`9`	`componentStack: string \| null;`
`10`		`- resetError(): void;`
`11`	`10`	`eventId: string \| null;`
	`11`	`+ resetError(): void;`
`12`	`12`	`}) => React.ReactNode;`
`13`	`13`
`14`	`14`	`export type ErrorBoundaryProps = {`
`@@ -97,7 +97,7 @@ class ErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoundarySta`
`97`	`97`	`}`
`98`	`98`	`}`
`99`	`99`
`100`		`- public resetErrorBoundary = () => {`
	`100`	`+ public resetErrorBoundary: () => void = () => {`
`101`	`101`	`const { onReset } = this.props;`
`102`	`102`	`const { error, componentStack, eventId } = this.state;`
`103`	`103`	`if (onReset) {`
`@@ -126,7 +126,7 @@ class ErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoundarySta`
`126`	`126`	`}`
`127`	`127`	`}`
`128`	`128`
`129`		`-function withErrorBoundary<P extends object>(`
	`129`	`+function withErrorBoundary<P extends Record<string, unknown>>(`
`130`	`130`	`WrappedComponent: React.ComponentType<P>,`
`131`	`131`	`errorBoundaryOptions: ErrorBoundaryProps,`
`132`	`132`	`): React.FC<P> {`