DEV Community: Geon George

Your Software Can't Heal What It Can't See: Support Is the Missing Loop

Geon George — Sat, 31 Oct 2026 20:27:10 +0000

Picture a customer writing in to your SaaS product: "new leads stopped showing up in our CRM." Your dashboards are green. No exceptions in error tracking, no 5xx spike, p95 latency flat. By every machine-readable measure the app is healthy.

It isn't. It's broken for that one customer, and the only sensor that noticed is a human typing into a chat widget. If you run support for any software product, you've had some version of this ticket.

I build Superrelay, a support workspace for software teams, so I'm biased. But I've come to believe this: most "self-healing software" talk skips the part where most bugs actually show up. The loop is missing its best sensor, and that sensor is your support inbox.

This post covers what self-healing software actually is, where it goes blind, and how to wire support into the loop without letting an AI agent loose on production.

What "self-healing" means today

The idea is old. IBM's autonomic computing vision (Kephart and Chess, 2003) listed self-healing next to self-configuring, self-optimizing and self-protecting, and described a control loop: monitor, analyze, plan, execute. Strip away the vocabulary and every modern version is the same four steps.

You probably already run parts of it:

Restart on failure. A Kubernetes liveness probe that fails past its threshold gets the container killed and restarted. Crude, and very effective against deadlocks.
Stop the bleeding. A circuit breaker trips after repeated failures, fails fast, and can reset itself once the dependency recovers.
Turn it off. Long-lived ops toggles act as kill switches that let operators degrade a non-critical feature without a deploy. Pete Hodgson notes they "could be seen as a manually-managed Circuit Breaker."
Roll it back. Argo Rollouts analysis can query a success-rate metric during a canary and abort the rollout, sending traffic back to the stable version, when the metric fails.
Write the fix. The newest layer. Sentry's Seer Autofix does root-cause analysis on an issue, proposes a fix, and can be configured to open a PR. It can also hand off to a coding agent.

Every one of these is a good idea. And every one of them depends on the same thing: the failure has to be visible to a machine. A probe has to fail. An exception has to be thrown. A metric has to move.

The bugs telemetry can't see

Try this: open your last 50 support tickets and count how many have a matching error event. Whatever that number is, it's the real coverage of your self-healing loop. The rest reached you only because a customer took the time to write in.

Here's what's under the waterline:

State that's wrong for one account. A setting saved in your database but never applied on the platform side.
Environment conflicts. A customer's browser extension, a corporate proxy, another vendor's script fighting yours.
"Success" that isn't. Plenty of third-party APIs answer 200 when the operation didn't happen. Under the GraphQL-over-HTTP spec draft, an error raised while executing an operation doesn't fail the request at the HTTP level: the response is still a 2xx, and the failure lives in an errors array in the body. If you only check the status code, your logs say everything is fine.
Integrations that quietly stop. An expired token, a webhook subscription that got dropped.
Confusing UX. Nothing is broken; the customer just can't find the button. That's still a defect.
Wrong docs. The help article describes last month's UI. The code is fine; the product is still broken for anyone who reads it.

None of these throw. All of them produce tickets. Support is the sensor network for the failures your telemetry can't see. Most teams treat that sensor as a cost center instead of a signal source.

Closing the loop: support as a first-class sensor

Here's the loop I think small teams should build. It has two speeds: fix this customer now, and fix the class of bug so the next ticket never arrives.

1. Turn tickets into structured signals

A raw ticket is like an unparsed log line. Before anything automated can use it, you need:

Tags that mean something to engineering (bug:settings-sync, not urgent).
Context attached automatically: account ID, plan, app version, the page they were on.
Clustering: five customers describing one bug in five different ways should become one issue with five reporters. This is where an LLM is genuinely useful. Grouping fuzzy natural-language reports is exactly what it's good at.

2. Let a support agent fix the instance, safely

If your agent can only talk, it can only deflect. The useful version has read access to logs and account state, plus a short list of allowlisted actions it can propose. You can expose those over MCP or a plain HTTPS endpoint.

