handle rendering of invalid date errors

src/components/views/messages/DateSeparator.tsx

@@ -96,25 +96,29 @@ export default class DateSeparator extends React.Component<IProps, IState> {
     }
 
     private getLabel(): string {
-        const date = new Date(this.props.ts);
+        try {
-        const disableRelativeTimestamps = !SettingsStore.getValue(UIFeature.TimelineEnableRelativeDates);
+            const date = new Date(this.props.ts);
+            const disableRelativeTimestamps = !SettingsStore.getValue(UIFeature.TimelineEnableRelativeDates);
 
-        // During the time the archive is being viewed, a specific day might not make sense, so we return the full date
+            // During the time the archive is being viewed, a specific day might not make sense, so we return the full date
-        if (this.props.forExport || disableRelativeTimestamps) return formatFullDateNoTime(date);
+            if (this.props.forExport || disableRelativeTimestamps) return formatFullDateNoTime(date);
 
-        const today = new Date();
+            const today = new Date();
-        const yesterday = new Date();
+            const yesterday = new Date();
-        const days = getDaysArray("long");
+            const days = getDaysArray("long");
-        yesterday.setDate(today.getDate() - 1);
+            yesterday.setDate(today.getDate() - 1);
 
-        if (date.toDateString() === today.toDateString()) {
+            if (date.toDateString() === today.toDateString()) {
-            return this.relativeTimeFormat.format(0, "day"); // Today
+                return this.relativeTimeFormat.format(0, "day"); // Today
-        } else if (date.toDateString() === yesterday.toDateString()) {
+            } else if (date.toDateString() === yesterday.toDateString()) {
-            return this.relativeTimeFormat.format(-1, "day"); // Yesterday
+                return this.relativeTimeFormat.format(-1, "day"); // Yesterday
-        } else if (today.getTime() - date.getTime() < 6 * 24 * 60 * 60 * 1000) {
+            } else if (today.getTime() - date.getTime() < 6 * 24 * 60 * 60 * 1000) {
-            return days[date.getDay()]; // Sunday-Saturday
+                return days[date.getDay()]; // Sunday-Saturday
-        } else {
+            } else {
-            return formatFullDateNoTime(date);
+                return formatFullDateNoTime(date);
+            }
+        } catch (e) {
+            return _t("common|message_timestamp_invalid");
         }
     }
 

src/i18n/strings/en_EN.json

@@ -506,6 +506,7 @@
         "matrix": "Matrix",
         "message": "Message",
         "message_layout": "Message layout",
+        "message_timestamp_invalid": "Invalid timestamp",
         "microphone": "Microphone",
         "model": "Model",
         "modern": "Modern",

test/unit-tests/components/views/messages/DateSeparator-test.tsx

@@ -91,6 +91,12 @@ describe("DateSeparator", () => {
         expect(getComponent({ ts, forExport: false }).container.textContent).toEqual(result);
     });
 
+    it("renders invalid date separator correctly", () => {
+        let ts = new Date(-8640000000000004).getTime();
+        const { asFragment } = getComponent({ ts });
+        expect(asFragment()).toMatchSnapshot();
+    });
+
     describe("when forExport is true", () => {
         it.each(testCases)("formats date in full when current time is %s", (_d, ts) => {
             expect(getComponent({ ts, forExport: true }).container.textContent).toEqual(

test/unit-tests/components/views/messages/__snapshots__/DateSeparator-test.tsx.snap

@@ -1,5 +1,32 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`DateSeparator renders invalid date separator correctly 1`] = `
+<DocumentFragment>
+  <div
+    aria-label="Invalid timestamp"
+    class="mx_TimelineSeparator"
+    role="separator"
+  >
+    <hr
+      role="none"
+    />
+    <div
+      class="mx_DateSeparator_dateContent"
+    >
+      <h2
+        aria-hidden="true"
+        class="mx_DateSeparator_dateHeading"
+      >
+        Invalid timestamp
+      </h2>
+    </div>
+    <hr
+      role="none"
+    />
+  </div>
+</DocumentFragment>
+`;
+
 exports[`DateSeparator renders the date separator correctly 1`] = `
 <DocumentFragment>
   <div