When encountering a specific user interaction, such as a drop event, I am facing issues with rendering the error.js page instead of the page.js when an error is thrown on the client. How can I make sure that the error.js page is displayed in this scenario?
"use client";
export default function DropFile() {
const handleFileUpload = (event) => {
if (event.type === "drop") {
event.stopPropagation();
event.preventDefault();
}
// File upload logic
const files = event.dataTransfer ? event.dataTransfer.files : event.target.files;
const file = files[0];
if (!checkFileTypeValidity(file)) {
throw new Error("Wrong File Type");
}
}
return <div onDrop={handleFileUpload}> ...Some Jsx </div>
}
//error.js file
"use client";
export default function Error({ error, reset }) {
useEffect(() => {
console.error(error);
}, [error]);
return (
<div className="max-w-md">
<h3 className="text-center">Wrong File Type</h3>
<p>Please make sure that the file you uploaded is a .csv or .txt file</p>
</div>
);
}