SigSentry Documentation

All public types exported from @sigsentry/react and how to use them in strict mode

@sigsentry/react is written in TypeScript strict mode and ships with declarations. Every public component, hook, and option is fully typed.

Importing types

Types come from two packages — components/hooks from @sigsentry/react, domain types (analysis result shape, severity, etc.) from @sigsentry/core.

// Component / hook types
import type {
  SigSentryProviderProps,
  SigSentryTheme,
  AnalysisWidgetProps,
  SigSentryTriggerProps,
  AnalysisResultProps,
  TimeRangeOption,
  UseSigSentryOptions,
  UseSigSentryReturn,
  SigSentryStatus,
} from '@sigsentry/react';

// Domain types
import type {
  AnalysisInput,
  AnalysisResult,
  AnalysisFeedback,
  FollowUpResult,
  AnalysisSeverity,
  AnalysisStatus,
  ServiceImpact,
  TimelineEntry,
  LogEvidence,
  SuggestedAction,
  ApiResponse,
  ApiError,
  AnalysisStage,
} from '@sigsentry/core';

Component prop types

Type	Used by
`SigSentryProviderProps`	`<SigSentryProvider>`
`SigSentryTheme`	`'light' \| 'dark' \| 'auto'`
`AnalysisWidgetProps`	`<AnalysisWidget>`
`SigSentryTriggerProps`	`<SigSentryTrigger>`
`AnalysisResultProps`	`<AnalysisResultDisplay>`
`TimeRangeOption`	`'15m' \| '30m' \| '1h' \| '4h' \| '12h' \| '24h'`

Wrapping a component to add app-specific props:

import { AnalysisWidget } from '@sigsentry/react';
import type { AnalysisWidgetProps } from '@sigsentry/react';

interface BrandedWidgetProps extends AnalysisWidgetProps {
  ticketId: string;
}

export function BrandedWidget({ ticketId, ...rest }: BrandedWidgetProps): JSX.Element {
  return (
    <div data-ticket={ticketId}>
      <AnalysisWidget {...rest} />
    </div>
  );
}

Hook types

import type { UseSigSentryOptions, UseSigSentryReturn, SigSentryStatus } from '@sigsentry/react';

Type	Shape
`UseSigSentryOptions`	`{ client: SigSentryClient }`
`UseSigSentryReturn`	The full return value of `useSigSentry()`
`SigSentryStatus`	`'idle' \| 'received' \| 'processing' \| 'complete' \| 'failed'`

Building a typed wrapper around the hook:

import { useSigSentry, useSigSentryContext } from '@sigsentry/react';
import type { UseSigSentryReturn } from '@sigsentry/react';

export function useDiagnostics(): UseSigSentryReturn {
  const { client } = useSigSentryContext();
  return useSigSentry({ client });
}

Hook input/output types

The hook accepts and returns these public types from @sigsentry/core:

Type	Used by
`AnalysisInput`	The shape `submitAnalysis()` takes — description, time window, optional screenshot
`AnalysisFeedback`	The shape `submitFeedback()` takes — accuracy + optional comment
`FollowUpResult`	The shape returned by `askFollowUp()` — answer, optional additional evidence and updated actions

Result types

AnalysisResult is the shape every analysis returns. The full type is exported from @sigsentry/core:

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

function logSeverity(result: AnalysisResult): void {
  console.log(`[${result.severity}] ${result.summary}`);
  for (const action of result.suggestedActions) {
    console.log(`- ${action.action} (${action.type})`);
  }
}

Key fields:

Field	Type	Notes
`severity`	`AnalysisSeverity`	`'critical' \| 'high' \| 'medium' \| 'low' \| 'info'`
`confidence`	`number`	`0`–`1`
`summary`	`string`	One-paragraph plain-language summary
`rootCause`	`{ description, service, errorType, category }`	Structured root cause
`affectedServices`	`ServiceImpact[]`	Per-service breakdown
`timeline`	`TimelineEntry[]`	Ordered events leading to the failure
`suggestedActions`	`SuggestedAction[]`	Prioritized next steps
`codeCorrelation`	`{ available, suspectedCode, causalPR?, recentCommits } \| undefined`	Present when a repo is connected

Strict mode compatibility

The SDK works with "strict": true and "exactOptionalPropertyTypes": true. Optional props are typed with ?, never | undefined.

// Both forms work, even with exactOptionalPropertyTypes
<AnalysisWidget />
<AnalysisWidget defaultTimeRange="1h" showFollowUp={false} />

Type guarding the API envelope

Every API response uses the ApiResponse<T> envelope. Narrow on success to access data or error:

const response = await askFollowUp('Was this caused by the deploy?');
if (response?.success && response.data) {
  console.log(response.data.answer);
} else if (response?.error) {
  console.error(response.error.code, response.error.message);
}

Generic extensions

If you wrap analyses with extra application metadata, use TypeScript intersection types — the SDK's AnalysisResult is a structural type, so extra fields don't break the components:

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

interface AnnotatedResult extends AnalysisResult {
  ticketId: string;
  reportedBy: string;
}

function annotate(base: AnalysisResult, ticketId: string, user: string): AnnotatedResult {
  return { ...base, ticketId, reportedBy: user };
}

TypeScript

On this page