ref(remix)!: Align action form-data span attribute with conventions (#23227)

Node emitted `formData.<key>` for Remix action form data while
Cloudflare/Hydrogen emitted `remix.action_form_data.<key>`.
`@sentry/conventions` settles on the latter, so the Node name moves.

closes #23007

Co-authored-by: Claude Opus 5 (1M context) <noreply@anthropic.com>

Author: chargome

dev-packages/e2e-tests/test-applications/create-remix-app-express/tests/server-transactions.test.ts

@@ -41,8 +41,8 @@ test('Sends form data with action span', async ({ page }) => {
   expect(actionSpan?.op).toBe('function');
   expect(actionSpan?.data?.['code.function.name']).toBe('action');
   expect(actionSpan?.data).toMatchObject({
-    'formData.text': 'test',
-    'formData.file': 'file.txt',
+    'remix.action_form_data.text': 'test',
+    'remix.action_form_data.file': 'file.txt',
   });
 });
 

docs/migration/v11-end-state.md

@@ -286,6 +286,11 @@ If `captureActionFormDataKeys` is not set, all form fields are captured when
 looks sensitive (`password`, `token`, …) are replaced with `[Filtered]`, including explicitly
 allowlisted ones.
 
+The captured fields are now reported as `remix.action_form_data.<field>` span attributes on every
+runtime. On Node, they were previously reported as `formData.<field>`; the Cloudflare and Hydrogen
+paths already used the new name. Update any dashboards, alerts, or saved searches that query
+`formData.*`.
+
 ### Channel-based instrumentation is the default
 
 Affected SDKs: `@sentry/node` and all dependents.

packages/remix/src/server/integrations/tracing-channel.ts

@@ -240,7 +240,7 @@ function subscribeCallRouteAction(formDataCapture: FormDataCapture | undefined):
         }
 
         formData
-          .then(resolved => applyFormDataAttributes(span, resolved, formDataCapture, 'formData.'))
+          .then(resolved => applyFormDataAttributes(span, resolved, formDataCapture))
           // Silently continue on any error. Typically happens because the action body cannot be
           // processed into FormData, in which case we should just continue.
           .catch(() => undefined)

packages/remix/src/utils/formData.ts

@@ -1,3 +1,4 @@
+import { REMIX_ACTION_FORM_DATA_KEY_BASE } from '@sentry/conventions/attributes';
 import type { Client, Span } from '@sentry/core';
 import { _INTERNAL_filterKeyValueData } from '@sentry/core';
 import type { RemixOptions } from './remixOptions';
@@ -30,16 +31,11 @@ export function resolveFormDataCapture(client: Client | undefined): FormDataCapt
 }
 
 /**
- * Sets form-data span attributes under `attributePrefix`, honoring the configured key list and
- * renames. Values are run through the shared sensitive-key filter, so an allowlisted `password`
- * still reports as `[Filtered]` rather than in the clear.
+ * Sets form-data span attributes, honoring the configured key list and renames. Values are run
+ * through the shared sensitive-key filter, so an allowlisted `password` still reports as
+ * `[Filtered]` rather than in the clear.
  */
-export function applyFormDataAttributes(
-  span: Span,
-  formData: FormData,
-  { keys }: FormDataCapture,
-  attributePrefix: string,
-): void {
+export function applyFormDataAttributes(span: Span, formData: FormData, { keys }: FormDataCapture): void {
   const collected: Record<string, string> = {};
 
   formData.forEach((value, key) => {
@@ -59,6 +55,6 @@ export function applyFormDataAttributes(
   });
 
   for (const [key, value] of Object.entries(collected)) {
-    span.setAttribute(`${attributePrefix}${key}`, value);
+    span.setAttribute(`${REMIX_ACTION_FORM_DATA_KEY_BASE}.${key}`, value);
   }
 }

packages/remix/src/utils/utils.ts

@@ -26,7 +26,7 @@ export async function storeFormDataKeys(
     // https://remix.run/docs/en/main/utils/parse-multipart-form-data#unstable_parsemultipartformdata
     const formData = await clonedRequest.formData();
 
-    applyFormDataAttributes(span, formData, formDataCapture, 'remix.action_form_data.');
+    applyFormDataAttributes(span, formData, formDataCapture);
   } catch (e) {
     DEBUG_BUILD && debug.warn('Failed to read FormData from request', e);
   }

packages/remix/test/server/tracing-channel-no-form-data.test.ts

@@ -61,8 +61,8 @@ describe('remixIntegration with orchestrion (no form-data capture configured)',
       }),
     );
     expect(span.setAttribute).toHaveBeenCalledWith('http.status_code', 201);
