Browse Source

fix(custom-views): Fix infinite rerendering upon unsaved changes (#76672)

This PR fixes an infinite rerendering bug that caused the issue stream
to crash. This was caused by a circular dependency in a useEffect. Fix
is to remove those dependencies.
Michael Sun 6 months ago
parent
commit
868d7b6396

+ 3 - 11
static/app/views/issueList/customViewsHeader.tsx

@@ -163,7 +163,7 @@ function CustomViewsIssueListHeaderTabsContent({
     [organization.slug, updateViews]
   );
 
-  // This insane useEffect ensures that the correct tab is selected when the page loads and url updates
+  // This insane useEffect ensures that the correct tab is selected when the url updates
   useEffect(() => {
     // If no query, sort, or viewId is present, set the first tab as the selected tab, update query accordingly
     if (!query && !sort && !viewId) {
@@ -241,16 +241,8 @@ function CustomViewsIssueListHeaderTabsContent({
       tabListState?.setSelectedKey('temporary-tab');
       return;
     }
-  }, [
-    tabListState,
-    draggableTabs,
-    navigate,
-    organization.slug,
-    query,
-    queryParams,
-    sort,
-    viewId,
-  ]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [navigate, organization.slug, query, sort, viewId]);
 
   // Update local tabs when new views are received from mutation request
   useEffect(() => {

+ 9 - 6
static/app/views/issueList/overview.tsx

@@ -15,6 +15,7 @@ import {addMessage} from 'sentry/actionCreators/indicator';
 import {fetchOrgMembers, indexMembersByProject} from 'sentry/actionCreators/members';
 import {fetchTagValues, loadOrganizationTags} from 'sentry/actionCreators/tags';
 import type {Client} from 'sentry/api';
+import ErrorBoundary from 'sentry/components/errorBoundary';
 import HookOrDefault from 'sentry/components/hookOrDefault';
 import * as Layout from 'sentry/components/layouts/thirds';
 import LoadingIndicator from 'sentry/components/loadingIndicator';
@@ -1226,12 +1227,14 @@ class IssueListOverview extends Component<Props, State> {
     return (
       <Layout.Page>
         {organization.features.includes('issue-stream-custom-views') ? (
-          <CustomViewsIssueListHeader
-            organization={organization}
-            queryCounts={queryCounts}
-            router={router}
-            selectedProjectIds={selection.projects}
-          />
+          <ErrorBoundary message={'Failed to load custom tabs'}>
+            <CustomViewsIssueListHeader
+              organization={organization}
+              queryCounts={queryCounts}
+              router={router}
+              selectedProjectIds={selection.projects}
+            />
+          </ErrorBoundary>
         ) : (
           <IssueListHeader
             organization={organization}