Verifying Large Refactors in Production With Sentry

Verifying Large Refactors in Production With Sentry

When replacing an API or code path with a new implementation you’ll likely ‘deprecate’ the old path, but how do you know when that old path is finally not in use? If your code is running on a server, you could use metrics or logs, but even with then, it can be challenging to capture the required context to pinpoint where deprecated code is still in use. If your code is on the frontend logs are not an option, and you’ll need to be more creative.

When replacing an API or code path with a new implementation you’ll likely ‘deprecate’ the old path, but how do you know when that old path is finally not in use? If your code is running on a server, you could use metrics or logs, but even with then, it can be challenging to capture the required context to pinpoint where deprecated code is still in use. If your code is on the frontend logs are not an option, and you’ll need to be more creative.

Case Study: Replacing Icons

I was recently in the exact situation described above. I had been working on a sweeping refactor of the icons in our application alongside Dora Chan, product designer, and Billy Vong, fellow frontend developer. The three of us were upgrading our buffet of icon implementations with a new system based on React components. With 600+ call sites and three deprecated forms of icons, we had our work cut out for ourselves.

The first style was icons defined as class names on elements. An example would be

<p><i class="icon icon-warning" /> Something dangerous</p>

These were simple to fix as we could find all instances with grep. The next form was our <InlineSvg /> component. Updating this component was simple. Again we could use find and replace to remove <InlineSvg > and add the new icon component.

tutorial integration api application react case study deprecation button code error

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

How native is React Native? | React Native vs Native App Development

Article covers: How native is react native?, React Native vs (Ionic, Cordova), Similarities and difference between React Native and Native App Development.

API Integration Practices and Patterns

From on-prem-to-cloud integrations to custom application-to-cloud integrations, the questions are the same: What is the integration experience you need to offer and who will own it?

Consume Web API Post method in ASP NET MVC | Calling Web API | Rest API Bangla Tutorial

LIKE | COMMENT | SHARE | SUBSCRIBE In this tutorial, I will discussed about how to consume Web API Get method and display records in the ASP.NET View. Here, ...

Consume Web API Get method in ASP NET MVC | Calling Web API | Rest API Bangla Tutorial

LIKE | COMMENT | SHARE | SUBSCRIBE In this tutorial, I will discussed about How to Consume Web API Get method in ASP NET MVC. Blog : http://aspdotnetexplorer...

Consume Web API Put method in ASP NET MVC | Calling Web API | Rest API Bangla Tutorial

LIKE | COMMENT | SHARE | SUBSCRIBE In this tutorial, we learned how to consume Web API Get and Post methods in the ASP.NET View. Here, we will see how to con...