Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(releases): add error free session rate chart to frontend insights #84834

Open
wants to merge 1 commit into
base: master
Choose a base branch
from

Conversation

michellewzhang
Copy link
Member

Screen.Recording.2025-02-07.at.5.05.21.PM.mov

the full screen behavior after clicking on the legend is a bit janky but is consistent w/ other widgets in insights

relates to https://github.com/getsentry/team-replay/issues/540

@michellewzhang michellewzhang requested a review from a team as a code owner February 8, 2025 01:06
@github-actions github-actions bot added the Scope: Frontend Automatically applied to PRs that change frontend components label Feb 8, 2025
@michellewzhang michellewzhang requested review from a team, DominikB2014 and gggritso February 8, 2025 01:07
Comment on lines 28 to 61
const {
data: sessionsData,
isPending,
error,
} = useApiQuery<SessionApiResponse>(
[
`/organizations/${organization.slug}/sessions/`,
{query: {...location.query, field: ['sum(session)'], groupBy: ['session.status']}},
],
{staleTime: 0}
);

if (!sessionsData) {
return null;
}

// Get the healthy sessions series data
const healthySessionsSeries =
sessionsData.groups.find(group => group.by['session.status'] === 'healthy')?.series[
'sum(session)'
] ?? [];

// Calculate total sessions for each interval
const totalSessionsByInterval = sessionsData.groups[0]?.series['sum(session)']?.map(
(_, intervalIndex) =>
sessionsData.groups.reduce(
(acc, group) => acc + (group.series['sum(session)']?.[intervalIndex] ?? 0),
0
)
);

