Weird flash message with Timeoutable

[matt17r]

Environment

• Ruby 3.3.4
• Rails 7.2.1
• Devise 4.9.4

Current behavior

When using timeoutable, a time out results in two messages being assigned to flash, an alert (expected) and a message of type "timedout" with value true (unexpected).

Expected behavior

That the Flash will only contain notices and alerts.

I realise this has been raised previously (multiple times, see below) and the most prominent one was marked as "resolved" (#1993) but I wonder if, 10-15 years later, we can revisit the decision since it's still tripping people up?

The documentation refers to "notices and alerts" and specifically calls out that the flash is automatically exposed to the template. Tutorials (RubyGuides, Rapid Ruby, Reinteractive and many more) almost always assume the Flash will only contain user facing messages that have been exposed to the template. It seems like a pretty solid convention.

For over a decade, and to this day, people have been:

• asking about it on Stackoverflow (1, 2, 3)
• raising issues in this repo (1, 2, 3, 4, 5)
• discussing it and working around it in other repos (Active Admin, The Odin Project and many more), with many references to this as a bug in Devise

Workaround

In case the decision stands and someone else stumbles across this in the future and isn't helped by the terse message in the readme (#1993), I've worked around it by skipping messages of type "timedout" (next if type == "timedout"). Another suggestion is to check if the message/value is a string (next unless message.is_a? String).

Here is that line with a bit more context from my view partial in case it's helpful:

# app/views/shared/_flash_messages.html.erb
<% if flash.any? %>
  <div class="inset-0 p-2 items-start justify-end">
    <div class="flex flex-col items-center justify-center">
      <% flash.each do |type, message| %>
        <% next if type == "timedout" %>
        <div class="<%= flash_colour_class(type.to_sym) %> border-2 px-4 py-3 mb-4 rounded relative" role="alert">
          <strong class="font-bold"><%= "#{type.capitalize}" %></strong>
          <span class="block sm:inline"><%= message %></span>
        </div>
      <% end %>
    </div>
  </div>
<% end %>