feat(remix): Add OTEL auto-instrumentation instructions.

Author: onurtemizkan

docs/platforms/javascript/guides/remix/manual-setup.mdx

@@ -24,16 +24,18 @@ pnpm add @sentry/remix
 
 ## Configuration
 
-To use this SDK, initialize Sentry in your Remix entry points for both the client and server.
-
-Create two files in the root directory of your project, `entry.client.tsx` and `entry.server.tsx` (if they don't already exist). Add your initialization code in these files for the client-side and server-side SDK, respectively.
-
-The two configuration types are mostly the same, except that some configuration features, like Session Replay, only work in `entry.client.tsx`.
+To use this SDK, initialize Sentry in your Remix project for both the client and server.
 
 <SignInNote />
 
 ### Client-side Configuration
 
+Create `entry.client.tsx` in the root directory of your project (if it doesn't already exist). Add your client-side initialization code there.
+
+<Note>
+Session Replay only works on the client-side.
+</Note>
+
 ```typescript {tabTitle:Client} {filename: entry.client.tsx}
 import { useLocation, useMatches } from "@remix-run/react";
 import * as Sentry from "@sentry/remix";
@@ -66,22 +68,6 @@ Sentry.init({
 });
 ```
 
-### Server-side Configuration
-
-```typescript {tabTitle:Server} {filename: entry.server.tsx}
-import * as Sentry from "@sentry/remix";
-
-Sentry.init({
-  dsn: "___PUBLIC_DSN___",
-
-  // Set tracesSampleRate to 1.0 to capture 100%
-  // of transactions for tracing.
-  // We recommend adjusting this value in production
-  tracesSampleRate: 1.0,
-});
-```
-
-Initialize Sentry in your entry point for the server to capture exceptions and get performance metrics for your [`action`](https://remix.run/docs/en/main/route/action) and [`loader`](https://remix.run/docs/en/main/route/loader) functions. You can also initialize Sentry's database integrations, such as <Link to="/platforms/javascript/guides/node/tracing/database/opt-in/#prisma-orm-integration">Prisma</Link>, to get spans for your database calls.
 
 To catch React component errors (in Remix v1) and routing transactions (in all Remix versions), wrap your Remix root with `withSentry`.
 
@@ -145,6 +131,48 @@ withSentry(App, {
 });
 ```
 
+
+### Server-side Configuration
+
+Create an instrumentation file (named here as `instrument.server.mjs`) in your project. Add your initialization code in this file for the server-side SDK.
+
+```typescript {tabTitle:Server} {filename: instrument.server.mjs}
+import * as Sentry from "@sentry/remix";
+
+Sentry.init({
+  dsn: "___PUBLIC_DSN___",
+  // Set tracesSampleRate to 1.0 to capture 100%
+  // of transactions for tracing.
+  // We recommend adjusting this value in production
+  tracesSampleRate: 1.0,
+
+  // To use Sentry OpenTelemetry auto-instrumentation
+  // default: false
+  autoInstrumentRemix: true,
+
+  // Optionally capture action formData attributes with errors.
+  // This requires `sendDefaultPii` set to true as well.
+  captureActionFormDataKeys: {
+    key_x: true,
+    key_y: true,
+  },
+  // To capture action formData attributes.
+  sendDefaultPii: true
+});
+```
+
+Then run your Remix server with:
+
+```bash
+NODE_OPTIONS='--import=./instrument.server.mjs' remix-serve build
+# or
+NODE_OPTIONS='--require=./instrument.server.cjs' remix-serve build
+```
+
+If you use Express server instead of Remix built-in server. You can alternatively import your instrumentation file directly at the top of your server implementation. See the example [here](#custom-express-server).
+
+Sentry's Remix SDK will automatically record your `loader` and `action` transactions, as well as server-side errors. You can also [manually capture transactions](/platforms/javascript/guides/remix/usage).
+
 ## Remix v2 Features
 
 _Available from SDK version 7.59.0_
@@ -209,24 +237,18 @@ To enable readable stack traces, <PlatformLink to="/sourcemaps">configure source
 
 ## Custom Express Server
 
-If you use a custom Express server in your Remix application, you should wrap your [`createRequestHandler` function](https://remix.run/docs/en/main/other-api/adapter#createrequesthandler) manually with `wrapExpressCreateRequestHandler`. This isn't necessary if you're using the built-in Remix App Server.
+You can import your server instrumentation file at the top of your Express server implementation.
 
-<Note>
-
-`wrapExpressCreateRequestHandler` is available starting with version 7.11.0.
-
-</Note>
-
-```typescript {filename: server/index.ts}
-import { wrapExpressCreateRequestHandler } from "@sentry/remix";
-import { createRequestHandler } from "@remix-run/express";
+```typescript {filename: server.ts}
+// import the Sentry instrumentation file before anything else.
+import './instrument.server.mjs';
+// alternatively `require('./instrument.server.cjs')`
 
 // ...
 
-const createSentryRequestHandler =
-  wrapExpressCreateRequestHandler(createRequestHandler);
+const app = express();
 
-app.all("*", createSentryRequestHandler(/* ... */));
+// ...
 ```
 
 ### Usage with Vite development mode (only for SDK versions < 7.106.0)