-    // No form-data capture configured, so no `formData.*` attribute is set.
-    expect(span.setAttribute).not.toHaveBeenCalledWith('formData.actionType', expect.anything());
+    // No form-data capture configured, so no `remix.action_form_data.*` attribute is set.
+    expect(span.setAttribute).not.toHaveBeenCalledWith('remix.action_form_data.actionType', expect.anything());
     expect(span.end).toHaveBeenCalledTimes(1);
   });
 });

packages/remix/test/server/tracing-channel.test.ts

@@ -150,6 +150,6 @@ describe('remixIntegration (Orchestrion-based)', () => {
     // The span ends only after the async form-data read resolves.
     await vi.waitFor(() => expect(span.end).toHaveBeenCalledTimes(1));
     expect(span.setAttribute).toHaveBeenCalledWith('http.status_code', 201);
-    expect(span.setAttribute).toHaveBeenCalledWith('formData.actionType', 'create');
+    expect(span.setAttribute).toHaveBeenCalledWith('remix.action_form_data.actionType', 'create');
   });
 });

packages/remix/test/utils/formData.test.ts

@@ -24,7 +24,7 @@ function applyTo(formData: FormData, keys: Record<string, string | boolean> | un
   const attributes: Record<string, unknown> = {};
   const span = { setAttribute: (key: string, value: unknown) => void (attributes[key] = value) } as unknown as Span;
 
-  applyFormDataAttributes(span, formData, { keys }, 'formData.');
+  applyFormDataAttributes(span, formData, { keys });
 
   return attributes;
 }
@@ -57,31 +57,34 @@ describe('applyFormDataAttributes', () => {
   it('sets only allowlisted fields', () => {
     const attributes = applyTo(formDataOf({ username: 'alice', bio: 'ignored' }), { username: true });
 
-    expect(attributes).toEqual({ 'formData.username': 'alice' });
+    expect(attributes).toEqual({ 'remix.action_form_data.username': 'alice' });
   });
 
   it('applies renames', () => {
     const attributes = applyTo(formDataOf({ username: 'alice' }), { username: 'user' });
 
-    expect(attributes).toEqual({ 'formData.user': 'alice' });
+    expect(attributes).toEqual({ 'remix.action_form_data.user': 'alice' });
   });
 
   it('sets every field when no keys are configured', () => {
     const attributes = applyTo(formDataOf({ username: 'alice', bio: 'hello' }), undefined);
 
-    expect(attributes).toEqual({ 'formData.username': 'alice', 'formData.bio': 'hello' });
+    expect(attributes).toEqual({ 'remix.action_form_data.username': 'alice', 'remix.action_form_data.bio': 'hello' });
   });
 
   it('filters sensitive values when capturing all fields', () => {
     const attributes = applyTo(formDataOf({ username: 'alice', password: 'hunter2' }), undefined);
 
-    expect(attributes).toEqual({ 'formData.username': 'alice', 'formData.password': '[Filtered]' });
+    expect(attributes).toEqual({
+      'remix.action_form_data.username': 'alice',
+      'remix.action_form_data.password': '[Filtered]',
+    });
   });
 
   it('filters sensitive values even when explicitly allowlisted', () => {
     const attributes = applyTo(formDataOf({ password: 'hunter2' }), { password: true });
 
-    expect(attributes).toEqual({ 'formData.password': '[Filtered]' });
+    expect(attributes).toEqual({ 'remix.action_form_data.password': '[Filtered]' });
   });
 
   it('still filters a sensitive field renamed after rename', () => {
@@ -90,22 +93,22 @@ describe('applyFormDataAttributes', () => {
     // value ships in the clear.
     const attributes = applyTo(formDataOf({ password: 'hunter2' }), { password: 'pw' });
 
-    expect(attributes).toEqual({ 'formData.pw': '[Filtered]' });
+    expect(attributes).toEqual({ 'remix.action_form_data.pw': '[Filtered]' });
   });
 
   it('reports the filename for file uploads, not the contents', () => {
     const formData = new FormData();
     formData.append('avatar', new Blob(['file contents']), 'avatar.png');
 
-    expect(applyTo(formData, undefined)).toEqual({ 'formData.avatar': 'avatar.png' });
+    expect(applyTo(formData, undefined)).toEqual({ 'remix.action_form_data.avatar': 'avatar.png' });
   });
 
   it('reports a placeholder for unnamed non-string values', () => {
     const formData = new FormData();
     // An appended Blob with no filename reports as `blob` in undici; force the empty-name case.
     formData.append('avatar', new Blob(['x']), '');
 
-    expect(applyTo(formData, undefined)).toEqual({ 'formData.avatar': '[non-string value]' });
+    expect(applyTo(formData, undefined)).toEqual({ 'remix.action_form_data.avatar': '[non-string value]' });
   });
 
   it('sets nothing for an empty form', () => {