beerose
commented
2 years ago Thanks for the detailed report! Do you remember if/when was it working as expected?
Closed regardt-nel closed 2 years ago
beerose
commented
2 years ago Thanks for the detailed report! Do you remember if/when was it working as expected?
regardt-nel
commented
2 years ago Thanks for the detailed report! Do you remember if/when was it working as expected?
Hi @beerose no problem :) To answer your question - this is the first time I am implementing it.
I experimented with a couple of things. I get better results if I turn off SSR but still not as expected.
The code - please see the DynamicComponentWithNoSSR
import Show from "app/components/Show"
import { ErrorBoundary, useQueryErrorResetBoundary } from "blitz"
import { dynamic } from "blitz"
const DynamicComponentWithNoSSR = dynamic(() => import("../components/Show.js"), {
ssr: false,
})
const RootErrorFallback = ({ error }) => {
return <div>The show {error.nameOfShow} is not cool and therefor breaks the coolshows app.</div>
}
const CoolShows = () => {
const { reset } = useQueryErrorResetBoundary()
return (
<div className="container">
<h1>Cool Shows!</h1>
<ErrorBoundary onReset={reset} FallbackComponent={RootErrorFallback}>
<DynamicComponentWithNoSSR showName={"Avengers"} />
</ErrorBoundary>
<ErrorBoundary onReset={reset} FallbackComponent={RootErrorFallback}>
<DynamicComponentWithNoSSR showName={"Game of Thrones"} />
</ErrorBoundary>
</div>
)
}
export default CoolShowsI get the following output in the client:
Is all off this maybe expected behaviour in development mode? I will test a built version next.
beerose
commented
2 years ago Hi @regardt-nel, I'm super sorry about the delay. I tested that and was able to trigger the error boundary (though, I might have done something differently). Were you able to check the built version?
regardt-nel
commented
2 years ago Hi Aleksandra. No problem at all! I have not checked the built version - I will do so and revert back to you.
On Thu, Dec 23, 2021 at 2:04 PM Aleksandra Sikora @.***> wrote:
Hi @regardt-nel https://github.com/regardt-nel, I'm super sorry about the delay. I tested that and was able to trigger the error boundary (though, I might have done something differently). Were you able to check the built version?
— Reply to this email directly, view it on GitHub https://github.com/blitz-js/legacy-framework/issues/364, or unsubscribe https://github.com/notifications/unsubscribe-auth/AMEWLFKDJMI5DAOONE6IFTTUSMF6JANCNFSM5KAZA2YQ . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub.
You are receiving this because you were mentioned.Message ID: @.***>
-- Regardt Nel | Managing Director *CODESW*OP Pty (Ltd) App and Web Developers 1 Azure, Big Bay, 7441 +27 82 451 6800
beerose
commented
2 years ago Hi @regardt-nel, I tested that again, and the error overlay only shows on development. In prod, I can only see the error boundary (expected behavior). Nextjs displays the overlay on purpose, and I think there's no way to opt-out now. Here's more: https://github.com/vercel/next.js/discussions/13387.
I'm going to close the issue then, but please feel free to reopen if there are more issues.
What is the problem?
ErrorBoundary wraps two components - one with an error. I expect the page to render the FallBackComponent I made but instead I get the following ->
Paste all your error logs here:
Paste all relevant code snippets here:
Show.js
coolshows.js
What are detailed steps to reproduce this?
throw new errorif the component prop is equal to specific textRun
blitz -vand paste the output here:Please include below any other applicable logs and screenshots that show your problem: