feat(insights): add smaller issues widget (#97608)

Adds a smaller issues widget to the modern frontend overview page, this
is so the issues widget feels more balanced and doesn't consume 2/3 of
the row.

Note: More styling adjustments (the slightly taller widget size) and
"open in issues" context menu to be addressed in a follow up PR
<img width="1211" height="730" alt="image"
src="https://github.com/user-attachments/assets/82f29d08-fa5a-485b-bb67-b4962c5ca141"
/>

Author: DominikB2014

static/app/views/insights/common/components/overviewIssuesWidget.tsx

@@ -0,0 +1,35 @@
+import type {
+  TabularColumn,
+  TabularMeta,
+} from 'sentry/views/dashboards/widgets/common/types';
+import {TableWidgetVisualization} from 'sentry/views/dashboards/widgets/tableWidget/tableWidgetVisualization';
+import {useErrors} from 'sentry/views/insights/common/queries/useDiscover';
+import {ErrorField} from 'sentry/views/insights/types';
+
+const columns: TabularColumn[] = [
+  {key: 'issue', sortable: false},
+  {key: 'title', sortable: false},
+  {key: 'count()', sortable: false},
+];
+
+export function OverviewIssuesWidget() {
+  const {data, meta, isLoading} = useErrors(
+    {
+      fields: [ErrorField.ISSUE, ErrorField.TITLE, 'count()'],
+      sorts: [{field: 'count()', kind: 'desc'}],
+      limit: 6,
+    },
+    'api.insights.overview-issues-widget'
+  );
+
+  if (isLoading) {
+    return <TableWidgetVisualization.LoadingPlaceholder columns={columns} />;
+  }
+
+  const tableData = {
+    data,
+    meta: {fields: {...meta?.fields}, units: {...meta?.units}} as TabularMeta, // TODO: ideally this is properly typed, but EventsMeta doesn't match TabularMeta even tho they seem like they should
+  };
+
+  return <TableWidgetVisualization tableData={tableData} columns={columns} />;
+}

static/app/views/insights/common/queries/useDiscover.ts

@@ -9,7 +9,12 @@ import {
   useWrappedDiscoverQuery,
   useWrappedDiscoverQueryWithoutPageFilters,
 } from 'sentry/views/insights/common/queries/useSpansQuery';
-import type {SpanProperty, SpanResponse} from 'sentry/views/insights/types';
+import type {
+  ErrorProperty,
+  ErrorResponse,
+  SpanProperty,
+  SpanResponse,
+} from 'sentry/views/insights/types';
 
 interface UseDiscoverQueryOptions {
   additonalQueryKey?: string[];
@@ -49,6 +54,13 @@ export const useSpans = <Fields extends SpanProperty[]>(
   return useDiscover<Fields, SpanResponse>(options, DiscoverDatasets.SPANS, referrer);
 };
 
+export const useErrors = <Fields extends ErrorProperty[]>(
+  options: UseDiscoverOptions<Fields> = {},
+  referrer: string
+) => {
+  return useDiscover<Fields, ErrorResponse>(options, DiscoverDatasets.ERRORS, referrer);
+};
+
 const useDiscover = <T extends Array<Extract<keyof ResponseType, string>>, ResponseType>(
   options: UseDiscoverOptions<T> = {},
   dataset: DiscoverDatasets,

static/app/views/insights/pages/backend/backendOverviewPage.tsx

@@ -269,7 +269,7 @@ const StyledTransactionNameSearchBar = styled(TransactionNameSearchBar)`
 
 export default BackendOverviewPageWithProviders;
 
-export const StackedWidgetWrapper = styled('div')`
+const StackedWidgetWrapper = styled('div')`
   display: flex;
   flex-direction: column;
   gap: ${space(2)};

static/app/views/insights/pages/frontend/newFrontendOverviewPage.tsx

@@ -22,6 +22,7 @@ import useOrganization from 'sentry/utils/useOrganization';
 import usePageFilters from 'sentry/utils/usePageFilters';
 import useProjects from 'sentry/utils/useProjects';
 import * as ModuleLayout from 'sentry/views/insights/common/components/moduleLayout';
+import {OverviewIssuesWidget} from 'sentry/views/insights/common/components/overviewIssuesWidget';
 import {InsightsProjectSelector} from 'sentry/views/insights/common/components/projectSelector';
 import {ToolRibbon} from 'sentry/views/insights/common/components/ribbon';
 import {STARRED_SEGMENT_TABLE_QUERY_KEY} from 'sentry/views/insights/common/components/tableCells/starredSegmentCell';
@@ -32,10 +33,7 @@ import OverviewTransactionThroughputChartWidget from 'sentry/views/insights/comm
 import {useSpans} from 'sentry/views/insights/common/queries/useDiscover';
 import {useOnboardingProject} from 'sentry/views/insights/common/queries/useOnboardingProject';
 import {QueryParameterNames} from 'sentry/views/insights/common/views/queryParameters';
-import {
-  StackedWidgetWrapper,
-  TripleRowWidgetWrapper,
-} from 'sentry/views/insights/pages/backend/backendOverviewPage';
+import {TripleRowWidgetWrapper} from 'sentry/views/insights/pages/backend/backendOverviewPage';
 import {
   FrontendOverviewTable,
   isAValidSort,
@@ -53,7 +51,6 @@ import {
 import {useFrontendQuery} from 'sentry/views/insights/pages/frontend/useFrontendQuery';
 import {InsightsSpanTagProvider} from 'sentry/views/insights/pages/insightsSpanTagProvider';
 import {WebVitalsWidget} from 'sentry/views/insights/pages/platform/nextjs/webVitalsWidget';
-import {IssuesWidget} from 'sentry/views/insights/pages/platform/shared/issuesWidget';
 import {TransactionNameSearchBar} from 'sentry/views/insights/pages/transactionNameSearchBar';
 import {useOverviewPageTrackPageload} from 'sentry/views/insights/pages/useOverviewPageTrackAnalytics';
 import {categorizeProjects} from 'sentry/views/insights/pages/utils';
@@ -209,15 +206,19 @@ export function NewFrontendOverviewPage() {
               <LegacyOnboarding project={onboardingProject} organization={organization} />
             ) : (
               <Fragment>
-                <ModuleLayout.Third>
-                  <StackedWidgetWrapper>
-                    <OverviewTransactionThroughputChartWidget />
-                    <OverviewTransactionDurationChartWidget />
-                  </StackedWidgetWrapper>
-                </ModuleLayout.Third>
-                <ModuleLayout.TwoThirds>
-                  <IssuesWidget />
-                </ModuleLayout.TwoThirds>
+                <ModuleLayout.Full>
+                  <TripleRowWidgetWrapper>
+                    <ModuleLayout.Third>
+                      <OverviewTransactionThroughputChartWidget />
+                    </ModuleLayout.Third>
+                    <ModuleLayout.Third>
+                      <OverviewTransactionDurationChartWidget />
+                    </ModuleLayout.Third>
+                    <ModuleLayout.Third>
+                      <OverviewIssuesWidget />
+                    </ModuleLayout.Third>
+                  </TripleRowWidgetWrapper>
+                </ModuleLayout.Full>
                 <ModuleLayout.Full>
                   <TripleRowWidgetWrapper>
                     <ModuleLayout.Third>

static/app/views/insights/types.tsx

@@ -508,6 +508,31 @@ export type SpanQueryFilters = Partial<Record<SpanStringFields, string>> & {
   [SpanFields.PROJECT_ID]?: string;
 };
 
+export enum ErrorField {
+  ISSUE = 'issue',
+  TITLE = 'title',
+}
+
+enum ErrorFunction {
+  COUNT = 'count',
+}
+
+type ErrorStringFields = ErrorField.TITLE;
+type ErrorNumberFields = ErrorField.ISSUE;
+
+type NoArgErrorFunction = ErrorFunction.COUNT;
+
+type ErrorResponseRaw = {
+  [Property in ErrorStringFields as `${Property}`]: string;
+} & {
+  [Property in ErrorNumberFields as `${Property}`]: number;
+} & {
+  [Property in NoArgErrorFunction as `${Property}()`]: number;
+};
+
+export type ErrorResponse = Flatten<ErrorResponseRaw>;
+export type ErrorProperty = keyof ErrorResponse;
+
 // Maps the subregion code to the subregion name according to UN m49 standard
 // We also define this in relay in `country_subregion.rs`
 export const subregionCodeToName = {