Merge remote-tracking branch 'origin/develop' into gsouquet/fix-backdrop-filter

* origin/develop: (43 commits)
  Update copy to indicate debug logs contain which UI elements you last interacted with
  Fix name of Netlify workflow
  Add type declarations
  Fix pagination and improve typing
  Fix import
  Reset matrix-js-sdk back to develop branch
  v3.28.1
  Prepare changelog for v3.28.1
  Upgrade matrix-js-sdk to 12.3.1
  Explicitly handle first state change
  Properly listen for call_state
  Proper init in constructors
  Resetting package fields for development
  v3.28.0
  Prepare changelog for v3.28.0
  Fix error on accessing encrypted media without keys
  Fix call tile buttons
  Upgrade matrix-js-sdk to 12.3.0
  Remove test code; good job we have tests
  Fix dates
  ...

src/CallHandler.tsx

@@ -464,85 +464,7 @@ export default class CallHandler extends EventEmitter {
             this.removeCallForRoom(mappedRoomId);
         });
         call.on(CallEvent.State, (newState: CallState, oldState: CallState) => {
-            if (!this.matchesCallForThisRoom(call)) return;
-
-            this.setCallState(call, newState);
-
-            switch (oldState) {
-                case CallState.Ringing:
-                    this.pause(AudioID.Ring);
-                    break;
-                case CallState.InviteSent:
-                    this.pause(AudioID.Ringback);
-                    break;
-            }
-
-            if (newState !== CallState.Ringing) {
-                this.silencedCalls.delete(call.callId);
-            }
-
-            switch (newState) {
-                case CallState.Ringing: {
-                    const incomingCallPushRule = (
-                        new PushProcessor(MatrixClientPeg.get()).getPushRuleById(RuleId.IncomingCall)
-                    );
-                    const pushRuleEnabled = incomingCallPushRule?.enabled;
-                    const tweakSetToRing = incomingCallPushRule?.actions.some((action: Tweaks) => (
-                        action.set_tweak === TweakName.Sound &&
-                        action.value === "ring"
-                    ));
-
-                    if (pushRuleEnabled && tweakSetToRing) {
-                        this.play(AudioID.Ring);
-                    } else {
-                        this.silenceCall(call.callId);
-                    }
-                    break;
-                }
-                case CallState.InviteSent: {
-                    this.play(AudioID.Ringback);
-                    break;
-                }
-                case CallState.Ended: {
-                    const hangupReason = call.hangupReason;
-                    Analytics.trackEvent('voip', 'callEnded', 'hangupReason', hangupReason);
-                    this.removeCallForRoom(mappedRoomId);
-                    if (oldState === CallState.InviteSent && call.hangupParty === CallParty.Remote) {
-                        this.play(AudioID.Busy);
-
-                        // Don't show a modal when we got rejected/the call was hung up
-                        if (!hangupReason || [CallErrorCode.UserHangup, "user hangup"].includes(hangupReason)) break;
-
-                        let title;
-                        let description;
-                        // TODO: We should either do away with these or figure out a copy for each code (expect user_hangup...)
-                        if (call.hangupReason === CallErrorCode.UserBusy) {
-                            title = _t("User Busy");
-                            description = _t("The user you called is busy.");
-                        } else {
-                            title = _t("Call Failed");
-                            description = _t("The call could not be established");
-                        }
-
-                        Modal.createTrackedDialog('Call Handler', 'Call Failed', ErrorDialog, {
-                            title, description,
-                        });
-                    } else if (
-                        hangupReason === CallErrorCode.AnsweredElsewhere && oldState === CallState.Connecting
-                    ) {
-                        Modal.createTrackedDialog('Call Handler', 'Call Failed', ErrorDialog, {
-                            title: _t("Answered Elsewhere"),
-                            description: _t("The call was answered on another device."),
-                        });
-                    } else if (oldState !== CallState.Fledgling && oldState !== CallState.Ringing) {
-                        // don't play the end-call sound for calls that never got off the ground
-                        this.play(AudioID.CallEnd);
-                    }
-
-                    this.logCallStats(call, mappedRoomId);
-                    break;
-                }
-            }
+            this.onCallStateChanged(newState, oldState, call);
         });
         call.on(CallEvent.Replaced, (newCall: MatrixCall) => {
             if (!this.matchesCallForThisRoom(call)) return;
@@ -598,6 +520,89 @@ export default class CallHandler extends EventEmitter {
         });
     }
 
