@spotlightjs/overlay 1.6.0 → 1.8.0

package/dist/src/App.d.ts

@@ -1,4 +1,4 @@
 import { SpotlightOverlayOptions } from './types';
 type AppProps = Omit<SpotlightOverlayOptions, 'debug' | 'injectImmediately'> & Required<Pick<SpotlightOverlayOptions, 'sidecarUrl'>>;
-export default function App({ openOnInit, showTriggerButton, integrations, sidecarUrl, anchor, fullPage, }: AppProps): import("react/jsx-runtime").JSX.Element;
+export default function App({ openOnInit, showTriggerButton, integrations, sidecarUrl, anchor, fullPage, showClearEventsButton, }: AppProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/src/components/Debugger.d.ts

@@ -1,7 +1,6 @@
-/// <reference types="react" />
 import { Integration, IntegrationData } from '../integrations/integration';
 import { NotificationCount } from '../types';
-export default function Debugger({ integrations, isOpen, setOpen, integrationData, isOnline, setTriggerButtonCount: setNotificationCount, fullPage, setReloadSpotlight, }: {
+export default function Debugger({ integrations, isOpen, setOpen, integrationData, isOnline, setTriggerButtonCount: setNotificationCount, fullPage, showClearEventsButton, }: {
     integrations: Integration[];
     isOpen: boolean;
     setOpen: (value: boolean) => void;
@@ -9,5 +8,5 @@ export default function Debugger({ integrations, isOpen, setOpen, integrationDat
     isOnline: boolean;
     setTriggerButtonCount: (count: NotificationCount) => void;
     fullPage: boolean;
-    setReloadSpotlight: React.Dispatch<React.SetStateAction<number>>;
+    showClearEventsButton: boolean;
 }): import("react/jsx-runtime").JSX.Element;

package/dist/src/components/Tooltip.d.ts

@@ -1,7 +1,7 @@
 import { ReactNode } from 'react';
 declare const Tooltip: ({ content, position, children, }: {
     content: string | ReactNode;
-    position?: "top" | "bottom" | "left" | "right" | undefined;
+    position?: "left" | "right" | "top" | "bottom" | undefined;
     children: ReactNode;
 }) => import("react/jsx-runtime").JSX.Element;
 export default Tooltip;

package/dist/src/index.d.ts

@@ -1,8 +1,10 @@
+import { React, ReactDOM } from './react-instance.tsx';
 import { SpotlightOverlayOptions } from './types.ts';
 export { default as console } from './integrations/console/index.ts';
 export { default as hydrationError } from './integrations/hydration-error/index.ts';
 export { default as sentry } from './integrations/sentry/index.ts';
 export { default as viteInspect } from './integrations/vite-inspect/index.ts';
+export { React, ReactDOM };
 /**
  * Open the Spotlight debugger Window
  */
@@ -34,4 +36,4 @@ export declare function onSevereEvent(cb: (count: number) => void): Promise<void
  * e.g. trigger("sentry.showError", {eventId});
  */
 export declare function trigger(eventName: string, payload: unknown): Promise<void>;
-export declare function init({ openOnInit, showTriggerButton, injectImmediately, sidecarUrl, anchor, debug, integrations, experiments, fullPage, }?: SpotlightOverlayOptions): Promise<void>;
+export declare function init({ openOnInit, showTriggerButton, injectImmediately, sidecarUrl, anchor, debug, integrations, experiments, fullPage, showClearEventsButton, }?: SpotlightOverlayOptions): Promise<void>;

package/dist/src/integrations/integration.d.ts

@@ -41,6 +41,12 @@ export type Integration<T = any> = {
      * The returned object will be passed to your tabs function.
      */
     processEvent?: (eventContext: RawEventContext) => ProcessedEventContainer<T> | undefined;
+    /**
+     * To reset the integration.
+     *
+     * @returns void
+     */
+    reset?: () => void;
 };
 export type IntegrationTab<T> = {
     /**

package/dist/src/integrations/sentry/components/SpanResizer.d.ts

@@ -0,0 +1,7 @@
+type SpanResizerProps = {
+    handleResize: (e: MouseEvent) => void;
+    setIsResizing: (val: boolean) => void;
+    isResizing: boolean;
+};
+export default function SpanResizer({ handleResize, isResizing, setIsResizing, ...props }: SpanResizerProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/src/integrations/sentry/components/developerInfo/EnvelopeDetails.d.ts

@@ -0,0 +1,8 @@
+import { Envelope } from '@sentry/types';
+import { RawEventContext } from '../../../../integrations/integration';
+export default function EnvelopeDetails({ data }: {
+    data: {
+        envelope: Envelope;
+        rawEnvelope: RawEventContext;
+    };
+}): import("react/jsx-runtime").JSX.Element;

package/dist/src/integrations/sentry/components/developerInfo/EnvelopeList.d.ts

@@ -0,0 +1 @@
+export default function EnvelopeList(): import("react/jsx-runtime").JSX.Element;

package/dist/src/integrations/sentry/components/developerInfo/JsonViewer.d.ts

@@ -0,0 +1,8 @@
+import { Envelope, EnvelopeItem } from '@sentry/types';
+import { RawEventContext } from '../../../../integrations/integration';
+export default function JsonViewer({ data, onUpdateData, editingEnabled, clipboardEnabled, }: {
+    data: Envelope[0] | EnvelopeItem | RawEventContext;
+    onUpdateData?: (value: unknown) => void;
+    editingEnabled?: boolean;
+    clipboardEnabled?: boolean;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/src/integrations/sentry/components/{Events → events}/Event.d.ts

@@ -1,10 +1,10 @@
-import { SentryErrorEvent, SentryEvent } from '../../types';
+import { SentryEvent } from '../../types';
 export declare function EventTitle({ event }: {
-    event: SentryErrorEvent | SentryEvent;
+    event: SentryEvent;
 }): import("react/jsx-runtime").JSX.Element;
 export declare function EventSummary({ event }: {
-    event: SentryErrorEvent | SentryEvent;
+    event: SentryEvent;
 }): import("react/jsx-runtime").JSX.Element;
 export default function Event({ event }: {
-    event: SentryErrorEvent | SentryEvent;
+    event: SentryEvent;
 }): import("react/jsx-runtime").JSX.Element;

package/dist/src/integrations/sentry/components/{EventBreadcrumbs.d.ts → events/EventBreadcrumbs.d.ts}

@@ -1,4 +1,4 @@
-import { SentryEvent } from '../types';
+import { SentryEvent } from '../../types';
 export default function EventBreadcrumbs({ event }: {
     event: SentryEvent;
 }): import("react/jsx-runtime").JSX.Element;

package/dist/src/integrations/sentry/components/{EventContexts.d.ts → events/EventContexts.d.ts}

@@ -1,4 +1,4 @@
-import { SentryEvent } from '../types';
+import { SentryEvent } from '../../types';
 export default function EventContexts({ event }: {
     event: SentryEvent;
 }): import("react/jsx-runtime").JSX.Element;

package/dist/src/integrations/sentry/components/{Events → events/error}/Error.d.ts

@@ -1,4 +1,4 @@
-import { SentryErrorEvent } from '../../types';
+import { SentryErrorEvent } from '../../../types';
 export declare function ErrorTitle({ event }: {
     event: SentryErrorEvent;
 }): import("react/jsx-runtime").JSX.Element;

package/dist/src/integrations/sentry/components/{Performance → performance}/QuerySummary.d.ts

@@ -1,4 +1,4 @@
 declare const QuerySummary: ({ showAll }: {
     showAll: boolean;
-}) => import("react/jsx-runtime").JSX.Element | undefined;
+}) => import("react/jsx-runtime").JSX.Element;
 export default QuerySummary;

package/dist/src/integrations/sentry/components/{SpanDetails.d.ts → traces/spans/SpanDetails.d.ts}

@@ -1,4 +1,4 @@
-import { Span, TraceContext } from '../types';
+import { Span, TraceContext } from '../../../types';
 export default function SpanDetails({ traceContext, span, startTimestamp, totalDuration, collapsible, }: {
     traceContext: TraceContext;
     span: Span;

package/dist/src/integrations/sentry/components/{SpanItem.d.ts → traces/spans/SpanItem.d.ts}

@@ -1,10 +1,12 @@
-import { Span, TraceContext } from '../types';
-declare const SpanItem: ({ span, startTimestamp, totalDuration, depth, traceContext, collapsible, }: {
+import { Span, TraceContext } from '../../../types';
+declare const SpanItem: ({ span, startTimestamp, totalDuration, depth, traceContext, collapsible, spanNodeWidth, setSpanNodeWidth, }: {
     span: Span;
     startTimestamp: number;
     totalDuration: number;
     depth?: number | undefined;
     traceContext: TraceContext;
     collapsible?: boolean | undefined;
+    spanNodeWidth: number;
+    setSpanNodeWidth?: ((val: number) => void) | undefined;
 }) => import("react/jsx-runtime").JSX.Element;
 export default SpanItem;

package/dist/src/integrations/sentry/components/{SpanTree.d.ts → traces/spans/SpanTree.d.ts}

@@ -1,9 +1,11 @@
-import { Span, TraceContext } from '../types';
-export default function SpanTree({ traceContext, tree, startTimestamp, totalDuration, depth, collapsible, }: {
+import { Span, TraceContext } from '../../../types';
+export default function SpanTree({ traceContext, tree, startTimestamp, totalDuration, depth, collapsible, spanNodeWidth, setSpanNodeWidth, }: {
     traceContext: TraceContext;
     tree: Span[];
     startTimestamp: number;
     totalDuration: number;
     depth?: number;
     collapsible?: boolean;
+    spanNodeWidth: number;
+    setSpanNodeWidth?: (val: number) => void;
 }): import("react/jsx-runtime").JSX.Element | null;

package/dist/src/integrations/sentry/data/sentryDataCache.d.ts

@@ -1,4 +1,5 @@
 import { Envelope } from '@sentry/types';
+import { RawEventContext } from '../../../integrations/integration';
 import { Sdk, SentryEvent, Span, Trace } from '../types';
 type OnlineSubscription = ['online', (status: boolean) => void];
 type EventSubscription = ['event', (event: SentryEvent) => void];
@@ -13,18 +14,29 @@ declare class SentryDataCache {
         [id: string]: Trace;
     };
     protected localTraceIds: Set<string>;
+    protected envelopes: {
+        envelope: Envelope;
+        rawEnvelope: RawEventContext;
+    }[];
     protected subscribers: Map<string, Subscription>;
     constructor(initial?: (SentryEvent & {
         event_id?: string;
     })[]);
     inferSdkFromEvent(event: SentryEvent): Sdk;
-    pushEnvelope(envelope: Envelope): void;
+    pushEnvelope({ envelope, rawEnvelope }: {
+        envelope: Envelope;
+        rawEnvelope: RawEventContext;
+    }): void;
     pushEvent(event: SentryEvent & {
         event_id?: string;
     }): void;
     getEvents(): SentryEvent[];
     getTraces(): Trace[];
     getSdks(): Sdk[];
+    getEnvelopes(): {
+        envelope: Envelope;
+        rawEnvelope: RawEventContext;
+    }[];
     getEventById(id: string): SentryEvent | undefined;
     getTraceById(id: string): Trace;
     getEventsByTrace(traceId: string, spanId?: string | null): SentryEvent[];

package/dist/src/integrations/sentry/data/useSentryEnvelopes.d.ts

@@ -0,0 +1,4 @@
+export declare const useSentryEnvelopes: () => {
+    envelope: import("@sentry/types").Envelope;
+    rawEnvelope: import("../../integration").RawEventContext;
+}[][];

package/dist/src/integrations/sentry/index.d.ts

@@ -13,6 +13,7 @@ export default function sentryIntegration(options?: SentryIntegrationOptions): {
     setup: ({ open }: import("../integration").SpotlightContext) => () => void;
     processEvent: (event: RawEventContext) => {
         event: Envelope;
+        rawEvent: RawEventContext;
     };
     tabs: () => ({
         id: string;
@@ -36,8 +37,10 @@ export default function sentryIntegration(options?: SentryIntegrationOptions): {
         content: typeof PerformanceTab;
         notificationCount?: undefined;
     })[];
+    reset: () => void;
 };
-export declare function processEnvelope({ data }: RawEventContext): {
+export declare function processEnvelope(rawEvent: RawEventContext): {
     event: Envelope;
+    rawEvent: RawEventContext;
 };
 export {};

package/dist/src/integrations/sentry/tabs/DeveloperInfo.d.ts

@@ -0,0 +1 @@
+export default function DeveloperInfoTab(): import("react/jsx-runtime").JSX.Element;

package/dist/src/integrations/sentry/types.d.ts

@@ -39,7 +39,7 @@ export type Breadcrumb = {
 type CommonEventAttrs = {
     event_id: string;
     timestamp: number;
-    message?: string;
+    message?: SentryFormattedMessage;
     breadcrumbs?: Breadcrumb[] | {
         values: Breadcrumb[];
     };
@@ -76,8 +76,12 @@ export type Contexts = {
 export type Tags = {
     [key: string]: string;
 };
+export type SentryFormattedMessage = string | {
+    formatted: string;
+    params?: [];
+};
 export type SentryErrorEvent = CommonEventAttrs & {
-    type?: 'error' | 'event' | 'default';
+    type?: 'error' | 'event' | 'message' | 'default';
     exception: EventException;
 };
 export type Span = {
@@ -96,7 +100,7 @@ export type Span = {
 };
 export type SentryTransactionEvent = CommonEventAttrs & {
     type: 'transaction';
-    spans: Span[];
+    spans?: Span[];
     start_timestamp: string;
     contexts: Contexts & {
         trace: TraceContext;

package/dist/src/react-instance.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+export { React, ReactDOM };

package/dist/src/types.d.ts

@@ -77,6 +77,13 @@ export type SpotlightOverlayOptions = {
      * This is useful for replaceing error page or in when directly rendered as an html page
      */
     fullPage?: boolean;
+    /**
+     * If set to `false`, spotlight overlay will not have Clear Events button.
+     * This is useful to clear data in spotlight.
+     *
+     * @default true
+     */
+    showClearEventsButton?: boolean;
 };
 export type NotificationCount = {
     /**

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@spotlightjs/overlay",
   "description": "The overlay of Spotlight to add debug interface to your web app.",
-  "version": "1.6.0",
+  "version": "1.8.0",
   "license": "Apache-2.0",
   "type": "module",
   "files": [
@@ -49,6 +49,7 @@
     "beautify": "^0.0.8",
     "react-diff-viewer-continued": "^3.4.0",
     "@types/beautify": "^0.0.3",
+    "react-json-view": "^1.21.3",
     "@spotlightjs/tsconfig": "1.0.0"
   },
   "volta": {