Using Rollbar to catch 404 errors during an app migration

I'm migrating from Magento to Shopify and URL structures are changing. 404's become a problem quickly. Here's how to catch them all, like Pokémon, in real-time.

By Rob Johnson

Sat Mar 12 2022

Whenever you're migrating an app that is a number of years old, there will always be pages that you'll never catch. This includes links within product description pages (PDP's) or custom pages like landing pages, or customer support pages. There can be links pointing to your site from other search engines or sites that you and others don't even remember existing.

Some of these sound fairly trivial, however, you can also catch cases where you're not realizing how much traffic is being driven to a certain page, or group of pages, which is lowering your conversion rates and also search engine rankings.

Google Search Console

Google Search Console is great to show you the perspective of Google and what 404's they are detecting, however this isn't a fast enough response, in my opinion, especially when you're developing in a local, staging or beta environment behind public access.

In 2015. I wrote the post, Top 5 Mistakes I Made Replatforming a Multimillion Dollar E-commerce Website. Point #4 was "Obsess over old external and internal links." Back then, my recommendation was to use SEO Spider, a tool from Screaming Frog. I still recommend this for a general crawl, especially if you're testing in a local or staging environment. However, it will only crawl links contained within the application and not links coming from external sites, which is why it's important to track 404's closely in your production environment.

A while ago, I wrote How to use Rollbar for logging in a custom app. Check it out if you're new to Rollbar and it will help you understand more about the service and how to get started. They have an impressive set of SDK's that most likely cover your stack.

Sending a warning log event via Rollbar's Javascript SDK

With the most recent migration, I decided to add a custom log event anytime a 404 page was rendered on the site. Once Rollbar was setup, I just added the following Javascript to the 404 page.

Rollbar.warning("404 Error", {referrerUrl: document.referrer});

Adding, {referrerUrl: document.referrer} in the above will dynamically add a new data point to the error log. document.referrer will grab the origin of the referring URL.

Now anytime a 404 error occurs, I will receive a warning log event of that occurance in real-time. This of course, can be done in other ways for other types of events too. Let your imagination run wild.

That said, the default view in Rollbar will show you a 24 minutes, 60 hours and 60 days occurances chart, which is super helpful, but each occurance is listed out individually, which doesn't help you necessarily prioritize which URL's to fix first (if there are lots of errors occuring).

Rollbar RSQL

To help aggregate all of the errors together with a the count of occurances of the error, you can use a great tool that Rollbar have made called RSQL, which allows you to write SQL queries against the logs that have been collected.

SELECT 
request.url
, count(request.url)
FROM item_occurrence
WHERE item.counter = 67
AND request.url NOT LIKE '%url-fragment-to-ignore%'
GROUP BY
request.url
ORDER BY count(request.url) DESC
LIMIT 0, 100

The results will provide a chart, if the data output is simple enough, and a downloadable CSV file, where you can then upload to Excel for whatever needs you may have.

Rollbar RSQL Output Chart

Rollbar RSQL output chart

There you go. Tracking 404's in real-time, where you can also setup notifications for certain events and more.


# tools 5 # sql 3 # javascript 10 # projects 4 # css 2 # git 2 # php 3 # analytics 4 # monitoring 2 # commerce 9 # seo 4 # api 3 # shopify 4 # python 2 # aws 2