issue: Blocking the UI threads leads to DOM inconsistencies and ultimately crashing #602

ZeroX-DG · 2024-05-04T02:32:58Z

I encounter this error when I resize my app really quick. It doesn't happen on freya examples so I'm not sure what is causing this.

thread 'main' panicked at ~/.cargo/git/checkouts/freya-aa88117f1f713ee2/7b68806/crates/core/src/dom/mutations_writer.rs:46:60:
called `Option::unwrap()` on a `None` value
thread 'main' panicked at ~/.cargo/registry/src/index.crates.io-6f17d22bba15001f/winit-0.29.15/src/platform_impl/macos/app_state.rs:387:33:
called `Result::unwrap()` on an `Err` value: PoisonError { .. }

The text was updated successfully, but these errors were encountered:

marc2332 · 2024-05-04T07:40:50Z

Looks like some kind of edge case I missed, will look into it asap!

marc2332 · 2024-05-04T08:13:04Z

hey, I can't reproduce it, so I pushed a branch with some logs which could help me debug it -> https://github.com/marc2332/freya/tree/fix/mutations-writer-error

Could you run your app with it and share me the logs once it crashes?

marc2332 · 2024-05-04T08:13:34Z

Would also appreciate it if you could narrow it down in your app

ZeroX-DG · 2024-05-04T08:57:25Z

Hey, here's the resulting log:

EId(58.0) Element(ElementNode { tag: Rect, attributes: {Layer: Text("-10"), Width: Text("8.4"), Background: Text("rgb(165, 172, 186)"), PositionTop: Text("0"), Height: Text("18"), Color: Text("rgb(17, 21, 28)"), PositionLeft: Text("42"), Position: Text("absolute")}, listeners: {} }) 8
EId(59.0) Element(ElementNode { tag: Rect, attributes: {}, listeners: {} }) 9
EId(60.0) Element(ElementNode { tag: Label, attributes: {}, listeners: {} }) 10
EId(60.1) Element(ElementNode { tag: Rect, attributes: {Layer: Text("-10"), Width: Text("8.4"), Background: Text("rgb(165, 172, 186)"), PositionTop: Text("0"), Height: Text("18"), Color: Text("rgb(17, 21, 28)"), PositionLeft: Text("8.4"), Position: Text("absolute")}, listeners: {} }) 8
EId(59.1) Element(ElementNode { tag: Rect, attributes: {}, listeners: {} }) 9
EId(58.1) Element(ElementNode { tag: Label, attributes: {}, listeners: {} }) 10
EId(99.1) Element(ElementNode { tag: Rect, attributes: {Layer: Text("-10"), Width: Text("8.4"), Background: Text("rgb(165, 172, 186)"), PositionTop: Text("0"), Height: Text("18"), Color: Text("rgb(17, 21, 28)"), PositionLeft: Text("0"), Position: Text("absolute")}, listeners: {} }) 8
EId(183.0) Element(ElementNode { tag: Rect, attributes: {}, listeners: {} }) 9
EId(184.0) Element(ElementNode { tag: Label, attributes: {}, listeners: {} }) 10
EId(195.0) Element(ElementNode { tag: Rect, attributes: {Layer: Text("-10"), Width: Text("8.4"), Background: Text("rgb(165, 172, 186)"), PositionTop: Text("0"), Height: Text("18"), Color: Text("rgb(17, 21, 28)"), PositionLeft: Text("327.59998"), Position: Text("absolute")}, listeners: {} }) 8
EId(196.0) Element(ElementNode { tag: Rect, attributes: {}, listeners: {} }) 9
EId(197.0) Element(ElementNode { tag: Label, attributes: {}, listeners: {} }) 10
EId(58.3) Element(ElementNode { tag: Rect, attributes: {Layer: Text("-10"), Width: Text("8.4"), Background: Text("rgb(165, 172, 186)"), PositionTop: Text("0"), Height: Text("18"), Color: Text("rgb(17, 21, 28)"), PositionLeft: Text("42"), Position: Text("absolute")}, listeners: {} }) 8
EId(84.2) Element(ElementNode { tag: Rect, attributes: {}, listeners: {} }) 9
EId(60.3) Element(ElementNode { tag: Label, attributes: {}, listeners: {} }) 10
EId(193.1) Element(ElementNode { tag: Rect, attributes: {Layer: Text("-10"), Width: Text("8.4"), Background: Text("rgb(165, 172, 186)"), PositionTop: Text("0"), Height: Text("18"), Color: Text("rgb(17, 21, 28)"), PositionLeft: Text("16.8"), Position: Text("absolute")}, listeners: {} }) 8
EId(192.1) Element(ElementNode { tag: Rect, attributes: {}, listeners: {} }) 9
EId(191.1) Element(ElementNode { tag: Label, attributes: {}, listeners: {} }) 10
EId(59.4) Element(ElementNode { tag: Rect, attributes: {Layer: Text("-10"), Width: Text("8.4"), Background: Text("rgb(165, 172, 186)"), PositionTop: Text("0"), Height: Text("18"), Color: Text("rgb(17, 21, 28)"), PositionLeft: Text("16.8"), Position: Text("absolute")}, listeners: {} }) 8
thread 'main' panicked at ~/.cargo/git/checkouts/freya-aa88117f1f713ee2/e5c73a2/crates/core/src/dom/mutations_writer.rs:48:60:
called `Option::unwrap()` on a `None` value
note: run with `RUST_BACKTRACE=1` environment variable to display a backtrace
thread 'main' panicked at ~/.cargo/registry/src/index.crates.io-6f17d22bba15001f/winit-0.29.15/src/platform_impl/macos/app_state.rs:387:33:
called `Result::unwrap()` on an `Err` value: PoisonError { .. }

