feat(releases): add release health table on frontend/backend insights #85501

michellewzhang · 2025-02-20T00:45:44Z

add a release health table to the frontend insights "session health" tab (gated by a feature flag only visible to sentry):

sorted by creation date.

includes pagination too:

empty state

hovering over the release name gives a tooltip card, and clicking into it goes to the release detail page:

clicking the "new issues" count goes to issue search

Screen.Recording.2025-02-20.at.3.20.35.PM.mov

note

currently it's only shown on the frontend & backend insights page, but will implement for mobile in the future.
question: will the mobile table look any different?

findings

1. turns out the `/releases/` endpoint gives us a bunch of handy stuff that we don't need to calculate (we were calculating crash free rate by hand etc for the sessions-backed chart):

2. the `/releases/` endpoint sort is broken - you can only sort the following fields one way, but not the other

crash_free_sessions
crash_free_users
date
sessions
users

ex. -crash_free_sessions breaks the endpoint

so i disabled sort for all columns for now.

3. the whole table rendering gets pretty slow with 1+ project selected.

TODOS:

fix rerendering whenever columns are resized
add issue count columns
implement mobile version (any differences?) - will do in followup

relates to #84877

static/app/views/insights/sessions/components/tables/releaseTable.tsx

michellewzhang · 2025-02-20T00:54:23Z

static/app/views/insights/sessions/components/tables/releaseTable.tsx

+        makeSortLinkGenerator,
+        onClick: () => {},
+        rightAlignedColumns: [],
+        sortableColumns: [],


disabled all sorting because the /releases/ endpoint sorting is not bidirectional

gggritso

Makes sense! I'll leave it for someone from your team to approve, just left one suggestion 👍🏻

gggritso · 2025-02-20T15:49:15Z

static/app/views/insights/sessions/components/tables/releaseTable.tsx

+  const renderBodyCell = useCallback((column: any, dataRow: any) => {
+    const value = dataRow[column.key];
+    switch (column.key) {
+      case 'date':
+        return <DateTime date={value} />;
+      case 'version':
+        return (
+          <VersionWrapper>
+            <StyledVersion version={value} tooltipRawVersion anchor={false} />
+          </VersionWrapper>
+        );
+      case 'crash_free_sessions':
+        return `${value.toFixed(2)}%`;
+      case 'stage':
+      case 'sessions':
+      default:
+        return <TextOverflow>{value}</TextOverflow>;
+    }
+  }, []);


For body cell rendering you might have an easier time if you delegate to default field renderers. You can see some examples in Insights where we specify custom renderers for some table cell types, but then call getFieldRenderer for the rest

There are default renderers for date, release, and others that might be useful!

gggritso · 2025-02-20T15:50:19Z

static/app/views/insights/sessions/components/tables/sessionHealthTable.tsx

+const PaginationNoMargin = styled(Pagination)`
+  margin: 0;
+`;


👀 would removing margin from Pagination be more, less, or similarly annoying to Alert?

much less annoying👀

static/app/views/insights/sessions/components/tables/releaseTable.tsx

static/app/views/insights/sessions/queries/useOrganizationReleases.tsx

static/app/views/insights/sessions/components/tables/releaseHealthTable.tsx

…#85501) ### add a release health table to the frontend insights "session health" tab (gated by a feature flag only visible to sentry): sorted by creation date. <img width="923" alt="SCR-20250220-norb" src="https://github.com/user-attachments/assets/c3347c29-27cf-4d24-964a-a1f51013afe3" /> ### includes pagination too: <img width="927" alt="SCR-20250220-nort" src="https://github.com/user-attachments/assets/97d0a10b-034d-4b8d-a517-a323321fc8cd" /> ### empty state <img width="817" alt="SCR-20250219-owkb" src="https://github.com/user-attachments/assets/ed4ee659-4a48-4c31-9826-a80040bf9b5b" /> ### hovering over the release name gives a tooltip card, and clicking into it goes to the release detail page: <img width="366" alt="SCR-20250220-noso" src="https://github.com/user-attachments/assets/a00425cb-1668-4a9a-8464-b2ea5b0868ae" /> ### clicking the "new issues" count goes to issue search https://github.com/user-attachments/assets/96bf1324-71c5-4a06-b2f2-1fea6cefcf45 ### note currently it's only shown on the frontend & backend insights page, but will implement for mobile in the future. **question:** will the mobile table look any different? ### findings #### 1. turns out the `/releases/` endpoint gives us a bunch of handy stuff that we don't need to calculate (we were calculating crash free rate by hand etc for the sessions-backed chart): <img width="326" alt="SCR-20250219-odit" src="https://github.com/user-attachments/assets/7418a2f2-937c-4efc-b5da-36a79ab5f496" /> #### 2. the `/releases/` endpoint sort is broken - you can only sort the following fields one way, but not the other ``` crash_free_sessions crash_free_users date sessions users ``` ex. `-crash_free_sessions` breaks the endpoint so i disabled sort for all columns for now. #### 3. the whole table rendering gets pretty slow with 1+ project selected. ### TODOS: - [x] fix rerendering whenever columns are resized - [x] add issue count columns - [ ] implement mobile version (any differences?) - will do in followup relates to #84877

