Introducing rack-dev_insight: A New Development Tool for Rack (Rails) Application
Tags: ruby, rails, gem, extensions
Published: 2024-01-08 14:28:45

Hi! I'm excited to introduce a tool I've been developing over the past few months: rack-dev_insight.
This tool, comprising a [gem](https://github.com/takaebato/rack-dev_insight) and a [chrome extension](https://chromewebstore.google.com/detail/rack-dev-insight/blpooeljpmpagkbfflnfnjgelafpfeid), is designed to provide insights into your Rack applications.
While it's still in its early stages, it's already valuable to be added to your development toolbox.

## Table of Contents

- [What is rack-dev_insight?](#what-is-rackdevinsight)
- [Overview video of rack-dev_insight](#overview-video-of-rackdevinsight)
- [Unique features of rack-dev_insight](#unique-features-of-rackdevinsight)
  - [1. Grouping SQL queries by CRUD operation](#1-grouping-sql-queries-by-crud-operation)
  - [2. Grouping SQL queries by Normalized SQL](#2-grouping-sql-queries-by-normalized-sql)
  - [3. Detailed HTTP request / response data](#3-detailed-http-request-response-data)
  - [4. Functional devtools panel](#4-functional-devtools-panel)
- [What is next?](#what-is-next)

## What is rack-dev_insight?

rack-dev_insight is a simple, yet unique monitoring tool for Rack applications.
The [rack-dev_insight gem]((https://github.com/takaebato/rack-dev_insight)) serves as a middleware for recording and analyzing SQL queries and HTTP request / response data.
To visualize this data, [Chrome Devtools panel](https://chromewebstore.google.com/detail/rack-dev-insight/blpooeljpmpagkbfflnfnjgelafpfeid) is offered, making it a developer-friendly tool.
Currently, this tool is intended for use in development environments only.

## Overview video of rack-dev_insight

Here is overview video of rack-dev_insight. Detailed explanations of its key features are described in next section.

{% embed https://www.youtube.com/watch?v=ES9DnZEdeDY %}

## Unique features of rack-dev_insight

Inspired by tools like [rails_panel](https://github.com/dejan/rails_panel) and [rack-mini-profiler](https://github.com/MiniProfiler/rack-mini-profiler), rack-dev_insight stands out with its unique features:

### 1. Grouping SQL queries by CRUD operation

This feature basically creates a CRUD matrix. 

#### What is CRUD matrix?

A CRUD matrix is a tabular representation showing how different entities (tables) are involved in CRUD (Create, Read, Update, Delete) operations in a business process. It's helpful for visualizing the interactions between various business processes and the tables involved.

For example, let's take a business process where a user updates a comment on a post. This action typically requires reading data from the `users` and `posts` tables and updating the `comments` table. The CRUD matrix would look like this:

| Process \ Table  | users | posts | comments |
|:-----------------|:------|:------|:---------|
| Update a comment | READ  | READ  | UPDATE   |

#### Visualization in Devtools panel

In devtools panel this scenario is displayed as follows.

![CRUD](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r6ytz4wp807zv61erc8y.jpg)

#### Usefulness

This feature is particularly useful in complex scenarios where dozens of tables are involved or when working with unfamiliar APIs, helping you recognize exhaustive table lists involved, and understand data dependencies more clearly.

#### Details

When extracting CRUD operations for the matrix, the following subtle cases are considered:

##### Conversion of Table Alias Names to Original Table Names

In scenarios where table aliases are used, such as in the following SQL query,

```
SELECT a FROM t1 AS t1_alias
```

it is counted as READ on the original table t1, instead of the alias t1_alias.

##### Recognition of Read Operations in CREATE, UPDATE, DELETE Queries

Not just the primary operation but also implicit operations within a query are considered.
For instance, the following SQL query

```
INSERT INTO t1 (a) SELECT a FROM t2 INNER JOIN t3 USING (id) WHERE t3.b = 1
```

is counted as INSERT operation for t1, and READ operation for t2 and t3.

### 2. Grouping SQL queries by Normalized SQL

This feature groups SQL queries by Normalized SQL, which is a uniform format of SQL statement.

#### How Normalization works

Normalization works similarly to [pt-fingerprint](https://docs.percona.com/percona-toolkit/pt-fingerprint.html).

For instance, consider the following set of SQL queries:

```
SELECT * FROM users WHERE id = 1
SELECT * FROM users WHERE id = 2
SELECT * FROM users WHERE id = 3
```

These are normalized into a uniform format:

```
SELECT * FROM users WHERE id = ?
```

#### Visualization in Devtools panel

This is displayed in the Devtools panel as follows.

![Normalized](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/buznqujq0laguno3zh3x.jpg)

#### Usefulness

This feature is helpful to detect so-called N+1 queries, but not limited to SELECT statements.

#### Details

Other DML queries are normalized in the same way like the following:

```
INSERT INTO users (name) VALUES (?)
UPDATE users SET name = ? WHERE id = ?
DELETE FROM users WHERE id = ?
```

### 3. Detailed HTTP request / response data

rack-dev_insight captures detailed HTTP request and response data, displayed in a Devtools panel similar to Chrome's network panel.
It currently supports the net-http gem, with future plans to include more HTTP clients, GraphQL, and gRPC.

![HTTP](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2xynytf10xi8c8pfivd5.jpg)

### 4. Functional devtools panel

The Devtools panel has the following features:

#### Editor integration

- Open files directly in your editor by clicking their paths in the backtrace.
- Set up path mapping between local and remote file systems for seamless navigation.

![Settings](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wxkwwm8lfda7hkh5le5i.jpg)

#### Recording control

- Start or stop data recording, and flush recorded data, similar to the functionality of Chrome's network panel.

#### Sorting by columns

- Easily sort data by clicking on column headers for quick organization and analysis.

## What is next?

If you are interested in this tool, please try it out! I would love to hear your feedback.
The following enhancements are currently under consideration:

- Additional options to normalization format
- Recording only the specified block
- Support for HTTP clients other than net-http
- Support for GraphQL and gRPC
- Support for other SQL dialects such as Microsoft SQL Server
- Alerting and reporting
- Background job (remote machines) support

Stay tuned for more updates. Your suggestions and ideas are always welcome.

Thank you for your time and interest!