How to handle: Client-side Exception Occurred
Answered
Tonkinese posted this in #help-forum
TonkineseOP
What's the best way of handling this (nextjs client-side exception)? I've already checked the docs and it recommends error boundaries, which i do understand the reasoning but it's not what i'm looking for
If i understand error boundaries correctly, they will render something completely different when you get this client-side errors, what i want however is for the client to render just as is despite the error, 99% of the time anyway, i get these kinds of errors when I try to get a property and it doesn't exist / is null / undefined, in that case, i don't want the entire app to crash, i simply want it to not render whatever is missing
So how do i do this?, i.e. just ignore the error and if things are undefined them let them be undefined
---
btw, i know the obvious solution is optional chaining, but there are times when types are just so complex that you can't catch every possible null/undefined type
If i understand error boundaries correctly, they will render something completely different when you get this client-side errors, what i want however is for the client to render just as is despite the error, 99% of the time anyway, i get these kinds of errors when I try to get a property and it doesn't exist / is null / undefined, in that case, i don't want the entire app to crash, i simply want it to not render whatever is missing
So how do i do this?, i.e. just ignore the error and if things are undefined them let them be undefined
---
btw, i know the obvious solution is optional chaining, but there are times when types are just so complex that you can't catch every possible null/undefined type
Answered by B33fb0n3
you are right: there are expected and unexpected errors. You can catch the expected errors for example via try catch or even with if statements. For unexpected errors you can use the error components like
It's a complex topic, that's why the next team helps us a little bit here ([click me](https://nextjs.org/docs/app/getting-started/error-handling))
error.tsx or global-error.tsx.It's a complex topic, that's why the next team helps us a little bit here ([click me](https://nextjs.org/docs/app/getting-started/error-handling))
9 Replies
@Tonkinese What's the best way of handling this (nextjs client-side exception)? I've already checked the docs and it recommends error boundaries, which i do understand the reasoning but it's not what i'm looking for
If i understand error boundaries correctly, they will render something completely different when you get this client-side errors, what i want however is for the client to render just as is despite the error, 99% of the time anyway, i get these kinds of errors when I try to get a property and it doesn't exist / is null / undefined, in that case, i don't want the entire app to crash, i simply want it to not render whatever is missing
So how do i do this?, i.e. just ignore the error and if things are undefined them let them be undefined
---
btw, i know the obvious solution is optional chaining, but there are times when types are just so complex that you can't catch every possible null/undefined type
In my opinion types will never be that big so they cant be null checked. There is a reason why chaining exists to makes it easier to check. Check the browser console what causes the error and write some code to prevent that error happening. If you dont use TS yet, then you can use that as well, to prevent runtime errors like this
@B33fb0n3 In my opinion types will never be that big so they cant be null checked. There is a reason why chaining exists to makes it easier to check. Check the browser console what causes the error and write some code to prevent that error happening. If you dont use TS yet, then you can use that as well, to prevent runtime errors like this
TonkineseOP
Hi yeah i already do use TS
Checking the browser console if fine and all during local dev, when it happens in prod is when it's a huuuuuge problem
I'm not the only one with this problem btw, I've seen large projects (including vercel's own website), popular saas apps, etc. fall victim to this, sometimes it's better to just let the error happen instead of crashing the entire app, so I wish there was a way to do this
Checking the browser console if fine and all during local dev, when it happens in prod is when it's a huuuuuge problem
I'm not the only one with this problem btw, I've seen large projects (including vercel's own website), popular saas apps, etc. fall victim to this, sometimes it's better to just let the error happen instead of crashing the entire app, so I wish there was a way to do this
@Tonkinese Hi yeah i already do use TS
Checking the browser console if fine and all during local dev, when it happens in prod is when it's a huuuuuge problem
I'm not the only one with this problem btw, I've seen large projects (including vercel's own website), popular saas apps, etc. fall victim to this, sometimes it's better to just let the error happen instead of crashing the entire app, so I wish there was a way to do this
wouldn't that mean "just let the error happen" that the whole app crashes? I think it's the best to either fix them or catch them, don't you think so?
@B33fb0n3 wouldn't that mean "just let the error happen" that the whole app crashes? I think it's the best to either fix them or catch them, don't you think so?
TonkineseOP
It's been a long time since i've used plain react / js / ts but iirc even client-side errors won't necessarily cause your app to crash with plain react/js/ts right?
If it was an error that the user could fix the best way would be to show a toast or something in the UI for the user to see and fix it, but these global error fallbacks aren't for the user to fix, they're trigger because an error wasn't handler or an exception was thrown on purpose.
@Tonkinese It's been a long time since i've used plain react / js / ts but iirc even client-side errors won't necessarily cause your app to crash with plain react/js/ts right?
you are right: there are expected and unexpected errors. You can catch the expected errors for example via try catch or even with if statements. For unexpected errors you can use the error components like
It's a complex topic, that's why the next team helps us a little bit here ([click me](https://nextjs.org/docs/app/getting-started/error-handling))
error.tsx or global-error.tsx.It's a complex topic, that's why the next team helps us a little bit here ([click me](https://nextjs.org/docs/app/getting-started/error-handling))
Answer
@B33fb0n3 you are right: there are expected and unexpected errors. You can catch the expected errors for example via try catch or even with if statements. For unexpected errors you can use the error components like `error.tsx` or `global-error.tsx`.
It's a complex topic, that's why the next team helps us a little bit here ([click me](https://nextjs.org/docs/app/getting-started/error-handling))
TonkineseOP
aight, i'll check that out, thanks!
happy to help