The MCP spec itself says there should always be a human in the loop who can deny tool invocations, and that clients should prompt for confirmation on sensitive operations. Take that seriously.

3. Let a coding agent fix the class of bug

Once a cluster is tagged, it becomes a task: a coding agent reads the tickets (via CLI or MCP), reproduces the issue with a failing test, fixes it, and updates the docs in the same PR. A human reviews and merges. Your existing CI, canaries and flags still apply.

4. Tell the customer

The step everyone forgets. When the fix ships, every reporter in the cluster gets a message with a link. That's what turns "this app is buggy" into "these people actually fix things."

Worked example: an integration that silently desyncs for one account

This is an illustrative example, simplified from a common class of SaaS integration bug. The code is generic, not any product's real API.

The setup. A SaaS app lets each customer workspace turn on "Sync new leads to CRM." The app stores crmSyncEnabled in its own database and registers a webhook subscription in the customer's CRM through the CRM's GraphQL API. Admins toggle the setting in the app's settings page.

The bug. The CRM provider recently tightened its rate limits. During a bulk settings save, the subscription call gets rate-limited, and the GraphQL response is a 200 with a RATE_LIMITED error in the body. The code only checks res.ok, so the database says true and the CRM has no subscription. No exception, no alert.

The ticket. "New leads stopped showing up in our CRM."

Instance fix. The support agent calls a read-only tool that compares app state with the CRM-side state, then proposes a scoped write. Here's a sketch of both tools with the MCP TypeScript SDK:

import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";
import { z } from "zod";

const server = new McpServer({ name: "sync-app-support", version: "0.1.0" });

// Read-only: safe to call freely. Returns evidence the agent can cite.
server.registerTool(
  "diff_account_settings",
  {
    title: "Compare app settings with the account's CRM integration",
    description: "Read-only. Shows where our DB and the CRM-side subscription disagree.",
    inputSchema: { accountId: z.string().uuid() },
    annotations: { readOnlyHint: true },
  },
  async ({ accountId }) => {
    const diff = await diffSettings(accountId); // your code
    return { content: [{ type: "text", text: JSON.stringify(diff, null, 2) }] };
  }
);

// Write: one account per call, re-applies existing DB values only, audit-logged.
server.registerTool(
  "resync_account_settings",
  {
    title: "Re-apply saved settings to one account",
    description: "Re-registers the CRM subscription from DB values. Requires human approval.",
    inputSchema: { accountId: z.string().uuid(), ticketId: z.string() },
    annotations: { destructiveHint: false, idempotentHint: true },
  },
  async ({ accountId, ticketId }) => {
    await assertApproved(ticketId, "resync_account_settings"); // human said yes
    await rateLimit(`resync:${accountId}`, { max: 3, perHours: 24 });
    const result = await resyncSettings(accountId); // must check the GraphQL errors array
    await audit.log({ ticketId, accountId, action: "resync", result });
    return { content: [{ type: "text", text: JSON.stringify(result) }] };
  }
);

Notice what the write tool can't do: touch more than one account, take arbitrary values, or run without an approval tied to a ticket. One more thing: the spec warns clients to treat annotations as untrusted unless they come from a trusted server. They're hints, not enforcement. The enforcement lives in your handler.

Class fix. Two more customers report the same thing that week, and the cluster gets tagged bug:settings-sync. That tag fires a webhook that turns the cluster into an agent-ready GitHub issue:

// POST /hooks/support-tagged — called by your help desk when a ticket is tagged.
// The payload shape here is hypothetical; adapt it to your help desk's webhooks.
import { Octokit } from "@octokit/rest";
const gh = new Octokit({ auth: process.env.GITHUB_TOKEN });

