<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Meghshyam Sonar</title>
    <description>The latest articles on DEV Community by Meghshyam Sonar (@meghshyams).</description>
    <link>https://dev.to/meghshyams</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F521039%2Fcfe50e77-2b56-4de6-9084-5b00125eaba2.png</url>
      <title>DEV Community: Meghshyam Sonar</title>
      <link>https://dev.to/meghshyams</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/meghshyams"/>
    <language>en</language>
    <item>
      <title>I replaced console.log with a real-time error dashboard that runs on localhost</title>
      <dc:creator>Meghshyam Sonar</dc:creator>
      <pubDate>Thu, 05 Mar 2026 00:14:59 +0000</pubDate>
      <link>https://dev.to/meghshyams/i-replaced-consolelog-with-a-real-time-error-dashboard-that-runs-on-localhost-342a</link>
      <guid>https://dev.to/meghshyams/i-replaced-consolelog-with-a-real-time-error-dashboard-that-runs-on-localhost-342a</guid>
      <description>&lt;p&gt;Last month I caught myself doing this in a Next.js project:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;HERE 1&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;HERE 2&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;value is&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;value&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;why is this undefined???&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Five &lt;code&gt;console.log&lt;/code&gt; statements just to track down one failed fetch. The terminal was a wall of noise. I couldn't tell which error came from the frontend and which from the backend. And when I finally found the bug, I deleted all the logs and knew I'd be doing the exact same thing tomorrow.&lt;/p&gt;

&lt;p&gt;I've used Sentry at work. It's great for production. But for local development? I'm not spinning up 20 Docker containers and paying $26/month just to see my errors in a nice UI while I'm building stuff on localhost.&lt;/p&gt;

&lt;p&gt;So I built ErrPulse.&lt;/p&gt;

&lt;h2&gt;
  
  
  What it does
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fpp69e9bciq8u3gy2w3cn.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fpp69e9bciq8u3gy2w3cn.png" alt=" " width="800" height="450"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;One command:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;npx errpulse
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;That's it. You get a server and a real-time dashboard at &lt;code&gt;localhost:3800&lt;/code&gt;. No account, no config file, no Docker, no cloud service. It runs entirely on your machine with a local SQLite database.&lt;/p&gt;

&lt;p&gt;Then you wire up your app:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Backend (Node.js/Express):&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;npm &lt;span class="nb"&gt;install&lt;/span&gt; @errpulse/node
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;





&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;@errpulse/node&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;That single import catches uncaught exceptions, unhandled promise rejections, and &lt;code&gt;console.error&lt;/code&gt; calls automatically. If you're using Express, you can add middleware to track HTTP requests and route errors too.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Frontend (React):&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;npm &lt;span class="nb"&gt;install&lt;/span&gt; @errpulse/react
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;





&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight tsx"&gt;&lt;code&gt;&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;ErrPulseProvider&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;@errpulse/react&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;App&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="k"&gt;return &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;
    &lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nc"&gt;ErrPulseProvider&lt;/span&gt; &lt;span class="na"&gt;endpoint&lt;/span&gt;&lt;span class="p"&gt;=&lt;/span&gt;&lt;span class="s"&gt;"http://localhost:3800"&lt;/span&gt; &lt;span class="na"&gt;projectId&lt;/span&gt;&lt;span class="p"&gt;=&lt;/span&gt;&lt;span class="s"&gt;"my-app"&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
      &lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nc"&gt;YourApp&lt;/span&gt; &lt;span class="p"&gt;/&amp;gt;&lt;/span&gt;
    &lt;span class="p"&gt;&amp;lt;/&lt;/span&gt;&lt;span class="nc"&gt;ErrPulseProvider&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
  &lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This catches runtime errors, React component crashes, failed fetch requests, resource load failures, and console errors. All of it shows up in the dashboard instantly over WebSocket.&lt;/p&gt;

&lt;h2&gt;
  
  
  The part I'm most proud of
&lt;/h2&gt;

&lt;p&gt;When you click on an error in the dashboard, you don't just get a stack trace. You get a plain-English explanation of what went wrong and a suggestion for how to fix it.&lt;/p&gt;

&lt;p&gt;For example, if you get &lt;code&gt;ECONNREFUSED 127.0.0.1:5432&lt;/code&gt;, it doesn't just show you the raw error. It tells you "The app tried to connect to PostgreSQL on port 5432 but nothing is listening there. Check that your database server is running."&lt;/p&gt;

&lt;p&gt;There are 46 built-in error patterns covering the stuff we all hit regularly — CORS issues, React hooks called outside components, undefined property access, connection failures, JWT problems, and so on.&lt;/p&gt;

&lt;h2&gt;
  
  
  Frontend + Backend correlation
&lt;/h2&gt;

&lt;p&gt;This was the feature that made me actually want to use this thing daily. The React SDK injects a correlation ID header (&lt;code&gt;X-ErrPulse-Correlation-ID&lt;/code&gt;) into every fetch request. The Node SDK picks it up on the backend. So when something breaks, the dashboard shows you the full chain:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;User clicks button -&amp;gt; Frontend sends request -&amp;gt; Backend throws error&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;All linked together. No more switching between browser console and terminal trying to match up which request caused which error.&lt;/p&gt;

&lt;h2&gt;
  
  
  Multi-project support
&lt;/h2&gt;

&lt;p&gt;If you're working on a monorepo or running multiple services locally, you can point them all at the same ErrPulse instance with different &lt;code&gt;projectId&lt;/code&gt; values. The dashboard has a project selector to filter between them.&lt;/p&gt;

&lt;h2&gt;
  
  
  What it's NOT
&lt;/h2&gt;

&lt;p&gt;I want to be upfront about this — ErrPulse is a local development tool. It's not trying to replace Sentry or Datadog for production monitoring. There's no cloud, no team features, no alerting, no retention policies.&lt;/p&gt;

&lt;p&gt;It's meant to sit next to your other dev tools and give you a better debugging experience than staring at &lt;code&gt;console.log&lt;/code&gt; output in a terminal.&lt;/p&gt;

&lt;h2&gt;
  
  
  The stack
&lt;/h2&gt;

&lt;p&gt;For anyone curious about the internals:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Monorepo&lt;/strong&gt; with 5 packages (core, server, node SDK, react SDK, CLI)&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Express&lt;/strong&gt; server with SQLite (WAL mode for concurrent reads/writes)&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;React + Tailwind&lt;/strong&gt; dashboard with WebSocket for real-time updates&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Error fingerprinting&lt;/strong&gt; using SHA-256 hashes so duplicate errors get grouped&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;PII sanitization&lt;/strong&gt; strips auth headers, passwords, tokens before storing&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;SDK batching&lt;/strong&gt; buffers events for 100ms or 10 events to reduce network calls&lt;/li&gt;
&lt;li&gt;SDKs are designed to never crash your app — all internal errors are swallowed&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Try it
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;npx errpulse
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Then open &lt;code&gt;localhost:3800&lt;/code&gt; and add the SDK to whatever you're working on. Takes about 2 minutes.&lt;/p&gt;

&lt;p&gt;GitHub: &lt;a href="https://github.com/Meghshyams/ErrPulse" rel="noopener noreferrer"&gt;github.com/Meghshyams/ErrPulse&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;If you find it useful, a star would mean a lot. And if you run into issues or have ideas, open an issue — I'm actively working on this.&lt;/p&gt;

</description>
      <category>node</category>
      <category>react</category>
      <category>javascript</category>
      <category>opensource</category>
    </item>
  </channel>
</rss>