It seems like it was caused by a custom rect that I created to represent the cursor in my terminal emulator:

https://github.com/ZeroX-DG/raven/blob/22685396b27e589b6d7bb3b9dcd4099ae84b2544/src/components/content_area.rs#L84-L99

I tried removing the layer property but it still crash the app with the same error. I'll try finding out more info.

ZeroX-DG · 2024-05-04T09:37:04Z

Very strange. The node exists when we get it out using native_writer.rdom.get but disappear when we use the realdom tree to access it. Perhaps there's a race condition somewhere...

marc2332 · 2024-05-04T09:40:01Z

Very strange. The node exists when we get it out using native_writer.rdom.get but disappear when we use the realdom tree to access it. Perhaps there's a race condition somewhere...

I would very surprised if it was a race condition, I think it's just some weird case or something, because I have never got that error, not even on Valin, which is quite complex

ZeroX-DG · 2024-05-04T09:45:05Z

Here's a video of my replicating the bug if it helpful:

Screen.Recording.2024-05-04.at.9.43.36.PM.mov

marc2332 · 2024-05-04T09:57:39Z

I wonder if you might be calling some blocking code that could be making the realdom act weird, https://github.com/ZeroX-DG/raven/blob/22685396b27e589b6d7bb3b9dcd4099ae84b2544/src/components/content_area.rs#L49

Could you try commenting tha code?

marc2332 · 2024-05-04T10:00:23Z

If that's the issue I think you could try running the pty in a secondary thread and uses mpsc channels to communicate, so it doesn't block the main thread in any way

marc2332 · 2024-05-04T10:12:49Z

I just pushed some changes to the branch, could try it @ZeroX-DG ?

marc2332 · 2024-05-04T10:24:46Z

If that still fails, I have another idea too

ZeroX-DG · 2024-05-04T10:27:24Z

Ok commenting out the resize definitely helps. But without commenting it, the app still crash with your latest changes on the branch:

