feat(contexts): Hide client-related highlights in backend issues (#88539)

If a backend error is thrown in a Meta-Framework, the issue includes
`client_os` and `os` in the event context. However, the highlights
should only show data relevant to the backend.

Also, the runtime is more important than OS, so it's reordered.

Also fixes an issue in a test from
#86857 as `client_os` is not a
context type, but only an alias

fixes: getsentry/projects#801
part of: #85732

**Follow-up PR** 
- #88536

---

### Before


![image](https://github.com/user-attachments/assets/e972c62b-5255-4287-847a-96890590c10d)

or when it ran locally (server is macOS as well)


![image](https://github.com/user-attachments/assets/193c620a-992a-4894-8a4b-789f571b1275)


### After


![image](https://github.com/user-attachments/assets/212b7f3d-35e0-4272-b594-022ab5e64c4c)

or locally:


![image](https://github.com/user-attachments/assets/b5485af1-37ce-4f13-9733-5aaf913a6414)

Author: s1gr1d

static/app/components/events/contexts/index.spec.ts

@@ -0,0 +1,83 @@
+import {EventFixture} from 'sentry-fixture/event';
+
+import {getOrderedContextItems} from 'sentry/components/events/contexts';
+import type {Event} from 'sentry/types/event';
+
+describe('getOrderedContextItems', function () {
+  it('orders context items correctly', function () {
+    const event: Partial<Event> = {
+      user: {
+        id: '12345',
+        email: '[email protected]',
+      },
+      contexts: {
+        runtime: {name: 'node', type: 'runtime'},
+        os: {
+          name: 'macOS',
+          version: '15.3.2',
+          build: '24D81',
+          kernel_version: '24.3.0',
+          type: 'os',
+        },
+        browser: {name: 'Chrome', version: '134'},
+        response: {type: 'response', data: {testing: 'lalala'}},
+        feedback: {rating: 5, comment: 'Great!'},
+      },
+    };
+
+    const mockEvent = EventFixture(event);
+
+    const items = getOrderedContextItems(mockEvent);
+
+    expect(items).toHaveLength(6);
+
+    const aliasOrder = items.map(item => item.alias);
+    expect(aliasOrder[0]).toBe('response');
+    expect(aliasOrder[1]).toBe('feedback');
+    expect(aliasOrder[2]).toBe('user');
+    expect(aliasOrder[3]).toBe('runtime');
+    expect(aliasOrder[4]).toBe('os');
+  });
+
+  it('does not fail with missing context items', function () {
+    const mockEventOnlyOs = EventFixture({
+      contexts: {
+        os: {
+          os: 'macOS 15.3.2',
+          name: 'macOS',
+          version: '15.3.2',
+          type: 'os',
+        },
+      },
+    });
+
+    const itemsOnlyOs = getOrderedContextItems(mockEventOnlyOs);
+    const osIndex = itemsOnlyOs.findIndex(item => item.alias === 'os');
+    expect(osIndex).not.toBe(-1);
+  });
+
+  it('filters out empty contexts and contexts only with type', function () {
+    const mockEvent = EventFixture({
+      contexts: {
+        runtime: {
+          runtime: 'node v20.18.3',
+          name: 'node',
+          version: 'v20.18.3',
+          type: 'runtime',
+        },
+        empty: {},
+        onlyType: {
+          type: 'default',
+        },
+      },
+    });
+
+    const items = getOrderedContextItems(mockEvent);
+
+    const emptyIndex = items.findIndex(item => item.alias === 'empty');
+    const onlyTypeIndex = items.findIndex(item => item.alias === 'onlyType');
+
+    expect(emptyIndex).toBe(-1);
+    expect(onlyTypeIndex).toBe(-1);
+  });
+});

static/app/components/events/contexts/index.tsx

@@ -36,11 +36,13 @@ export function getOrderedContextItems(event: Event): ContextItem[] {
 
   // hide `flags` in the contexts section since we display this
   // info in the feature flag section below
-  const {feedback, response, flags: _, ...otherContexts} = contexts ?? {};
+  const {feedback, response, runtime, os, flags: _, ...otherContexts} = contexts ?? {};
   const orderedContext: Array<[ContextItem['alias'], ContextValue]> = [
     ['response', response],
     ['feedback', feedback],
     ['user', {...userContext, ...(customUserData as any)}],
+    ['runtime', runtime],
+    ['os', os],
     ...Object.entries(otherContexts),
   ];
   // For these context aliases, use the alias as 'type' rather than 'value.type'

static/app/components/events/highlights/highlightsIconSummary.spec.tsx

@@ -100,11 +100,41 @@ describe('HighlightsIconSummary', function () {
     expect(screen.getAllByRole('img')).toHaveLength(4);
   });
 
+  it('hides client_os and browser contexts for Meta-Framework backend issues', function () {
+    const duplicateOsContextEvent = EventFixture({
+      contexts: {
+        client_os: {
+          type: 'os',
+          name: 'macOS',
+          version: '15.3',
+        },
+        os: {
+          type: 'os',
+          name: 'Linux',
+          version: '5.10.243',
+        },
+        runtime: {
+          name: 'node',
+          runtime: 'node v20.18.3',
+          type: 'runtime',
+          version: 'v20.18.3',
+        },
+      },
+    });
+    render(<HighlightsIconSummary event={duplicateOsContextEvent} group={group} />);
+    expect(screen.getByText('Linux')).toBeInTheDocument();
+    expect(screen.getByText('5.10.243')).toBeInTheDocument();
+    expect(screen.getByText('node')).toBeInTheDocument();
+    expect(screen.getByText('v20.18.3')).toBeInTheDocument();
+    expect(screen.queryByText('macOS')).not.toBeInTheDocument();
+    expect(screen.queryByText('15.3')).not.toBeInTheDocument();
+  });
+
   it('deduplicates client_os and os contexts', function () {
     const duplicateOsContextEvent = EventFixture({
       contexts: {
         client_os: {
-          type: 'client_os',
+          type: 'os',
           name: 'macOS',
         },
         os: {

static/app/components/events/highlights/highlightsIconSummary.tsx

@@ -52,7 +52,13 @@ export function HighlightsIconSummary({event, group}: HighlightsIconSummaryProps
   // Hide device for non-native platforms since it's mostly duplicate of the client_os or os context
   const shouldDisplayDevice =
     isMobilePlatform(projectPlatform) || isNativePlatform(projectPlatform);
-  // For now, highlight icons are only interpretted from context. We should extend this to tags
+
+  // Errors thrown on the backend of a Meta-Framework (e.g. Next.js) also include the client context
+  const isMetaFrameworkBackendIssue =
+    Object.keys(event.contexts).includes('client_os') &&
+    Object.keys(event.contexts).includes('os');
+
+  // For now, highlight icons are only interpreted from context. We should extend this to tags
   // eventually, but for now, it'll match the previous expectations.
   const items = getOrderedContextItems(event)
     .map(item => ({
@@ -71,8 +77,11 @@ export function HighlightsIconSummary({event, group}: HighlightsIconSummaryProps
       }),
     }))
     .filter((item, _index, array) => {
-      // Prefer the "os" context for OS information
-      if (item.contextType === 'client_os' && array.find(i => i.contextType === 'os')) {
+      if (
+        // Hide client information in backend issues (always prefer `os` over `client_os`)
+        isMetaFrameworkBackendIssue &&
+        (item.contextType === 'browser' || item.alias === 'client_os')
+      ) {
         return false;
       }