# Flash messages with Turbo

**URL:** <https://discuss.hotwired.dev/t/flash-messages-with-turbo/2345>\
**Category:** General\
**Created:** [February 20, 2021, 6:10am UTC](https://discuss.hotwired.dev/t/flash-messages-with-turbo/2345 "2021-02-20T06:10:23Z")\
**Posts on this page:** 18\
**Page:** 1

<div class="post-metadata">

**Author:** ![ksajadi](https://yyz1.discourse-cdn.com/flex027/user_avatar/discuss.hotwired.dev/ksajadi/32/1618_2.png) [@ksajadi](https://discuss.hotwired.dev/u/ksajadi)\
**Post date:** [February 20, 2021, 6:10am UTC](https://discuss.hotwired.dev/t/flash-messages-with-turbo/2345/1 "2021-02-20T06:10:23Z")

</div>

A simple controller that redirects to a path with a flash message works in a traditional rails app because usually there is a part in the app layout that renders flash messages.

However, when used with Turbo frames, flash messages are not shown during a frame controlled redirect as they are not part of the returning frame.

To fix this, I’ve wrapped my flash render view in a turbo frame called :notifications and in the action I use a turbo\_stream.erb to send 2 streams down the client: one for the actions main response and a second one just to replace the :notifications frame, so the flash messages are shown.

Using this approach shows the flash message at the right time, but also repeats them on the next full refresh.

I was wondering if there is a “correct” way to deal with flash messages in Hotwire which I am completely missing out.

---

<div class="post-metadata">

**Author:** ![tleish](https://yyz1.discourse-cdn.com/flex027/user_avatar/discuss.hotwired.dev/tleish/32/920_2.png) [@tleish](https://discuss.hotwired.dev/u/tleish)\
**Post date:** [February 24, 2021, 3:10pm UTC](https://discuss.hotwired.dev/t/flash-messages-with-turbo/2345/2 "2021-02-24T15:10:07Z")

</div>

Are you looking for [Flash#now](https://api.rubyonrails.org/v6.1.3/classes/ActionDispatch/Flash/FlashHash.html#method-i-now)?

BTW, you may be interested in this post by Bram Jetten.

[Flash messages with Hotwire and Turbo Streams](https://bramjetten.dev/articles/flash-messages-with-hotwire-and-turbo-streams)

![kBfdG2Tt6A0QRLFf](https://canada1.discourse-cdn.com/flex027/uploads/stimulusjs/original/2X/9/94c2a9011b0f8d0b6ecffdf2e993f2af50db1cde.gif)

---

<div class="post-metadata">

**Author:** ![ksajadi](https://yyz1.discourse-cdn.com/flex027/user_avatar/discuss.hotwired.dev/ksajadi/32/1618_2.png) [@ksajadi](https://discuss.hotwired.dev/u/ksajadi)\
**Post date:** [February 24, 2021, 3:31pm UTC](https://discuss.hotwired.dev/t/flash-messages-with-turbo/2345/3 "2021-02-24T15:31:34Z")

</div>

Thanks for sharing that. This is what I ended up doing, however I’m trying to find an elegant solution when the action needs to stream a partial to the client itself too. In cases like that, the `format.turbo_stream` can only send one turbo stream down from the action. To send more than one (the main one and the flash one) together, we need to move the payload to a `turbo_stream.erb` file and include the flash stream there every time.

---

<div class="post-metadata">

**Author:** ![tleish](https://yyz1.discourse-cdn.com/flex027/user_avatar/discuss.hotwired.dev/tleish/32/920_2.png) [@tleish](https://discuss.hotwired.dev/u/tleish)\
**Post date:** [February 24, 2021, 4:07pm UTC](https://discuss.hotwired.dev/t/flash-messages-with-turbo/2345/4 "2021-02-24T16:07:24Z")

</div>

I’m not quite following.

> However, when used with Turbo frames, flash messages are not shown during a frame controlled redirect as they are not part of the returning frame.

With a “frame controlled redirect”, are you saying the frame is redirected to additional content, but only display in the frame or it redirects the entire page?

---

<div class="post-metadata">

**Author:** ![ksajadi](https://yyz1.discourse-cdn.com/flex027/user_avatar/discuss.hotwired.dev/ksajadi/32/1618_2.png) [@ksajadi](https://discuss.hotwired.dev/u/ksajadi)\
**Post date:** [February 24, 2021, 9:12pm UTC](https://discuss.hotwired.dev/t/flash-messages-with-turbo/2345/5 "2021-02-24T21:12:57Z")

</div>

So let’s say you want to redirect to a page after a certain operation is done in your action. In a normal Rails setup, you’d do that with a `redirect_to`. In such scenario, if you want to show a flash message, you then add a `flash` in the action too.

The suggested approach can either do the redirect OR the flash, not both. For flash to work with a stream, it would need to render a turbo\_stream and a redirect would be considered double rendering.

---

<div class="post-metadata">

**Author:** ![tleish](https://yyz1.discourse-cdn.com/flex027/user_avatar/discuss.hotwired.dev/tleish/32/920_2.png) [@tleish](https://discuss.hotwired.dev/u/tleish)\
**Post date:** [February 24, 2021, 9:49pm UTC](https://discuss.hotwired.dev/t/flash-messages-with-turbo/2345/6 "2021-02-24T21:49:00Z")

</div>

To clarify, you want to be able to have a Rails controller respond with a turbo-stream (instead of a full-page redirect)? And in this scenario, you are getting the flash rendered within the turbo stream, and then on the next full page request. Is this correct?

If yes, does [Flash#now](https://api.rubyonrails.org/v6.1.3/classes/ActionDispatch/Flash/FlashHash.html#method-i-now) solve the problem?

---

<div class="post-metadata">

**Author:** ![chrisortman](https://yyz1.discourse-cdn.com/flex027/user_avatar/discuss.hotwired.dev/chrisortman/32/960_2.png) [@chrisortman](https://discuss.hotwired.dev/u/chrisortman)\
**Post date:** [February 28, 2021, 9:53pm UTC](https://discuss.hotwired.dev/t/flash-messages-with-turbo/2345/7 "2021-02-28T21:53:45Z")

</div>

Another option might be to put a turbo replace in your layout like this:

```
  <div id="flash_messages">
    <p class="notice"><%= notice %></p>
    <p class="alert"><%= alert %></p>
  </div>
  <%= turbo_stream.replace "flash_messages" do %>
    <div id="flash_messages">
      <p class="notice"><%= notice %></p>
      <p class="alert"><%= alert %></p>
    </div>
  <% end %>
```

---

<div class="post-metadata">

**Author:** ![daniele](https://avatars.discourse-cdn.com/v4/letter/d/dfb087/32.png) [@daniele](https://discuss.hotwired.dev/u/daniele)\
**Post date:** [February 28, 2021, 10:49pm UTC](https://discuss.hotwired.dev/t/flash-messages-with-turbo/2345/8 "2021-02-28T22:49:38Z")

</div>

> [@ksajadi](#):
>
> I was wondering if there is a “correct” way to deal with flash messages in Hotwire which I am completely missing out.

I think that the stream approach is ok.  
An alternative way could be to keep the frame and add a hidden div on the response (or add the same data to an existent element), managed by a Stimulus controller:

`<div class='hidden' data-controller='flashMessage' data-message='Record saved!'></div>`

The js controller updates/creates the alert at the desired position.

---

<div class="post-metadata">

**Author:** ![ksajadi](https://yyz1.discourse-cdn.com/flex027/user_avatar/discuss.hotwired.dev/ksajadi/32/1618_2.png) [@ksajadi](https://discuss.hotwired.dev/u/ksajadi)\
**Post date:** [March 1, 2021, 12:09am UTC](https://discuss.hotwired.dev/t/flash-messages-with-turbo/2345/9 "2021-03-01T00:09:41Z")

</div>

That’s what I was hoping for. When there is a `.turbo_stream.erb` file involved, one can use `render turbo_stream, layout: 'foo'` but I guess this is not possible when the rendering is something like this: `render turbo_stream: turbo_stream.replace(...)` as this doesn’t accept layouts.

---

<div class="post-metadata">

**Author:** ![ksajadi](https://yyz1.discourse-cdn.com/flex027/user_avatar/discuss.hotwired.dev/ksajadi/32/1618_2.png) [@ksajadi](https://discuss.hotwired.dev/u/ksajadi)\
**Post date:** [March 1, 2021, 12:11am UTC](https://discuss.hotwired.dev/t/flash-messages-with-turbo/2345/10 "2021-03-01T00:11:17Z")

</div>

The JS approach is interesting as it might even work with a full HTML render which is then inspected by a Stimulus controller for flash frames before it gets back to the original requesting frame.

---

<div class="post-metadata">

**Author:** ![chrisortman](https://yyz1.discourse-cdn.com/flex027/user_avatar/discuss.hotwired.dev/chrisortman/32/960_2.png) [@chrisortman](https://discuss.hotwired.dev/u/chrisortman)\
**Post date:** [March 1, 2021, 1:05am UTC](https://discuss.hotwired.dev/t/flash-messages-with-turbo/2345/11 "2021-03-01T01:05:11Z")

</div>

fwiw the turbo\_stream approach also works with a full HTML render.

---

<div class="post-metadata">

**Author:** ![daniele](https://avatars.discourse-cdn.com/v4/letter/d/dfb087/32.png) [@daniele](https://discuss.hotwired.dev/u/daniele)\
**Post date:** [March 1, 2021, 7:36am UTC](https://discuss.hotwired.dev/t/flash-messages-with-turbo/2345/12 "2021-03-01T07:36:33Z")

</div>

> [@ksajadi](#):
>
> `turbo_stream.replace(...)` as this doesn’t accept layouts

A strean is a piece of html that have to be inserted/replaced asyncronally in an existing html. A “layout” have not much sense in this scenario. If you need to render more streams with a uniqe turbo\_stream.xxxxx call you can always use a partial.

---

<div class="post-metadata">

**Author:** ![alextakitani](https://yyz1.discourse-cdn.com/flex027/user_avatar/discuss.hotwired.dev/alextakitani/32/1793_2.png) [@alextakitani](https://discuss.hotwired.dev/u/alextakitani)\
**Post date:** [March 25, 2021, 9:38pm UTC](https://discuss.hotwired.dev/t/flash-messages-with-turbo/2345/13 "2021-03-25T21:38:14Z")

</div>

I have the same “problem” and I believe that most people will do to.

I think that we need a solution at the framework level that “sees” flash messages on

turbo responses and do the replace on the “flash\_messages” frame.

---

<div class="post-metadata">

**Author:** ![Lomig](https://yyz1.discourse-cdn.com/flex027/user_avatar/discuss.hotwired.dev/lomig/32/1288_2.png) [@Lomig](https://discuss.hotwired.dev/u/Lomig)\
**Post date:** [March 26, 2021, 7:06pm UTC](https://discuss.hotwired.dev/t/flash-messages-with-turbo/2345/14 "2021-03-26T19:06:50Z")

</div>

Not exactly.

I think it’s not considered a good practice, but you can do

```ruby
respond_to do |format|
  format.turbo_stream do
    render turbo_stream: [
      turbo_stream.replace(:flash, partial: "shared/flash", locals: { notice: "My Flash !" }),
      turbo_stream.append(:messages, partial: "messages/message", locals: { message: message })
    ]
  end
end

```

---

<div class="post-metadata">

**Author:** ![cesc1989](https://yyz1.discourse-cdn.com/flex027/user_avatar/discuss.hotwired.dev/cesc1989/32/1937_2.png) [@cesc1989](https://discuss.hotwired.dev/u/cesc1989)\
**Post date:** [May 25, 2021, 12:55am UTC](https://discuss.hotwired.dev/t/flash-messages-with-turbo/2345/15 "2021-05-25T00:55:52Z")

</div>

The suggestion in the article doesn’t work because it is for times when we don’t want to redirect the user. In this situation, what OP (and myself) try is to send a flash && redirect.

Sending the flash in a turbo\_stream won’t cause a redirection. A form in a turbo\_frame tag won’t send the flash to the view.

---

<div class="post-metadata">

**Author:** ![nodalailama](https://yyz1.discourse-cdn.com/flex027/user_avatar/discuss.hotwired.dev/nodalailama/32/1608_2.png) [@nodalailama](https://discuss.hotwired.dev/u/nodalailama)\
**Post date:** [May 25, 2021, 8:36am UTC](https://discuss.hotwired.dev/t/flash-messages-with-turbo/2345/16 "2021-05-25T08:36:00Z")

</div>

Hi,

Evil Martian, with well known master Vladimir Dementyev, writings are always rich, in the following article, they talk about flash notification … they setup also a “flash layout for flash turbo\_stream” and it’s interesting in my opinion.

> **[Hotwire: Reactive Rails with no JavaScript? — Martian Chronicles](https://evilmartians.com/chronicles/hotwire-reactive-rails-with-no-javascript)**
>
> Take a deep dive into building reactive Rails applications with Hotwire Turbo and only a pinch of custom JavaScript. This article compliments the RailsConf 2021 talk by Vladimir Dementyev.

Cordialement,

---

<div class="post-metadata">

**Author:** ![xuanchien](https://yyz1.discourse-cdn.com/flex027/user_avatar/discuss.hotwired.dev/xuanchien/32/2229_2.png) [@xuanchien](https://discuss.hotwired.dev/u/xuanchien)\
**Post date:** [September 21, 2021, 9:02am UTC](https://discuss.hotwired.dev/t/flash-messages-with-turbo/2345/17 "2021-09-21T09:02:54Z")

</div>

In my case, I need to support both the normal requests and Turbo Stream request. But I really don’t want to change every places I am rendering turbo stream. I ended up creating a small `around_action` helper which allows me to check if I should broadcast the flash partial to the client.

Prerequisites:

- a partial for rendering each flash message
- a container for containing all flash messages

The `around_action` looks something like this

```auto
  def broadcast_flash_message
      return unless request.format.turbo_stream?
      return if response.status == 301 || response.status == 302

      flash.each do |key, message|
        Turbo::StreamsChannel.broadcast_append_to(flash_message_container, target: flash_message_container, partial: "layouts/flash", locals: {message: message, type: key})
      end

      flash.clear
    end

```

I’m not sure if it’s the correct way to do but it serves me well

---

<div class="post-metadata">

**Author:** ![laptopmutia](https://yyz1.discourse-cdn.com/flex027/user_avatar/discuss.hotwired.dev/laptopmutia/32/2843_2.png) [@laptopmutia](https://discuss.hotwired.dev/u/laptopmutia)\
**Post date:** [August 3, 2022, 12:45pm UTC](https://discuss.hotwired.dev/t/flash-messages-with-turbo/2345/19 "2022-08-03T12:45:54Z")

</div>

is it good practices if I use turbo stream to sent an error notification?

I have done it problem is my turbo stream response have 200 OK instead 422 Error  
and whenever I add the 422 Error my browser is not rendering the turbo stream response from server