feat(insights): Invert the Error-Free Sessions chart to be Errored Sessions (#89315)

it's very similar to the Session Health chart, without the breakdowns. I
think this is ok for now as users have a choice in their defaults, and
can use the dropdowns to lay things out. Session data should exist for
all web&mobile projects, whereas user data won't.

Here's an image to show the two most similar charts side-by-side, this
is not the default. The default is still for ErrorFreeSessionsChart &
NewAndResolvedIssueChart to be on the first row.

![SCR-20250410-kdfp](https://github.com/user-attachments/assets/314952f7-bdc7-4746-99d2-4511016abf5b)

Author: ryan953

static/app/views/insights/sessions/charts/errorFreeSessionsChart.tsx renamed to static/app/views/insights/sessions/charts/erroredSessionsChart.tsx

@@ -2,22 +2,22 @@ import ExternalLink from 'sentry/components/links/externalLink';
 import {t, tct} from 'sentry/locale';
 import {InsightsLineChartWidget} from 'sentry/views/insights/common/components/insightsLineChartWidget';
 import ChartSelectionTitle from 'sentry/views/insights/sessions/components/chartSelectionTitle';
-import useErrorFreeSessions from 'sentry/views/insights/sessions/queries/useErrorFreeSessions';
+import useErroredSessions from 'sentry/views/insights/sessions/queries/useErroredSessions';
 import {CHART_TITLES} from 'sentry/views/insights/sessions/settings';
 import {SESSION_HEALTH_CHART_HEIGHT} from 'sentry/views/insights/sessions/utils/sessions';
 
-export default function ErrorFreeSessionsChart() {
-  const {series, isPending, error} = useErrorFreeSessions();
+export default function ErroredSessionsChart() {
+  const {series, isPending, error} = useErroredSessions();
 
   const aliases = {
-    successful_session_rate: t('crash_free_rate(session)'),
+    successful_session_rate: t('error_rate(sessions)'),
   };
 
   return (
     <InsightsLineChartWidget
-      title={CHART_TITLES.ErrorFreeSessionsChart}
+      title={CHART_TITLES.ErroredSessionsChart}
       interactiveTitle={() => (
-        <ChartSelectionTitle title={CHART_TITLES.ErrorFreeSessionsChart} />
+        <ChartSelectionTitle title={CHART_TITLES.ErroredSessionsChart} />
       )}
       height={SESSION_HEALTH_CHART_HEIGHT}
       description={tct(

static/app/views/insights/sessions/components/chartMap.tsx

@@ -3,7 +3,7 @@ import type {ReactElement} from 'react';
 import type {Project} from 'sentry/types/project';
 import type {DomainView} from 'sentry/views/insights/pages/useFilters';
 import CrashFreeSessionsChart from 'sentry/views/insights/sessions/charts/crashFreeSessionsChart';
-import ErrorFreeSessionsChart from 'sentry/views/insights/sessions/charts/errorFreeSessionsChart';
+import ErroredSessionsChart from 'sentry/views/insights/sessions/charts/erroredSessionsChart';
 import NewAndResolvedIssueChart from 'sentry/views/insights/sessions/charts/newAndResolvedIssueChart';
 import ReleaseNewIssuesChart from 'sentry/views/insights/sessions/charts/releaseNewIssuesChart';
 import ReleaseSessionCountChart from 'sentry/views/insights/sessions/charts/releaseSessionCountChart';
@@ -19,9 +19,9 @@ export const CHART_MAP: Record<
   (props: {project: Project}) => ReactElement
 > = {
   CrashFreeSessionsChart,
-  ErrorFreeSessionsChart,
-  NewAndResolvedIssueChart, //
-  ReleaseNewIssuesChart, //
+  ErroredSessionsChart,
+  NewAndResolvedIssueChart,
+  ReleaseNewIssuesChart,
   ReleaseSessionCountChart,
   ReleaseSessionPercentageChart,
   SessionHealthCountChart,
@@ -30,14 +30,19 @@ export const CHART_MAP: Record<
   UserHealthRateChart,
 };
 
+export const CHART_RENAMES: Record<string, keyof typeof CHART_TITLES> = {
+  // Map from the old name to the new
+  ErrorFreeSessionsChart: 'ErroredSessionsChart',
+};
+
 export const PAGE_CHART_OPTIONS: Record<
   DomainView,
   ReadonlyArray<keyof typeof CHART_MAP>
 > = {
   frontend: [
     // ORDER MATTERS HERE
     // The order things are listed is the order rendered
-    'ErrorFreeSessionsChart',
+    'ErroredSessionsChart',
     'NewAndResolvedIssueChart',
     'SessionHealthCountChart',
     'SessionHealthRateChart',
@@ -67,7 +72,7 @@ export const DEFAULT_LAYOUTS: Record<
   frontend: [
     // ORDER MATTERS HERE
     // The order represents the default chart layout for Frontend > Session Health
-    'ErrorFreeSessionsChart',
+    'ErroredSessionsChart',
     'UserHealthRateChart',
     'SessionHealthRateChart',
     'SessionHealthCountChart',

static/app/views/insights/sessions/components/chartPlacement.tsx

@@ -8,6 +8,7 @@ import {Widget} from 'sentry/views/dashboards/widgets/widget/widget';
 import type {DomainView} from 'sentry/views/insights/pages/useFilters';
 import {
   CHART_MAP,
+  CHART_RENAMES,
   DEFAULT_LAYOUTS,
   PAGE_CHART_OPTIONS,
 } from 'sentry/views/insights/sessions/components/chartMap';
@@ -57,7 +58,7 @@ export function ChartPlacementSlot({view, index, chartProps}: Props) {
     [chartsByIndex, index, setChartsByIndex]
   );
 
-  const chartName = chartsByIndex[index];
+  const chartName = CHART_RENAMES[chartsByIndex[index] as string] ?? chartsByIndex[index];
   const Chart = chartName && CHART_MAP[chartName];
   if (Chart) {
     return (

static/app/views/insights/sessions/queries/useErrorFreeSessions.tsx renamed to static/app/views/insights/sessions/queries/useErroredSessions.tsx

@@ -6,21 +6,18 @@ import useOrganization from 'sentry/utils/useOrganization';
 import usePageFilters from 'sentry/utils/usePageFilters';
 import {getSessionStatusSeries} from 'sentry/views/insights/sessions/utils/sessions';
 
-export default function useErrorFreeSessions() {
+export default function useErroredSessions() {
   const location = useLocation();
   const organization = useOrganization();
   const {
     selection: {datetime},
   } = usePageFilters();
 
   const locationQuery = {
-    ...location,
-    query: {
-      ...location.query,
-      query: undefined,
-      width: undefined,
-      cursor: undefined,
-    },
+    ...location.query,
+    query: undefined,
+    width: undefined,
+    cursor: undefined,
   };
 
   const {
@@ -32,7 +29,7 @@ export default function useErrorFreeSessions() {
       `/organizations/${organization.slug}/sessions/`,
       {
         query: {
-          ...locationQuery.query,
+          ...locationQuery,
           interval: getSessionsInterval(datetime),
           field: ['sum(session)'],
           groupBy: ['session.status'],
@@ -60,7 +57,7 @@ export default function useErrorFreeSessions() {
 
       return {
         name: sessionData.intervals[idx] ?? '',
-        value: intervalTotal > 0 ? healthyCount / intervalTotal : 1,
+        value: intervalTotal > 0 ? (intervalTotal - healthyCount) / intervalTotal : 0,
       };
     }
   );

static/app/views/insights/sessions/settings.ts

@@ -12,7 +12,7 @@ export const MODULE_VISIBLE_FEATURES = ['insights-session-health-tab-ui'];
 
 export const CHART_TITLES = {
   CrashFreeSessionsChart: t('Crash Free Sessions'),
-  ErrorFreeSessionsChart: t('Error Free Sessions'),
+  ErroredSessionsChart: t('Errored Sessions'),
   NewAndResolvedIssueChart: t('Issues'),
   ReleaseNewIssuesChart: t('New Issues by Release'),
   ReleaseSessionCountChart: t('Total Sessions by Release'),