Log TimelinePanel debuggin info when opening the bug report modal

To debug all of the timeline problems:

 - element-hq/element-web#21613
 - element-hq/element-web#21922
 - element-hq/element-web#21432
 - element-hq/element-web#21533

src/components/structures/TimelinePanel.tsx

@@ -69,6 +69,32 @@ if (DEBUG) {
     debuglog = logger.log.bind(console, "TimelinePanel debuglog:");
 }
 
+/**
+ * Iterate across all of the timelineSets and timelines inside to expose all of
+ * the event IDs contained inside.
+ *
+ * @return An event ID list for every timeline in every timelineSet
+ */
+function serializeEventIdsFromTimelineSets(timelineSets): { [key: string]: string[] }[] {
+    const serializedEventIdsInTimelineSet = timelineSets.map((timelineSet) => {
+        const timelineMap = {};
+
+        const timelines = timelineSet.getTimelines();
+        const liveTimeline = timelineSet.getLiveTimeline();
+
+        timelines.forEach((timeline, index) => {
+            // Add a special label when it is the live timeline so we can tell
+            // it apart from the others
+            const isLiveTimeline = timeline === liveTimeline;
+            timelineMap[isLiveTimeline ? 'liveTimeline' : `${index}`] = timeline.getEvents().map(ev => ev.getId());
+        });
+
+        return timelineMap;
+    });
+
+    return serializedEventIdsInTimelineSet;
+}
+
 interface IProps {
     // The js-sdk EventTimelineSet object for the timeline sequence we are
     // representing.  This may or may not have a room, depending on what it's
@@ -294,6 +320,7 @@ class TimelinePanel extends React.Component<IProps, IState> {
         cli.on(MatrixEventEvent.Decrypted, this.onEventDecrypted);
         cli.on(MatrixEventEvent.Replaced, this.onEventReplaced);
         cli.on(ClientEvent.Sync, this.onSync);
+        cli.on(ClientEvent.DumpDebugLogs, this.onDumpDebugLogs);
     }
 
     // TODO: [REACT-WARNING] Move into constructor
@@ -369,9 +396,55 @@ class TimelinePanel extends React.Component<IProps, IState> {
             client.removeListener(MatrixEventEvent.Replaced, this.onEventReplaced);
             client.removeListener(MatrixEventEvent.VisibilityChange, this.onEventVisibilityChange);
             client.removeListener(ClientEvent.Sync, this.onSync);
+            client.removeListener(ClientEvent.Sync, this.onDumpDebugLogs);
         }
     }
 
