[AXON-41] Implement AtlascodeErrorBoundary

* Add support to receive rendering error events from UI
* Add AtlascodeErrorBoundary component
* Put the new boundary to Settings page

src/analytics.ts

@@ -2,6 +2,7 @@ import { ScreenEvent, TrackEvent, UIEvent } from './analytics-node-client/src/ty
 import { DetailedSiteInfo, isEmptySiteInfo, Product, ProductJira, SiteInfo } from './atlclients/authInfo';
 import { BitbucketIssuesTreeViewId, PullRequestTreeViewId } from './constants';
 import { Container } from './container';
+import { UIErrorInfo } from './analyticsTypes';
 
 // IMPORTANT
 // Make sure there is a corresponding event with the correct attributes in the Data Portal for any event created here.
@@ -255,6 +256,13 @@ export async function viewScreenEvent(
 
 // UI Events
 
+export async function uiErrorEvent(errorInfo: UIErrorInfo): Promise<TrackEvent> {
+    const e = trackEvent('failedTest', 'ui', {
+        attributes: { ...errorInfo },
+    });
+    return e;
+}
+
 export async function bbIssuesPaginationEvent(): Promise<UIEvent> {
     const e = {
         tenantIdType: null,

src/analyticsTypes.ts

@@ -0,0 +1,20 @@
+// TODO: move this with other analytics stuff into a separate folder
+// not doing it now to prevent too many import changes
+
+/**
+ * Names of the channels used for routing analytics events in UI
+ */
+export enum AnalyticsChannels {
+    AtlascodeUiErrors = 'atlascode.ui.errors',
+}
+
+export type UIAnalyticsContext = {
+    view: string;
+};
+
+export type UIErrorInfo = UIAnalyticsContext & {
+    stack: string;
+    errorName: string;
+    errorMessage: string;
+    errorCause: string;
+};

src/lib/analyticsApi.ts

@@ -1,3 +1,4 @@
+import { UIErrorInfo } from '../analyticsTypes';
 import { DetailedSiteInfo, Product, SiteInfo } from '../atlclients/authInfo';
 
 export interface AnalyticsApi {
@@ -48,4 +49,5 @@ export interface AnalyticsApi {
     fireOpenSettingsButtonEvent(source: string): Promise<void>;
     fireExploreFeaturesButtonEvent(source: string): Promise<void>;
     firePipelineRerunEvent(site: DetailedSiteInfo, source: string): Promise<void>;
+    fireUIErrorEvent(errorInfo: UIErrorInfo): Promise<void>;
 }

src/lib/ipc/fromUI/common.ts

@@ -2,6 +2,7 @@ import { ReducerAction } from '@atlassianlabs/guipi-core-controller';
 import { MinimalIssueOrKeyAndSite } from '@atlassianlabs/jira-pi-common-models';
 import { DetailedSiteInfo } from '../../../atlclients/authInfo';
 import { FeedbackData, PMFData } from '../models/common';
+import { UIErrorInfo } from '../../../analyticsTypes';
 
 export enum CommonActionType {
     SubmitPMF = 'pmfSubmit',
@@ -14,9 +15,11 @@ export enum CommonActionType {
     CopyLink = 'copyLink',
     OpenJiraIssue = 'openJiraIssue',
     Cancel = 'cancelInFlight',
+    SendAnalytics = 'sendAnalytics',
 }
 
 export type CommonAction =
+    | ReducerAction<CommonActionType.SendAnalytics, SendAnalyticsAction>
     | ReducerAction<CommonActionType.SubmitPMF, PMFSubmitAction>
     | ReducerAction<CommonActionType.OpenPMFSurvey>
     | ReducerAction<CommonActionType.DismissPMFLater>
@@ -28,6 +31,9 @@ export type CommonAction =
     | ReducerAction<CommonActionType.OpenJiraIssue, OpenJiraIssueAction>
     | ReducerAction<CommonActionType.Cancel, CancelAction>;
 
+export interface SendAnalyticsAction {
+    errorInfo: UIErrorInfo;
+}
 export interface PMFSubmitAction {
     pmfData: PMFData;
 }

src/lib/webview/controller/bbIssue/bitbucketIssueWebviewController.ts

@@ -194,6 +194,7 @@ export class BitbucketIssueWebviewController implements WebviewController<Bitbuc
                 break;
             }
 
+            case CommonActionType.SendAnalytics:
             case CommonActionType.CopyLink:
             case CommonActionType.OpenJiraIssue:
             case CommonActionType.Cancel:

src/lib/webview/controller/bbIssue/createBitbucketIssueWebviewController.ts

@@ -107,6 +107,7 @@ export class CreateBitbucketIssueWebviewController implements WebviewController<
                 break;
             }
 
+            case CommonActionType.SendAnalytics:
             case CommonActionType.CopyLink:
             case CommonActionType.OpenJiraIssue:
             case CommonActionType.Cancel:

src/lib/webview/controller/config/configWebviewController.ts

@@ -275,6 +275,7 @@ export class ConfigWebviewController implements WebviewController<SectionChangeM
                 break;
             }
 
+            case CommonActionType.SendAnalytics:
             case CommonActionType.CopyLink:
             case CommonActionType.OpenJiraIssue:
             case CommonActionType.ExternalLink:

src/lib/webview/controller/onboarding/onboardingWebviewController.ts

@@ -159,6 +159,7 @@ export class OnboardingWebviewController implements WebviewController<SectionCha
                 break;
             }
 
+            case CommonActionType.SendAnalytics:
             case CommonActionType.CopyLink:
             case CommonActionType.OpenJiraIssue:
             case CommonActionType.SubmitFeedback:

src/lib/webview/controller/pullrequest/createPullRequestWebviewController.ts

@@ -173,6 +173,7 @@ export class CreatePullRequestWebviewController implements WebviewController<Wor
                 }
                 break;
 
