ErrorBoundary improvements, StickerCreator logging/resiliency

ts/components/App.tsx

@@ -10,6 +10,7 @@ import type { ExecuteMenuRoleType } from './TitleBarContainer';
 import type { LocaleMessagesType } from '../types/I18N';
 import type { MenuOptionsType, MenuActionType } from '../types/menu';
 import type { ToastType } from '../state/ducks/toast';
+import type { ViewStoryActionCreatorType } from '../state/ducks/stories';
 import { AppViewType } from '../state/ducks/app';
 import { Inbox } from './Inbox';
 import { SmartInstallScreen } from '../state/smart/InstallScreen';
@@ -28,9 +29,9 @@ type PropsType = {
   renderCallManager: () => JSX.Element;
   renderGlobalModalContainer: () => JSX.Element;
   isShowingStoriesView: boolean;
-  renderStories: () => JSX.Element;
+  renderStories: (closeView: () => unknown) => JSX.Element;
   hasSelectedStoryData: boolean;
-  renderStoryViewer: () => JSX.Element;
+  renderStoryViewer: (closeView: () => unknown) => JSX.Element;
   requestVerification: (
     type: 'sms' | 'voice',
     number: string,
@@ -48,6 +49,8 @@ type PropsType = {
   titleBarDoubleClick: () => void;
   toastType?: ToastType;
   hideToast: () => unknown;
+  toggleStoriesView: () => unknown;
+  viewStory: ViewStoryActionCreatorType;
 } & ComponentProps<typeof Inbox>;
 
 export const App = ({
@@ -82,6 +85,8 @@ export const App = ({
   theme,
   titleBarDoubleClick,
   toastType,
+  toggleStoriesView,
+  viewStory,
 }: PropsType): JSX.Element => {
   let contents;
 
@@ -168,8 +173,9 @@ export const App = ({
         <ToastManager hideToast={hideToast} i18n={i18n} toastType={toastType} />
         {renderGlobalModalContainer()}
         {renderCallManager()}
-        {isShowingStoriesView && renderStories()}
-        {hasSelectedStoryData && renderStoryViewer()}
+        {isShowingStoriesView && renderStories(toggleStoriesView)}
+        {hasSelectedStoryData &&
+          renderStoryViewer(() => viewStory({ closeViewer: true }))}
         {contents}
       </div>
     </TitleBarContainer>

ts/components/ErrorBoundary.tsx

@@ -1,7 +1,7 @@
 // Copyright 2021 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
-import type { ReactNode } from 'react';
+import type { ReactNode, ErrorInfo } from 'react';
 import React from 'react';
 
 import * as Errors from '../types/errors';
@@ -10,6 +10,8 @@ import { ToastType } from '../state/ducks/toast';
 
 export type Props = {
   children: ReactNode;
+  name: string;
+  closeView?: () => unknown;
 };
 
 export type State = {
@@ -24,14 +26,23 @@ export class ErrorBoundary extends React.PureComponent<Props, State> {
   }
 
   public static getDerivedStateFromError(error: Error): State {
+    return { error };
+  }
+
+  public override componentDidCatch(error: Error, errorInfo: ErrorInfo): void {
+    const { closeView, name } = this.props;
+
     log.error(
-      'ErrorBoundary: captured rendering error',
-      Errors.toLogFormat(error)
+      `ErrorBoundary/${name}: ` +
+        `captured rendering error ${Errors.toLogFormat(error)}` +
+        `\nerrorInfo: ${errorInfo.componentStack}`
     );
     if (window.reduxActions) {
       window.reduxActions.toast.showToast(ToastType.Error);
     }
-    return { error };
+    if (closeView) {
+      closeView();
+    }
   }
 
   public override render(): ReactNode {

ts/components/conversation/Message.tsx

@@ -972,7 +972,10 @@ export class Message extends React.PureComponent<Props, State> {
         );
       }
 
-      if (isImage(attachments) || isVideo(attachments)) {
+      if (
+        isImage(attachments) ||
+        (isVideo(attachments) && hasVideoScreenshot(attachments))
+      ) {
         const bottomOverlay = !isSticker && !collapseMetadata;
         // We only want users to tab into this if there's more than one
         const tabIndex = attachments.length > 1 ? 0 : -1;