+    private onDumpDebugLogs = (): void => {
+        const roomId = this.props.timelineSet.room.roomId;
+        // This includes state and hidden events which we don't render
+        const eventIdList = this.state.events.map((ev) => ev.getId());
+
+        // Get the list of actually rendered events seen in the DOM.
+        let renderedEventIds;
+        const messagePanel = this.messagePanel.current;
+        if (messagePanel) {
+            const messagePanelNode = ReactDOM.findDOMNode(messagePanel) as HTMLElement;
+            if (messagePanelNode) {
+                const actuallyRenderedEvents = messagePanelNode.querySelectorAll('[data-event-id]');
+                renderedEventIds = [...actuallyRenderedEvents].map((renderedEvent) => {
+                    return renderedEvent.getAttribute('data-txn-id') || renderedEvent.getAttribute('data-event-id');
+                });
+            }
+        }
+
+        let serializedEventIdsFromTimelineSets;
+        let serializedEventIdsFromThreadsTimelineSets;
+        let serializedThreadsMap = {};
+        const client = MatrixClientPeg.get();
+        if (client) {
+            const room = client.getRoom(roomId);
+            const timelineSets = room.getTimelineSets();
+            const threadsTimelineSets = room.threadsTimelineSets;
+
+            serializedEventIdsFromTimelineSets = serializeEventIdsFromTimelineSets(timelineSets);
+            serializedEventIdsFromThreadsTimelineSets = serializeEventIdsFromTimelineSets(threadsTimelineSets);
+
+            room.getThreadsMap().forEach((thread, threadId) => {
+                serializedThreadsMap[threadId] = thread.events.map(ev => ev.getId());
+            });
+        }
+
+        logger.debug(
+            `TimelinePanel(${this.context.timelineRenderingType}): Debugging info for ${roomId}\n` +
+            `\tevents(${eventIdList.length})=${JSON.stringify(eventIdList)}\n` +
+            `\trenderedEventIds(${renderedEventIds ? renderedEventIds.length : 0})=${JSON.stringify(renderedEventIds)}\n` +
+            `\tserializedEventIdsFromTimelineSets=${JSON.stringify(serializedEventIdsFromTimelineSets)}\n` +
+            `\tserializedEventIdsFromThreadsTimelineSets=${JSON.stringify(serializedEventIdsFromThreadsTimelineSets)}\n` +
+            `\tserializedThreadsMap=${JSON.stringify(serializedThreadsMap)}`,
+        );
+    }
+
     private onMessageListUnfillRequest = (backwards: boolean, scrollToken: string): void => {
         // If backwards, unpaginate from the back (i.e. the start of the timeline)
         const dir = backwards ? EventTimeline.BACKWARDS : EventTimeline.FORWARDS;
@@ -1183,7 +1256,10 @@ class TimelinePanel extends React.Component<IProps, IState> {
     private loadTimeline(eventId?: string, pixelOffset?: number, offsetBase?: number, scrollIntoView = true): void {
         this.timelineWindow = new TimelineWindow(
             MatrixClientPeg.get(), this.props.timelineSet,
-            { windowLimit: this.props.timelineCap });
+            {
+                windowLimit: this.props.timelineCap,
+                contextLabel: this.context.timelineRenderingType,
+            });
 
         const onLoaded = () => {
             if (this.unmounted) return;

src/components/views/dialogs/BugReportDialog.tsx

@@ -19,6 +19,7 @@ limitations under the License.
 
 import React from 'react';
 
+import { MatrixClientPeg } from '../../../MatrixClientPeg';
 import SdkConfig from '../../../SdkConfig';
 import Modal from '../../../Modal';
 import { _t } from '../../../languageHandler';
@@ -65,6 +66,15 @@ export default class BugReportDialog extends React.Component<IProps, IState> {
             downloadProgress: null,
         };
         this.unmounted = false;
+
+        const client  = MatrixClientPeg.get();
+        // Get all of the extra info dumped to the console when someone is about
+        // to send debug logs. Since this is a fire and forget action, we do
+        // this when the bug report dialog is opened instead of when we submit
+        // logs because we have no signal to know when all of the various
+        // components have finished logging. Someone could potentially send logs
+        // before we fully dump everything but it's probably unlikely.
+        client.dumpDebugLogs();
     }
 
     public componentWillUnmount() {

src/components/views/rooms/EventTile.tsx

@@ -1290,6 +1290,8 @@ export class UnwrappedEventTile extends React.Component<IProps, IState> {
                     "data-has-reply": !!replyChain,
                     "data-layout": this.props.layout,
                     "data-self": isOwnEvent,
+                    "data-txn-id": this.props.mxEvent.getTxnId(),
+                    "data-event-id": this.props.mxEvent.getId(),
                     "onMouseEnter": () => this.setState({ hover: true }),
                     "onMouseLeave": () => this.setState({ hover: false }),
                 }, [
@@ -1436,6 +1438,8 @@ export class UnwrappedEventTile extends React.Component<IProps, IState> {
                         "data-scroll-tokens": scrollToken,
                         "data-layout": this.props.layout,
                         "data-self": isOwnEvent,
+                        "data-txn-id": this.props.mxEvent.getTxnId(),
+                        "data-event-id": this.props.mxEvent.getId(),
                         "data-has-reply": !!replyChain,
                         "onMouseEnter": () => this.setState({ hover: true }),
                         "onMouseLeave": () => this.setState({ hover: false }),