DEV Community

loading...

Turbolinks Bit Me... Crashing, No Errors, and a VERY Easy Solution

markmead profile image Mark ・2 min read

I love Turbolinks, it makes websites feel more like a SPA (Single Page Application) which, for me are an enjoyable experience.

That's up until I was recently bit by Turbolinks.

I've had Turbolinks issues before, typically nothing turbolinks:load in JavaScript can't fix. However, that was not the case when a website I recently built had;

  • Crashing on specific user devices (unrelated to user account)
  • No JavaScript errors
  • No errors in Bugsnag

And two very confused developers, a client wanting their website to go live, and a project manager who was fed up of hearing "I'm unsure what the error is"


What was happening?

There were two users (one was the client), both on iPhone 11s experiencing crashes when loading their user dashboard.

What made this weird was;

  • No one could replicate the issue, even on an iPhone 11
  • The client's account would work on other devices, just not their iPhone 11
  • Even after deleting their account, the issue was still there

Eventually, the client came in to see if we could diagnose this issue with Safari's inspector tool and their iPhone 11 plugged into my Macbook.

What was causing the crashes?

Well, nothing changed... The console was clear, Bugsnag was quiet and the website was still crashing.

But then the client said something that hit me "The page works if I refresh, but navigating to it crashes"...

This screamed Turbolinks!

If you're unsure why then I can explain it with this very basic explanation of what Turbolinks is doing.

When you click on a link an XHR request is sent to the server, the response is HTML which is sliced at the <body> element, this then replaces the current HTML's <body> element.

You can read more about how Turbolinks works on the README

So how do you solve this current issue?

In some scenarios you don't want that functionality, you'll want a full refresh which is exactly what is needed here. Thankfully, there's a handy meta tag included in Turbolinks.

This is the code I added to the breaking page:

- content_for :head do
  %meta{ name: "turbolinks-visit-control", content: "reload" }
Enter fullscreen mode Exit fullscreen mode

...and...

Anakin Skywalker

Discussion

pic
Editor guide