export async function handler(req: Request) {
  if (!verifySignature(req)) return new Response("bad signature", { status: 401 });
  const { tag, cluster } = await req.json();
  if (!tag.startsWith("bug:")) return new Response("ignored");

  const body = [
    `**Cluster:** ${cluster.id} (${cluster.tickets.length} reports)`,
    `**Accounts:** ${cluster.tickets.map((t) => t.accountId).join(", ")}`,
    `**Summary:** ${cluster.summary}`,
    "",
    "### Agent instructions",
    "1. Read the linked tickets via the support CLI/MCP.",
    "2. Write a failing test that reproduces the report.",
    "3. Fix it, then update any help article that describes this behavior.",
    "4. Open a PR. Do not merge.",
    "",
    ...cluster.tickets.map((t) => `- ${t.url}`),
  ].join("\n");

  await gh.issues.create({
    owner: "acme", repo: "sync-app",
    title: `[support] ${cluster.title}`,
    body,
    labels: ["from-support", "agent-task"],
  });
  return new Response("ok");
}

Point whichever coding agent you use at agent-task issues. In this example, the PR it opens adds a test with a mocked RATE_LIMITED response, makes the subscription writer check the errors array and retry with backoff, and edits the help article that claimed changes "apply instantly." A human merges it. The three reporters get a "fixed, here's what happened" message.

The detection didn't come from telemetry. Every step after detection looks like the self-healing loop you already know.

Guardrails (non-negotiable)

Putting an agent between customers and production means designing for the day it's wrong:

Read first, write rarely. Most of the value comes from read-only tools that pull account state and logs.
Ask before acting. Every write needs an explicit human or customer confirmation tied to a ticket.
Cite sources. An answer or diagnosis should link the article, log line or diff it came from. If it can't cite, it should say so.
Limit the blast radius. One account per call, fixed parameters, rate limits, no bulk operations.
Audit everything. Who approved what, when, with what result.
Humans merge. Coding agents open PRs; they don't push to main or deploy.
Scoped keys. The agent's credentials should only see the tools you intend it to use.

Where Superrelay fits

Full disclosure, this is the problem I'm building for. We built Superrelay to run support for our own software products, and it's shaped around this loop:

One inbox for every product, across chat, email, Slack and in-app, with product-specific knowledge.
An AI agent that cites the article it answered from and can start in draft or supervised mode.
Product actions through an HTTPS endpoint you register. You choose which actions exist and which need customer confirmation.
Docs as code: help-center articles live as Markdown in your GitHub repo. Merging publishes them, and pull requests that change documented behavior get flagged with the affected articles.
A CLI and MCP server, so Claude Code, Cursor, Codex and friends can read conversations (relay list --limit 20 --json) and group recurring issues.
Priced by products and seats, never per ticket, because charging more when your product breaks more is a strange incentive.

To be clear about the limits: Superrelay doesn't autonomously repair or deploy your code. It gives your agents and your team the customer context and safe actions; you connect the steps and review the work.

A checklist you can apply this week

Audit 50 tickets. How many had a matching error event? That gap is your blind spot.
Create five engineering tags for your most common ticket types and use them consistently.
Attach context automatically: account ID, plan, app version, current page.
Write one read-only diagnostic tool, like diff_account_state, that support (human or AI) can run.
Write one safe, scoped, idempotent write action with approval and an audit log.
Check every "success" path. Grep for places you trust a 200 from a GraphQL API without checking errors.
Pipe tagged clusters into GitHub issues with reproduction instructions for your coding agent.
Put docs in the PR template: "Which help article does this change?"
Close the loop: notify every reporter when the fix ships.

Self-healing software isn't a smarter pod restart. It's a feedback loop, and the most honest signal in it is a customer telling you something's wrong. Wire that in, and your product starts fixing the bugs your dashboards never saw.

If you're building this loop yourself, I'd love to hear how you're doing it in the comments. If you'd rather not build the support half from scratch, Superrelay has a free plan.

Canvas-Txt: Multiline Text Magic on HTML5 Canvas

Geon George — Fri, 03 Nov 2023 17:55:06 +0000

