@spotlightjs/overlay 1.3.1 → 1.4.1

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

@@ -0,0 +1,28 @@
+/// <reference types="react" />
+type Props = React.HTMLAttributes<SVGSVGElement> & {
+    backgroundColors: string[];
+    maxValues: number[];
+    segmentColors: string[];
+    text: React.ReactNode;
+    values: number[];
+    /**
+     * The width of the progress ring bar
+     */
+    barWidth?: number;
+    onHoverActions?: (() => void)[];
+    onUnhover?: () => void;
+    /**
+     * Endcaps on the progress bar
+     */
+    progressEndcaps?: React.SVGAttributes<SVGCircleElement>['strokeLinecap'];
+    size?: number;
+    /**
+     * The css to apply to the center text. A function may be provided to compute
+     * styles based on the state of the progress bar.
+     */
+    textCss?: string;
+    x?: number;
+    y?: number;
+};
+declare function RingChart({ values, maxValues, size, barWidth, text, textCss, segmentColors, backgroundColors, progressEndcaps, onHoverActions, onUnhover, ...p }: Props): import("react/jsx-runtime").JSX.Element;
+export default RingChart;

package/dist/src/integrations/sentry/components/Events/Error/Frame.d.ts

@@ -1,5 +1,6 @@
 import { EventFrame } from '../../../types';
