SigSentry Documentation

AnalysisWidget, SigSentryTrigger, and AnalysisResultDisplay — the three components that ship in @sigsentry/react

The SDK exports three components. Use them alone, combined, or nested inside your own UI.

Component	What it is
`<AnalysisWidget />`	A complete inline form + result display
`<SigSentryTrigger />`	A button that opens the widget in a modal or slideout
`<AnalysisResultDisplay />`	Read-only render of an analysis result

All three require a parent <SigSentryProvider>.

`<AnalysisWidget />`

Drop-in form with description, optional screenshot upload, time-range picker, status indicator, result rendering, and follow-up question input. The most common integration choice.

import { SigSentryProvider, AnalysisWidget } from '@sigsentry/react';
import type { AnalysisResult } from '@sigsentry/core';

export function SupportPanel(): JSX.Element {
  return (
    <SigSentryProvider apiKey={process.env.NEXT_PUBLIC_SIGSENTRY_KEY!}>
      <AnalysisWidget
        defaultTimeRange="1h"
        showFollowUp
        showScreenshot
        onAnalysisComplete={(result: AnalysisResult) => {
          console.log('Severity:', result.severity);
        }}
      />
    </SigSentryProvider>
  );
}

Props

Prop	Type	Default	Description
`defaultTimeRange`	`'15m' \| '30m' \| '1h' \| '4h' \| '12h' \| '24h'`	`'1h'`	Pre-selected time range
`showFollowUp`	`boolean`	`true`	Show the follow-up question input after a result
`showScreenshot`	`boolean`	`true`	Show the screenshot upload field
`onAnalysisComplete`	`(result: AnalysisResult) => void`	—	Fires once when the analysis finishes
`onError`	`(error: ApiError) => void`	—	Fires on any API error
`className`	`string`	—	Custom class on the container

`<SigSentryTrigger />`

A trigger button that opens the widget in either a centered modal or a right-side slideout. Useful when you don't want the form taking up real estate until a user clicks.

import { SigSentryProvider, SigSentryTrigger } from '@sigsentry/react';

export function Toolbar(): JSX.Element {
  return (
    <SigSentryProvider apiKey={process.env.NEXT_PUBLIC_SIGSENTRY_KEY!}>
      <SigSentryTrigger
        mode="slideout"
        label="Diagnose Error"
        defaultTimeRange="30m"
      />
    </SigSentryProvider>
  );
}

<SigSentryTrigger /> accepts every prop <AnalysisWidget /> does, plus:

Prop	Type	Default	Description
`mode`	`'modal' \| 'slideout'`	`'modal'`	Overlay style
`label`	`string`	`'Analyze Error'`	Trigger button text

The overlay closes on Escape, on backdrop click, and locks background scroll while open.

`<AnalysisResultDisplay />`

A read-only render of a finished AnalysisResult — severity badge, summary, root cause, affected services, timeline, suggested actions, and (when present) code correlation.

Use it on its own to display historical results, or compose it inside a custom analysis flow built with the useSigSentry hook.

import { AnalysisResultDisplay } from '@sigsentry/react';
import type { AnalysisResult } from '@sigsentry/core';

export function ResultPage({ result }: { result: AnalysisResult }): JSX.Element {
  return (
    <AnalysisResultDisplay
      result={result}
      showCodeCorrelation
      showRawLogs={false}
    />
  );
}

Props

Prop	Type	Default	Description
`result`	`AnalysisResult`	—	The analysis to render. Required.
`showCodeCorrelation`	`boolean`	`true`	Render the code correlation section if available
`showRawLogs`	`boolean`	`false`	Render the raw log evidence list
`className`	`string`	—	Custom class on the container

The display is fully self-contained. It uses the same CSS variables as the rest of the SDK — see Theming to match your app's brand.

Components

`<AnalysisWidget />`

Props

`<SigSentryTrigger />`

`<AnalysisResultDisplay />`

Props

On this page