As developers, we've often been in situations where we need to render text on a canvas element in HTML5. It could be for a game, a custom chart, or even an advanced animation. But, anyone who's tried this knows that the native canvas API is... a bit limited when it comes to handling text. Enter Canvas-Txt 📐✨, a minuscule, dependency-free library that transforms how we draw text on HTML5 canvas.

What's Canvas-txt?

Canvas-Txt extends the native canvas text rendering capabilities with a set of much-needed features:

Multiline Text: Easily render paragraphs.
Auto Line Breaks: No more manual calculation for breaking lines.
Text Alignment: Supports horizontal, vertical, and even justify alignment.
Debugging Tools: Comes with visual aids to help place your text exactly where you want it.
Performance: It's built for speed, so no more trade-offs between functionality and performance.

See It in Action

Before we dive into the code, take a peek at the live demo here to see what you'll be capable of after this tutorial.

Setting Up

First things first, let's add Canvas-Txt to your project:

yarn add canvas-txt

# Or with npm
npm i canvas-txt

The Basics: Drawing Text

Here's the simplest example to get you started. Add a canvas element to your HTML:

<canvas id="myCanvas" width="500" height="500"></canvas>

Now, let's draw some text on it using Canvas-Txt:

import { drawText } from 'canvas-txt'

const c = document.getElementById('myCanvas')
const ctx = c.getContext('2d')

ctx.clearRect(0, 0, 500, 500)

const txt = 'Lorem ipsum dolor sit amet'

const { height } = drawText(ctx, txt, {
  x: 100,
  y: 200,
  width: 200,
  height: 200,
  fontSize: 24,
})

console.log(`Total height = ${height}`)

When you run this code, you’ll see "Lorem ipsum dolor sit amet" beautifully rendered on the canvas, enclosed in a 200x200px box starting from position (100,200).

Using Canvas-Txt on the Server with Node.js

If you're working in a Node.js environment, you can use Canvas-Txt with node-canvas:

const { createCanvas } = require('canvas')
const { drawText } = require('canvas-txt')
const fs = require('fs')

function main() {
  const canvas = createCanvas(400, 400)
  const ctx = canvas.getContext('2d')
  const txt = 'Hello World!'

  const { height } = drawText(ctx, txt, {
    x: 100,
    y: 200,
    width: 200,
    height: 200,
    fontSize: 24,
  })

  const buffer = canvas.toBuffer('image/png')
  fs.writeFileSync('output.png', buffer)
  console.log(`Total height = ${height}`)
}

main()

With this setup, you can generate images on the server side that include dynamic text content.

Conclusion

And there you have it! Canvas-Txt is a powerful and easy-to-use solution for all your canvas text rendering needs. Whether you’re working on a dynamic web application or generating images on the server side, Canvas-Txt simplifies the process, giving you the ability to focus on creating a great user experience rather than wrestling with text metrics.

To dive even deeper and to learn more about the customization options available, be sure to check out the official Canvas-Txt documentation. With this tool in your development arsenal, you're well-equipped to make your canvas text renderings as simple or sophisticated as your project requires.

Happy coding, and may your text always align perfectly on your canvas!

Multiline Text in HTML Canvas

Geon George — Fri, 14 Jul 2023 17:53:42 +0000

I've recently given a facelift to Canvas-Txt, a project that I initially launched some moons ago. For those not in the know, Canvas-Txt is a teensy-weensy library that does one job, and one job only - render multiline text on your HTML5 Canvas, without hanging on the coattails of any dependencies.

Now, let me show you

https://github.com/geongeorge/Canvas-Txt

Demo

To give you an idea, let me walk you through a simple use-case scenario:

First, install Canvas Txt either via yarn or npm:

yarn add canvas-txt

or

npm i canvas-txt

<canvas id="myCanvas" width="500" height="500"></canvas>

import { drawText } from 'canvas-txt'

const c = document.getElementById('myCanvas')
const ctx = c.getContext('2d')

ctx.clearRect(0, 0, 500, 500)

const txt = 'Lorem ipsum dolor sit amet'

