Read Remix version from dependency module.

Author: onurtemizkan

packages/remix/src/client/performance.tsx

@@ -1,11 +1,10 @@
 import type { ErrorBoundaryProps } from '@sentry/react';
-import { getCurrentHub, WINDOW, withErrorBoundary } from '@sentry/react';
+import { WINDOW, withErrorBoundary } from '@sentry/react';
 import type { Transaction, TransactionContext } from '@sentry/types';
 import { isNodeEnv, logger } from '@sentry/utils';
 import * as React from 'react';
 
-import { getFutureFlagsBrowser } from '../utils/futureFlags';
-import type { RemixOptions } from '../utils/remixOptions';
+import { getFutureFlagsBrowser, readRemixVersionFromLoader } from '../utils/futureFlags';
 
 const DEFAULT_TAGS = {
   'routing.instrumentation': 'remix-router',
@@ -41,13 +40,6 @@ let _useMatches: UseMatches;
 let _customStartTransaction: (context: TransactionContext) => Transaction | undefined;
 let _startTransactionOnLocationChange: boolean;
 
-function isRemixV2(): boolean {
-  const client = getCurrentHub().getClient();
-  const opt = client && (client.getOptions() as RemixOptions);
-
-  return (opt && opt.isRemixV2) || getFutureFlagsBrowser()?.v2_errorBoundary || false;
-}
-
 function getInitPathName(): string | undefined {
   if (WINDOW && WINDOW.location) {
     return WINDOW.location.pathname;
@@ -56,6 +48,10 @@ function getInitPathName(): string | undefined {
   return undefined;
 }
 
+function isRemixV2(remixVersion: number | undefined): boolean {
+  return remixVersion === 2 || getFutureFlagsBrowser()?.v2_errorBoundary || false;
+}
+
 /**
  * Creates a react-router v6 instrumention for Remix applications.
  *
@@ -162,17 +158,17 @@ export function withSentry<P extends Record<string, unknown>, R extends React.FC
 
     isBaseLocation = false;
 
-    if (!isRemixV2() && options.wrapWithErrorBoundary) {
-      // @ts-ignore Setting more specific React Component typing for `R` generic above
+    if (!isRemixV2(readRemixVersionFromLoader()) && options.wrapWithErrorBoundary) {
+      // @ts-expect-error Setting more specific React Component typing for `R` generic above
       // will break advanced type inference done by react router params
       return withErrorBoundary(OrigApp, options.errorBoundaryOptions)(props);
     }
-    // @ts-ignore Setting more specific React Component typing for `R` generic above
+    // @ts-expect-error Setting more specific React Component typing for `R` generic above
     // will break advanced type inference done by react router params
     return <OrigApp {...props} />;
   };
 
-  // @ts-ignore Setting more specific React Component typing for `R` generic above
+  // @ts-expect-error Setting more specific React Component typing for `R` generic above
   // will break advanced type inference done by react router params
   return SentryRoot;
 }

packages/remix/src/index.client.tsx

@@ -1,5 +1,4 @@
 /* eslint-disable import/export */
-import type { BrowserOptions } from '@sentry/react';
 import { configureScope, init as reactInit } from '@sentry/react';
 
 import { buildMetadata } from './utils/metadata';
@@ -12,7 +11,7 @@ export function init(options: RemixOptions): void {
   buildMetadata(options, ['remix', 'react']);
   options.environment = options.environment || process.env.NODE_ENV;
 
-  reactInit(options as BrowserOptions);
+  reactInit(options);
 
   configureScope(scope => {
     scope.setTag('runtime', 'browser');

packages/remix/src/index.server.ts

@@ -3,6 +3,7 @@ import type { NodeOptions } from '@sentry/node';
 import { configureScope, getCurrentHub, init as nodeInit } from '@sentry/node';
 import { logger } from '@sentry/utils';
 
+import { getRemixVersionFromPkg } from './utils/futureFlags';
 import { instrumentServer } from './utils/instrumentServer';
 import { buildMetadata } from './utils/metadata';
 import type { RemixOptions } from './utils/remixOptions';
@@ -76,7 +77,7 @@ export function init(options: RemixOptions): void {
     return;
   }
 
-  instrumentServer(options.isRemixV2);
+  instrumentServer(getRemixVersionFromPkg() === 2);
 
   nodeInit(options as NodeOptions);
 

packages/remix/src/utils/futureFlags.ts

@@ -1,10 +1,17 @@
-import { GLOBAL_OBJ } from '@sentry/utils';
+import { GLOBAL_OBJ, loadModule, parseSemver } from '@sentry/utils';
 
 import type { FutureConfig, ServerBuild } from './vendor/types';
 
 export type EnhancedGlobal = typeof GLOBAL_OBJ & {
   __remixContext?: {
     future?: FutureConfig;
+    state?: {
+      loaderData?: {
+        root?: {
+          remixVersion?: number;
+        };
+      };
+    };
   };
 };
 
@@ -33,3 +40,32 @@ export function getFutureFlagsBrowser(): FutureConfig | undefined {
 export function getFutureFlagsServer(build: ServerBuild): FutureConfig | undefined {
   return build.future;
 }
+
+/**
+ * Read Remix version from module package.json
+ *
+ * @returns The major version number
+ */
+export function getRemixVersionFromPkg(): number | undefined {
+  const pkg = loadModule<{ version: string }>('@remix-run/react/package.json');
+  const version = pkg ? pkg.version : '0.0.0';
+
+  return parseSemver(version).major;
+}
+
+/**
+ * Read Remix version from the Remix context on the browser
+ *
+ * @returns The major version number
+ */
+export function readRemixVersionFromLoader(): number | undefined {
+  const window = GLOBAL_OBJ as EnhancedGlobal;
+
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+  if (!window.__remixContext?.state?.loaderData?.root) {
+    return;
+  }
+
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+  return window.__remixContext.state.loaderData.root.remixVersion;
+}

packages/remix/src/utils/instrumentServer.ts

@@ -13,7 +13,7 @@ import {
   tracingContextFromHeaders,
 } from '@sentry/utils';
 
-import { getFutureFlagsServer } from './futureFlags';
+import { getFutureFlagsServer, getRemixVersionFromPkg } from './futureFlags';
 import { extractData, getRequestMatch, isDeferredData, isResponse, json, matchServerRoutes } from './vendor/response';
 import type {
   AppData,
@@ -250,11 +250,13 @@ function makeWrappedRootLoader(origLoader: DataFunction): DataFunction {
   return async function (this: unknown, args: DataFunctionArgs): Promise<Response | AppData> {
     const res = await origLoader.call(this, args);
     const traceAndBaggage = getTraceAndBaggage();
+    const remixVersion = getRemixVersionFromPkg();
 
     if (isDeferredData(res)) {
       return {
         ...res.data,
         ...traceAndBaggage,
+        remixVersion,
       };
     }
 
@@ -270,7 +272,7 @@ function makeWrappedRootLoader(origLoader: DataFunction): DataFunction {
 
         if (typeof data === 'object') {
           return json(
-            { ...data, ...traceAndBaggage },
+            { ...data, ...traceAndBaggage, remixVersion },
             { headers: res.headers, statusText: res.statusText, status: res.status },
           );
         } else {
@@ -281,7 +283,7 @@ function makeWrappedRootLoader(origLoader: DataFunction): DataFunction {
       }
     }
 
-    return { ...res, ...traceAndBaggage };
+    return { ...res, ...traceAndBaggage, remixVersion };
   };
 }
 

packages/remix/src/utils/remixOptions.ts

@@ -2,6 +2,4 @@ import type { NodeOptions } from '@sentry/node';
 import type { BrowserOptions } from '@sentry/react';
 import type { Options } from '@sentry/types';
 
-export type RemixOptions = (Options | BrowserOptions | NodeOptions) & {
-  isRemixV2?: boolean;
-};
+export type RemixOptions = Options | BrowserOptions | NodeOptions;