Add flag to client-side.

Author: onurtemizkan

packages/e2e-tests/test-applications/create-remix-app-v2/app/entry.client.tsx

@@ -11,6 +11,7 @@ import * as Sentry from '@sentry/remix';
 
 Sentry.init({
   dsn: window.ENV.SENTRY_DSN,
+  isRemixV2: true,
   integrations: [
     new Sentry.BrowserTracing({
       routingInstrumentation: Sentry.remixRouterInstrumentation(useEffect, useLocation, useMatches),

packages/e2e-tests/test-applications/create-remix-app-v2/app/root.tsx

@@ -60,6 +60,4 @@ function App() {
   );
 }
 
-export default withSentry(App, {
-  wrapWithErrorBoundary: false,
-});
+export default withSentry(App);

packages/e2e-tests/test-applications/create-remix-app-v2/remix.config.js

@@ -6,12 +6,4 @@ module.exports = {
   // serverBuildPath: 'build/index.js',
   // publicPath: '/build/',
   serverModuleFormat: 'cjs',
-  future: {
-    v2_dev: true,
-    v2_headers: true,
-    v2_errorBoundary: true,
-    v2_meta: true,
-    v2_normalizeFormMethod: true,
-    v2_routeConvention: true,
-  },
 };

packages/remix/package.json

@@ -42,8 +42,8 @@
     "@types/express": "^4.17.14"
   },
   "peerDependencies": {
-    "@remix-run/node": "1.x",
-    "@remix-run/react": "1.x",
+    "@remix-run/node": "1.x || 2.x",
+    "@remix-run/react": "1.x || 2.x",
     "react": "16.x || 17.x || 18.x"
   },
   "scripts": {

packages/remix/src/client/performance.tsx

@@ -1,10 +1,11 @@
 import type { ErrorBoundaryProps } from '@sentry/react';
-import { WINDOW, withErrorBoundary } from '@sentry/react';
+import { getCurrentHub, 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';
 
 const DEFAULT_TAGS = {
   'routing.instrumentation': 'remix-router',
@@ -40,6 +41,13 @@ 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;
@@ -97,7 +105,7 @@ export function withSentry<P extends Record<string, unknown>, R extends React.FC
     errorBoundaryOptions?: ErrorBoundaryProps;
   } = {
     // We don't want to wrap application with Sentry's ErrorBoundary by default for Remix v2
-    wrapWithErrorBoundary: getFutureFlagsBrowser()?.v2_errorBoundary ? false : true,
+    wrapWithErrorBoundary: true,
     errorBoundaryOptions: {},
   },
 ): R {
@@ -159,7 +167,7 @@ export function withSentry<P extends Record<string, unknown>, R extends React.FC
     return <OrigApp {...props} />;
   };
 
-  if (options.wrapWithErrorBoundary) {
+  if (!isRemixV2() && 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(SentryRoot, options.errorBoundaryOptions);