// Calculate percentage for each interval
const healthySessionsPercentageData = healthySessionsSeries.map(
(healthyCount, index) => {
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

i should probably move all this calculation stuff into a separate hook

Comment on lines +82 to +101
<InsightsLineChartWidget
title={t('Error Free Session Rate')}
series={[
{
data: healthySessionsPercentageData.map((val, idx) => {
return {name: sessionsData.intervals[idx] ?? '', value: val};
}),
seriesName: 'Error free session rate',
meta: {
fields: {
'Error free session rate': 'percentage',
time: 'date',
},
units: {
'Error free session rate': '%',
},
},
},
]}
isLoading={isPending}
error={error}
/>
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this could also be a separate component

@michellewzhang michellewzhang force-pushed the mz/add-error-free-chart branch from a798306 to 09c1f7e Compare February 8, 2025 01:11
Copy link

codecov bot commented Feb 8, 2025

Bundle Report

Changes will increase total bundle size by 47.57kB (0.14%) ⬆️. This is within the configured threshold ✅

Detailed changes
Bundle name Size Change
app-webpack-bundle-array-push 33.33MB 47.57kB (0.14%) ⬆️

Affected Assets, Files, and Routes:

view changes for bundle: app-webpack-bundle-array-push

Assets Changed:

Asset Name Size Change Total Size Change (%)
chunks/app_actionCreators_discoverHomepageQueries_tsx-app_bootstrap_initializeApp_tsx-app_components-2ddc8c.*.js -466 bytes 1.42MB -0.03%
chunks/app_components_assigneeBadge_tsx-app_components_badge_featureBadge_tsx-app_components_charts_-99e304.*.js (New) 1.14MB 1.14MB 100.0% 🚀
chunks/app_actionCreators_discoverHomepageQueries_tsx-app_actionCreators_members_tsx-app_components_-be8a23.*.js (New) 183.5kB 183.5kB 100.0% 🚀
chunks/app_views_issueDetails_groupDetails_tsx.*.js 1.32kB 130.5kB 1.02%
entrypoints/app.js 152 bytes 98.84kB 0.15%
chunks/app_components_feedback_widget_us*kWidget_tsx-app_views_projectDetail_index_tsx.c53d70a5dd51c56b2425.js (New) 94.64kB 94.64kB 100.0% 🚀
chunks/app_components_breadcrumbs_tsx-app_components_feedback_widget_us*kWidget_tsx-app_utils-df50cf.db9b915c43bb8e4cde68.js (New) 57.34kB 57.34kB 100.0% 🚀
chunks/app_components_charts_releaseSeries_tsx-app_components_charts_transparentLoadingMask_tsx-app_-c352e5.*.js (New) 52.32kB 52.32kB 100.0% 🚀
chunks/app_components_charts_releaseSeries_tsx-app_components_charts_transparentLoadingMask_tsx-app_-21d9ad.*.js (New) 47.71kB 47.71kB 100.0% 🚀
chunks/app_views_dashboards_contexts_widgetSyncContext_tsx-app_views_insights_browser_webVitals_view-f9f908.*.js (New) 47.7kB 47.7kB 100.0% 🚀
chunks/app_components_charts_releaseSeries_tsx-app_components_charts_transparentLoadingMask_tsx-app_-7dd784.*.js (New) 43.22kB 43.22kB 100.0% 🚀
chunks/app_components_charts_releaseSeries_tsx-app_components_charts_transparentLoadingMask_tsx-app_-ccaa4c.*.js (New) 43.04kB 43.04kB 100.0% 🚀
chunks/app_components_charts_transparentLoadingMask_tsx-app_components_charts_useChartZoom_tsx-app_c-9d1081.*.js (New) 40.46kB 40.46kB 100.0% 🚀
chunks/app_components_charts_releaseSeries_tsx-app_components_charts_transparentLoadingMask_tsx-app_-f7e414.*.js (New) 39.63kB 39.63kB 100.0% 🚀
chunks/app_views_insights_mobile_screens_views_screensLandingPage_tsx-app_views_insights_pages_domai-598e4f.*.js 804 bytes 38.93kB 2.11%
chunks/app_components_charts_eventsRequest_tsx-app_components_feedback_widget_us*kWidget_tsx--64a49b.eb4cdd4433fd98ecaf52.js (New) 37.82kB 37.82kB 100.0% 🚀
chunks/app_components_feedback_widget_us*kWidget_tsx-app_views_performance_transactionSummary-51d702.c5f36343a8274c29b50e.js (New) 37.27kB 37.27kB 100.0% 🚀
chunks/app_components_feedback_widget_feedbackWidgetButton_tsx-app_views_insights_http_views_httpDom-ce2a33.*.js 3.72kB 36.06kB 11.5% ⚠️
chunks/vendors-node_modules_echarts_lib_chart_scatter_js-node_modules_echarts_lib_component_dataZoom-8653f4.*.js 104 bytes 34.85kB 0.3%
chunks/app_components_charts_releaseSeries_tsx-app_components_charts_transparentLoadingMask_tsx-app_-e32227.*.js (New) 34.38kB 34.38kB 100.0% 🚀
chunks/app_components_feedback_widget_feedbackWidgetButton_tsx-app_views_insights_common_views_spans-82c131.*.js (New) 34.33kB 34.33kB 100.0% 🚀
chunks/app_views_insights_queues_views_destinationSummaryPage_tsx.*.js 3.72kB 32.87kB 12.75% ⚠️
chunks/app_components_feedback_widget_us*kWidget_tsx-app_views_insights_common_components_cha-d2aaf9.8da233ee5e21a2f15455.js (New) 32.04kB 32.04kB 100.0% 🚀
chunks/app_views_insights_common_components_modulePageFilterBar_tsx-app_views_insights_common_compon-5dd5b5.*.js (New) 30.6kB 30.6kB 100.0% 🚀
chunks/app_views_insights_cache_views_cacheLandingPage_tsx.*.js 6.66kB 29.98kB 28.54% ⚠️
chunks/app_components_feedback_widget_feedbackWidgetButton_tsx-app_views_insights_common_components_-4eed0f.*.js (New) 29.57kB 29.57kB 100.0% 🚀
chunks/app_views_insights_common_components_moduleLayout_tsx-app_views_insights_mobile_appStarts_vie-9ced5e.*.js (New) 26.58kB 26.58kB 100.0% 🚀
chunks/app_views_dashboards_contexts_widgetSyncContext_tsx-app_views_insights_common_utils_releaseCo-4d42c2.*.js (New) 24.92kB 24.92kB 100.0% 🚀
chunks/app_components_feedback_widget_us*kWidget_tsx-app_components_performance_transactionSe-feae7d.29a234e78a581625341f.js (New) 24.18kB 24.18kB 100.0% 🚀
chunks/app_views_alerts_rules_uptime_details_tsx-node_modules_react-virtualized_dist_es_CellMeasurer-6d1558.*.js 265 bytes 22.13kB 1.21%
chunks/app_components_checkInTimeline_checkInTimeline_tsx-app_components_checkInTimeline_gridLines_t-a9dd19.*.js 1.07kB 20.81kB 5.43% ⚠️
chunks/app_views_insights_common_components_headerContainer_tsx-app_views_insights_common_components-693866.*.js (New) 19.65kB 19.65kB 100.0% 🚀
chunks/app_views_insights_common_components_moduleLayout_tsx-app_views_insights_mobile_ui_views_uiLa-6a4dcd.*.js (New) 18.92kB 18.92kB 100.0% 🚀
chunks/app_views_insights_common_components_insightsLineChartWidget_tsx-app_views_insights_common_co-9de3f2.*.js (New) 17.75kB 17.75kB 100.0% 🚀
chunks/app_components_feedback_widget_us*kWidget_tsx-app_utils_discover_discoverQuery_tsx-app-c5fefe.7242e64912920a09a9e7.js (New) 17.11kB 17.11kB 100.0% 🚀
chunks/app_views_insights_common_components_sampleDrawerHeaderTransaction_tsx-app_views_insights_com-01d269.*.js (New) 16.79kB 16.79kB 100.0% 🚀
chunks/app_components_feedback_widget_us*kWidget_tsx-app_components_gridEditable_sortLink_tsx-d372f4.46abdb982f42102b7099.js (New) 16.21kB 16.21kB 100.0% 🚀
chunks/app_views_insights_common_components_moduleLayout_tsx-app_views_insights_mobile_screenRenderi-89fd07.*.js (New) 16.19kB 16.19kB 100.0% 🚀
chunks/app_views_issueDetails_groupUptimeChecks_tsx-node_modules_react-aria_utils_dist_mergeRefs_mjs.*.js 1.3kB 14.71kB 9.66% ⚠️
chunks/app_components_feedback_widget_us*kWidget_tsx-app_components_performance_transactionSe-f61270.2b17ee72b3a0f2cab194.js (New) 13.36kB 13.36kB 100.0% 🚀
chunks/app_components_charts_lineChart_tsx-app_components_feedback_widget_us*kWidget_tsx-app_-26fc43.0a0ae453ab6c8bdeb211.js (New) 12.25kB 12.25kB 100.0% 🚀
chunks/app_components_gridEditable_sortLink_tsx-app_views_insights_mobile_screenload_components_scre-1ff55c.*.js (New) 11.54kB 11.54kB 100.0% 🚀
chunks/app_components_events_interfaces_llm-monitoring_llmMonitoringSection_tsx-node_modules_lodash_-e6ded3.*.js (New) 10.92kB 10.92kB 100.0% 🚀
chunks/vendors-node_modules_echarts_lib_chart_scatter_js-node_modules_echarts_lib_component_dataZoom-0b3efe1.*.js 104 bytes 9.61kB 1.09%
chunks/vendors-node_modules_echarts_lib_chart_scatter_js-node_modules_echarts_lib_component_dataZoom-0b3efe0.*.js 104 bytes 9.61kB 1.09%
chunks/vendors-node_modules_echarts_lib_chart_scatter_js-node_modules_echarts_lib_component_dataZoom-0b3efe2.*.js 104 bytes 9.61kB 1.09%
chunks/vendors-node_modules_echarts_lib_chart_scatter_js-node_modules_echarts_lib_component_dataZoom-0b3efe3.*.js (New) 9.61kB 9.61kB 100.0% 🚀
chunks/app_views_insights_common_components_metricReadout_tsx-app_views_insights_common_components_r-d4c1cf.*.js (New) 9.0kB 9.0kB 100.0% 🚀
chunks/vendors-node_modules_echarts_lib_component_dataZoomInside_js-node_modules_lodash_partialRight-e5351f0.*.js 104 bytes 8.63kB 1.22%
chunks/vendors-node_modules_echarts_lib_component_dataZoomInside_js-node_modules_lodash_partialRight-e5351f2.*.js 104 bytes 8.63kB 1.22%
chunks/vendors-node_modules_echarts_lib_component_dataZoomInside_js-node_modules_lodash_partialRight-e5351f1.*.js 104 bytes 8.63kB 1.22%
chunks/vendors-node_modules_echarts_lib_component_dataZoomInside_js-node_modules_lodash_partialRight-e5351f3.*.js 104 bytes 8.63kB 1.22%
chunks/vendors-node_modules_echarts_lib_component_dataZoomInside_js-node_modules_lodash_partialRight-e5351f5.*.js (New) 8.63kB 8.63kB 100.0% 🚀
chunks/vendors-node_modules_echarts_lib_component_dataZoomInside_js-node_modules_lodash_partialRight-e5351f4.*.js 104 bytes 8.63kB 1.22%
chunks/app_views_insights_common_components_moduleLayout_tsx-app_views_insights_mobile_screenload_vi-a71869.*.js (New) 5.93kB 5.93kB 100.0% 🚀
chunks/app_components_assigneeBadge_tsx-app_components_badge_featureBadge_tsx-app_components_charts_-eed9e1.*.js (Deleted) -1.14MB 0 bytes -100.0% 🗑️
chunks/app_actionCreators_discoverHomepageQueries_tsx-app_actionCreators_members_tsx-app_components_-fd9ffc.*.js (Deleted) -184.21kB 0 bytes -100.0% 🗑️
chunks/app_components_feedback_widget_us*kWidget_tsx-app_views_projectDetail_index_tsx.6dfd9f65508a3f663110.js (Deleted) -94.64kB 0 bytes -100.0% 🗑️
chunks/app_components_breadcrumbs_tsx-app_components_feedback_widget_us*kWidget_tsx-app_utils-df50cf.e5b994e69cf7f91109a0.js (Deleted) -57.34kB 0 bytes -100.0% 🗑️
chunks/app_components_charts_releaseSeries_tsx-app_components_charts_transparentLoadingMask_tsx-app_-8804ec.*.js (Deleted) -53.76kB 0 bytes -100.0% 🗑️
chunks/app_components_charts_releaseSeries_tsx-app_components_charts_transparentLoadingMask_tsx-app_-2752ca.*.js (Deleted) -49.95kB 0 bytes -100.0% 🗑️
chunks/app_views_insights_browser_webVitals_views_webVitalsLandingPage_tsx-node_modules_echarts_lib_-ff9404.*.js (Deleted) -47.44kB 0 bytes -100.0% 🗑️
chunks/app_components_charts_releaseSeries_tsx-app_components_charts_transparentLoadingMask_tsx-app_-08918c.*.js (Deleted) -40.84kB 0 bytes -100.0% 🗑️
chunks/app_components_charts_releaseSeries_tsx-app_components_charts_transparentLoadingMask_tsx-app_-aa0a25.*.js (Deleted) -40.66kB 0 bytes -100.0% 🗑️
chunks/app_components_charts_transparentLoadingMask_tsx-app_components_charts_useChartZoom_tsx-app_c-d835d4.*.js (Deleted) -38.09kB 0 bytes -100.0% 🗑️
chunks/app_components_charts_eventsRequest_tsx-app_components_feedback_widget_us*kWidget_tsx--64a49b.66529931bcd4b1a88e31.js (Deleted) -37.82kB 0 bytes -100.0% 🗑️
chunks/app_components_feedback_widget_us*kWidget_tsx-app_views_performance_transactionSummary-51d702.fe25bcdecf5d5dd908e1.js (Deleted) -37.27kB 0 bytes -100.0% 🗑️
chunks/app_components_charts_releaseSeries_tsx-app_components_charts_transparentLoadingMask_tsx-app_-ab0879.*.js (Deleted) -37.26kB 0 bytes -100.0% 🗑️
chunks/app_components_feedback_widget_us*kWidget_tsx-app_views_insights_common_components_cha-d2aaf9.98e86abf91404d3d0cc7.js (Deleted) -32.04kB 0 bytes -100.0% 🗑️
chunks/app_views_insights_common_components_modulePageFilterBar_tsx-app_views_insights_common_compon-b132e2.*.js (Deleted) -30.86kB 0 bytes -100.0% 🗑️
chunks/app_views_insights_common_components_headerContainer_tsx-app_views_insights_common_components-8c3c57.*.js (Deleted) -29.36kB 0 bytes -100.0% 🗑️
chunks/app_views_insights_mobile_appStarts_views_appStartsLandingPage_tsx.*.js (Deleted) -25.45kB 0 bytes -100.0% 🗑️
chunks/app_views_insights_common_utils_releaseComparison_tsx-app_views_insights_mobile_screenload_co-139175.*.js (Deleted) -24.2kB 0 bytes -100.0% 🗑️
chunks/app_components_feedback_widget_us*kWidget_tsx-app_components_performance_transactionSe-feae7d.75633d8a3fe59cb799bf.js (Deleted) -24.18kB 0 bytes -100.0% 🗑️
chunks/app_views_insights_browser_resources_components_resourceSize_tsx-app_views_insights_colors_ts-97449f.*.js (Deleted) -22.52kB 0 bytes -100.0% 🗑️
chunks/app_components_feedback_widget_us*kWidget_tsx-app_views_insights_sessions_views_overvi-4ea536.7a3719ca98221538e3f7.js (Deleted) -20.04kB 0 bytes -100.0% 🗑️
chunks/app_views_insights_common_components_insightsLineChartWidget_tsx-app_views_insights_common_qu-a73dd3.*.js (Deleted) -19.88kB 0 bytes -100.0% 🗑️
chunks/app_views_insights_common_components_moduleUpsellHookWrapper_tsx-app_views_insights_common_co-a65c1f.*.js (Deleted) -17.83kB 0 bytes -100.0% 🗑️
chunks/app_views_insights_mobile_ui_views_uiLandingPage_tsx.*.js (Deleted) -17.76kB 0 bytes -100.0% 🗑️
chunks/app_components_feedback_widget_us*kWidget_tsx-app_utils_discover_discoverQuery_tsx-app-c5fefe.ca7c5ce12851d25f892f.js (Deleted) -17.11kB 0 bytes -100.0% 🗑️
chunks/app_views_insights_common_components_headerContainer_tsx-app_views_insights_common_components-b6dcad.*.js (Deleted) -17.01kB 0 bytes -100.0% 🗑️
chunks/app_components_feedback_widget_us*kWidget_tsx-app_components_gridEditable_sortLink_tsx-d372f4.f0b626b22d89d28fe525.js (Deleted) -16.21kB 0 bytes -100.0% 🗑️
chunks/app_views_insights_mobile_screenRendering_screenRenderingLandingPage_tsx.*.js (Deleted) -15.07kB 0 bytes -100.0% 🗑️
chunks/app_views_insights_common_components_moduleLayout_tsx-app_views_insights_common_components_mo-c611ba.*.js (Deleted) -14.46kB 0 bytes -100.0% 🗑️
chunks/app_components_feedback_widget_us*kWidget_tsx-app_components_performance_transactionSe-f61270.7fd486605ee07a3b64f1.js (Deleted) -13.36kB 0 bytes -100.0% 🗑️
chunks/app_components_gridEditable_sortLink_tsx-app_views_insights_common_components_moduleUpsellHoo-6bbbdb.*.js (Deleted) -13.05kB 0 bytes -100.0% 🗑️
chunks/app_components_charts_lineChart_tsx-app_components_feedback_widget_us*kWidget_tsx-app_-26fc43.0e962236fa5bbcf29ac4.js (Deleted) -12.25kB 0 bytes -100.0% 🗑️
chunks/app_utils_duration_intervalToMilliseconds_tsx-app_views_insights_common_components_metricRead-56ef6e.*.js (Deleted) -11.73kB 0 bytes -100.0% 🗑️
chunks/vendors-node_modules_echarts_lib_chart_scatter_js-node_modules_echarts_lib_component_dataZoom-2524d7.*.js (Deleted) -10.46kB 0 bytes -100.0% 🗑️
chunks/app_components_events_interfaces_llm-monitoring_llmMonitoringSection_tsx-app_views_dashboards-1e2b03.*.js (Deleted) -8.8kB 0 bytes -100.0% 🗑️
chunks/app_views_insights_mobile_screenload_views_screenloadLandingPage_tsx.*.js (Deleted) -4.8kB 0 bytes -100.0% 🗑️

Files in chunks/app_components_charts_releaseSeries_tsx-app_components_charts_transparentLoadingMask_tsx-app_-e32227.*.js:

  • ./app/views/insights/sessions/views/overview.tsx → Total Size: 5.22kB

data: healthySessionsPercentageData.map((val, idx) => {
return {name: sessionsData.intervals[idx] ?? '', value: val};
}),
seriesName: 'Error free session rate',
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

the name "error free session rate" is super vague, maybe we need a question tooltip or something to clarify what this means?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Scope: Frontend Automatically applied to PRs that change frontend components
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant