ref(app-platform): Add ErrorBoundary for Sentry App Components (#13511)

* add error boundaries

Author: MeredithAnya

src/sentry/static/sentry/app/components/events/interfaces/frame.jsx

@@ -17,6 +17,7 @@ import Truncate from 'app/components/truncate';
 import OpenInContextLine from 'app/components/events/interfaces/openInContextLine';
 import SentryAppComponentsStore from 'app/stores/sentryAppComponentsStore';
 import space from 'app/styles/space';
+import ErrorBoundary from 'app/components/errorBoundary';
 
 export function trimPackage(pkg) {
   const pieces = pkg.split(/^([a-z]:\\|\\\\)/i.test(pkg) ? '\\' : '/');
@@ -312,12 +313,14 @@ const Frame = createReactClass({
                   className={className}
                 >
                   {hasComponents && (
-                    <OpenInContextLine
-                      key={index}
-                      lineNo={line[0]}
-                      filename={data.filename}
-                      components={components}
-                    />
+                    <ErrorBoundary mini>
+                      <OpenInContextLine
+                        key={index}
+                        lineNo={line[0]}
+                        filename={data.filename}
+                        components={components}
+                      />
+                    </ErrorBoundary>
                   )}
                 </ContextLine>
               );

src/sentry/static/sentry/app/components/group/externalIssuesList.jsx

@@ -15,6 +15,7 @@ import {t} from 'app/locale';
 import SentryAppInstallationStore from 'app/stores/sentryAppInstallationsStore';
 import SentryAppComponentsStore from 'app/stores/sentryAppComponentsStore';
 import ExternalIssueStore from 'app/stores/externalIssueStore';
+import ErrorBoundary from 'app/components/errorBoundary';
 
 class ExternalIssueList extends AsyncComponent {
   static propTypes = {
@@ -130,14 +131,16 @@ class ExternalIssueList extends AsyncComponent {
       const issue = (externalIssues || []).find(i => i.serviceType == sentryApp.slug);
 
       return (
-        <SentryAppExternalIssueActions
-          key={sentryApp.slug}
-          group={group}
-          event={this.props.event}
-          sentryAppComponent={component}
-          sentryAppInstallation={installation}
-          externalIssue={issue}
-        />
+        <ErrorBoundary key={sentryApp.slug} mini>
+          <SentryAppExternalIssueActions
+            key={sentryApp.slug}
+            group={group}
+            event={this.props.event}
+            sentryAppComponent={component}
+            sentryAppInstallation={installation}
+            externalIssue={issue}
+          />
+        </ErrorBoundary>
       );
     });
   }

src/sentry/static/sentry/app/components/group/sidebar.jsx

@@ -3,6 +3,7 @@ import React from 'react';
 import {isEqual, pickBy, keyBy, isObject} from 'lodash';
 import createReactClass from 'create-react-class';
 
+import ErrorBoundary from 'app/components/errorBoundary';
 import SentryTypes from 'app/sentryTypes';
 import withApi from 'app/utils/withApi';
 import SuggestedOwners from 'app/components/group/suggestedOwners';
@@ -246,13 +247,16 @@ const GroupSidebar = createReactClass({
           project={project}
           allEnvironments={this.state.allEnvironmentsGroupData}
         />
-        <ExternalIssueList
-          event={this.props.event}
-          group={this.props.group}
-          project={project}
-          orgId={organization.slug}
-          sentryAppInstallations={sentryAppInstallations}
-        />
+
+        <ErrorBoundary mini>
+          <ExternalIssueList
+            event={this.props.event}
+            group={this.props.group}
+            project={project}
+            orgId={organization.slug}
+            sentryAppInstallations={sentryAppInstallations}
+          />
+        </ErrorBoundary>
 
         {this.renderPluginIssue()}