ref(asyncComponent): Add disableErrorReport property (#30909)

static/app/components/asyncComponent.tsx

@@ -97,6 +97,14 @@ class AsyncComponent<
    */
   shouldRenderBadRequests = false;
 
+  /**
+   * If a request fails and is not a bad request, and if `disableErrorReport` is set to false,
+   * the UI will display an error modal.
+   *
+   * It is recommended to enable this property ideally only when the subclass is used by a top level route.
+   */
+  disableErrorReport = true;
+
   constructor(props: P, context: any) {
     super(props, context);
 
@@ -377,7 +385,7 @@ class AsyncComponent<
     return <LoadingIndicator />;
   }
 
-  renderError(error?: Error, disableLog = false, disableReport = true): React.ReactNode {
+  renderError(error?: Error, disableLog = false): React.ReactNode {
     const {errors} = this.state;
 
     // 401s are captured by SudoModal, but may be passed back to AsyncComponent if they close the modal without identifying
@@ -415,7 +423,7 @@ class AsyncComponent<
       <RouteError
         error={error}
         disableLogSentry={!shouldLogSentry}
-        disableReport={disableReport}
+        disableReport={this.disableErrorReport}
       />
     );
   }

static/app/views/acceptOrganizationInvite.tsx

@@ -35,6 +35,8 @@ type State = AsyncView['state'] & {
 };
 
 class AcceptOrganizationInvite extends AsyncView<Props, State> {
+  disableErrorReport = false;
+
   getEndpoints(): ReturnType<AsyncView['getEndpoints']> {
     const {memberId, token} = this.props.params;
     return [['inviteDetails', `/accept-invite/${memberId}/${token}/`]];

static/app/views/acceptProjectTransfer.tsx

@@ -21,6 +21,8 @@ type State = {
 } & AsyncView['state'];
 
 class AcceptProjectTransfer extends AsyncView<Props, State> {
+  disableErrorReport = false;
+
   getEndpoints(): ReturnType<AsyncView['getEndpoints']> {
     const query = this.props.location.query;
     return [['transferDetails', '/accept-transfer/', {query}]];

static/app/views/dashboardsV2/orgDashboards.tsx

@@ -143,7 +143,7 @@ class OrgDashboards extends AsyncComponent<Props, State> {
       return <NotFound />;
     }
 
-    return super.renderError(error, true, true);
+    return super.renderError(error, true);
   }
 
   renderComponent() {

static/app/views/dataExport/dataDownload.tsx

@@ -56,6 +56,8 @@ type State = {
 } & AsyncView['state'];
 
 class DataDownload extends AsyncView<Props, State> {
+  disableErrorReport = false;
+
   getTitle(): string {
     return t('Download Center');
   }

static/app/views/eventsV2/eventDetails/content.tsx

@@ -301,7 +301,7 @@ class EventDetailsContent extends AsyncComponent<Props, State> {
       );
     }
 
-    return super.renderError(error, true, true);
+    return super.renderError(error, true);
   }
 
   getEventSlug = (): string => {

static/app/views/eventsV2/eventDetails/linkedIssue.tsx

@@ -40,7 +40,7 @@ class LinkedIssue extends AsyncComponent<
     return <Placeholder height="120px" bottomGutter={2} />;
   }
 
-  renderError(error?: Error, disableLog = false, disableReport = true): React.ReactNode {
+  renderError(error?: Error, disableLog = false): React.ReactNode {
     const {errors} = this.state;
     const hasNotFound = Object.values(errors).find(resp => resp && resp.status === 404);
     if (hasNotFound) {
@@ -51,7 +51,7 @@ class LinkedIssue extends AsyncComponent<
       );
     }
 
-    return super.renderError(error, disableLog, disableReport);
+    return super.renderError(error, disableLog);
   }
 
   renderBody() {

static/app/views/integrationOrganizationLink.tsx

@@ -34,6 +34,8 @@ type State = AsyncView['state'] & {
 };
 
 export default class IntegrationOrganizationLink extends AsyncView<Props, State> {
+  disableErrorReport = false;
+
   getEndpoints(): ReturnType<AsyncView['getEndpoints']> {
     return [['organizations', '/organizations/']];
   }

static/app/views/organizationActivity/index.tsx

@@ -48,13 +48,13 @@ class OrganizationActivity extends AsyncView<Props, State> {
     );
   }
 
-  renderError(error?: Error, disableLog = false, disableReport = true): React.ReactNode {
+  renderError(error?: Error, disableLog = false): React.ReactNode {
     const {errors} = this.state;
     const notFound = Object.values(errors).find(resp => resp && resp.status === 404);
     if (notFound) {
       return this.renderBody();
     }
-    return super.renderError(error, disableLog, disableReport);
+    return super.renderError(error, disableLog);
   }
 
   renderBody() {

static/app/views/performance/transactionDetails/content.tsx

@@ -257,7 +257,7 @@ class EventDetailsContent extends AsyncComponent<Props, State> {
       );
     }
 
-    return super.renderError(error, true, true);
+    return super.renderError(error, true);
   }
 
   renderComponent() {