+    private onCallStateChanged = (newState: CallState, oldState: CallState, call: MatrixCall): void => {
+        if (!this.matchesCallForThisRoom(call)) return;
+
+        const mappedRoomId = this.roomIdForCall(call);
+        this.setCallState(call, newState);
+
+        switch (oldState) {
+            case CallState.Ringing:
+                this.pause(AudioID.Ring);
+                break;
+            case CallState.InviteSent:
+                this.pause(AudioID.Ringback);
+                break;
+        }
+
+        if (newState !== CallState.Ringing) {
+            this.silencedCalls.delete(call.callId);
+        }
+
+        switch (newState) {
+            case CallState.Ringing: {
+                const incomingCallPushRule = (
+                    new PushProcessor(MatrixClientPeg.get()).getPushRuleById(RuleId.IncomingCall)
+                );
+                const pushRuleEnabled = incomingCallPushRule?.enabled;
+                const tweakSetToRing = incomingCallPushRule?.actions.some((action: Tweaks) => (
+                    action.set_tweak === TweakName.Sound &&
+                    action.value === "ring"
+                ));
+
+                if (pushRuleEnabled && tweakSetToRing) {
+                    this.play(AudioID.Ring);
+                } else {
+                    this.silenceCall(call.callId);
+                }
+                break;
+            }
+            case CallState.InviteSent: {
+                this.play(AudioID.Ringback);
+                break;
+            }
+            case CallState.Ended: {
+                const hangupReason = call.hangupReason;
+                Analytics.trackEvent('voip', 'callEnded', 'hangupReason', hangupReason);
+                this.removeCallForRoom(mappedRoomId);
+                if (oldState === CallState.InviteSent && call.hangupParty === CallParty.Remote) {
+                    this.play(AudioID.Busy);
+
+                    // Don't show a modal when we got rejected/the call was hung up
+                    if (!hangupReason || [CallErrorCode.UserHangup, "user hangup"].includes(hangupReason)) break;
+
+                    let title;
+                    let description;
+                    // TODO: We should either do away with these or figure out a copy for each code (expect user_hangup...)
+                    if (call.hangupReason === CallErrorCode.UserBusy) {
+                        title = _t("User Busy");
+                        description = _t("The user you called is busy.");
+                    } else {
+                        title = _t("Call Failed");
+                        description = _t("The call could not be established");
+                    }
+
+                    Modal.createTrackedDialog('Call Handler', 'Call Failed', ErrorDialog, {
+                        title, description,
+                    });
+                } else if (
+                    hangupReason === CallErrorCode.AnsweredElsewhere && oldState === CallState.Connecting
+                ) {
+                    Modal.createTrackedDialog('Call Handler', 'Call Failed', ErrorDialog, {
+                        title: _t("Answered Elsewhere"),
+                        description: _t("The call was answered on another device."),
+                    });
+                } else if (oldState !== CallState.Fledgling && oldState !== CallState.Ringing) {
+                    // don't play the end-call sound for calls that never got off the ground
+                    this.play(AudioID.CallEnd);
+                }
+
+                this.logCallStats(call, mappedRoomId);
+                break;
+            }
+        }
+    };
+
     private async logCallStats(call: MatrixCall, mappedRoomId: string) {
         const stats = await call.getCurrentCallStats();
         logger.debug(
@@ -861,6 +866,8 @@ export default class CallHandler extends EventEmitter {
                     this.calls.set(mappedRoomId, call);
                     this.emit(CallHandlerEvent.CallsChanged, this.calls);
                     this.setCallListeners(call);
+                    // Explicitly handle first state change
+                    this.onCallStateChanged(call.state, null, call);
 
                     // get ready to send encrypted events in the room, so if the user does answer
                     // the call, we'll be ready to send. NB. This is the protocol-level room ID not

src/components/structures/LoggedInView.tsx

@@ -55,7 +55,7 @@ import { getKeyBindingsManager, NavigationAction, RoomAction } from '../../KeyBi
 import { IOpts } from "../../createRoom";
 import SpacePanel from "../views/spaces/SpacePanel";
 import { replaceableComponent } from "../../utils/replaceableComponent";
-import CallHandler, { CallHandlerEvent } from '../../CallHandler';
+import CallHandler from '../../CallHandler';
 import { MatrixCall } from 'matrix-js-sdk/src/webrtc/call';
 import AudioFeedArrayForCall from '../views/voip/AudioFeedArrayForCall';
 import { OwnProfileStore } from '../../stores/OwnProfileStore';
@@ -147,6 +147,7 @@ interface IState {
 class LoggedInView extends React.Component<IProps, IState> {
     static displayName = 'LoggedInView';
 
+    private dispatcherRef: string;
     protected readonly _matrixClient: MatrixClient;
     protected readonly _roomView: React.RefObject<any>;
     protected readonly _resizeContainer: React.RefObject<ResizeHandle>;
@@ -161,7 +162,7 @@ class LoggedInView extends React.Component<IProps, IState> {
             // use compact timeline view
             useCompactLayout: SettingsStore.getValue('useCompactLayout'),
             usageLimitDismissed: false,
-            activeCalls: [],
+            activeCalls: CallHandler.sharedInstance().getAllActiveCalls(),
         };
 
         // stash the MatrixClient in case we log out before we are unmounted
@@ -177,7 +178,7 @@ class LoggedInView extends React.Component<IProps, IState> {
 
     componentDidMount() {
         document.addEventListener('keydown', this.onNativeKeyDown, false);
-        CallHandler.sharedInstance().addListener(CallHandlerEvent.CallsChanged, this.onCallsChanged);
+        this.dispatcherRef = dis.register(this.onAction);
 
         this.updateServerNoticeEvents();
 
@@ -205,7 +206,7 @@ class LoggedInView extends React.Component<IProps, IState> {
 
     componentWillUnmount() {
         document.removeEventListener('keydown', this.onNativeKeyDown, false);
-        CallHandler.sharedInstance().removeListener(CallHandlerEvent.CallsChanged, this.onCallsChanged);
+        dis.unregister(this.dispatcherRef);
         this._matrixClient.removeListener("accountData", this.onAccountData);
         this._matrixClient.removeListener("sync", this.onSync);
         this._matrixClient.removeListener("RoomState.events", this.onRoomStateEvents);
@@ -224,6 +225,17 @@ class LoggedInView extends React.Component<IProps, IState> {
         this.setState({
             activeCalls: CallHandler.sharedInstance().getAllActiveCalls(),
         });
+
+    private onAction = (payload): void => {
+        switch (payload.action) {
+            case 'call_state': {
+                const activeCalls = CallHandler.sharedInstance().getAllActiveCalls();
+                if (activeCalls !== this.state.activeCalls) {
+                    this.setState({ activeCalls });
+                }
+                break;
+            }
+        }
     };
 
     public canResetTimelineInRoom = (roomId: string) => {

src/components/structures/MatrixChat.tsx

@@ -108,6 +108,7 @@ import SoftLogout from './auth/SoftLogout';
 import { makeRoomPermalink } from "../../utils/permalinks/Permalinks";
 import { copyPlaintext } from "../../utils/strings";
 import { PosthogAnalytics } from '../../PosthogAnalytics';
+import { initSentry } from "../../sentry";
 
 /** constants for MatrixChat.state.view */
 export enum Views {
@@ -393,6 +394,8 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
         PosthogAnalytics.instance.updatePlatformSuperProperties();
 
         CountlyAnalytics.instance.enable(/* anonymous = */ true);
+
+        initSentry(SdkConfig.get()["sentry"]);
     }
 
     private async postLoginSetup() {

src/components/views/dialogs/BugReportDialog.tsx

@@ -29,11 +29,13 @@ import BaseDialog from "./BaseDialog";
 import Field from '../elements/Field';
 import Spinner from "../elements/Spinner";
 import DialogButtons from "../elements/DialogButtons";
+import { sendSentryReport } from "../../../sentry";
 
 interface IProps {
     onFinished: (success: boolean) => void;
     initialText?: string;
     label?: string;
+    error?: Error;
 }
 
 interface IState {
@@ -113,6 +115,8 @@ export default class BugReportDialog extends React.Component<IProps, IState> {
                 });
             }
         });
+
+        sendSentryReport(this.state.text, this.state.issueUrl, this.props.error);
     };
 
     private onDownload = async (): Promise<void> => {
@@ -200,8 +204,8 @@ export default class BugReportDialog extends React.Component<IProps, IState> {
                         { _t(
                             "Debug logs contain application usage data including your " +
                             "username, the IDs or aliases of the rooms or groups you " +
-                            "have visited and the usernames of other users. They do " +
-                            "not contain messages.",
+                            "have visited, which UI elements you last interacted with, " +
+                            "and the usernames of other users. They do not contain messages.",
                         ) }
                     </p>
                     <p><b>

src/components/views/elements/ErrorBoundary.tsx

@@ -71,6 +71,7 @@ export default class ErrorBoundary extends React.PureComponent<{}, IState> {
     private onBugReport = (): void => {
         Modal.createTrackedDialog('Bug Report Dialog', '', BugReportDialog, {
             label: 'react-soft-crash',
+            error: this.state.error,
         });
     };
 
@@ -93,8 +94,9 @@ export default class ErrorBoundary extends React.PureComponent<{}, IState> {
                         "If you've submitted a bug via GitHub, debug logs can help " +
                         "us track down the problem. Debug logs contain application " +
                         "usage data including your username, the IDs or aliases of " +
-                        "the rooms or groups you have visited and the usernames of " +
-                        "other users. They do not contain messages.",
+                        "the rooms or groups you have visited, which UI elements you " +
+                        "last interacted with, and the usernames of other users. " +
+                        "They do not contain messages.",
                     ) }</p>
                     <AccessibleButton onClick={this.onBugReport} kind='primary'>
                         { _t("Submit debug logs") }

src/components/views/messages/CallEvent.tsx

@@ -27,7 +27,7 @@ import classNames from 'classnames';
 import AccessibleTooltipButton from '../elements/AccessibleTooltipButton';
 import { formatCallTime } from "../../../DateUtils";
 
-const MAX_NON_NARROW_WIDTH = 400 / 70 * 100;
+const MAX_NON_NARROW_WIDTH = 450 / 70 * 100;
 
 interface IProps {
     mxEvent: MatrixEvent;

src/components/views/messages/MFileBody.tsx

@@ -178,7 +178,7 @@ export default class MFileBody extends React.Component<IProps, IState> {
 
     private onPlaceholderClick = async () => {
         const mediaHelper = this.props.mediaEventHelper;
-        if (mediaHelper.media.isEncrypted) {
+        if (mediaHelper?.media.isEncrypted) {
             await this.decryptFile();
             this.downloadFile(this.fileName, this.linkText);
         } else {
@@ -192,7 +192,7 @@ export default class MFileBody extends React.Component<IProps, IState> {
     };
 
     public render() {
-        const isEncrypted = this.props.mediaEventHelper.media.isEncrypted;
+        const isEncrypted = this.props.mediaEventHelper?.media.isEncrypted;
         const contentUrl = this.getContentUrl();
         const fileSize = this.content.info ? this.content.info.size : null;
         const fileType = this.content.info ? this.content.info.mimetype : "application/octet-stream";

src/components/views/messages/TileErrorBoundary.tsx

@@ -51,6 +51,7 @@ export default class TileErrorBoundary extends React.Component<IProps, IState> {
     private onBugReport = (): void => {
         Modal.createTrackedDialog('Bug Report Dialog', '', BugReportDialog, {
             label: 'react-soft-crash-tile',
+            error: this.state.error,
         });
     };
 

src/components/views/rooms/EventTile.tsx

@@ -856,13 +856,14 @@ export default class EventTile extends React.Component<IProps, IState> {
 
     render() {
         const msgtype = this.props.mxEvent.getContent().msgtype;
+        const eventType = this.props.mxEvent.getType() as EventType;
         const { tileHandler, isBubbleMessage, isInfoMessage } = getEventDisplayInfo(this.props.mxEvent);
 
         // This shouldn't happen: the caller should check we support this type
         // before trying to instantiate us
         if (!tileHandler) {
             const { mxEvent } = this.props;
-            console.warn(`Event type not supported: type:${mxEvent.getType()} isState:${mxEvent.isState()}`);
+            console.warn(`Event type not supported: type:${eventType} isState:${mxEvent.isState()}`);
             return <div className="mx_EventTile mx_EventTile_info mx_MNoticeBody">
                 <div className="mx_EventTile_line">
                     { _t('This event could not be displayed') }
@@ -886,7 +887,10 @@ export default class EventTile extends React.Component<IProps, IState> {
             mx_EventTile_sending: !isEditing && isSending,
             mx_EventTile_highlight: this.props.tileShape === TileShape.Notif ? false : this.shouldHighlight(),
             mx_EventTile_selected: this.props.isSelectedEvent,
-            mx_EventTile_continuation: this.props.tileShape ? '' : this.props.continuation,
+            mx_EventTile_continuation: (
+                (this.props.tileShape ? '' : this.props.continuation) ||
+                eventType === EventType.CallInvite
+            ),
             mx_EventTile_last: this.props.last,
             mx_EventTile_lastInSection: this.props.lastInSection,
             mx_EventTile_contextual: this.props.contextual,
@@ -934,7 +938,7 @@ export default class EventTile extends React.Component<IProps, IState> {
             needsSenderProfile = true;
         } else if (
             (this.props.continuation && this.props.tileShape !== TileShape.FileGrid) ||
-            this.props.mxEvent.getType() === EventType.CallInvite
+            eventType === EventType.CallInvite
         ) {
             // no avatar or sender profile for continuation messages and call tiles
             avatarSize = 0;

src/components/views/settings/tabs/user/HelpUserSettingsTab.tsx

@@ -268,7 +268,8 @@ export default class HelpUserSettingsTab extends React.Component<IProps, IState>
                             "If you've submitted a bug via GitHub, debug logs can help " +
                             "us track down the problem. Debug logs contain application " +
                             "usage data including your username, the IDs or aliases of " +
-                            "the rooms or groups you have visited and the usernames of " +
+                            "the rooms or groups you have visited, which UI elements you " +
+                            "last interacted with, and the usernames of " +
                             "other users. They do not contain messages.",
                         ) }
                         <div className='mx_HelpUserSettingsTab_debugButton'>

src/components/views/voip/AudioFeed.tsx

@@ -72,7 +72,7 @@ export default class AudioFeed extends React.Component<IProps, IState> {
         }
     };
 
-    private playMedia() {
+    private async playMedia() {
         const element = this.element.current;
         if (!element) return;
         this.onAudioOutputChanged(MediaDeviceHandler.getAudioOutput());
@@ -90,7 +90,7 @@ export default class AudioFeed extends React.Component<IProps, IState> {
             // should serialise the ones that need to be serialised but then be able to interrupt
             // them with another load() which will cancel the pending one, but since we don't call
             // load() explicitly, it shouldn't be a problem. - Dave
-            element.play();
+            await element.load();
         } catch (e) {
             logger.info("Failed to play media element with feed", this.props.feed, e);
         }

src/components/views/voip/AudioFeedArrayForCall.tsx

@@ -32,7 +32,7 @@ export default class AudioFeedArrayForCall extends React.Component<IProps, IStat
         super(props);
 
         this.state = {
-            feeds: [],
+            feeds: this.props.call.getRemoteFeeds(),
         };
     }
 

src/components/views/voip/CallView.tsx

@@ -111,7 +111,7 @@ export default class CallView extends React.Component<IProps, IState> {
     constructor(props: IProps) {
         super(props);
 
-        const { primary, secondary } = this.getOrderedFeeds(this.props.call.getFeeds());
+        const { primary, secondary } = CallView.getOrderedFeeds(this.props.call.getFeeds());
 
         this.state = {
             isLocalOnHold: this.props.call.isLocalOnHold(),
@@ -147,7 +147,16 @@ export default class CallView extends React.Component<IProps, IState> {
         dis.unregister(this.dispatcherRef);
     }
 
-    public componentDidUpdate(prevProps) {
+    static getDerivedStateFromProps(props: IProps): Partial<IState> {
+        const { primary, secondary } = CallView.getOrderedFeeds(props.call.getFeeds());
+
+        return {
+            primaryFeed: primary,
+            secondaryFeeds: secondary,
+        };
+    }
+
+    public componentDidUpdate(prevProps: IProps): void {
         if (this.props.call === prevProps.call) return;
 
         this.setState({
@@ -201,7 +210,7 @@ export default class CallView extends React.Component<IProps, IState> {
     };
 
     private onFeedsChanged = (newFeeds: Array<CallFeed>) => {
-        const { primary, secondary } = this.getOrderedFeeds(newFeeds);
+        const { primary, secondary } = CallView.getOrderedFeeds(newFeeds);
         this.setState({
             primaryFeed: primary,
             secondaryFeeds: secondary,
@@ -226,7 +235,7 @@ export default class CallView extends React.Component<IProps, IState> {
         this.buttonsRef.current?.showControls();
     };
 
-    private getOrderedFeeds(feeds: Array<CallFeed>): { primary: CallFeed, secondary: Array<CallFeed> } {
+    static getOrderedFeeds(feeds: Array<CallFeed>): { primary: CallFeed, secondary: Array<CallFeed> } {
         let primary;
 
         // Try to use a screensharing as primary, a remote one if possible

src/components/views/voip/VideoFeed.tsx

@@ -112,7 +112,7 @@ export default class VideoFeed extends React.PureComponent<IProps, IState> {
         }
     }
 
-    private playMedia() {
+    private async playMedia() {
         const element = this.element;
         if (!element) return;
         // We play audio in AudioFeed, not here
@@ -129,7 +129,7 @@ export default class VideoFeed extends React.PureComponent<IProps, IState> {
             // should serialise the ones that need to be serialised but then be able to interrupt
             // them with another load() which will cancel the pending one, but since we don't call
             // load() explicitly, it shouldn't be a problem. - Dave
-            element.play();
+            await element.play();
         } catch (e) {
             logger.info("Failed to play media element with feed", this.props.feed, e);
         }

src/i18n/strings/en_EN.json

@@ -1291,7 +1291,7 @@
     "For help with using %(brand)s, click <a>here</a> or start a chat with our bot using the button below.": "For help with using %(brand)s, click <a>here</a> or start a chat with our bot using the button below.",
     "Chat with %(brand)s Bot": "Chat with %(brand)s Bot",
     "Bug reporting": "Bug reporting",
-    "If you've submitted a bug via GitHub, debug logs can help us track down the problem. Debug logs contain application usage data including your username, the IDs or aliases of the rooms or groups you have visited and the usernames of other users. They do not contain messages.": "If you've submitted a bug via GitHub, debug logs can help us track down the problem. Debug logs contain application usage data including your username, the IDs or aliases of the rooms or groups you have visited and the usernames of other users. They do not contain messages.",
+    "If you've submitted a bug via GitHub, debug logs can help us track down the problem. Debug logs contain application usage data including your username, the IDs or aliases of the rooms or groups you have visited, which UI elements you last interacted with, and the usernames of other users. They do not contain messages.": "If you've submitted a bug via GitHub, debug logs can help us track down the problem. Debug logs contain application usage data including your username, the IDs or aliases of the rooms or groups you have visited, which UI elements you last interacted with, and the usernames of other users. They do not contain messages.",
     "Submit debug logs": "Submit debug logs",
     "To report a Matrix-related security issue, please read the Matrix.org <a>Security Disclosure Policy</a>.": "To report a Matrix-related security issue, please read the Matrix.org <a>Security Disclosure Policy</a>.",
     "Help & About": "Help & About",
@@ -2168,7 +2168,7 @@
     "Failed to send logs: ": "Failed to send logs: ",
     "Preparing to download logs": "Preparing to download logs",
     "Reminder: Your browser is unsupported, so your experience may be unpredictable.": "Reminder: Your browser is unsupported, so your experience may be unpredictable.",
-    "Debug logs contain application usage data including your username, the IDs or aliases of the rooms or groups you have visited and the usernames of other users. They do not contain messages.": "Debug logs contain application usage data including your username, the IDs or aliases of the rooms or groups you have visited and the usernames of other users. They do not contain messages.",
+    "Debug logs contain application usage data including your username, the IDs or aliases of the rooms or groups you have visited, which UI elements you last interacted with, and the usernames of other users. They do not contain messages.": "Debug logs contain application usage data including your username, the IDs or aliases of the rooms or groups you have visited, which UI elements you last interacted with, and the usernames of other users. They do not contain messages.",
     "Before submitting logs, you must <a>create a GitHub issue</a> to describe your problem.": "Before submitting logs, you must <a>create a GitHub issue</a> to describe your problem.",
     "Download logs": "Download logs",
     "GitHub issue": "GitHub issue",

src/indexing/EventIndex.ts

@@ -21,7 +21,7 @@ import { Room } from 'matrix-js-sdk/src/models/room';
 import { MatrixEvent } from 'matrix-js-sdk/src/models/event';
 import { EventTimelineSet } from 'matrix-js-sdk/src/models/event-timeline-set';
 import { RoomState } from 'matrix-js-sdk/src/models/room-state';
-import { TimelineWindow } from 'matrix-js-sdk/src/timeline-window';
+import { TimelineIndex, TimelineWindow } from 'matrix-js-sdk/src/timeline-window';
 import { sleep } from "matrix-js-sdk/src/utils";
 import { IResultRoomEvents } from "matrix-js-sdk/src/@types/search";
 
@@ -859,13 +859,27 @@ export default class EventIndex extends EventEmitter {
             return Promise.resolve(true);
         }
 
-        const paginationMethod = async (timelineWindow, timeline, room, direction, limit) => {
-            const timelineSet = timelineWindow._timelineSet;
-            const token = timeline.timeline.getPaginationToken(direction);
+        const paginationMethod = async (
+            timelineWindow: TimelineWindow,
+            timelineIndex: TimelineIndex,
+            room: Room,
+            direction: Direction,
+            limit: number,
+        ) => {
+            const timeline = timelineIndex.timeline;
+            const timelineSet = timeline.getTimelineSet();
+            const token = timeline.getPaginationToken(direction);
 
-            const ret = await this.populateFileTimeline(timelineSet, timeline.timeline, room, limit, token, direction);
+            const ret = await this.populateFileTimeline(
+                timelineSet,
+                timeline,
+                room,
+                limit,
+                token,
+                direction,
+            );
 
-            timeline.pendingPaginate = null;
+            timelineIndex.pendingPaginate = null;
             timelineWindow.extend(direction, limit);
 
             return ret;

src/sentry.ts

@@ -0,0 +1,229 @@
+/*
+Copyright 2021 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import * as Sentry from "@sentry/browser";
+import PlatformPeg from "./PlatformPeg";
+import SdkConfig from "./SdkConfig";
+import { MatrixClientPeg } from "./MatrixClientPeg";
+import SettingsStore from "./settings/SettingsStore";
+import { MatrixClient } from "matrix-js-sdk";
+
+/* eslint-disable camelcase */
+
+type StorageContext = {
+    storageManager_persisted?: string;
+    storageManager_quota?: string;
+    storageManager_usage?: string;
+    storageManager_usageDetails?: string;
+};
+
+type UserContext = {
+    username: string;
+    enabled_labs: string;
+    low_bandwidth: string;
+};
+
+type CryptoContext = {
+    device_keys?: string;
+    cross_signing_ready?: string;
+    cross_signing_supported_by_hs?: string;
+    cross_signing_key?: string;
+    cross_signing_privkey_in_secret_storage?: string;
+    cross_signing_master_privkey_cached?: string;
+    cross_signing_user_signing_privkey_cached?: string;
+    secret_storage_ready?: string;
+    secret_storage_key_in_account?: string;
+    session_backup_key_in_secret_storage?: string;
+    session_backup_key_cached?: string;
+    session_backup_key_well_formed?: string;
+};
+
+type DeviceContext = {
+    device_id: string;
+    mx_local_settings: string;
+    modernizr_missing_features?: string;
+};
+
+type Contexts = {
+    user: UserContext;
+    crypto: CryptoContext;
+    device: DeviceContext;
+    storage: StorageContext;
+};
+
+/* eslint-enable camelcase */
+
+async function getStorageContext(): Promise<StorageContext> {
+    const result = {};
+
+    // add storage persistence/quota information
+    if (navigator.storage && navigator.storage.persisted) {
+        try {
+            result["storageManager_persisted"] = String(await navigator.storage.persisted());
+        } catch (e) {}
+    } else if (document.hasStorageAccess) { // Safari
+        try {
+            result["storageManager_persisted"] = String(await document.hasStorageAccess());
+        } catch (e) {}
+    }
+    if (navigator.storage && navigator.storage.estimate) {
+        try {
+            const estimate = await navigator.storage.estimate();
+            result["storageManager_quota"] = String(estimate.quota);
+            result["storageManager_usage"] = String(estimate.usage);
+            if (estimate.usageDetails) {
+                const usageDetails = [];
+                Object.keys(estimate.usageDetails).forEach(k => {
+                    usageDetails.push(`${k}: ${String(estimate.usageDetails[k])}`);
+                });
+                result[`storageManager_usage`] = usageDetails.join(", ");
+            }
+        } catch (e) {}
+    }
+
+    return result;
+}
+
+function getUserContext(client: MatrixClient): UserContext {
+    return {
+        "username": client.credentials.userId,
+        "enabled_labs": getEnabledLabs(),
+        "low_bandwidth": SettingsStore.getValue("lowBandwidth") ? "enabled" : "disabled",
+    };
+}
+
+function getEnabledLabs(): string {
+    const enabledLabs = SettingsStore.getFeatureSettingNames().filter(f => SettingsStore.getValue(f));
+    if (enabledLabs.length) {
+        return enabledLabs.join(", ");
+    }
+    return "";
+}
+
+async function getCryptoContext(client: MatrixClient): Promise<CryptoContext> {
+    if (!client.isCryptoEnabled()) {
+        return {};
+    }
+    const keys = [`ed25519:${client.getDeviceEd25519Key()}`];
+    if (client.getDeviceCurve25519Key) {
+        keys.push(`curve25519:${client.getDeviceCurve25519Key()}`);
+    }
+    const crossSigning = client.crypto.crossSigningInfo;
+    const secretStorage = client.crypto.secretStorage;
+    const pkCache = client.getCrossSigningCacheCallbacks();
+    const sessionBackupKeyFromCache = await client.crypto.getSessionBackupPrivateKey();
+
+    return {
+        "device_keys": keys.join(', '),
+        "cross_signing_ready": String(await client.isCrossSigningReady()),
+        "cross_signing_supported_by_hs":
+            String(await client.doesServerSupportUnstableFeature("org.matrix.e2e_cross_signing")),
+        "cross_signing_key": crossSigning.getId(),
+        "cross_signing_privkey_in_secret_storage": String(
+            !!(await crossSigning.isStoredInSecretStorage(secretStorage))),
+        "cross_signing_master_privkey_cached": String(
+            !!(pkCache && await pkCache.getCrossSigningKeyCache("master"))),
+        "cross_signing_user_signing_privkey_cached": String(
+            !!(pkCache && await pkCache.getCrossSigningKeyCache("user_signing"))),
+        "secret_storage_ready": String(await client.isSecretStorageReady()),
+        "secret_storage_key_in_account": String(!!(await secretStorage.hasKey())),
+        "session_backup_key_in_secret_storage": String(!!(await client.isKeyBackupKeyStored())),
+        "session_backup_key_cached": String(!!sessionBackupKeyFromCache),
+        "session_backup_key_well_formed": String(sessionBackupKeyFromCache instanceof Uint8Array),
+    };
+}
+
+function getDeviceContext(client: MatrixClient): DeviceContext {
+    const result = {
+        "device_id": client?.deviceId,
+        "mx_local_settings": localStorage.getItem('mx_local_settings'),
+    };
+
+    if (window.Modernizr) {
+        const missingFeatures = Object.keys(window.Modernizr).filter(key => window.Modernizr[key] === false);
+        if (missingFeatures.length > 0) {
+            result["modernizr_missing_features"] = missingFeatures.join(", ");
+        }
+    }
+
+    return result;
+}
+
+async function getContexts(): Promise<Contexts> {
+    const client = MatrixClientPeg.get();
+    return {
+        "user": getUserContext(client),
+        "crypto": await getCryptoContext(client),
+        "device": getDeviceContext(client),
+        "storage": await getStorageContext(),
+    };
+}
+
+export async function sendSentryReport(userText: string, issueUrl: string, error: Error): Promise<void> {
+    const sentryConfig = SdkConfig.get()["sentry"];
+    if (!sentryConfig) return;
+
+    const captureContext = {
+        "contexts": await getContexts(),
+        "extra": {
+            "user_text": userText,
+            "issue_url": issueUrl,
+        },
+    };
+
+    // If there's no error and no issueUrl, the report will just produce non-grouped noise in Sentry, so don't
+    // upload it
+    if (error) {
+        Sentry.captureException(error, captureContext);
+    } else if (issueUrl) {
+        Sentry.captureMessage(`Issue: ${issueUrl}`, captureContext);
+    }
+}
+
+interface ISentryConfig {
+    dsn: string;
+    environment?: string;
+}
+
+export async function initSentry(sentryConfig: ISentryConfig): Promise<void> {
+    if (!sentryConfig) return;
+    const platform = PlatformPeg.get();
+    let appVersion = "unknown";
+    try {
+        appVersion = await platform.getAppVersion();
+    } catch (e) {}
+
+    Sentry.init({
+        dsn: sentryConfig.dsn,
+        release: `${platform.getHumanReadableName()}@${appVersion}`,
+        environment: sentryConfig.environment,
+        defaultIntegrations: false,
+        autoSessionTracking: false,
+        debug: true,
+        integrations: [
+            // specifically disable Integrations.GlobalHandlers, which hooks uncaught exceptions - we don't
+            // want to capture those at this stage, just explicit rageshakes
+            new Sentry.Integrations.InboundFilters(),
+            new Sentry.Integrations.FunctionToString(),
+            new Sentry.Integrations.Breadcrumbs(),
+            new Sentry.Integrations.UserAgent(),
+            new Sentry.Integrations.Dedupe(),
+        ],
+        // Set to 1.0 which is reasonable if we're only submitting Rageshakes; will need to be set < 1.0
+        // if we collect more frequently.
+        tracesSampleRate: 1.0,
+    });
+}