fix(remix): Move hook checks inside the wrapper component. (#5371)

`withSentryRouteTracing` is called on `root.tsx` which runs before `entry.client.tsx` (where `Sentry.init` for browser is called and `remixRouterInstrumentation` is assigned). 

The check if the provided hooks are available was failing silently, and causing `withSentryRouteTracing` to early return the `App` unwrapped.

This PR ensures that validation runs on the client side, after `entry.client.tsx`.

Author: onurtemizkan

packages/remix/src/performance/client.tsx

@@ -81,16 +81,16 @@ export function remixRouterInstrumentation(useEffect: UseEffect, useLocation: Us
  * To enable pageload/navigation tracing on every route.
  */
 export function withSentryRouteTracing<P extends Record<string, unknown>, R extends React.FC<P>>(OrigApp: R): R {
-  // Early return when any of the required functions is not available.
-  if (!_useEffect || !_useLocation || !_useMatches || !_customStartTransaction) {
-    __DEBUG_BUILD__ && logger.warn('Remix SDK was unable to wrap your root because of one or more missing parameters.');
-
-    // @ts-ignore Setting more specific React Component typing for `R` generic above
-    // will break advanced type inference done by react router params
-    return OrigApp;
-  }
-
   const SentryRoot: React.FC<P> = (props: P) => {
+    // Early return when any of the required functions is not available.
+    if (!_useEffect || !_useLocation || !_useMatches || !_customStartTransaction) {
+      __DEBUG_BUILD__ &&
+        logger.warn('Remix SDK was unable to wrap your root because of one or more missing parameters.');
+
+      // @ts-ignore Setting more specific React Component typing for `R` generic above
+      // will break advanced type inference done by react router params
+      return <OrigApp {...props} />;
+    }
     let isBaseLocation: boolean = false;
 
     const location = _useLocation();