From a4732a3b3a1f4834fa96a1618db3da98f3450a6d Mon Sep 17 00:00:00 2001 From: Burak Yigit Kaya Date: Fri, 1 Nov 2024 22:49:06 +0000 Subject: [PATCH 1/9] feat: Add request and module details to context --- .../components/developerInfo/JsonViewer.tsx | 10 +-- .../components/events/EventContexts.tsx | 67 +++++++++++++------ .../sentry/components/events/EventList.tsx | 2 +- .../overlay/src/integrations/sentry/types.ts | 4 +- packages/spotlight/package.json | 2 +- 5 files changed, 57 insertions(+), 28 deletions(-) diff --git a/packages/overlay/src/integrations/sentry/components/developerInfo/JsonViewer.tsx b/packages/overlay/src/integrations/sentry/components/developerInfo/JsonViewer.tsx index 9d139692b..8bacc62c4 100644 --- a/packages/overlay/src/integrations/sentry/components/developerInfo/JsonViewer.tsx +++ b/packages/overlay/src/integrations/sentry/components/developerInfo/JsonViewer.tsx @@ -1,6 +1,6 @@ -import { Envelope, EnvelopeItem } from '@sentry/types'; +import type { Envelope, EnvelopeItem } from '@sentry/types'; import { Suspense, lazy } from 'react'; -import { RawEventContext } from '~/integrations/integration'; +import type { RawEventContext } from '~/integrations/integration'; const LazyReactJson = lazy(() => import('react-json-view')); // Need this separately to fix Storybook 8 bundling @@ -34,7 +34,7 @@ export default function JsonViewer({ onEdit={ editingEnabled && (e => { - if (e.new_value == 'error') { + if (e.new_value === 'error') { return false; } onUpdateData(e.updated_src); @@ -43,7 +43,7 @@ export default function JsonViewer({ onDelete={ editingEnabled && (e => { - if (e.new_value == 'error') { + if (e.new_value === 'error') { return false; } onUpdateData(e.updated_src); @@ -52,7 +52,7 @@ export default function JsonViewer({ onAdd={ editingEnabled && (e => { - if (e.new_value == 'error') { + if (e.new_value === 'error') { return false; } onUpdateData(e.updated_src); diff --git a/packages/overlay/src/integrations/sentry/components/events/EventContexts.tsx b/packages/overlay/src/integrations/sentry/components/events/EventContexts.tsx index 4b85bd796..c25e66c0c 100644 --- a/packages/overlay/src/integrations/sentry/components/events/EventContexts.tsx +++ b/packages/overlay/src/integrations/sentry/components/events/EventContexts.tsx @@ -1,5 +1,7 @@ -import { SentryEvent } from '../../types'; +import { Suspense, lazy } from 'react'; +import type { SentryEvent } from '../../types'; import Tags from '../Tags'; +const LazyReactJson = lazy(() => import('react-json-view')); const EXAMPLE_CONTEXT = `Sentry.setContext("character", { name: "Mighty Fighter", @@ -7,12 +9,25 @@ const EXAMPLE_CONTEXT = `Sentry.setContext("character", { attack_type: "melee", });`; +function shouldCollapse({ src, type }: { src: Array | object; type: string }) { + if (type === 'object') return Object.keys(src).length > 10; + if (type === 'array') return (src as Array).length > 10; + return false; +} + export default function EventContexts({ event }: { event: SentryEvent }) { - const contexts = { extra: event.extra, ...event.contexts }; + const contextEntries = Object.entries({ + request: event.request, + extra: { + modules: event.modules, + ...(event.extra || {}), + }, + ...event.contexts, + }).filter(entry => entry[1]); - const tags = event.tags; + const { tags } = event; - if ((!contexts || !Object.values(contexts).some(v => v)) && !tags) { + if (contextEntries.length === 0 && !tags) { return (
@@ -31,29 +46,41 @@ export default function EventContexts({ event }: { event: SentryEvent }) {
)}
- {Object.entries(contexts).map(([ctxKey, ctxValues]) => - ctxValues ? ( + loading...
}> + {contextEntries.map(([ctxKey, ctxValues]) => (

{ctxKey}

- {Object.entries(ctxValues).map(([key, value]) => ( - - - - - ))} + {ctxValues && + Object.entries(ctxValues).map(([key, value]) => ( + + + + + ))}
-
{key}
- 		- 
-                          {JSON.stringify(value, undefined, 2)}
-
-
+
{key}
+ 		+ 
+                            {typeof value !== 'object' || !value ? (
+                              value
+                            ) : (
+                              
+                            )}
+
+
- ) : null, - )} + ))} +
); diff --git a/packages/overlay/src/integrations/sentry/components/events/EventList.tsx b/packages/overlay/src/integrations/sentry/components/events/EventList.tsx index d84375c5a..f27c67fc7 100644 --- a/packages/overlay/src/integrations/sentry/components/events/EventList.tsx +++ b/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'; diff --git a/packages/overlay/src/integrations/sentry/types.ts b/packages/overlay/src/integrations/sentry/types.ts index 15e1a616b..459fd4965 100644 --- a/packages/overlay/src/integrations/sentry/types.ts +++ b/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; + request?: Record | string>; + modules?: Record; sdk?: Sdk; measurements?: Measurements; }; diff --git a/packages/spotlight/package.json b/packages/spotlight/package.json index e0c456f09..2e42ac97f 100644 --- a/packages/spotlight/package.json +++ b/packages/spotlight/package.json @@ -7,7 +7,7 @@ "scripts": { "start": "./bin/run.js", "dev": "vite build --watch", - "build": "vite build && vite build --config vite.overlay.config.ts && tsc", + "build": "pnpm --filter '@spotlightjs/spotlight...' build && vite build && vite build --config vite.overlay.config.ts && tsc", "build:watch": "vite build --watch", "yalc:publish": "yalc publish --push --sig --private", "clean": "rimraf dist" From 7b5552a836ee84a0e00920e1a997505dc3caefdb Mon Sep 17 00:00:00 2001 From: Burak Yigit Kaya Date: Mon, 4 Nov 2024 12:24:44 +0000 Subject: [PATCH 2/9] do we still need lazy --- .../components/developerInfo/JsonViewer.tsx | 75 +++++++++---------- .../components/events/EventContexts.tsx | 71 +++++++++--------- 2 files changed, 70 insertions(+), 76 deletions(-) diff --git a/packages/overlay/src/integrations/sentry/components/developerInfo/JsonViewer.tsx b/packages/overlay/src/integrations/sentry/components/developerInfo/JsonViewer.tsx index 8bacc62c4..23b8b3034 100644 --- a/packages/overlay/src/integrations/sentry/components/developerInfo/JsonViewer.tsx +++ b/packages/overlay/src/integrations/sentry/components/developerInfo/JsonViewer.tsx @@ -1,7 +1,6 @@ import type { Envelope, EnvelopeItem } from '@sentry/types'; -import { Suspense, lazy } from 'react'; +import LazyReactJson from 'react-json-view'; import type { RawEventContext } from '~/integrations/integration'; -const LazyReactJson = lazy(() => import('react-json-view')); // Need this separately to fix Storybook 8 bundling // See #419 and #420 for more context @@ -23,42 +22,40 @@ export default function JsonViewer({ quotesOnKeys?: boolean; }) { return ( - loading...}> - type === 'array' && Object.values(src).length > 5} - 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); - }) - } - /> - + type === 'array' && Object.values(src).length > 5} + 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); + }) + } + /> ); } diff --git a/packages/overlay/src/integrations/sentry/components/events/EventContexts.tsx b/packages/overlay/src/integrations/sentry/components/events/EventContexts.tsx index c25e66c0c..9dacbfd81 100644 --- a/packages/overlay/src/integrations/sentry/components/events/EventContexts.tsx +++ b/packages/overlay/src/integrations/sentry/components/events/EventContexts.tsx @@ -1,7 +1,6 @@ -import { Suspense, lazy } from 'react'; +import LazyReactJson from 'react-json-view'; import type { SentryEvent } from '../../types'; import Tags from '../Tags'; -const LazyReactJson = lazy(() => import('react-json-view')); const EXAMPLE_CONTEXT = `Sentry.setContext("character", { name: "Mighty Fighter", @@ -46,41 +45,39 @@ export default function EventContexts({ event }: { event: SentryEvent }) { )}
- loading...
}> - {contextEntries.map(([ctxKey, ctxValues]) => ( -
-

{ctxKey}

- - - {ctxValues && - Object.entries(ctxValues).map(([key, value]) => ( - - - - - ))} - -
-
{key}
- 		- 
-                            {typeof value !== 'object' || !value ? (
-                              value
-                            ) : (
-                              
-                            )}
-
-
-
- ))} - + {contextEntries.map(([ctxKey, ctxValues]) => ( +
+

{ctxKey}

+ + + {ctxValues && + Object.entries(ctxValues).map(([key, value]) => ( + + + + + ))} + +
+
{key}
+ 		+ 
+                          {typeof value !== 'object' || !value ? (
+                            value
+                          ) : (
+                            
+                          )}
+
+
+
+ ))} ); From 51ff0eaf20227897476b3eb30562ad10535f621a Mon Sep 17 00:00:00 2001 From: Burak Yigit Kaya Date: Mon, 4 Nov 2024 19:47:29 +0000 Subject: [PATCH 3/9] naming fix + string length cap --- .../sentry/components/developerInfo/JsonViewer.tsx | 4 ++-- .../integrations/sentry/components/events/EventContexts.tsx | 1 + 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/overlay/src/integrations/sentry/components/developerInfo/JsonViewer.tsx b/packages/overlay/src/integrations/sentry/components/developerInfo/JsonViewer.tsx index 23b8b3034..2cb8264b6 100644 --- a/packages/overlay/src/integrations/sentry/components/developerInfo/JsonViewer.tsx +++ b/packages/overlay/src/integrations/sentry/components/developerInfo/JsonViewer.tsx @@ -1,5 +1,5 @@ import type { Envelope, EnvelopeItem } from '@sentry/types'; -import LazyReactJson from 'react-json-view'; +import ReactJson from 'react-json-view'; import type { RawEventContext } from '~/integrations/integration'; // Need this separately to fix Storybook 8 bundling @@ -22,7 +22,7 @@ export default function JsonViewer({ quotesOnKeys?: boolean; }) { return ( - )} From e9fa3f1fb65d1bdda73856fe937cf99d30bbbc8c Mon Sep 17 00:00:00 2001 From: Burak Yigit Kaya Date: Mon, 4 Nov 2024 20:30:11 +0000 Subject: [PATCH 4/9] add changelog --- .changeset/khaki-snails-dance.md | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 .changeset/khaki-snails-dance.md diff --git a/.changeset/khaki-snails-dance.md b/.changeset/khaki-snails-dance.md new file mode 100644 index 000000000..78bc061ea --- /dev/null +++ b/.changeset/khaki-snails-dance.md @@ -0,0 +1,6 @@ +--- +'@spotlightjs/spotlight': minor +'@spotlightjs/overlay': minor +--- + +Add request and module details to context with JSONViewer From a8e8cb0d5c8644effc8fe9c9cdb87612a3822937 Mon Sep 17 00:00:00 2001 From: Burak Yigit Kaya Date: Tue, 5 Nov 2024 11:38:04 +0000 Subject: [PATCH 5/9] refactor --- .../JsonViewer.tsx | 16 ++++++++++++-- .../developerInfo/EnvelopeDetails.tsx | 2 +- .../components/events/EventContexts.tsx | 22 ++----------------- 3 files changed, 17 insertions(+), 23 deletions(-) rename packages/overlay/src/{integrations/sentry/components/developerInfo => components}/JsonViewer.tsx (73%) diff --git a/packages/overlay/src/integrations/sentry/components/developerInfo/JsonViewer.tsx b/packages/overlay/src/components/JsonViewer.tsx similarity index 73% rename from packages/overlay/src/integrations/sentry/components/developerInfo/JsonViewer.tsx rename to packages/overlay/src/components/JsonViewer.tsx index 2cb8264b6..47427169c 100644 --- a/packages/overlay/src/integrations/sentry/components/developerInfo/JsonViewer.tsx +++ b/packages/overlay/src/components/JsonViewer.tsx @@ -6,13 +6,21 @@ import type { RawEventContext } from '~/integrations/integration'; // See #419 and #420 for more context const noop = () => {}; +function shouldCollapse({ src, type }: { src: Array | object; type: string }) { + if (type === 'object') return Object.keys(src).length > 10; + if (type === 'array') return (src as Array).length > 10; + return false; +} + export default function JsonViewer({ data, onUpdateData = noop, editingEnabled = false, - clipboardEnabled = false, + clipboardEnabled = true, displayDataTypes = false, quotesOnKeys = false, + name = null, + collapseStringsAfterLength = 80, }: { data: Envelope[0] | EnvelopeItem | RawEventContext; onUpdateData?: (value: unknown) => void; @@ -20,13 +28,17 @@ export default function JsonViewer({ clipboardEnabled?: boolean; displayDataTypes?: boolean; quotesOnKeys?: boolean; + name?: string | null | false; + collapseStringsAfterLength?: number; }) { return ( type === 'array' && Object.values(src).length > 5} + shouldCollapse={shouldCollapse} + collapseStringsAfterLength={collapseStringsAfterLength} + name={name} src={data} enableClipboard={clipboardEnabled} onEdit={ diff --git a/packages/overlay/src/integrations/sentry/components/developerInfo/EnvelopeDetails.tsx b/packages/overlay/src/integrations/sentry/components/developerInfo/EnvelopeDetails.tsx index 3e7dbc622..00625c46c 100644 --- a/packages/overlay/src/integrations/sentry/components/developerInfo/EnvelopeDetails.tsx +++ b/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(false); diff --git a/packages/overlay/src/integrations/sentry/components/events/EventContexts.tsx b/packages/overlay/src/integrations/sentry/components/events/EventContexts.tsx index e3da49667..07022fb77 100644 --- a/packages/overlay/src/integrations/sentry/components/events/EventContexts.tsx +++ b/packages/overlay/src/integrations/sentry/components/events/EventContexts.tsx @@ -1,4 +1,4 @@ -import LazyReactJson from 'react-json-view'; +import JsonViewer from '../../../../components/JsonViewer'; import type { SentryEvent } from '../../types'; import Tags from '../Tags'; @@ -8,12 +8,6 @@ const EXAMPLE_CONTEXT = `Sentry.setContext("character", { attack_type: "melee", });`; -function shouldCollapse({ src, type }: { src: Array | object; type: string }) { - if (type === 'object') return Object.keys(src).length > 10; - if (type === 'array') return (src as Array).length > 10; - return false; -} - export default function EventContexts({ event }: { event: SentryEvent }) { const contextEntries = Object.entries({ request: event.request, @@ -58,19 +52,7 @@ export default function EventContexts({ event }: { event: SentryEvent }) { 
-                          {typeof value !== 'object' || !value ? (
-                            value
-                          ) : (
-                            
-                          )}
+                          {typeof value !== 'object' || !value ? value : }
From 3fe56b9088a9252ccabd3392a17ff9362c0ccb51 Mon Sep 17 00:00:00 2001 From: Burak Yigit Kaya Date: Tue, 5 Nov 2024 11:40:25 +0000 Subject: [PATCH 6/9] key fixes --- .../sentry/components/events/EventContexts.tsx | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/packages/overlay/src/integrations/sentry/components/events/EventContexts.tsx b/packages/overlay/src/integrations/sentry/components/events/EventContexts.tsx index 07022fb77..49584dfe7 100644 --- a/packages/overlay/src/integrations/sentry/components/events/EventContexts.tsx +++ b/packages/overlay/src/integrations/sentry/components/events/EventContexts.tsx @@ -46,14 +46,16 @@ export default function EventContexts({ event }: { event: SentryEvent }) { {ctxValues && Object.entries(ctxValues).map(([key, value]) => ( - +
{key}
- 
-                          {typeof value !== 'object' || !value ? value : }
-
+ {typeof value !== 'object' || !value ? ( + 
value
+ ) : ( + + )} ))} From f0fee5cccb39886efe67ee59752eec44849ac19a Mon Sep 17 00:00:00 2001 From: Burak Yigit Kaya Date: Tue, 5 Nov 2024 12:09:59 +0000 Subject: [PATCH 7/9] final touches --- .gitignore | 1 + packages/astro/src/env.d.ts | 1 + packages/spotlight/package.json | 2 +- 3 files changed, 3 insertions(+), 1 deletion(-) diff --git a/.gitignore b/.gitignore index d8409581f..c624cda4f 100644 --- a/.gitignore +++ b/.gitignore @@ -27,6 +27,7 @@ dist-ssr *.sln *.sw? +.astro .yalc yalc.lock .vite-inspect diff --git a/packages/astro/src/env.d.ts b/packages/astro/src/env.d.ts index f964fe0cf..acef35f17 100644 --- a/packages/astro/src/env.d.ts +++ b/packages/astro/src/env.d.ts @@ -1 +1,2 @@ +/// /// diff --git a/packages/spotlight/package.json b/packages/spotlight/package.json index 2e42ac97f..e0c456f09 100644 --- a/packages/spotlight/package.json +++ b/packages/spotlight/package.json @@ -7,7 +7,7 @@ "scripts": { "start": "./bin/run.js", "dev": "vite build --watch", - "build": "pnpm --filter '@spotlightjs/spotlight...' build && vite build && vite build --config vite.overlay.config.ts && tsc", + "build": "vite build && vite build --config vite.overlay.config.ts && tsc", "build:watch": "vite build --watch", "yalc:publish": "yalc publish --push --sig --private", "clean": "rimraf dist" From 88f0d6b54e12821be8d7787819e0ca3a5a83ba8b Mon Sep 17 00:00:00 2001 From: Burak Yigit Kaya Date: Tue, 5 Nov 2024 13:17:58 +0000 Subject: [PATCH 8/9] Fix value passing Co-authored-by: Shubhdeep Chhabra --- .../src/integrations/sentry/components/events/EventContexts.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/overlay/src/integrations/sentry/components/events/EventContexts.tsx b/packages/overlay/src/integrations/sentry/components/events/EventContexts.tsx index 49584dfe7..2d059079e 100644 --- a/packages/overlay/src/integrations/sentry/components/events/EventContexts.tsx +++ b/packages/overlay/src/integrations/sentry/components/events/EventContexts.tsx @@ -52,7 +52,7 @@ export default function EventContexts({ event }: { event: SentryEvent }) { {typeof value !== 'object' || !value ? ( - 
value
+ 
{value}
) : ( )} From a9262f04e1cbfde858ed474dad25d753332b1d37 Mon Sep 17 00:00:00 2001 From: Burak Yigit Kaya Date: Tue, 5 Nov 2024 13:29:21 +0000 Subject: [PATCH 9/9] even better formatting, especially for empty values --- e2e-tests/astro/src/env.d.ts | 1 + .../overlay/src/components/JsonViewer.tsx | 4 +- .../components/events/EventContexts.tsx | 45 ++++++++++--------- 3 files changed, 26 insertions(+), 24 deletions(-) diff --git a/e2e-tests/astro/src/env.d.ts b/e2e-tests/astro/src/env.d.ts index f964fe0cf..acef35f17 100644 --- a/e2e-tests/astro/src/env.d.ts +++ b/e2e-tests/astro/src/env.d.ts @@ -1 +1,2 @@ +/// /// diff --git a/packages/overlay/src/components/JsonViewer.tsx b/packages/overlay/src/components/JsonViewer.tsx index 47427169c..2e75693e6 100644 --- a/packages/overlay/src/components/JsonViewer.tsx +++ b/packages/overlay/src/components/JsonViewer.tsx @@ -1,6 +1,4 @@ -import type { Envelope, EnvelopeItem } from '@sentry/types'; import ReactJson from 'react-json-view'; -import type { RawEventContext } from '~/integrations/integration'; // Need this separately to fix Storybook 8 bundling // See #419 and #420 for more context @@ -22,7 +20,7 @@ export default function JsonViewer({ name = null, collapseStringsAfterLength = 80, }: { - data: Envelope[0] | EnvelopeItem | RawEventContext; + data: object; onUpdateData?: (value: unknown) => void; editingEnabled?: boolean; clipboardEnabled?: boolean; diff --git a/packages/overlay/src/integrations/sentry/components/events/EventContexts.tsx b/packages/overlay/src/integrations/sentry/components/events/EventContexts.tsx index 2d059079e..cb34bdc32 100644 --- a/packages/overlay/src/integrations/sentry/components/events/EventContexts.tsx +++ b/packages/overlay/src/integrations/sentry/components/events/EventContexts.tsx @@ -1,3 +1,4 @@ +import { Nullable } from 'vitest'; import JsonViewer from '../../../../components/JsonViewer'; import type { SentryEvent } from '../../types'; import Tags from '../Tags'; @@ -9,14 +10,17 @@ const EXAMPLE_CONTEXT = `Sentry.setContext("character", { });`; export default function EventContexts({ event }: { event: SentryEvent }) { - const contextEntries = Object.entries({ + const contexts: Record>> = { request: event.request, - extra: { - modules: event.modules, - ...(event.extra || {}), - }, ...event.contexts, - }).filter(entry => entry[1]); + }; + 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][]; const { tags } = event; @@ -44,21 +48,20 @@ export default function EventContexts({ event }: { event: SentryEvent }) {

{ctxKey}

- {ctxValues && - Object.entries(ctxValues).map(([key, value]) => ( - - - - - ))} + {Object.entries(ctxValues).map(([key, value]) => ( + + + + + ))}
-
{key}
- 		- {typeof value !== 'object' || !value ? ( - 
{value}
- ) : ( - - )} -
+
{key}
+ 		+ {typeof value !== 'object' || !value ? ( + 
{JSON.stringify(value)}
+ ) : ( + + )} +