handle rendering of invalid date errors

src/components/views/messages/DateSeparator.tsx

@@ -96,6 +96,7 @@ export default class DateSeparator extends React.Component<IProps, IState> {
     }
 
     private getLabel(): string {
+        try {
             const date = new Date(this.props.ts);
             const disableRelativeTimestamps = !SettingsStore.getValue(UIFeature.TimelineEnableRelativeDates);
 
@@ -116,6 +117,9 @@ export default class DateSeparator extends React.Component<IProps, IState> {
             } else {
                 return formatFullDateNoTime(date);
             }
+        } catch (e) {
+            return _t("common|message_timestamp_invalid");
+        }
     }
 
     private pickDate = async (inputTimestamp: number | string | Date): Promise<void> => {

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