From f7c2ee2289f7f93205675563d8630fa53800681b Mon Sep 17 00:00:00 2001
From: Abhijeet Prasad <aprasad@sentry.io>
Date: Thu, 15 Jul 2021 09:58:08 -0400
Subject: [PATCH] fix(react): Make Route typing more generic

https://github.com/DefinitelyTyped/DefinitelyTyped/pull/51355 merging in
lead to some more robust type inference for React Router params. This
means that for Typescript >= 4.1.5, certain param types break when using
the `withSentryRouting` higher order component.

To fix this issue, we use a generic instead of a React component type
for the wrapped React component. As we have to use this generic instead
of a specific React type, we have to use @ts-ignore to make the JSX
expressions work with typescript.

Fixes https://github.com/getsentry/sentry-javascript/issues/3808
---
 packages/react/src/reactrouter.tsx | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/packages/react/src/reactrouter.tsx b/packages/react/src/reactrouter.tsx
index ea1eac417924..56fef41136df 100644
--- a/packages/react/src/reactrouter.tsx
+++ b/packages/react/src/reactrouter.tsx
@@ -148,18 +148,26 @@ function computeRootMatch(pathname: string): Match {
   return { path: '/', url: '/', params: {}, isExact: pathname === '/' };
 }
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export function withSentryRouting<P extends Record<string, any>>(Route: React.ComponentType<P>): React.FC<P> {
-  const componentDisplayName = Route.displayName || Route.name;
+/* eslint-disable @typescript-eslint/no-explicit-any */
+export function withSentryRouting<P extends Record<string, any>, R extends React.ComponentType<P>>(Route: R): R {
+  const componentDisplayName = (Route as any).displayName || (Route as any).name;
 
   const WrappedRoute: React.FC<P> = (props: P) => {
     if (activeTransaction && props && props.computedMatch && props.computedMatch.isExact) {
       activeTransaction.setName(props.computedMatch.path);
     }
+
+    // @ts-ignore Setting more specific React Component typing for `R` generic above
+    // will break advanced type inference done by react router params:
+    // https://github.com/DefinitelyTyped/DefinitelyTyped/blob/13dc4235c069e25fe7ee16e11f529d909f9f3ff8/types/react-router/index.d.ts#L154-L164
     return <Route {...props} />;
   };
 
   WrappedRoute.displayName = `sentryRoute(${componentDisplayName})`;
   hoistNonReactStatics(WrappedRoute, Route);
+  // @ts-ignore Setting more specific React Component typing for `R` generic above
+  // will break advanced type inference done by react router params:
+  // https://github.com/DefinitelyTyped/DefinitelyTyped/blob/13dc4235c069e25fe7ee16e11f529d909f9f3ff8/types/react-router/index.d.ts#L154-L164
   return WrappedRoute;
 }
+/* eslint-enable @typescript-eslint/no-explicit-any */