Fixed Analytics > Newsletters tab crashing on hover (#24575)

ref
https://linear.app/ghost/issue/ENG-2493/analytics-newsletter-visiting-newsletters-tab-will-show-a-loading

The Analytics > Newsletters tab was crashing when hovering over the
charts for Avg Open Rate and Click Rate. The tooltip component was
passing a JS date object to the `formatDisplayDate()` function from
shade. For some reason Typescript wasn't catching this (TBD why), but
for now this fixes the crash by passing a string to the
`formatDisplayDate()` in this instance, and also adding some defensive
programming to the `formatDisplayDate()` function itself in case this
happens elsewhere.

Testing:
- [x] Visit Analytics > Newsletters, select the Avg Open Rate graph,
then hover over the graph. The app should not crash, and the "Sent on"
date in the tooltip should render properly
- [x] Same thing for the Avg Click rate graph

Author: cmraible

apps/shade/src/lib/utils.ts

@@ -160,6 +160,16 @@ export const formatQueryDate = (date: Moment) => {
 
 // Format date for UI, result is in the formate of `12 Jun 2025`
 export const formatDisplayDate = (dateString: string): string => {
+    // If the date is a Date object, convert it to a string
+    // @ts-expect-error This should error if dateString is not a string, but for some reason Typescript isn't catching this
+    if (dateString instanceof Date) {
+        dateString = dateString.toISOString();
+    }
+    // Fallback to empty string if dateString is an unexpected type. Better to fallback to empty string than to crash the app
+    if (!dateString || dateString.length === 0 || typeof dateString !== 'string') {
+        return '';
+    }
+
     // Check if this is a datetime string (contains time) or just a date
     const hasTime = dateString.includes(':');
 

apps/shade/test/unit/utils/utils.test.ts

@@ -124,6 +124,34 @@ describe('utils', function () {
     });
 
     describe('formatDisplayDate function', function () {
+        it('returns an empty string if the date string is an empty string', function () {
+            const formatted = formatDisplayDate('');
+            assert.equal(formatted, '');
+        });
+
+        it('returns an empty string if the date string is an invalid type', function () {
+            // @ts-expect-error This should error if dateString is not a string, but for some reason Typescript isn't catching this
+            const formatted = formatDisplayDate(123);
+            assert.equal(formatted, '');
+        });
+
+        it('does not throw an error if the date string is a Date object', function () {
+            const date = new Date('2023-04-15');
+            // @ts-expect-error This should error if dateString is not a string, but for some reason Typescript isn't catching this
+            const formatted = formatDisplayDate(date);
+            assert.equal(formatted, '15 Apr 2023');
+        });
+
+        it('handles a date string with time but without a timezone', function () {
+            const formatted = formatDisplayDate('2023-04-15 12:00:00');
+            assert.equal(formatted, '15 Apr 2023');
+        });
+
+        it('handles an ISO8601 date string', function () {
+            const formatted = formatDisplayDate('2023-04-15T12:00:00Z');
+            assert.equal(formatted, '15 Apr 2023');
+        });
+
         it('formats a date string to display format', function () {
             // Using a predefined date for testing, bypassing the current date check
             // Test different year formatting without mocking Date

apps/stats/src/views/Stats/Newsletters/components/NewslettersKPIs.tsx

@@ -22,8 +22,7 @@ const BarTooltipContent = ({active, payload}: BarTooltipProps) => {
     }
 
     const currentItem = payload[0].payload;
-    const sendDate = typeof currentItem.send_date === 'string' ?
-        new Date(currentItem.send_date) : currentItem.send_date;
+    const sendDate = currentItem.send_date;
 
     return (
         <div className="min-w-[220px] max-w-[240px] rounded-lg border bg-background px-3 py-2 shadow-lg">