const { height } = drawText(ctx, txt, {
  x: 100,
  y: 200,
  width: 200,
  height: 200,
  fontSize: 24,
})

console.log(`Total height = ${height}`)

And there you have it. Your multiline text, neatly rendered on an HTML canvas.

What's even cooler is that you can do this in Node too! Just have a look at the Node js demo here https://github.com/geongeorge/Canvas-Txt/blob/master/src/node-test.ts

Summing Up

That's pretty much it. With Canvas Txt v4, I've aimed to simplify your journey of handling multiline text in HTML canvas.

Whether you're just dabbling in canvas or are an experienced pro, I hope you'll find Canvas Txt useful.

As always, if you have any suggestions, comments, or just want to give a shout out, hit me up on my Twitter!

My open-source project hit 2k stars

Geon George — Thu, 02 Jul 2020 13:00:23 +0000

Okay, before you go ahead and look: I lied

Let me explain :)

https://iHateRegex.io/ is a project I launched in February this year.
It is basically a regular expression cheat sheet with neat visualizations and explanations for common expressions.

As of writing this article, it has 1,987 stars on GitHub. And it is only a matter of a few hours to reach 2,000:

https://github.com/geongeorge/i-hate-regex/

In my defense, Github did round that number to 2k anyway.

I'm super stoked about this🔥.

But that is not the only reason why I'm writing this article.

(Sorry about the long content. I didn't want to add gifs or unwanted images here)

Some Context

I started working on this in August 2019. This took around half a year to complete.

Now, this might look like a very simple application from outside and I'm not arguing. It is in fact very easy to create.

At the time I had no idea what I was creating. I had no clue what I was aiming for. I had college in the morning and I worked as a freelance developer at night. Also had a few products for which I provided support.

And here I was with a domain - ihateregex.io hoping to make a regular expression cheat sheet with.

To be honest, I didn't even know what I should include, how to present this, and had 100s of questions like this.

Halfway through making this I remember writing this in my blog:

I spend a lot of time on this. But as I was nearing the launch, my old pal Imposter Syndrome kicked in. I felt it wasn’t worth my effort and that I’m gonna be made fun of because of how useless it is. - from my blog

I felt like an imposter, I'm not a regular expression expert myself, People would make fun of how stupid the domain was.

One month had passed after writing the above blog.

One day, mustering up some courage I just decided to release this on product hunt.

The Launch

Here I was, hunting my first product in product hunt. I asked a few friends for advice and decided to press the submit button. I shared this with a few friends and told them to try this product.

PEOPLE LOVED IT!

I was getting upvotes left and right.
This was getting shared everywhere.
I posted this on hacker news and I woke up the next day to see it's already #3 on hacker news.
This ended up becoming the number #2 Product of the day on product hunt.

I shared this on Dev.to and people started buying me coffee and got lots of amazing feedback :)

I even got sponsorship from the amazing people at Datree

Today

Skip to today and the product has (almost) 2k stars on Github.
People are submitting expressions, many have bookmarked this as their goto regex tool.

If you have something in your mind just make it. Give to the world the things you make and you never know what will happen.
The problem (I think) is we all try to predict the future. With all our biases and fears we end up choosing the path more traveled. the safe path. And if that is a good or bad choice is up to you.

Make sure to give me a follow on twitter.

I tweet about my journey as a maker:

https://twitter.com/geongeorgek/

Thank you for reading :)

Lazy Load Images in 2 seconds

Geon George — Fri, 05 Jun 2020 12:09:33 +0000

The Story

I have this internal tool for some purpose. Now, this has a page where it displays like 50+ images grid in smaller sizes.
The page always load very slow and I hated it.

So We can solve this by properly generating smaller thumbnails of the images and/or lazy loading the images.

This isn't really isn't used by anyone else other than me. So I decided to skip the thumbnail part and add 2 lines of js to lazy load the hack out of these stupid images.

Then I stumbled upon something I completely forgot that existed.

loading="lazy"

<img src="..." loading="lazy" />

That's pretty much everything you need to make your images lazy load.