+            case CommonActionType.SendAnalytics:
             case CommonActionType.CopyLink:
             case CommonActionType.OpenJiraIssue:
             case CommonActionType.ExternalLink:

src/lib/webview/controller/pullrequest/pullRequestDetailsWebviewController.ts

@@ -567,6 +567,7 @@ export class PullRequestDetailsWebviewController implements WebviewController<Pu
                 }
                 break;
 
+            case CommonActionType.SendAnalytics:
             case CommonActionType.CopyLink:
             case CommonActionType.OpenJiraIssue:
             case CommonActionType.SubmitFeedback:

src/lib/webview/controller/startwork/startWorkWebviewController.ts

@@ -171,6 +171,7 @@ export class StartWorkWebviewController implements WebviewController<StartWorkIs
                 break;
             }
 
+            case CommonActionType.SendAnalytics:
             case CommonActionType.CopyLink:
             case CommonActionType.OpenJiraIssue:
             case CommonActionType.ExternalLink:

src/lib/webview/controller/welcome/welcomeWebviewController.ts

@@ -76,6 +76,7 @@ export class WelcomeWebviewController implements WebviewController<WelcomeInitMe
                 break;
             }
 
+            case CommonActionType.SendAnalytics:
             case CommonActionType.CopyLink:
             case CommonActionType.OpenJiraIssue:
             case CommonActionType.ExternalLink:

src/react/atlascode/common/ErrorBoundary.tsx

@@ -0,0 +1,70 @@
+import React, { useCallback } from 'react';
+// eslint-disable-next-line no-restricted-imports
+import { AnalyticsErrorBoundary, AnalyticsListener, UIAnalyticsEvent } from '@atlaskit/analytics-next';
+import { CommonActionType } from 'src/lib/ipc/fromUI/common';
+import { AnalyticsChannels, UIAnalyticsContext } from 'src/analyticsTypes';
+
+const STACK_LIMIT = 150;
+const COMPONENT_GLOBAL = 'global';
+
+export type AtlascodeErrorBoundaryProps = {
+    postMessageFunc: (action: any) => void;
+    context: UIAnalyticsContext;
+    children?: React.ReactNode;
+};
+
+/**
+ * Global error boundary for Atlascode UI components
+ *
+ * Put this somewhere close to the root of your component tree.
+ * It will catch all rendering errors in the subtree and send them to the main process.
+ *
+ * Add `AnalyticsErrorBoundary` around the specific components you'd like to handle and track separately.
+ *
+ * @param {AtlascodeErrorBoundaryProps} props
+ * @returns
+ */
+export const AtlascodeErrorBoundary: React.FC<AtlascodeErrorBoundaryProps> = ({
+    children,
+    postMessageFunc,
+    context,
+}: AtlascodeErrorBoundaryProps) => {
+    const onRenderError = useCallback(
+        (event: UIAnalyticsEvent) => {
+            const { error, info, ...rest } = event.payload.attributes;
+            postMessageFunc({
+                type: CommonActionType.SendAnalytics,
+                errorInfo: {
+                    ...context,
+                    errorType: error.name,
+                    errorMessage: error.message,
+                    errorCause: error.cause,
+                    componentStack: simplifyStack(
+                        info.componentStack,
+                        (line) => line.match(/in (.*) \(created by (.*)\)/)?.[1],
+                    ),
+                    stack: simplifyStack(error.stack, (line) => line.match(/at (.*) \((.*)\)/)?.[1]),
+                    ...rest,
+                },
+            });
+        },
+        [postMessageFunc, context],
+    );
+
+    return (
+        <AnalyticsListener channel={AnalyticsChannels.AtlascodeUiErrors} onEvent={onRenderError}>
+            <AnalyticsErrorBoundary
+                channel={AnalyticsChannels.AtlascodeUiErrors}
+                data={{ component: COMPONENT_GLOBAL }}
+            >
+                {children}
+            </AnalyticsErrorBoundary>
+        </AnalyticsListener>
+    );
+};
+
+const simplifyStack = (stack: string, extractFunc: (line: string) => string | undefined) => {
+    const line = stack.split('\n').map(extractFunc).filter(Boolean).join(' < ');
+
+    return line.length > STACK_LIMIT ? line.substring(0, STACK_LIMIT) + '...' : line;
+};