feat(releases): add release health table

2b62865

michellewzhang requested a review from a team as a code owner February 20, 2025 00:45

michellewzhang requested a review from a team February 20, 2025 00:45

github-actions bot added the Scope: Frontend Automatically applied to PRs that change frontend components label Feb 20, 2025

vercel bot deployed to Preview February 20, 2025 00:48 View deployment

michellewzhang commented Feb 20, 2025

View reviewed changes

static/app/views/insights/sessions/components/tables/releaseTable.tsx Outdated Show resolved Hide resolved

michellewzhang commented Feb 20, 2025

View reviewed changes

gggritso reviewed Feb 20, 2025

View reviewed changes

billyvg reviewed Feb 20, 2025

View reviewed changes

static/app/views/insights/sessions/components/tables/releaseTable.tsx Outdated Show resolved Hide resolved

static/app/views/insights/sessions/queries/useOrganizationReleases.tsx Outdated Show resolved Hide resolved

🎨 pr comments

7ffc0ad

vercel bot deployed to Preview February 20, 2025 20:16 View deployment

🐛 fix rerendering

d54905e

vercel bot deployed to Preview February 20, 2025 21:10 View deployment

michellewzhang force-pushed the mz/add-release-health-table branch from 9f5906f to d54905e Compare February 20, 2025 21:11

This comment was marked as resolved.

Sign in to view

vercel bot deployed to Preview February 20, 2025 21:16 View deployment

✨ add error count column

d857bcb

vercel bot deployed to Preview February 20, 2025 23:17 View deployment

✨ add link to issues search

8777019

vercel bot deployed to Preview February 20, 2025 23:23 View deployment

♻️ fix tooltip pos

43060ce

vercel bot deployed to Preview February 20, 2025 23:28 View deployment

michellewzhang requested review from a team and billyvg February 20, 2025 23:29

♻️ change titles

69c0c00

vercel bot deployed to Preview February 20, 2025 23:53 View deployment

billyvg approved these changes Feb 21, 2025

View reviewed changes

static/app/views/insights/sessions/components/tables/releaseHealthTable.tsx Outdated Show resolved Hide resolved

✏️ types

3f822c9

michellewzhang force-pushed the mz/add-release-health-table branch from b8f84dc to 3f822c9 Compare February 21, 2025 18:28

vercel bot deployed to Preview February 21, 2025 18:32 View deployment

michellewzhang merged commit 6f94090 into master Feb 21, 2025
43 checks passed

michellewzhang deleted the mz/add-release-health-table branch February 21, 2025 18:42

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(releases): add release health table on frontend/backend insights #85501

feat(releases): add release health table on frontend/backend insights #85501

michellewzhang commented Feb 20, 2025 •

edited

Loading

michellewzhang Feb 20, 2025

gggritso left a comment

gggritso Feb 20, 2025

gggritso Feb 20, 2025

michellewzhang Feb 20, 2025

This comment was marked as resolved.

feat(releases): add release health table on frontend/backend insights #85501

feat(releases): add release health table on frontend/backend insights #85501

Conversation

michellewzhang commented Feb 20, 2025 • edited Loading

add a release health table to the frontend insights "session health" tab (gated by a feature flag only visible to sentry):

includes pagination too:

empty state

hovering over the release name gives a tooltip card, and clicking into it goes to the release detail page:

clicking the "new issues" count goes to issue search

note

findings

1. turns out the /releases/ endpoint gives us a bunch of handy stuff that we don't need to calculate (we were calculating crash free rate by hand etc for the sessions-backed chart):

2. the /releases/ endpoint sort is broken - you can only sort the following fields one way, but not the other

3. the whole table rendering gets pretty slow with 1+ project selected.

TODOS:

michellewzhang Feb 20, 2025

Choose a reason for hiding this comment

gggritso left a comment

Choose a reason for hiding this comment

gggritso Feb 20, 2025

Choose a reason for hiding this comment

gggritso Feb 20, 2025

Choose a reason for hiding this comment

michellewzhang Feb 20, 2025

Choose a reason for hiding this comment

This comment was marked as resolved.

michellewzhang commented Feb 20, 2025 •

edited

Loading

1. turns out the `/releases/` endpoint gives us a bunch of handy stuff that we don't need to calculate (we were calculating crash free rate by hand etc for the sessions-backed chart):

2. the `/releases/` endpoint sort is broken - you can only sort the following fields one way, but not the other