From 29b75385a381a198790c94be9e9f37b31b9a8ebf Mon Sep 17 00:00:00 2001
From: David Langley <davidl@element.io>
Date: Thu, 7 Nov 2024 09:12:49 +0000
Subject: [PATCH] handle rendering of invalid date errors

---
 .../views/messages/DateSeparator.tsx          | 36 ++++++++++---------
 src/i18n/strings/en_EN.json                   |  1 +
 .../views/messages/DateSeparator-test.tsx     |  6 ++++
 .../__snapshots__/DateSeparator-test.tsx.snap | 27 ++++++++++++++
 4 files changed, 54 insertions(+), 16 deletions(-)

diff --git a/src/components/views/messages/DateSeparator.tsx b/src/components/views/messages/DateSeparator.tsx
index 10ec7ddad9..e6c7af43ab 100644
--- a/src/components/views/messages/DateSeparator.tsx
+++ b/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);
-        const disableRelativeTimestamps = !SettingsStore.getValue(UIFeature.TimelineEnableRelativeDates);
+        try {
+            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
-        if (this.props.forExport || disableRelativeTimestamps) return formatFullDateNoTime(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);
 
-        const today = new Date();
-        const yesterday = new Date();
-        const days = getDaysArray("long");
-        yesterday.setDate(today.getDate() - 1);
+            const today = new Date();
+            const yesterday = new Date();
+            const days = getDaysArray("long");
+            yesterday.setDate(today.getDate() - 1);
 
-        if (date.toDateString() === today.toDateString()) {
-            return this.relativeTimeFormat.format(0, "day"); // Today
-        } else if (date.toDateString() === yesterday.toDateString()) {
-            return this.relativeTimeFormat.format(-1, "day"); // Yesterday
-        } else if (today.getTime() - date.getTime() < 6 * 24 * 60 * 60 * 1000) {
-            return days[date.getDay()]; // Sunday-Saturday
-        } else {
-            return formatFullDateNoTime(date);
+            if (date.toDateString() === today.toDateString()) {
+                return this.relativeTimeFormat.format(0, "day"); // Today
+            } else if (date.toDateString() === yesterday.toDateString()) {
+                return this.relativeTimeFormat.format(-1, "day"); // Yesterday
+            } else if (today.getTime() - date.getTime() < 6 * 24 * 60 * 60 * 1000) {
+                return days[date.getDay()]; // Sunday-Saturday
+            } else {
+                return formatFullDateNoTime(date);
+            }
+        } catch (e) {
+            return _t("common|message_timestamp_invalid");
         }
     }
 
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index 41c4396ff3..2a62cc2ac6 100644
--- a/src/i18n/strings/en_EN.json
+++ b/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",
diff --git a/test/unit-tests/components/views/messages/DateSeparator-test.tsx b/test/unit-tests/components/views/messages/DateSeparator-test.tsx
index 4bdd66b227..93687be0e7 100644
--- a/test/unit-tests/components/views/messages/DateSeparator-test.tsx
+++ b/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(
diff --git a/test/unit-tests/components/views/messages/__snapshots__/DateSeparator-test.tsx.snap b/test/unit-tests/components/views/messages/__snapshots__/DateSeparator-test.tsx.snap
index 2294a40a99..69de39e31d 100644
--- a/test/unit-tests/components/views/messages/__snapshots__/DateSeparator-test.tsx.snap
+++ b/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