fix(insights): Handle null span.group in Backend Insights widgets (#112379)

A self-hosted user complained in
getsentry/self-hosted#4262 that their Backend
Insights view breaks when ingesting Otel data. This PR adds some guards
to prevent this crash, but it doesn't necessarily guarantee a great
experience, e.g.,

- "Backend Insights" is on its way out, to be replaced with a pre-built
dashboard. This hasn't been rolled out to self-hosted yet, so this user
will have a somewhat different experience in the next few months if they
upgrade
- OTel data _should_ go through Sentry enrichment, and get a
`span.group` attribute, but decisions around OTel are changing! We might
do less enrichment (or different enrichment) there

In the meantime, this PR makes two changes

- asks for `has:span.group` to be present in a few widgets. This is a
common pattern for us, and should work here, too
- updates the types for the `span.group` property to mark it as possibly
`null` and updates a bunch of usage

Fixes DAIN-1467

Author: gggritso

static/app/components/events/eventStatisticalDetector/eventRegressionTable.tsx

@@ -18,7 +18,7 @@ import {formatPercentage} from 'sentry/utils/number/formatPercentage';
 import {unreachable} from 'sentry/utils/unreachable';
 
 export interface EventRegressionTableRow {
-  group: string;
+  group: string | null;
   operation: string;
   percentageChange: number;
   description?: string;
@@ -99,8 +99,8 @@ export function EventRegressionTable({
       ) : data.length === 0 ? (
         <SimpleTable.Empty>{t('No results found for your query')}</SimpleTable.Empty>
       ) : (
-        data.map(row => (
-          <SimpleTable.Row key={row.group}>
+        data.map((row, index) => (
+          <SimpleTable.Row key={`${row.group ?? index}-${row.operation}`}>
             {columns.map(column => (
               <SimpleTable.RowCell
                 key={column.key}

static/app/views/dashboards/widgets/detailsWidget/detailsWidgetVisualization.tsx

@@ -61,7 +61,7 @@ export function DetailsWidgetVisualization(props: DetailsWidgetVisualizationProp
         (spanDescription.split('?')[0] ?? '').split('.').pop()?.toLowerCase() ?? ''
       );
 
-    if (isImage) {
+    if (isImage && spanGroup) {
       const projectId = span[SpanFields.PROJECT_ID]
         ? Number(span[SpanFields.PROJECT_ID])
         : undefined;

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

@@ -21,7 +21,7 @@ const formatter = new SQLishFormatter();
 interface Props {
   moduleName: ModuleName;
   filters?: Record<string, string>;
-  group?: string;
+  group?: string | null;
   shortDescription?: string;
 }
 
@@ -33,7 +33,10 @@ export function FullSpanDescription({
 }: Props) {
   const {data: indexedSpans, isFetching: areIndexedSpansLoading} = useSpans(
     {
-      search: MutableSearch.fromQueryObject({'span.group': group, ...filters}),
+      search: MutableSearch.fromQueryObject({
+        'span.group': group ?? undefined,
+        ...filters,
+      }),
       limit: 1,
       fields: [
         SpanFields.PROJECT_ID,
@@ -104,7 +107,7 @@ export function FullSpanDescription({
 
 type TruncatedQueryClipBoxProps = {
   children: ReactNode;
-  group: string | undefined;
+  group: string | null | undefined;
 };
 
 function QueryClippedBox({group, children}: TruncatedQueryClipBoxProps) {
@@ -114,16 +117,20 @@ function QueryClippedBox({group, children}: TruncatedQueryClipBoxProps) {
 
   return (
     <StyledClippedBox
-      btnText={t('View full query')}
+      btnText={group ? t('View full query') : undefined}
       clipHeight={500}
-      buttonProps={{
-        icon: <IconOpen />,
-        onClick: () =>
-          navigate({
-            pathname: `${databaseURL}/spans/span/${group}`,
-            query: {...location.query, isExpanded: true},
-          }),
-      }}
+      buttonProps={
+        group
+          ? {
+              icon: <IconOpen />,
+              onClick: () =>
+                navigate({
+                  pathname: `${databaseURL}/spans/span/${group}`,
+                  query: {...location.query, isExpanded: true},
+                }),
+            }
+          : undefined
+      }
     >
       {children}
     </StyledClippedBox>

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

@@ -50,7 +50,7 @@ export function DatabaseSpanDescription({
 
   const {data: indexedSpans, isFetching: areIndexedSpansLoading} = useSpans(
     {
-      search: MutableSearch.fromQueryObject({'span.group': groupId}),
+      search: MutableSearch.fromQueryObject({'span.group': groupId ?? undefined}),
       limit: 1,
       fields: [
         SpanFields.PROJECT_ID,

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

@@ -17,7 +17,7 @@ interface Props {
   moduleName: ModuleName.DB | ModuleName.RESOURCE;
   projectId: number;
   extraLinkQueryParams?: Record<string, string>;
-  group?: string;
+  group?: string | null;
   spanOp?: string;
 }
 

static/app/views/insights/common/components/tableCells/spanDescriptionCell.tsx

@@ -19,7 +19,7 @@ interface Props {
   moduleName: ModuleName.DB | ModuleName.RESOURCE;
   projectId: number;
   extraLinkQueryParams?: Record<string, string>;
-  group?: string;
+  group?: string | null;
   spanAction?: string;
   spanOp?: string;
   system?: string;

static/app/views/insights/common/components/widgets/overviewSlowNextjsSSRWidget.tsx

@@ -39,7 +39,7 @@ export default function OverviewSlowNextjsSSRWidget(props: LoadableChartWidgetPr
   const pageFilterChartParams = usePageFilterChartParams();
   const {query} = useTransactionNameQuery();
 
-  const fullQuery = `span.op:function.nextjs ${query}`;
+  const fullQuery = `has:${SpanFields.SPAN_GROUP} ${SpanFields.SPAN_OP}:function.nextjs ${query}`;
 
   const spansRequest = useSpans(
     {

static/app/views/insights/common/components/widgets/overviewTimeConsumingQueriesWidget.tsx

@@ -52,7 +52,7 @@ export default function OverviewTimeConsumingQueriesWidget(
   const supportedSystems = Object.values(SupportedDatabaseSystem);
 
   const search = new MutableSearch(
-    `${SpanFields.DB_SYSTEM}:[${supportedSystems.join(',')}] ${query}`.trim()
+    `has:${SpanFields.SPAN_GROUP} ${SpanFields.DB_SYSTEM}:[${supportedSystems.join(',')}] ${query}`.trim()
   );
   const referrer = Referrer.OVERVIEW_TIME_CONSUMING_QUERIES_WIDGET;
   const groupBy = SpanFields.NORMALIZED_DESCRIPTION;

static/app/views/insights/types.tsx

@@ -321,7 +321,6 @@ export type NonNullableStringFields =
   | SpanFields.FILE_EXTENSION
   | SpanFields.SPAN_OP
   | SpanFields.SPAN_DESCRIPTION
-  | SpanFields.SPAN_GROUP
   | SpanFields.SPAN_CATEGORY
   | SpanFields.SPAN_SYSTEM
   | SpanFields.TIMESTAMP
@@ -338,7 +337,7 @@ export type NonNullableStringFields =
   | SpanFields.USER_DISPLAY
   | SpanFields.SENTRY_ORIGIN;
 
-type NullableStringFields = SpanFields.NORMALIZED_DESCRIPTION;
+type NullableStringFields = SpanFields.NORMALIZED_DESCRIPTION | SpanFields.SPAN_GROUP;
 
 export type SpanStringFields = NullableStringFields | NonNullableStringFields;