Skip to content

Commit 24c9fe6

Browse files
arcuri82arcuri82
authored
Merge pull request #12 from WebFuzzing/error-message
Error message and minor fix
2 parents c5e0a44 + edf545d commit 24c9fe6

File tree

4 files changed

+128
-4
lines changed

4 files changed

+128
-4
lines changed

‎web-report/src/AppContent.tsx‎

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,23 @@
11
import {useAppContext} from "@/AppProvider.tsx";
22
import {LoadingScreen} from "@/components/LoadingScreen.tsx";
33
import {Dashboard} from "@/components/Dashboard.tsx";
4+
import {ErrorDisplay} from "@/components/ErrorDisplay.tsx";
45

56
export const AppContent: React.FC = () => {
6-
const {data, loading, error} = useAppContext();
7+
const {data, loading, error, invalidReportErrors} = useAppContext();
78

9+
if(invalidReportErrors)
10+
{
11+
return(
12+
<div className="min-h-screen bg-gray-50 py-8">
13+
<ErrorDisplay
14+
title="Validation Error"
15+
description="Invalid report format. Please ensure the report is generated correctly."
16+
issues={invalidReportErrors}
17+
/>
18+
</div>
19+
)
20+
}
821
if (error){
922
return (
1023
<main className="min-h-screen p-4 bg-gray-100">
@@ -14,6 +27,7 @@ export const AppContent: React.FC = () => {
1427
<p>{error}</p>
1528
</div>
1629
</div>
30+
1731
</main>
1832
)
1933
}

‎web-report/src/AppProvider.tsx‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import {WebFuzzingCommonsReport} from "@/types/GeneratedTypes.tsx";
33
import {ITestFiles} from "@/types/General.tsx";
44
import {fetchFileContent, ITransformedReport, transformWebFuzzingReport} from "@/lib/utils.tsx";
55
import {webFuzzingCommonsReportSchema} from "@/types/GeneratedTypesZod.ts";
6+
import {ZodIssue} from "zod";
67

78
type AppContextType = {
89
data: WebFuzzingCommonsReport | null;
@@ -12,6 +13,7 @@ type AppContextType = {
1213
transformedReport: ITransformedReport[];
1314
filterEndpoints: (activeFilters: Record<number, string>) => ITransformedReport[];
1415
filteredEndpoints: ITransformedReport[];
16+
invalidReportErrors: ZodIssue[] | null;
1517
};
1618

1719
const AppContext = createContext<AppContextType | undefined>(undefined);
@@ -25,6 +27,7 @@ export const AppProvider = ({ children }: AppProviderProps) => {
2527
const [data, setData] = useState<WebFuzzingCommonsReport | null>(null);
2628
const [loading, setLoading] = useState(true);
2729
const [error, setError] = useState<string | null>(null);
30+
const [invalidReportErrors, setInvalidReportErrors] = useState<ZodIssue[] | null>(null);
2831
const [testFiles, setTestFiles] = useState<ITestFiles[]>([]);
2932
const transformedReport = transformWebFuzzingReport(data);
3033

@@ -35,8 +38,10 @@ export const AppProvider = ({ children }: AppProviderProps) => {
3538

3639
// Validate the JSON data against the schema
3740
const report = webFuzzingCommonsReportSchema.safeParse(jsonData);
41+
console.log(report)
3842
if (!report.success) {
3943
setError("Invalid report format. Please ensure the report is generated correctly.");
44+
setInvalidReportErrors(report.error.issues);
4045
return;
4146
}
4247
setData(jsonData);
@@ -143,7 +148,7 @@ export const AppProvider = ({ children }: AppProviderProps) => {
143148
return filtered;
144149
}
145150

146-
const value: AppContextType = { data, loading, error, testFiles, transformedReport, filterEndpoints, filteredEndpoints };
151+
const value: AppContextType = { data, loading, error, testFiles, transformedReport, filterEndpoints, filteredEndpoints, invalidReportErrors };
147152

148153
return (
149154
<AppContext.Provider value={value}>

‎web-report/src/components/ErrorDisplay.tsx‎

Lines changed: 105 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
1+
import {AlertTriangle, Code, ArrowRight} from "lucide-react"
2+
import {ZodIssue} from "zod";
3+
4+
interface ErrorDisplayProps {
5+
title?: string
6+
description?: string
7+
issues?: ZodIssue[]
8+
}
9+
10+
export function ErrorDisplay({
11+
title = "Error",
12+
description = "Invalid report format. Please ensure the report is generated correctly.",
13+
issues = [],
14+
}: ErrorDisplayProps) {
15+
16+
const getIssueTypeColor = (code: string) => {
17+
switch (code) {
18+
case "invalid_type":
19+
return "bg-red-50 border-red-200 text-red-800"
20+
default:
21+
return "bg-gray-50 border-gray-200 text-gray-800"
22+
}
23+
}
24+
25+
const getPathString = (path: (string | number)[]) => {
26+
return path.length > 0 ? path.join(".") : "root"
27+
}
28+
29+
return (
30+
<div className="max-w-4xl mx-auto p-6">
31+
<div className="text-center mb-6">
32+
<div className="flex items-center justify-center mb-3">
33+
<AlertTriangle className="w-12 h-12 text-red-500 mr-3"/>
34+
<h1 className="text-4xl font-bold text-gray-900">{title}</h1>
35+
</div>
36+
<p className="text-lg text-gray-600">{description}</p>
37+
</div>
38+
39+
{issues.length > 0 && (
40+
<div className="space-y-4">
41+
<div className="flex items-center mb-4">
42+
<div className="h-px bg-gray-300 flex-1"></div>
43+
<span className="px-4 text-sm font-medium text-gray-500">
44+
{issues.length} Validation Issue{issues.length !== 1 ? "s" : ""}
45+
</span>
46+
<div className="h-px bg-gray-300 flex-1"></div>
47+
</div>
48+
49+
{issues.map((issue, index) => (
50+
<div
51+
key={index}
52+
className={`rounded-lg border-2 p-6 transition-all duration-200 hover:shadow-md ${getIssueTypeColor(issue.code)}`}
53+
>
54+
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6 items-center">
55+
<div className="space-y-2">
56+
<div className="flex items-center">
57+
<Code className="w-4 h-4 mr-2 opacity-70"/>
58+
<span className="font-mono text-sm font-semibold uppercase tracking-wide">
59+
{issue.code.replace("_", " ")}
60+
</span>
61+
</div>
62+
<div className="font-mono text-lg font-bold">{getPathString(issue.path)}</div>
63+
</div>
64+
<div className="flex justify-center">
65+
<ArrowRight className="w-6 h-6 opacity-50"/>
66+
</div>
67+
{issue.code === "invalid_type" &&
68+
<div className="space-y-3">
69+
<div className="text-base font-medium">{issue.message}</div>
70+
<div
71+
className="flex flex-col space-y-2">
72+
<div className="flex items-center">
73+
<span className="text-sm text-gray-600 mr-2">Expected:</span>
74+
<span
75+
className="px-2 py-1 bg-green-100 text-green-800 rounded font-mono text-sm font-medium">
76+
{issue.expected}
77+
</span>
78+
</div>
79+
<div className="flex items-center">
80+
<span className="text-sm text-gray-600 mr-2">Received:</span>
81+
<span
82+
className="px-2 py-1 bg-red-100 text-red-800 rounded font-mono text-sm font-medium">
83+
{issue.received}
84+
</span>
85+
</div>
86+
</div>
87+
</div>
88+
}
89+
</div>
90+
</div>
91+
))}
92+
</div>
93+
)}
94+
95+
{issues.length === 0 && (
96+
<div className="text-center py-8">
97+
<div className="w-16 h-16 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-4">
98+
<AlertTriangle className="w-8 h-8 text-gray-400"/>
99+
</div>
100+
<p className="text-gray-500">No detailed validation issues available.</p>
101+
</div>
102+
)}
103+
</div>
104+
)
105+
}

‎web-report/src/components/GeneratedTests.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,13 +21,13 @@ export const GeneratedTests: React.FC<IGeneratedTests> = ({totalTests, testFiles
2121
<div className="flex-1">
2222
<div className="flex justify-between">
2323
<ReportTooltip tooltipText={info.generatedTestFiles}>
24-
<span className="text-lg font-bold">Generated Test Files:</span>
24+
<span className="text-lg font-bold"># Generated Test Files:</span>
2525
</ReportTooltip>
2626
<span className="text-lg font-bold" data-testid="generated-tests-total-test-files">{testFiles.length}</span>
2727
</div>
2828
<div className="flex justify-between">
2929
<ReportTooltip tooltipText={info.generatedTestCases}>
30-
<span className="text-lg font-bold">Generated Tests Cases:</span>
30+
<span className="text-lg font-bold"># Generated Tests Cases:</span>
3131
</ReportTooltip>
3232
<span className="text-lg font-bold" data-testid="generated-tests-total-tests">{totalTests}</span>
3333
</div>

0 commit comments

Comments
 (0)