Now this is an HTML5 Feature and probably might not be supported by every browser out there.
It might not bring fancy animations and fade transitions onto the table

But IT WORKS!!

The previous webpage is atleast 3 times as fast.

TL;DR

Use the loading attribute in HTML

<img src="..." loading="lazy" />

Update

You definitely should not use it in anything important.
You need a polyfill to get it work on all browsers.
Read my story and see why I used it.

I Made an NPM Package to Render text on HTML5 Canvas

Geon George — Sun, 26 Apr 2020 05:09:25 +0000

Rendering text onto HTML5 Canvases has always been a hassle for me.

The Problem

There was no proper way to align text, to wrap words if it overflows and even to properly position text without knowing the contents of the text.

Larger packages had this feature but I didn't wanna import a whole canvas library just to render some text.

Enter Canvas-Txt

I made a library called Canvas-Txt, which will let you render textboxes to html canvases and has all sorts of aligning and multi-line features

I created this for myself and it grew with some community help. This package was released to NPM and has some weekly downloads now.

I added some major changes and just released V2 of this.

Features

Multiline text
Auto line breaks
Horizontal Align
Vertical Align
Easy Debugging

URLs

Github: https://github.com/geongeorge/canvas-txt

Demo: http://canvas-txt.geongeorge.com/

Looking for contributors for iHateRegex.io <3

Geon George — Sat, 01 Feb 2020 17:08:13 +0000

This community made me to launch iHateRegex.io in product hunt and hacker news. 🙏

it turned out really well:

topped a lot of subreddits.
#3 on hacker news 😮
#2 on product hunt 😍
a lot of retweets on Twitter
100s of bookmarks

I did a lot of updates in the last few hours.

It seems to be gaining small traction on GitHub as well,

I'm inviting anybody who would like to contribute to this amazing project:
😻👉
https://github.com/geongeorge/i-hate-regex/

The project is build using Nuxt.js (based on Vue.js)
It runs entirely on Javascript (Server-side Rendering)

Launched iHateregex.io in Producthunt

Geon George — Fri, 31 Jan 2020 09:00:16 +0000

I just launched iHateRegex on product hunt:
👉👉
https://www.producthunt.com/posts/i-hate-regex
❤
Thanks to everyone in this community who motivated me to do this

See my previous post about the tool: https://dev.to/geongeorge/i-hated-regex-so-much-that-i-made-ihateregex-io-1ih4

I hated Regex so much that I made iHateRegex.io

Geon George — Fri, 31 Jan 2020 04:10:40 +0000

In years of being a developer I never really spent the time to learn regular expressions. It always seemed like a hard nut to crack.

I used to spend so much time trying to find regular expressions for my use case.

now you have two problems

Enter iHateRegex.io

https://iHateRegex.io

I made a simple tool that will explain to you commonly used regular expressions work.

It is a simple tool that will show a visual graph as well as matches and highlighting for code.

Hope you like the tool :D

Tech

Public Repo: https://github.com/geongeorge/i-hate-regex

The application is built using:

The awesome Nuxt.js framework
Tailwind.css
for the visual demo I used: https://gitlab.com/javallone/regexper-static

Update

Thank you for all the love and support guys 💓 Posting this has given me enough motivation to work on this more.
The application is just an MVP right now. With the support of everyone, I can make this into a great project for beginners.
I'm also working on tutorial pages to get started on regex. here's a sample

Producthunt launch

I just launched iHateRegex on Producthunt 😺

👉👉
https://www.producthunt.com/posts/i-hate-regex

Building a regex learn-by-examples web application

Geon George — Thu, 29 Aug 2019 01:12:24 +0000

I'm building a regex "commonly used" library which includes an explanation for each of the expressions.

I did not find a good alternative other than this ancient-looking website: http://regexlib.com/

Dumb me did not realize until the halfway completion of the application that there are multiple flavors for regex.
I can only show examples and process js expressions. Should I ditch the idea? or complete it even if it's shitty?