Skip to content

Commit 620ce2c

Browse files
izadoesdevizadoesdev
committed
fix: errors page
1 parent ed3f298 commit 620ce2c

File tree

5 files changed

+42
-53
lines changed

5 files changed

+42
-53
lines changed

‎apps/dashboard/app/(main)/websites/[id]/errors/_components/error-detail-modal.tsx‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -16,14 +16,14 @@ import {
1616
SheetHeader,
1717
SheetTitle,
1818
} from '@/components/ui/sheet';
19-
import { categorizeError, getSeverityColor, safeFormatDate } from './utils';
19+
import { formatDate, getErrorCategory, getSeverityColor } from './utils';
2020

21-
interface InfoRowProps {
21+
interface InfoProps {
2222
label: string;
2323
value: string;
2424
}
2525

26-
const InfoRow: React.FC<InfoRowProps> = ({ label, value }) => (
26+
const InfoRow: React.FC<InfoProps> = ({ label, value }) => (
2727
<div className="space-y-2">
2828
<span className="font-medium text-muted-foreground text-xs uppercase tracking-wide">
2929
{label}
@@ -34,13 +34,13 @@ const InfoRow: React.FC<InfoRowProps> = ({ label, value }) => (
3434
</div>
3535
);
3636

37-
interface IconRowProps {
37+
interface IconProps {
3838
label: string;
3939
value?: string;
4040
icon?: React.ReactNode;
4141
}
4242

43-
const IconRow: React.FC<IconRowProps> = ({ label, value, icon }) => (
43+
const IconRow: React.FC<IconProps> = ({ label, value, icon }) => (
4444
<div className="space-y-2">
4545
<span className="font-medium text-muted-foreground text-xs uppercase tracking-wide">
4646
{label}
@@ -88,7 +88,7 @@ export const ErrorDetailModal = ({
8888
}
8989
};
9090

91-
const { type, severity } = categorizeError(error.message);
91+
const { type, severity } = getErrorCategory(error.message);
9292

9393
return (
9494
<Sheet onOpenChange={onClose} open={isOpen}>
@@ -108,7 +108,7 @@ export const ErrorDetailModal = ({
108108
<div className="flex items-center gap-2">
109109
<Badge className={getSeverityColor(severity)}>{type}</Badge>
110110
<span className="text-muted-foreground text-sm">
111-
{safeFormatDate(error.timestamp, 'MMM d, yyyy HH:mm:ss')}
111+
{formatDate(error.timestamp, 'MMM d, YYYY HH:mm:ss')}
112112
</span>
113113
</div>
114114
</div>
@@ -188,7 +188,7 @@ export const ErrorDetailModal = ({
188188
</span>
189189
<div className="rounded border bg-muted/20 p-3">
190190
<span className="font-mono text-sm">
191-
{safeFormatDate(error.timestamp, 'MMM d, yyyy HH:mm:ss')}
191+
{formatDate(error.timestamp, 'MMM d, YYYY HH:mm:ss')}
192192
</span>
193193
</div>
194194
</div>
@@ -264,7 +264,7 @@ Context:
264264
- Page URL: ${error.path}
265265
- Session ID: ${error.session_id}
266266
- User ID: ${error.anonymous_id}
267-
- Timestamp: ${safeFormatDate(error.timestamp, 'MMM d, yyyy HH:mm:ss')}
267+
- Timestamp: ${formatDate(error.timestamp, 'MMM d, YYYY HH:mm:ss')}
268268
- Browser: ${error.browser_name}
269269
- OS: ${error.os_name}
270270
- Device: ${error.device_type || '—'}

‎apps/dashboard/app/(main)/websites/[id]/errors/_components/error-table-columns.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import { CountryFlag } from '@/components/analytics/icons/CountryFlag';
88
import { BrowserIcon, OSIcon } from '@/components/icon';
99
import { Badge } from '@/components/ui/badge';
1010
import { getErrorTypeIcon } from './error-icons';
11-
import { categorizeError, getSeverityColor, safeFormatDate } from './utils';
11+
import { formatDate, getErrorCategory, getSeverityColor } from './utils';
1212

1313
type CellInfo<T = unknown> = {
1414
getValue: () => T;
@@ -104,7 +104,7 @@ export const createErrorTypeColumn = () => ({
104104
);
105105
}
106106

107-
const { type, severity } = categorizeError(message);
107+
const { type, severity } = getErrorCategory(message);
108108
return (
109109
<div className="flex flex-col gap-1">
110110
<div className="flex items-center gap-2">
@@ -162,7 +162,7 @@ export const createErrorTypeColumns = () => [
162162
header: 'Last Occurrence',
163163
cell: (info: CellInfo<string>) => {
164164
const lastSeen = info.getValue();
165-
const formatted = safeFormatDate(lastSeen, 'MMM d, HH:mm');
165+
const formatted = formatDate(lastSeen, 'MMM d, YYYY HH:mm');
166166
const now = new Date();
167167
const lastSeenDate = new Date(lastSeen);
168168
const diffHours = Math.floor(

‎apps/dashboard/app/(main)/websites/[id]/errors/_components/errors-page-content.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ import { ErrorSummaryStats } from './error-summary-stats';
1515
import { ErrorTrendsChart } from './error-trends-chart';
1616
import { RecentErrorsTable } from './recent-errors-table';
1717
import { TopErrorCard } from './top-error-card';
18-
import { safeFormatDate } from './utils';
18+
import { formatDate } from './utils';
1919

2020
interface ErrorsPageContentProps {
2121
params: Promise<{ id: string }>;
@@ -81,7 +81,7 @@ export const ErrorsPageContent = ({ params }: ErrorsPageContentProps) => {
8181
const topError = (errorTypes as Record<string, unknown>[])[0] || null;
8282
const errorChartData = (errorTrends as Record<string, unknown>[]).map(
8383
(point: Record<string, unknown>) => ({
84-
date: safeFormatDate(point.date as string, 'MMM d'),
84+
date: formatDate(point.date as string, 'MMM d, YYYY'),
8585
'Total Errors': (point.errors as number) || 0,
8686
'Affected Users': (point.users as number) || 0,
8787
})

‎apps/dashboard/app/(main)/websites/[id]/errors/_components/recent-errors-table.tsx‎

Lines changed: 5 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -9,17 +9,14 @@ import { BrowserIcon, OSIcon } from '@/components/icon';
99
import { Badge } from '@/components/ui/badge';
1010
import { ErrorDetailModal } from './error-detail-modal';
1111
import { getErrorTypeIcon } from './error-icons';
12-
import { categorizeError, getSeverityColor, safeFormatDate } from './utils';
12+
import { formatDate, getErrorCategory, getSeverityColor } from './utils';
1313

14-
interface RecentErrorsTableProps {
14+
interface Props {
1515
recentErrors: ErrorEvent[];
1616
isLoading: boolean;
1717
}
1818

19-
export const RecentErrorsTable = ({
20-
recentErrors,
21-
isLoading,
22-
}: RecentErrorsTableProps) => {
19+
export const RecentErrorsTable = ({ recentErrors, isLoading }: Props) => {
2320
const [selectedError, setSelectedError] = useState<ErrorEvent | null>(null);
2421
const [isModalOpen, setIsModalOpen] = useState(false);
2522

@@ -36,7 +33,7 @@ export const RecentErrorsTable = ({
3633
cell: (info: any) => {
3734
const message = info.getValue() as string;
3835
const row = info.row.original as ErrorEvent;
39-
const { type, severity } = categorizeError(message);
36+
const { type, severity } = getErrorCategory(message);
4037

4138
return (
4239
<div className="flex max-w-md flex-col gap-2">
@@ -149,7 +146,7 @@ export const RecentErrorsTable = ({
149146
const time = info.getValue() as string;
150147
return (
151148
<span className="font-mono text-sm">
152-
{safeFormatDate(time, 'MMM d, HH:mm')}
149+
{formatDate(time, 'MMM d, YYYY HH:mm')}
153150
</span>
154151
);
155152
},

‎apps/dashboard/app/(main)/websites/[id]/errors/_components/utils.ts‎

Lines changed: 23 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,58 +1,52 @@
11
import type { ErrorCategory } from '@databuddy/shared';
22
import dayjs from 'dayjs';
33

4-
// Helper function to safely parse dates
5-
export const safeDateParse = (dateString: string): Date => {
4+
export const parseDate = (dateString: string): Date => {
65
if (!dateString) {
76
return new Date();
87
}
98

10-
let dayjsDate = dayjs(dateString);
11-
if (dayjsDate.isValid()) {
12-
return dayjsDate.toDate();
9+
let date = dayjs(dateString);
10+
if (date.isValid()) {
11+
return date.toDate();
1312
}
1413

1514
const isoString = dateString.replace(' ', 'T');
16-
dayjsDate = dayjs(isoString);
17-
if (dayjsDate.isValid()) {
18-
return dayjsDate.toDate();
15+
date = dayjs(isoString);
16+
if (date.isValid()) {
17+
return date.toDate();
1918
}
2019

21-
dayjsDate = dayjs(new Date(dateString));
22-
if (dayjsDate.isValid()) {
23-
return dayjsDate.toDate();
20+
date = dayjs(new Date(dateString));
21+
if (date.isValid()) {
22+
return date.toDate();
2423
}
2524

2625
console.warn('Failed to parse date:', dateString);
2726
return new Date();
2827
};
2928

30-
export const safeFormatDate = (
29+
export const formatDate = (
3130
dateString: string,
3231
formatString: string
3332
): string => {
3433
try {
35-
const date = safeDateParse(dateString);
34+
const date = parseDate(dateString);
3635
return dayjs(date).format(formatString);
3736
} catch (error) {
3837
console.warn('Failed to format date:', dateString, error);
3938
return dateString;
4039
}
4140
};
4241

43-
// Helper function to categorize errors
44-
export const categorizeError = (errorMessage: string): ErrorCategory => {
42+
export const getErrorCategory = (errorMessage: string): ErrorCategory => {
4543
if (!errorMessage) {
4644
return { type: 'Unknown Error', category: 'Other', severity: 'low' };
4745
}
4846

4947
const message = errorMessage.toLowerCase();
5048

51-
if (
52-
message.includes('react error #185') ||
53-
message.includes('react error #418') ||
54-
message.includes('react error #419')
55-
) {
49+
if (message.includes('react error')) {
5650
return { type: 'React Error', category: 'React', severity: 'high' };
5751
}
5852
if (message.includes('script error')) {
@@ -78,15 +72,13 @@ export const categorizeError = (errorMessage: string): ErrorCategory => {
7872
return { type: 'Unknown Error', category: 'Other', severity: 'low' };
7973
};
8074

81-
export const getSeverityColor = (severity: 'high' | 'medium' | 'low') => {
82-
switch (severity) {
83-
case 'high':
84-
return 'bg-red-100 text-red-800 border-red-200';
85-
case 'medium':
86-
return 'bg-yellow-100 text-yellow-800 border-yellow-200';
87-
case 'low':
88-
return 'bg-blue-100 text-blue-800 border-blue-200';
89-
default:
90-
return 'bg-gray-100 text-gray-800 border-gray-200';
91-
}
75+
export const getSeverityColor = (
76+
severity: 'high' | 'medium' | 'low'
77+
): string => {
78+
const colors = {
79+
high: 'bg-red-100 text-red-800 border-red-200',
80+
medium: 'bg-yellow-100 text-yellow-800 border-yellow-200',
81+
low: 'bg-blue-100 text-blue-800 border-blue-200',
82+
};
83+
return colors[severity] || 'bg-gray-100 text-gray-800 border-gray-200';
9284
};

0 commit comments

Comments
 (0)