longnightElixir

Phoenix liveview: Why Html.raw render this html snippet cause liveview re-mount?

Hi,
I am trying to integrate a rich text editor (trix) into my liveview heex template,
I expect to receive and store users generated input content as html string, and display them back with { raw(@content) } .
In normal case it worked well (user input/paste normal html, and my controller/template rendered them well with no error),
but recently found this , really make me confused:
if I select-copy some content like this, then pasted in my form (trix editor) input box,

<div>
<figure data-trix-attachment="{&quot;contentType&quot;:&quot;image&quot;,&quot;url&quot;:null}" data-trix-content-type="image" class="attachment attachment--preview"><img src="null">
<figcaption class="attachment__caption"></figcaption>
</figure></div>
<div><br></div>
<div>Bouncy balls cascading down a San Francisco street for a Sony Bravia commercial in 2005.</div>

this text is from: this page ,if you want to try , remember to select the images
ever in “validate” event was trigger, or after save them and show them on page, it will caused liveview re run mount() , then errors happen because there is no params passed to it.

does anyone know where I had did it wrong ?

8 comments

/phoenix #liveview

3 306 8

2025-03-26 07:08:41 UTC

Most Liked

longnightElixir

Thank you for replies.
this is the logs:

[debug] HANDLE PARAMS in Lingo2Web.GroupLive.GroupDetailController
  Parameters: %{"group_uid" => "g426755"}
[debug] Replied in 94µs
<!-- 
  Above are normal log.
  Below are that I think re-mount was triggered,
   don't know why didi it happen;
   it only raised at the page which I had inserted previous mentioned html snippet.           
-->
[info] GET /g/null
[debug] Processing with Lingo2Web.GroupLive.GroupDetailController.nil/2
  Parameters: %{"group_uid" => "null"}
  Pipelines: [:browser]
[debug] QUERY OK source="users_tokens" db=0.6ms idle=410.8ms
SELECT u1."id", u1."uid", u1."email", u1."hashed_password", u1."confirmed_at", u1."inserted_at", u1."updated_at" FROM "users_tokens" AS u0 INNER JOIN "users" AS u1 ON u1."id" = u0."user_id" WHERE ((u0."token" = $1) AND (u0."context" = $2)) AND (u0."inserted_at" > $3::timestamp + (-(60)::numeric * interval '1 day')) [<<201, 144, 72, 112, 8, 60, 4, 81, 130, 117, 30, 78, 1, 65, 115, 28, 180, 22, 137, 5, 124, 69, 210, 192, 48, 109, 171, 219, 23, 128, 62, 153>>, "session", ~U[2025-03-15 22:50:11.238279Z]]
↳ Lingo2Web.UserAuth.fetch_current_user/2, at: lib/lingo2_web/user_auth.ex:95
%{"group_uid" => "null"}
[debug] QUERY OK source="groups" db=0.4ms idle=403.3ms
SELECT g0."id", g0."uid", g0."name", g0."description", g0."creator_id", g0."inserted_at", g0."updated_at" FROM "groups" AS g0 WHERE (g0."uid" = $1) ["null"]
↳ Lingo2Web.GroupLive.GroupDetailController.mount/3, at: lib/lingo2_web/controllers/group_live/group_detail_controller.ex:10
[info] Sent 404 in 55ms
[debug] ** (Ecto.NoResultsError) expected at least one result but got none in query:

from g0 in Lingo2.Groups.Group,
  where: g0.uid == ^"null",
  preload: [:posts]

    (ecto 3.12.5) lib/ecto/repo/queryable.ex:164: Ecto.Repo.Queryable.one!/3
    (lingo2 1.0.0) lib/lingo2_web/controllers/group_live/group_detail_controller.ex:10: Lingo2Web.GroupLive.GroupDetailController.mount/3
    (phoenix_live_view 1.0.5) lib/phoenix_live_view/utils.ex:348: anonymous fn/6 in Phoenix.LiveView.Utils.maybe_call_live_view_mount!/5
    (telemetry 1.3.0) /home/fuw/temp/prj/lingo2/deps/telemetry/src/telemetry.erl:324: :telemetry.span/3
    (phoenix_live_view 1.0.5) lib/phoenix_live_view/static.ex:320: Phoenix.LiveView.Static.call_mount_and_handle_params!/5
    (phoenix_live_view 1.0.5) lib/phoenix_live_view/static.ex:155: Phoenix.LiveView.Static.do_render/4
    (phoenix_live_view 1.0.5) lib/phoenix_live_view/controller.ex:39: Phoenix.LiveView.Controller.live_render/3
    (phoenix 1.7.20) lib/phoenix/router.ex:484: Phoenix.Router.__call__/5
    (lingo2 1.0.0) lib/lingo2_web/endpoint.ex:1: Lingo2Web.Endpoint.plug_builder_call/2
    (lingo2 1.0.0) deps/plug/lib/plug/debugger.ex:136: Lingo2Web.Endpoint."call (overridable 3)"/2
    (lingo2 1.0.0) lib/lingo2_web/endpoint.ex:1: Lingo2Web.Endpoint.call/2

Post #4

Phxie

I’m confused as this looks like it has nothing to do with trix.

You’re running a query and passing a null parameter for the group_id so the liveview is crashing and remounting.

[debug] ** (Ecto.NoResultsError) expected at least one result but got none in query:

from g0 in Lingo2.Groups.Group,
  where: g0.uid == ^"null",
  preload: [:posts]

Post #5

Phxie

What I’m saying is that it’s not a re-mount, its a crash due to a function receiving an incorrect parameter. The “re-mount” is a crash recovery.

You need to find the function and find out how and where it is related to the form you are using for Trix.

You have a function thats something along the lines of:

Groups.get!(id)

This function is being triggered with a nil value for the ID when you copy and paste, for whatever reason that may be. But without seeing the form/codebase its impossible for someone to tell how it relates to Trix specifically.

Find the function causing the crash
Find the parameter it is expecting as the ID
Trace backwards using IO.inspect() on the parameter until you can find out why it is returning a nil value.

It sounds like you may have a feature that allows posts to be sorted by groups in the form and you are not assigning the ID value, then when you go to render the content loaded from the form your page is crashing because the ID was not assigned.

Post #7