jsonhero-web
jsonhero-web copied to clipboard
triggerdotdev
Implement error message when JSON is invalid syntax
@samejr has helpfully created a ToastPopover UI element that is ready to use for this issue in the toast-ui branch. What we'd like to happen is if there is a JSON parsing error we should show this an error that displays the parsing error message in a toast (using the above UI component). You would need to update the createFromUrl.ts action function to catch JSON parsing errors and redirect back to the root "/" path and store the toast message in a cookie (see this remix example for an example.
Can you provide more information, I think this could be within my abilities to complete for hacktoberfest :)
@kubahasek just added some more info the issue description, hope that helps!
@ericallam alright, thank you! If you could assign it to me, I'll try and get it done!
@ericallam Hi there? I've had a look at the codebase briefly, but I am having trouble understanding where the error occurs? I understand that it redirects when it cannot parse the JSON provided, but don't know where parsing errors should occur. I've had a look at the jsonDoc.server.ts and the corresponding functions, but that didn't really help me.
Could you please point me in the right direction on where the parsing happens/error occurs. Thank you!
To start I think we need to extend the createFromUrlOrRawJson function to actually parse the raw JSON, that way we can catch the parsing error either in that function or in the createFromUrl action
Alright, so I´d add JSON.parse() in the raw JSON part, then wrap the function call in createFromUrl in a trycatch. Should I be doing that for parsing from a URL too?
EDIT: I just realized the createFromUrl() function uses the createFromRawJson() function, so the best will be to add the parsing step in that function to make sure to catch both ways of injesting JSON into the app
@ericallam Hi again, I have succesfully gotten the cookie part working, but right now I am having trouble showing the toast on the homepage, since Remix doesn't re-render it. Somehow the loader runs (verified that with a console.log()), but UI isn't rerendering.
export async function loader({ request }: { request: Request }) {
const cookie = request.headers.get("cookie");
const session = await getSession(cookie);
const errorMessage = session.get("errorMessage");
if (!errorMessage) {
return {};
}
return json(errorMessage.error, {
headers: { "Set-Cookie": await commitSession(session) },
});
}
export default function Index() {
const data = useLoaderData<LoaderData>();
return (
<div className="overflow-x-hidden">
{data.errorMessage && <ToastPopover message={data.errorMessage} />}
<HomeHeader />
<HomeHeroSection />
<GithubBanner />
<HomeInfoBoxSection />
<HomeEdgeCasesSection />
<HomeSearchSection />
<HomeCollaborateSection />
<HomeFeatureGridSection />
<HomeFooter />
</div>
);
}
This is the code I am trying to use to display it at the moment, but I cannot seem to figure out how to do it, sorry.