Tips for debugging randomly failing turbo frames?

1

I’m struggling to debug an issue with a vanilla turbo frame, and I wonder if anyone would have any guidance on this.

tl;dr - it seems to randomly not work, and I cannot figure out why, or even instrument a path that would help me figure out out.

Long version:

I have a very basic form within a turbo frame.

<%= turbo_frame_tag :job do %>
  <div>
    <%= link_to "Edit", edit_job_path(job), class: "text-sm font-semibold text-indigo-500 hover:text-indigo-600" %>
  </div>
<% end %>

Which connects to a very basic controller:

 def edit
   @job = Job.find(params[:id])
 end

Which renders a form within a matching turbo frame:

<%= turbo_frame_tag :job do %>
  <h2>
      Edit Job
  </h2>
  <div>
    <%= form_with(@job) do |form| %>
       <%# form stuff %>
    <% end %>
  </div>
<% end %>

About 90% of the time, the form correctly renders within the Turbo Frame. However, in the remaining 10% of the time, the turbo frame simple does not work. The page renders the entire edit view, as if Turbo/Hotwire weren’t on the page at all.

This happens on engineers’ machines. This happens on client machines. We’re all pulling out hair out trying to find rock solid steps to reproduce, but it seems completely random.

Does anyone have any thoughts on how to better debug this and get to the root cause?

Thanks,

Evan

2

What template is the above snippet on?

Just confirming this snippet is on the edit.html.erb template?

Is there any other element with “job” as an id on this page? Does this turbo_frame_tag :job get rendered multiple times by any chance?

Have you inspected the HTTP response in the browser’s dev tools?

I wonder if there is a caching issue potentially also. Have you tried changing the turbo frame id to <%= turbo_frame_tag dom_id(job) do %>? That might help?

3

Belated reply here. Finally found the source (I think). It appears as if Heap is hijacking the click event.

2 Likes