EId(99.13) Element(ElementNode { tag: Rect, attributes: {Layer: Text("-10"), Width: Text("8.4"), Background: Text("rgb(165, 172, 186)"), PositionTop: Text("0"), Height: Text("18"), Color: Text("rgb(17, 21, 28)"), PositionLeft: Text("42"), Position: Text("absolute")}, listeners: {} }) 8
EId(191.12) Element(ElementNode { tag: Rect, attributes: {}, listeners: {} }) 9
EId(70.10) Element(ElementNode { tag: Label, attributes: {}, listeners: {} }) 10
Removing...
Removing...
Removing...
EId(65.13) Element(ElementNode { tag: Rect, attributes: {Layer: Text("-10"), Width: Text("8.4"), Background: Text("rgb(165, 172, 186)"), PositionTop: Text("0"), Height: Text("18"), Color: Text("rgb(17, 21, 28)"), PositionLeft: Text("8.4"), Position: Text("absolute")}, listeners: {} }) 8
EId(187.11) Element(ElementNode { tag: Rect, attributes: {}, listeners: {} }) 9
EId(64.14) Element(ElementNode { tag: Label, attributes: {}, listeners: {} }) 10
Removing...
Removing...
Removing...
Removing...
Removing...
Removing...
EId(60.18) Element(ElementNode { tag: Rect, attributes: {Layer: Text("-10"), Width: Text("8.4"), Background: Text("rgb(165, 172, 186)"), PositionTop: Text("0"), Height: Text("18"), Color: Text("rgb(17, 21, 28)"), PositionLeft: Text("8.4"), Position: Text("absolute")}, listeners: {} }) 8
thread 'main' panicked at /Users/viethung/.cargo/git/checkouts/freya-aa88117f1f713ee2/f62e9d5/crates/core/src/dom/mutations_writer.rs:49:60:
called `Option::unwrap()` on a `None` value
note: run with `RUST_BACKTRACE=1` environment variable to display a backtrace
thread 'main' panicked at /Users/viethung/.cargo/registry/src/index.crates.io-6f17d22bba15001f/winit-0.29.15/src/platform_impl/macos/app_state.rs:387:33:
called `Result::unwrap()` on an `Err` value: PoisonError { .. }

marc2332 · 2024-05-04T10:30:36Z

Just pushed my other idea, can you try it @ZeroX-DG ?

ZeroX-DG · 2024-05-04T10:30:57Z

Having the resize run in the separate thread seems to fix it as well!

marc2332 · 2024-05-04T10:32:13Z

Having the resize run in the separate thread seems to fix it as well!

Nice, although you should probably organize it another way so you don't spawn a thread every time the app gets resized haha, mpsc would do fine here

ZeroX-DG · 2024-05-04T10:32:55Z

Just pushed my other idea

Yeah that still crash unfortunately 😄

marc2332 · 2024-05-04T10:34:50Z

Oh wait, hold on a sec

marc2332 · 2024-05-04T10:35:46Z

https://github.com/ZeroX-DG/raven/blob/22685396b27e589b6d7bb3b9dcd4099ae84b2544/src/components/content_area.rs#L76

