How to deal with 500 in the frame?

1

I have a <turbo-frame> and when I submit form it gets replaced. So far it is great and magical.

But if my server returns 500 (I have an unexpected error) Turbo replaces my frame with empty frame and writes ts to console: Response has no matching <turbo-frame id="some-frame"> element.

Is there any way to render response in this case? I want to show user that my site borked and render generic error message that my server side created.

5 Likes
2

I have been wondering this same question. @AdamLuczynski Did you find a solution? I would love for others to chime in

3

I think this regards to the general question: how to intercept a response in a turbo frame? In my case, I wanted to intercept the 401 unauthorized. This is my solution.

1 Like
4

I was able to catch and process a 500 error using the event.detail.success value of the submit-end event. Here’s a video demonstrating:

1 Like
5

You may be interested in following the progress of this MR:

1 Like
6

I ran into the same issue, and found the following solution which feels wrong. I create a custom stimulus controller called turbo. That turbo controller will have an action to handle the event. This allows me to let certain turbo_frame fail in a more practical way.

# index
<%= tag.div data: {controller: :turbo} do %>
  <%= turbo_frame_tag "failure" , src: failure_path, data: {action: "turbo:frame-missing->turbo#frame_missing:prevent"} do %>
    ... loading ...
  <% end %>
<% end %>
# The :prevent will already prevent the event, that's a stimulus feature.

#failure_path
<%= raise "let it fail "%>

# app/javascript/controllers/turbo_controller.js
import { Controller } from "@hotwired/stimulus"
export default class extends Controller {
  frame_missing(frame_missing_event) {
    console.log("silently ignoring turbo failure", frame_missing_event)
  }
}

I got a hint for the solution in the discord: Discord

@seanpdoyle mentioned this in the chat: it’s worth mentioning that there’s active development ongoing for this scenario: https://github.com/hotwired/turbo/pull/863 +867

So we probably get a better solution in the future