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 { getRemixVersion } 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;
@@ -109,6 +101,9 @@ export function withSentry<P extends Record<string, unknown>, R extends React.FC
     errorBoundaryOptions: {},
   },
 ): R {
+  // This part runs on the server-side so it's safe to use `getRemixVersion` here.
+  const remixVersion = getRemixVersion();
+
   const SentryRoot: React.FC<P> = (props: P) => {
     // Early return when any of the required functions is not available.
     if (!_useEffect || !_useLocation || !_useMatches || !_customStartTransaction) {
@@ -162,7 +157,7 @@ export function withSentry<P extends Record<string, unknown>, R extends React.FC
 
     isBaseLocation = false;
 
-    if (!isRemixV2() && options.wrapWithErrorBoundary) {
+    if (remixVersion >= 2 && options.wrapWithErrorBoundary) {
       // @ts-ignore 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);

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 { getRemixVersion } 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(getRemixVersion() >= 2);
 
   nodeInit(options as NodeOptions);
 

packages/remix/src/utils/futureFlags.ts

@@ -1,4 +1,4 @@
-import { GLOBAL_OBJ } from '@sentry/utils';
+import { GLOBAL_OBJ, loadModule, parseSemver } from '@sentry/utils';
 
 import type { FutureConfig, ServerBuild } from './vendor/types';
 
@@ -33,3 +33,14 @@ export function getFutureFlagsBrowser(): FutureConfig | undefined {
 export function getFutureFlagsServer(build: ServerBuild): FutureConfig | undefined {
   return build.future;
 }
+
+/**
+ * Read Remix version from module package.json
+ *
+ * @returns The version string
+ */
+export function getRemixVersion(): number {
+  const pkg = loadModule<{ version: string }>('@remix-run/dev/package.json');
+  const version = pkg ? pkg.version : '0.0.0';
+  return Number(parseSemver(version).major) || 0;
+}

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;