-export default function Frame({ frame, defaultExpand }: {
+export default function Frame({ frame, defaultExpand, platform, }: {
     frame: EventFrame;
     defaultExpand: boolean;
+    platform?: string;
 }): import("react/jsx-runtime").JSX.Element;

package/dist/src/integrations/sentry/components/Performance/WebVitals/PerformanceChart.d.ts

@@ -0,0 +1,15 @@
+import { MetricScoreProps, MetricWeightsProps } from '../../../../../integrations/sentry/types';
+type PerformanceChartProps = {
+    metricScore: MetricScoreProps;
+    metricWeights: MetricWeightsProps;
+    totalScore?: number;
+    size?: number;
+    barWidth?: number;
+    left?: number;
+    top?: number;
+    labelWidthPadding?: number;
+    labelHeightPadding?: number;
+    radiusPadding?: number;
+};
+declare const PerformanceChart: ({ metricScore, metricWeights, totalScore, size, barWidth, left, top, labelWidthPadding, labelHeightPadding, radiusPadding, }: PerformanceChartProps) => import("react/jsx-runtime").JSX.Element;
+export default PerformanceChart;

package/dist/src/integrations/sentry/components/Performance/WebVitals/WebVitalsDetail.d.ts

@@ -0,0 +1,2 @@
+declare const WebVitalsDetail: () => import("react/jsx-runtime").JSX.Element;
+export default WebVitalsDetail;

package/dist/src/integrations/sentry/components/Performance/WebVitals/index.d.ts

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

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

@@ -47,3 +47,41 @@ export declare const QUERY_SUMMARY_HEADERS: ({
     sortKey: string;
     primary?: undefined;
 })[];
+export declare const WEB_VITALS_SORT_KEYS: {
+    pages: string;
+    lcp: string;
+    fcp: string;
+    fid: string;
+    cls: string;
+    ttfb: string;
+    score: string;
+};
+export declare const WEB_VITALS_HEADERS: ({
+    id: string;
+    title: string;
+    sortKey: string;
+    primary: boolean;
+} | {
+    id: string;
+    title: string;
+    sortKey: string;
+    primary?: undefined;
+})[];
+export type WebVitals = 'lcp' | 'fcp' | 'cls' | 'ttfb' | 'fid';
+export declare const PERFORMANCE_SCORE_PROFILES: {
+    profiles: {
+        name: string;
+        scoreComponents: {
+            measurement: string;
+            weight: number;
+            p10: number;
+            p50: number;
+            optional: boolean;
+        }[];
+        condition: {
+            op: string;
+            name: string;
+            value: string;
+        };
+    }[];
+};

package/dist/src/integrations/sentry/hooks/useMouseTracking.d.ts

@@ -0,0 +1,180 @@
+import { DOMAttributes, MouseEvent, RefObject } from 'react';
+type CallbackArgs = {
+    height: number;
+    left: number;
+    top: number;
+    width: number;
+};
+type Opts<T extends Element> = {
+    elem: RefObject<T>;
+    onPositionChange: (args: undefined | CallbackArgs) => void;
+} & DOMAttributes<T>;
+declare function useMouseTracking<T extends Element>({ elem, onPositionChange, onMouseEnter, onMouseMove, onMouseLeave, ...rest }: Opts<T>): {
+    onMouseEnter: (e: MouseEvent<T>) => void;
+    onMouseMove: (e: MouseEvent<T>) => void;
+    onMouseLeave: (e: MouseEvent<T>) => void;
+    children?: import("react").ReactNode;
+    dangerouslySetInnerHTML?: {
+        __html: string | TrustedHTML;
+    } | undefined;
+    onCopy?: import("react").ClipboardEventHandler<T> | undefined;
+    onCopyCapture?: import("react").ClipboardEventHandler<T> | undefined;
+    onCut?: import("react").ClipboardEventHandler<T> | undefined;
+    onCutCapture?: import("react").ClipboardEventHandler<T> | undefined;
+    onPaste?: import("react").ClipboardEventHandler<T> | undefined;
+    onPasteCapture?: import("react").ClipboardEventHandler<T> | undefined;
+    onCompositionEnd?: import("react").CompositionEventHandler<T> | undefined;
+    onCompositionEndCapture?: import("react").CompositionEventHandler<T> | undefined;
+    onCompositionStart?: import("react").CompositionEventHandler<T> | undefined;
+    onCompositionStartCapture?: import("react").CompositionEventHandler<T> | undefined;
+    onCompositionUpdate?: import("react").CompositionEventHandler<T> | undefined;
+    onCompositionUpdateCapture?: import("react").CompositionEventHandler<T> | undefined;
+    onFocus?: import("react").FocusEventHandler<T> | undefined;
+    onFocusCapture?: import("react").FocusEventHandler<T> | undefined;
+    onBlur?: import("react").FocusEventHandler<T> | undefined;
+    onBlurCapture?: import("react").FocusEventHandler<T> | undefined;
+    onChange?: import("react").FormEventHandler<T> | undefined;
+    onChangeCapture?: import("react").FormEventHandler<T> | undefined;
+    onBeforeInput?: import("react").FormEventHandler<T> | undefined;
+    onBeforeInputCapture?: import("react").FormEventHandler<T> | undefined;
+    onInput?: import("react").FormEventHandler<T> | undefined;
+    onInputCapture?: import("react").FormEventHandler<T> | undefined;
+    onReset?: import("react").FormEventHandler<T> | undefined;
+    onResetCapture?: import("react").FormEventHandler<T> | undefined;
+    onSubmit?: import("react").FormEventHandler<T> | undefined;
+    onSubmitCapture?: import("react").FormEventHandler<T> | undefined;
+    onInvalid?: import("react").FormEventHandler<T> | undefined;
+    onInvalidCapture?: import("react").FormEventHandler<T> | undefined;
+    onLoad?: import("react").ReactEventHandler<T> | undefined;
+    onLoadCapture?: import("react").ReactEventHandler<T> | undefined;
+    onError?: import("react").ReactEventHandler<T> | undefined;
+    onErrorCapture?: import("react").ReactEventHandler<T> | undefined;
+    onKeyDown?: import("react").KeyboardEventHandler<T> | undefined;
+    onKeyDownCapture?: import("react").KeyboardEventHandler<T> | undefined;
+    onKeyPress?: import("react").KeyboardEventHandler<T> | undefined;
+    onKeyPressCapture?: import("react").KeyboardEventHandler<T> | undefined;
+    onKeyUp?: import("react").KeyboardEventHandler<T> | undefined;
+    onKeyUpCapture?: import("react").KeyboardEventHandler<T> | undefined;
+    onAbort?: import("react").ReactEventHandler<T> | undefined;
+    onAbortCapture?: import("react").ReactEventHandler<T> | undefined;
+    onCanPlay?: import("react").ReactEventHandler<T> | undefined;
+    onCanPlayCapture?: import("react").ReactEventHandler<T> | undefined;
+    onCanPlayThrough?: import("react").ReactEventHandler<T> | undefined;
+    onCanPlayThroughCapture?: import("react").ReactEventHandler<T> | undefined;
+    onDurationChange?: import("react").ReactEventHandler<T> | undefined;
+    onDurationChangeCapture?: import("react").ReactEventHandler<T> | undefined;
+    onEmptied?: import("react").ReactEventHandler<T> | undefined;
+    onEmptiedCapture?: import("react").ReactEventHandler<T> | undefined;
+    onEncrypted?: import("react").ReactEventHandler<T> | undefined;
+    onEncryptedCapture?: import("react").ReactEventHandler<T> | undefined;
+    onEnded?: import("react").ReactEventHandler<T> | undefined;
+    onEndedCapture?: import("react").ReactEventHandler<T> | undefined;
+    onLoadedData?: import("react").ReactEventHandler<T> | undefined;
+    onLoadedDataCapture?: import("react").ReactEventHandler<T> | undefined;
+    onLoadedMetadata?: import("react").ReactEventHandler<T> | undefined;
+    onLoadedMetadataCapture?: import("react").ReactEventHandler<T> | undefined;
+    onLoadStart?: import("react").ReactEventHandler<T> | undefined;
+    onLoadStartCapture?: import("react").ReactEventHandler<T> | undefined;
+    onPause?: import("react").ReactEventHandler<T> | undefined;
+    onPauseCapture?: import("react").ReactEventHandler<T> | undefined;
+    onPlay?: import("react").ReactEventHandler<T> | undefined;
+    onPlayCapture?: import("react").ReactEventHandler<T> | undefined;
+    onPlaying?: import("react").ReactEventHandler<T> | undefined;
+    onPlayingCapture?: import("react").ReactEventHandler<T> | undefined;
+    onProgress?: import("react").ReactEventHandler<T> | undefined;
+    onProgressCapture?: import("react").ReactEventHandler<T> | undefined;
+    onRateChange?: import("react").ReactEventHandler<T> | undefined;
+    onRateChangeCapture?: import("react").ReactEventHandler<T> | undefined;
+    onResize?: import("react").ReactEventHandler<T> | undefined;
+    onResizeCapture?: import("react").ReactEventHandler<T> | undefined;
+    onSeeked?: import("react").ReactEventHandler<T> | undefined;
+    onSeekedCapture?: import("react").ReactEventHandler<T> | undefined;
+    onSeeking?: import("react").ReactEventHandler<T> | undefined;
+    onSeekingCapture?: import("react").ReactEventHandler<T> | undefined;
+    onStalled?: import("react").ReactEventHandler<T> | undefined;
+    onStalledCapture?: import("react").ReactEventHandler<T> | undefined;
+    onSuspend?: import("react").ReactEventHandler<T> | undefined;
+    onSuspendCapture?: import("react").ReactEventHandler<T> | undefined;
+    onTimeUpdate?: import("react").ReactEventHandler<T> | undefined;
+    onTimeUpdateCapture?: import("react").ReactEventHandler<T> | undefined;
+    onVolumeChange?: import("react").ReactEventHandler<T> | undefined;
+    onVolumeChangeCapture?: import("react").ReactEventHandler<T> | undefined;
+    onWaiting?: import("react").ReactEventHandler<T> | undefined;
+    onWaitingCapture?: import("react").ReactEventHandler<T> | undefined;
+    onAuxClick?: import("react").MouseEventHandler<T> | undefined;
+    onAuxClickCapture?: import("react").MouseEventHandler<T> | undefined;
+    onClick?: import("react").MouseEventHandler<T> | undefined;
+    onClickCapture?: import("react").MouseEventHandler<T> | undefined;
+    onContextMenu?: import("react").MouseEventHandler<T> | undefined;
+    onContextMenuCapture?: import("react").MouseEventHandler<T> | undefined;
+    onDoubleClick?: import("react").MouseEventHandler<T> | undefined;
+    onDoubleClickCapture?: import("react").MouseEventHandler<T> | undefined;
+    onDrag?: import("react").DragEventHandler<T> | undefined;
+    onDragCapture?: import("react").DragEventHandler<T> | undefined;
+    onDragEnd?: import("react").DragEventHandler<T> | undefined;
+    onDragEndCapture?: import("react").DragEventHandler<T> | undefined;
+    onDragEnter?: import("react").DragEventHandler<T> | undefined;
+    onDragEnterCapture?: import("react").DragEventHandler<T> | undefined;
+    onDragExit?: import("react").DragEventHandler<T> | undefined;
+    onDragExitCapture?: import("react").DragEventHandler<T> | undefined;
+    onDragLeave?: import("react").DragEventHandler<T> | undefined;
+    onDragLeaveCapture?: import("react").DragEventHandler<T> | undefined;
+    onDragOver?: import("react").DragEventHandler<T> | undefined;
+    onDragOverCapture?: import("react").DragEventHandler<T> | undefined;
+    onDragStart?: import("react").DragEventHandler<T> | undefined;
+    onDragStartCapture?: import("react").DragEventHandler<T> | undefined;
+    onDrop?: import("react").DragEventHandler<T> | undefined;
+    onDropCapture?: import("react").DragEventHandler<T> | undefined;
+    onMouseDown?: import("react").MouseEventHandler<T> | undefined;
+    onMouseDownCapture?: import("react").MouseEventHandler<T> | undefined;
+    onMouseMoveCapture?: import("react").MouseEventHandler<T> | undefined;
+    onMouseOut?: import("react").MouseEventHandler<T> | undefined;
+    onMouseOutCapture?: import("react").MouseEventHandler<T> | undefined;
+    onMouseOver?: import("react").MouseEventHandler<T> | undefined;
+    onMouseOverCapture?: import("react").MouseEventHandler<T> | undefined;
+    onMouseUp?: import("react").MouseEventHandler<T> | undefined;
+    onMouseUpCapture?: import("react").MouseEventHandler<T> | undefined;
+    onSelect?: import("react").ReactEventHandler<T> | undefined;
+    onSelectCapture?: import("react").ReactEventHandler<T> | undefined;
+    onTouchCancel?: import("react").TouchEventHandler<T> | undefined;
+    onTouchCancelCapture?: import("react").TouchEventHandler<T> | undefined;
+    onTouchEnd?: import("react").TouchEventHandler<T> | undefined;
+    onTouchEndCapture?: import("react").TouchEventHandler<T> | undefined;
+    onTouchMove?: import("react").TouchEventHandler<T> | undefined;
+    onTouchMoveCapture?: import("react").TouchEventHandler<T> | undefined;
+    onTouchStart?: import("react").TouchEventHandler<T> | undefined;
+    onTouchStartCapture?: import("react").TouchEventHandler<T> | undefined;
+    onPointerDown?: import("react").PointerEventHandler<T> | undefined;
+    onPointerDownCapture?: import("react").PointerEventHandler<T> | undefined;
+    onPointerMove?: import("react").PointerEventHandler<T> | undefined;
+    onPointerMoveCapture?: import("react").PointerEventHandler<T> | undefined;
+    onPointerUp?: import("react").PointerEventHandler<T> | undefined;
+    onPointerUpCapture?: import("react").PointerEventHandler<T> | undefined;
+    onPointerCancel?: import("react").PointerEventHandler<T> | undefined;
+    onPointerCancelCapture?: import("react").PointerEventHandler<T> | undefined;
+    onPointerEnter?: import("react").PointerEventHandler<T> | undefined;
+    onPointerEnterCapture?: import("react").PointerEventHandler<T> | undefined;
+    onPointerLeave?: import("react").PointerEventHandler<T> | undefined;
+    onPointerLeaveCapture?: import("react").PointerEventHandler<T> | undefined;
+    onPointerOver?: import("react").PointerEventHandler<T> | undefined;
+    onPointerOverCapture?: import("react").PointerEventHandler<T> | undefined;
+    onPointerOut?: import("react").PointerEventHandler<T> | undefined;
+    onPointerOutCapture?: import("react").PointerEventHandler<T> | undefined;
+    onGotPointerCapture?: import("react").PointerEventHandler<T> | undefined;
+    onGotPointerCaptureCapture?: import("react").PointerEventHandler<T> | undefined;
+    onLostPointerCapture?: import("react").PointerEventHandler<T> | undefined;
+    onLostPointerCaptureCapture?: import("react").PointerEventHandler<T> | undefined;
+    onScroll?: import("react").UIEventHandler<T> | undefined;
+    onScrollCapture?: import("react").UIEventHandler<T> | undefined;
+    onWheel?: import("react").WheelEventHandler<T> | undefined;
+    onWheelCapture?: import("react").WheelEventHandler<T> | undefined;
+    onAnimationStart?: import("react").AnimationEventHandler<T> | undefined;
+    onAnimationStartCapture?: import("react").AnimationEventHandler<T> | undefined;
+    onAnimationEnd?: import("react").AnimationEventHandler<T> | undefined;
+    onAnimationEndCapture?: import("react").AnimationEventHandler<T> | undefined;
+    onAnimationIteration?: import("react").AnimationEventHandler<T> | undefined;
+    onAnimationIterationCapture?: import("react").AnimationEventHandler<T> | undefined;
+    onTransitionEnd?: import("react").TransitionEventHandler<T> | undefined;
+    onTransitionEndCapture?: import("react").TransitionEventHandler<T> | undefined;
+};
+export default useMouseTracking;

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

@@ -17,6 +17,7 @@ export declare class Spotlight implements Integration {
 type FetchImpl = typeof fetch;
 /**
  * We want to get an unpatched fetch implementation to avoid capturing our own calls.
+ * TODO: We might need to expose this as a utitly function so people can make requests without the SDK picking it put
  */
 export declare function getNativeFetchImplementation(): FetchImpl;
 export {};

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

@@ -1,8 +1,9 @@
+import { Measurements } from '@sentry/types';
 export type FrameVars = {
     [key: string]: string;
 };
 export type EventFrame = {
-    filename: string;
+    filename?: string;
     abs_path?: string;
     function?: string;
     module?: string;
@@ -54,6 +55,7 @@ type CommonEventAttrs = {
         [key: string]: string | number;
     };
     sdk?: Sdk;
+    measurements?: Measurements;
 };
 export type Context = {
     [key: string]: string | number;
@@ -117,4 +119,69 @@ export type Sdk = {
     version: string;
     lastSeen: number;
 };
+export type SentryEventWithPerformanceData = Omit<SentryEvent, 'measurements'> & {
+    measurements: Record<string, {
+        value: number;
+        unit: string;
+    }> & {
+        'score.total': {
+            value: number;
+            unit: string;
+        };
+        'score.fcp': {
+            value: number;
+            unit: string;
+        };
+        'score.lcp': {
+            value: number;
+            unit: string;
+        };
+        'score.fid': {
+            value: number;
+            unit: string;
+        };
+        'score.cls': {
+            value: number;
+            unit: string;
+        };
+        'score.ttfb': {
+            value: number;
+            unit: string;
+        };
+        'score.weight.fcp': {
+            value: number;
+            unit: string;
+        };
+        'score.weight.lcp': {
+            value: number;
+            unit: string;
+        };
+        'score.weight.fid': {
+            value: number;
+            unit: string;
+        };
+        'score.weight.cls': {
+            value: number;
+            unit: string;
+        };
+        'score.weight.ttfb': {
+            value: number;
+            unit: string;
+        };
+    };
+};
+export type MetricScoreProps = {
+    fcpScore: number;
+    lcpScore: number;
+    clsScore: number;
+    fidScore: number;
+    ttfbScore: number;
+};
+export type MetricWeightsProps = {
+    fcp: number;
+    lcp: number;
+    cls: number;
+    fid: number;
+    ttfb: number;
+};
 export {};

package/dist/src/integrations/sentry/utils/duration.d.ts

@@ -17,5 +17,5 @@ export declare const DURATION_LABELS: {
 };
 export declare function getDuration(start: string | number, end: string | number): number;
 export declare function getSpanDurationClassName(duration: number): "text-red-400" | "text-orange-400" | "text-yellow-400" | undefined;
-export declare function getFormattedNumber(num: number): string;
+export declare function getFormattedNumber(num: number, decimalPlaces?: number): string;
 export declare function getFormattedDuration(duration: number): string;

package/dist/src/integrations/sentry/utils/sdkToPlatform.d.ts

@@ -1,4 +1,4 @@
 /**
  * Normalizes SDK name to a platform. Can be as specific or unspecific as we support different platforms and SDKs.
  */
-export declare function sdkToPlatform(name: string): "javascript.astro" | "javascript" | "python" | "php" | "ruby" | "dotnet" | "unknown";
+export declare function sdkToPlatform(name: string): "javascript.astro" | "javascript" | "java" | "python" | "php" | "ruby" | "dotnet" | "unknown";

package/dist/src/integrations/sentry/utils/webVitals.d.ts

@@ -0,0 +1,39 @@
+import { SentryEvent } from '../../../integrations/sentry/types';
+import { WebVitals } from '../constants';
+export declare function calculateCdfSigma(p10: number, p50: number): number;
+export declare function calculateCdfScore(value: number, p10: number, p50: number): number;
+interface ScoreComponent {
+    measurement: string;
+    weight: number;
+    p10: number;
+    p50: number;
+    optional?: boolean;
+}
+interface Profile {
+    name: string;
+    scoreComponents: ScoreComponent[];
+    condition?: {
+        op: string;
+        name: string;
+        value: string | number;
+    };
+}
+interface PerformanceScoreConfig {
+    profiles: Profile[];
+}
+export declare function normalizePerformanceScore(event: SentryEvent, performanceScore: PerformanceScoreConfig | undefined): void;
+export declare function calculateLabelCoordinates(size: number, x: number, y: number, barWidth: number, metricWeights: {
+    [key in WebVitals]: number;
+}, labelWidthPadding: number, labelHeightPadding: number, radiusPadding: number): {
+    lcpX: number;
+    lcpY: number;
+    fcpX: number;
+    fcpY: number;
+    fidX: number;
+    fidY: number;
+    clsX: number;
+    clsY: number;
+    ttfbX: number;
+    ttfbY: number;
+};
+export {};

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.3.1",
+  "version": "1.4.1",
   "license": "Apache-2.0",
   "type": "module",
   "files": [
@@ -29,7 +29,7 @@
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.3",
     "typescript": "^5.0.2",
-    "vite": "^4.5.1",
+    "vite": "^4.5.2",
     "vite-plugin-dts": "^3.5.2",
     "vite-plugin-svgr": "^3.2.0",
     "vitest": "^0.34.6",