Cannot read properties of undefined (reading 'length') #272
Comments
mathieuprog
changed the title
|
I suspect it was something else giving you the Check that the direct parent component of If you are still a having an issue, share a link to a simple reproduction and I can take a peek. |
|
@Brendan-csel const App: VoidComponent = () => {
function throwError(): string {
throw new Error('A meaningful error message');
}
return (
<>
<Routes>
<Route
path={throwError()}
element={<div>hello</div>}
/>
</Routes>Which outputs:
If you have an app with Solid router, may I first ask you to simply copy paste what is above, if it'd only require a copy paste for you? 🙏 If not, I will create a repo (it's just that it's not trivial with all the JS/TS configs). |
|
If I don't have a wrapping
If I have an ErrorBoundary that logs... <ErrorBoundary
fallback={(err) => {
console.error(err);
return <div>{err}</div>;
}}
>
<Routes>
<Route path={throwError()} element={<div>hello</div>} />
</Routes>
</ErrorBoundary>
|
|
I think in the last print screen, that first error log "A meaningful error message" is from the previous code without the error boundary. I think you might not have cleared your console? (hence having 3 logs) You're right, it's the Error Boundary. But my Error Boundary doesn't log the error message "A meaningful error message". It's lost. function fallback(e: any) {
console.error(e);
return <div>error</div>
}
render(
() => (
<ErrorBoundary fallback={fallback}>
<Router>
<App />
</Router>
</ErrorBoundary>
),
document.getElementById('root') as HTMLElement
);Could you make sure that you do have the error log "A meaningful error message" WITH the Error Boundary? In which case I create a repo to reproduce. |
|
Yep - I get those 3 logs on page refresh. I might be using a slightly older version of the router though so it is probably worth you setting one up the same as you have there. One other observation is my ErrorBoundary is inside Router and wraps Routes. |
|
Here is the repo: git clone [email protected]:mathieuprog/solid-router-error-boundary.git npm i npm run dev Console:
|
|
Curiously if you delete the ErrorBoundary you see your message. I've run out of time to look further tonight. There are quite a few differences between your project and the (older) only I tested in - so not immediately sure why they are behaving differently. Sorry I can't be more help. |
|
With Solid 1.6.9 (my error message is NOT lost):
With Solid 1.7.0 (the error message IS lost):
cc @ryansolid |
|
Yeah this is a Solid issue since 1.6.10. Odd that I can't seem to find the commit that actually breaks it as most of the commits are TS or SSR related. There is one commit that changes behavior but reapplying those changes or removing them I've had no luck getting into the other state. Errors have been something that we've been fiddling with the last couple releases. This does cement the desired behavior on error handling propagation in general. Originally we'd error in a Memo and it would make it up to the Error Boundary and show it. This isn't great as it basically bails way to eagerly. Now the Memo gets in an errored state and then reads blank and causes a new Error.. What we want to happen is sort of the middle. For reading an Errored memo to throw its same error and propagate in a similar way up to effects but only to do so on read. Solid 2.0 will have such a system but I'm concerned that meddling here too much in 1.x just causes a different error. |
Describe the bug
It took me forever to debug an error because the error message got lost by the router. Demonstration:
This leads to the following error:
The original error message (
'A meaningful error message') got lost.Platform
The text was updated successfully, but these errors were encountered: