feat: Add request and module details to context (#544)

Ref #543


![image](https://github.com/user-attachments/assets/407865d6-0e21-4608-8f8a-56f4948306c7)

---------

Co-authored-by: Shubhdeep Chhabra <[email protected]>

.changeset/khaki-snails-dance.md

@@ -0,0 +1,6 @@
+---
+'@spotlightjs/spotlight': minor
+'@spotlightjs/overlay': minor
+---
+
+Add request and module details to context with JSONViewer

.gitignore

@@ -27,6 +27,7 @@ dist-ssr
 *.sln
 *.sw?
 
+.astro
 .yalc
 yalc.lock
 .vite-inspect

e2e-tests/astro/src/env.d.ts

@@ -1 +1,2 @@
+/// <reference path="../.astro/types.d.ts" />
 /// <reference types="astro/client" />

packages/astro/src/env.d.ts

@@ -1 +1,2 @@
+/// <reference path="../.astro/types.d.ts" />
 /// <reference types="astro/client" />

packages/overlay/src/components/JsonViewer.tsx

@@ -0,0 +1,71 @@
+import ReactJson from 'react-json-view';
+
+// Need this separately to fix Storybook 8 bundling
+// See #419 and #420 for more context
+const noop = () => {};
+
+function shouldCollapse({ src, type }: { src: Array<unknown> | object; type: string }) {
+  if (type === 'object') return Object.keys(src).length > 10;
+  if (type === 'array') return (src as Array<unknown>).length > 10;
+  return false;
+}
+
+export default function JsonViewer({
+  data,
+  onUpdateData = noop,
+  editingEnabled = false,
+  clipboardEnabled = true,
+  displayDataTypes = false,
+  quotesOnKeys = false,
+  name = null,
+  collapseStringsAfterLength = 80,
+}: {
+  data: object;
+  onUpdateData?: (value: unknown) => void;
+  editingEnabled?: boolean;
+  clipboardEnabled?: boolean;
+  displayDataTypes?: boolean;
+  quotesOnKeys?: boolean;
+  name?: string | null | false;
+  collapseStringsAfterLength?: number;
+}) {
+  return (
+    <ReactJson
+      theme="bright"
+      displayDataTypes={displayDataTypes}
+      quotesOnKeys={quotesOnKeys}
+      shouldCollapse={shouldCollapse}
+      collapseStringsAfterLength={collapseStringsAfterLength}
+      name={name}
+      src={data}
+      enableClipboard={clipboardEnabled}
+      onEdit={
+        editingEnabled &&
+        (e => {
+          if (e.new_value === 'error') {
+            return false;
+          }
+          onUpdateData(e.updated_src);
+        })
+      }
+      onDelete={
+        editingEnabled &&
+        (e => {
+          if (e.new_value === 'error') {
+            return false;
+          }
+          onUpdateData(e.updated_src);
+        })
+      }
+      onAdd={
+        editingEnabled &&
+        (e => {
+          if (e.new_value === 'error') {
+            return false;
+          }
+          onUpdateData(e.updated_src);
+        })
+      }
+    />
+  );
+}

packages/overlay/src/integrations/sentry/components/developerInfo/EnvelopeDetails.tsx

@@ -2,7 +2,7 @@ import type { Envelope } from '@sentry/types';
 import { useState } from 'react';
 import type { RawEventContext } from '~/integrations/integration';
 import SidePanel, { SidePanelHeader } from '~/ui/SidePanel';
-import JsonViewer from './JsonViewer';
+import JsonViewer from '../../../../components/JsonViewer';
 
 export default function EnvelopeDetails({ data }: { data: { envelope: Envelope; rawEnvelope: RawEventContext } }) {
   const [showRawJSON, setShowRawJSON] = useState<boolean>(false);

packages/overlay/src/integrations/sentry/components/events/EventContexts.tsx

@@ -1,4 +1,6 @@
-import { SentryEvent } from '../../types';
+import { Nullable } from 'vitest';
+import JsonViewer from '../../../../components/JsonViewer';
+import type { SentryEvent } from '../../types';
 import Tags from '../Tags';
 
 const EXAMPLE_CONTEXT = `Sentry.setContext("character", {
@@ -8,11 +10,21 @@ const EXAMPLE_CONTEXT = `Sentry.setContext("character", {
 });`;
 
 export default function EventContexts({ event }: { event: SentryEvent }) {
-  const contexts = { extra: event.extra, ...event.contexts };
+  const contexts: Record<string, Nullable<Record<string, unknown>>> = {
+    request: event.request,
+    ...event.contexts,
+  };
+  if (event.extra) {
+    contexts.extra = event.extra;
+  }
+  if (event.modules) {
+    contexts.extra = Object.assign(contexts.extra || {}, { modules: event.modules });
+  }
+  const contextEntries = Object.entries(contexts).filter(entry => entry[1]) as [string, Record<string, unknown>][];
 
-  const tags = event.tags;
+  const { tags } = event;
 
-  if ((!contexts || !Object.values(contexts).some(v => v)) && !tags) {
+  if (contextEntries.length === 0 && !tags) {
     return (
       <div className="space-y-4 px-6">
         <div className="text-primary-300">
@@ -31,29 +43,29 @@ export default function EventContexts({ event }: { event: SentryEvent }) {
         </div>
       )}
       <div className="space-y-6">
-        {Object.entries(contexts).map(([ctxKey, ctxValues]) =>
-          ctxValues ? (
-            <div key={ctxKey}>
-              <h2 className="font-bold uppercase">{ctxKey}</h2>
-              <table className="w-full">
-                <tbody>
-                  {Object.entries(ctxValues).map(([key, value]) => (
-                    <tr key={key}>
-                      <th className="text-primary-300 w-1/12 py-0.5 pr-4 text-left font-mono font-normal">
-                        <div className="w-full truncate">{key}</div>
-                      </th>
-                      <td className="py-0.5">
-                        <pre className="text-primary-300 whitespace-nowrap font-mono">
-                          {JSON.stringify(value, undefined, 2)}
-                        </pre>
-                      </td>
-                    </tr>
-                  ))}
-                </tbody>
-              </table>
-            </div>
-          ) : null,
-        )}
+        {contextEntries.map(([ctxKey, ctxValues]) => (
+          <div key={ctxKey}>
+            <h2 className="font-bold uppercase">{ctxKey}</h2>
+            <table className="w-full">
+              <tbody>
+                {Object.entries(ctxValues).map(([key, value]) => (
+                  <tr key={`${ctxKey}-${key}`}>
+                    <th className="text-primary-300 w-1/12 py-0.5 pr-4 text-left font-mono font-normal">
+                      <div className="w-full truncate">{key}</div>
+                    </th>
+                    <td className="py-0.5">
+                      {typeof value !== 'object' || !value ? (
+                        <pre className="text-primary-300 whitespace-nowrap font-mono">{JSON.stringify(value)}</pre>
+                      ) : (
+                        <JsonViewer key={`${ctxKey}-${key}`} data={value} />
+                      )}
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        ))}
       </div>
     </>
   );

packages/overlay/src/integrations/sentry/components/events/EventList.tsx

@@ -6,7 +6,7 @@ import CardList from '../../../../components/CardList';
 import TimeSince from '../../../../components/TimeSince';
 import { useSentryEvents } from '../../data/useSentryEvents';
 import { useSentryHelpers } from '../../data/useSentryHelpers';
-import { SentryEvent } from '../../types';
+import type { SentryEvent } from '../../types';
 import HiddenItemsButton from '../HiddenItemsButton';
 import PlatformIcon from '../PlatformIcon';
 import { EventSummary } from './Event';

packages/overlay/src/integrations/sentry/types.ts

@@ -59,7 +59,9 @@ type CommonEventAttrs = {
   start_timestamp?: number;
   contexts?: Contexts;
   tags?: Tags;
-  extra?: { [key: string]: string | number };
+  extra?: Record<string, string | number>;
+  request?: Record<string, Record<string, string> | string>;
+  modules?: Record<string, string>;
   sdk?: Sdk;
   measurements?: Measurements;
 };