You are missing the key:

 rect {
    key: "{line_index}",
    padding: "{line_spacing} 0",
    paragraph {

Not specifying it could lead to DOM inconsistencies, I wonder if that's related

ZeroX-DG · 2024-05-04T10:36:10Z

Nice, although you should probably organize it another way so you don't spawn a thread every time the app gets resized haha, mpsc would do fine here

Yeah for sure haha. This make me wish we have something like a use_separate_thread hook haha.

ZeroX-DG · 2024-05-04T10:36:55Z

Not specifying it could lead to DOM inconsistencies, I wonder if that's related

Hmmmm could be..........I'll try specifying a key.

ZeroX-DG · 2024-05-04T10:38:22Z

Nope still crash.

marc2332 · 2024-05-04T10:42:16Z

Leave the key anyway, I guess running it in another thread is the way to go then. I don't really know if this is a bug or more like an issue caused by "wrong use" of the library (blocking the main thread unexpectedly)?

Having a use_thread hook for Dioxus SDK would be cool

marc2332 · 2024-05-04T10:43:51Z

You could also try using async tasks and a async Mutex instead of std's Mutex

ZeroX-DG · 2024-05-04T10:46:10Z

You could also try using async tasks and a async Mutex instead of std's Mutex

Oh are you talking about this crate: https://docs.rs/async-mutex/latest/async_mutex/ ? Or is it something built in?

marc2332 · 2024-05-04T10:46:39Z

You could also try using async tasks and a async Mutex instead of std's Mutex

Oh are you talking about this crate: https://docs.rs/async-mutex/latest/async_mutex/ ? Or is it something built in?

I was actually thinking about tokio's Mutex

marc2332 · 2024-05-04T10:46:54Z

https://docs.rs/tokio/latest/tokio/sync/struct.Mutex.html

ZeroX-DG · 2024-05-04T10:49:56Z

I don't really know if this is a bug or more like an issue caused by "wrong use" of the library (blocking the main thread unexpectedly)?

Yeah I agree. It's probably not a bug. More of a user error. Still, it's a chance for improvement. Maybe we can somehow let users know when their code is valid to run on the main thread & when it's not?

ZeroX-DG · 2024-05-04T10:51:39Z

https://docs.rs/tokio/latest/tokio/sync/struct.Mutex.html

Oh cool. I've never used it before. Coming from JavaScript land, these multi-threading stuff is pretty new to me haha. I'll give it a try!

marc2332 · 2024-05-04T10:51:57Z

I don't really know if this is a bug or more like an issue caused by "wrong use" of the library (blocking the main thread unexpectedly)?

Yeah I agree. It's probably not a bug. More of a user error. Still, it's a chance for improvement. Maybe we can somehow let users know when their code is valid to run on the main thread & when it's not?

A note on the docs would be very nice indeed, most frameworks let you know that the UI thread should not be blocked and that expensive calculations should be done in secondary threads or similar

marc2332 added the bug 😔 Something isn't working label May 4, 2024

marc2332 self-assigned this May 4, 2024

marc2332 changed the title ~~dom mutations writer panic due to missing layer state~~ issue: Blocking the UI threads leads to DOM inconsistencies and ultimately crashing May 4, 2024

marc2332 added usage-issue and removed bug 😔 Something isn't working labels May 4, 2024

ZeroX-DG mentioned this issue May 7, 2024

Signal panicking when being set in a separate thread #603

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

issue: Blocking the UI threads leads to DOM inconsistencies and ultimately crashing #602

issue: Blocking the UI threads leads to DOM inconsistencies and ultimately crashing #602

ZeroX-DG commented May 4, 2024

marc2332 commented May 4, 2024

marc2332 commented May 4, 2024

marc2332 commented May 4, 2024

ZeroX-DG commented May 4, 2024

ZeroX-DG commented May 4, 2024 •

edited

marc2332 commented May 4, 2024

ZeroX-DG commented May 4, 2024

marc2332 commented May 4, 2024

marc2332 commented May 4, 2024

marc2332 commented May 4, 2024

marc2332 commented May 4, 2024

ZeroX-DG commented May 4, 2024

marc2332 commented May 4, 2024

ZeroX-DG commented May 4, 2024

marc2332 commented May 4, 2024

ZeroX-DG commented May 4, 2024

marc2332 commented May 4, 2024

marc2332 commented May 4, 2024 •

edited

ZeroX-DG commented May 4, 2024

ZeroX-DG commented May 4, 2024

ZeroX-DG commented May 4, 2024

marc2332 commented May 4, 2024 •

edited

marc2332 commented May 4, 2024

ZeroX-DG commented May 4, 2024

marc2332 commented May 4, 2024

marc2332 commented May 4, 2024

ZeroX-DG commented May 4, 2024

ZeroX-DG commented May 4, 2024

marc2332 commented May 4, 2024

issue: Blocking the UI threads leads to DOM inconsistencies and ultimately crashing #602

issue: Blocking the UI threads leads to DOM inconsistencies and ultimately crashing #602

Comments

ZeroX-DG commented May 4, 2024

marc2332 commented May 4, 2024

marc2332 commented May 4, 2024

marc2332 commented May 4, 2024

ZeroX-DG commented May 4, 2024

ZeroX-DG commented May 4, 2024 • edited

marc2332 commented May 4, 2024

ZeroX-DG commented May 4, 2024

marc2332 commented May 4, 2024

marc2332 commented May 4, 2024

marc2332 commented May 4, 2024

marc2332 commented May 4, 2024

ZeroX-DG commented May 4, 2024

marc2332 commented May 4, 2024

ZeroX-DG commented May 4, 2024

marc2332 commented May 4, 2024

ZeroX-DG commented May 4, 2024

marc2332 commented May 4, 2024

marc2332 commented May 4, 2024 • edited

ZeroX-DG commented May 4, 2024

ZeroX-DG commented May 4, 2024

ZeroX-DG commented May 4, 2024

marc2332 commented May 4, 2024 • edited

marc2332 commented May 4, 2024

ZeroX-DG commented May 4, 2024

marc2332 commented May 4, 2024

marc2332 commented May 4, 2024

ZeroX-DG commented May 4, 2024

ZeroX-DG commented May 4, 2024

marc2332 commented May 4, 2024

ZeroX-DG commented May 4, 2024 •

edited

marc2332 commented May 4, 2024 •

edited

marc2332 commented May 4, 2024 •

edited