<?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>Forem: Mark Kaave</title>
    <description>The latest articles on Forem by Mark Kaave (@mark_kaave).</description>
    <link>https://forem.com/mark_kaave</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%2F3647207%2F33d89611-46f3-4272-b579-9d5dd86cced5.jpeg</url>
      <title>Forem: Mark Kaave</title>
      <link>https://forem.com/mark_kaave</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://forem.com/feed/mark_kaave"/>
    <language>en</language>
    <item>
      <title>My small saas got recommended my Google in the AI search overview</title>
      <dc:creator>Mark Kaave</dc:creator>
      <pubDate>Mon, 02 Feb 2026 16:18:12 +0000</pubDate>
      <link>https://forem.com/mark_kaave/my-small-saas-got-recommended-my-google-in-the-ai-search-overview-3ipa</link>
      <guid>https://forem.com/mark_kaave/my-small-saas-got-recommended-my-google-in-the-ai-search-overview-3ipa</guid>
      <description>&lt;p&gt;okay, so this is not so big to many of you , but today , i was just bored and tired of doing any marketing , cos nothing seemed to have been working. so i decided to do a search (i searched for quite a number of keywords) like error tracking for supabase , error tracking for next Js , but my saas didnt rank (if you dont know what im building , im working on a dead simple error tracker that notifies you when something breaks in prod, no bloated dashboards or config hell) , i built this cos sentry had too much  noise and i just wanted something that lets me know when there's an issue in prod.&lt;/p&gt;

&lt;p&gt;so i decided to do a search on "error tracking for shipfast(by marc lou)" and guess what ?? Bugmail was the first recommended result , now i dont know how this worked, i mean ive done some seo and stuff but i wasnt expecting it , and now i feel like im back , which is funny cos i didnt make a sale , i didnt onboard a new user yet i feel like o have conquered , life of a founder , i guess &lt;/p&gt;

&lt;p&gt;i just wanted to share this here, also if you have any advice on how to rank higher on GSC and how to nail this marketing thing , any advice or feedback will be valuable &lt;/p&gt;

&lt;p&gt;in the meantime , incase you want to check out what ive built;&lt;/p&gt;

&lt;p&gt;you can see it here &lt;a href="https://www.bugmail.site" rel="noopener noreferrer"&gt;bugmail&lt;br&gt;
&lt;/a&gt;&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>buildinpublic</category>
      <category>discuss</category>
      <category>learning</category>
    </item>
    <item>
      <title>The "Vibecoding" Prompt Cheat Sheet</title>
      <dc:creator>Mark Kaave</dc:creator>
      <pubDate>Mon, 19 Jan 2026 09:30:16 +0000</pubDate>
      <link>https://forem.com/mark_kaave/the-vibecoding-prompt-cheat-sheet-4g8l</link>
      <guid>https://forem.com/mark_kaave/the-vibecoding-prompt-cheat-sheet-4g8l</guid>
      <description>&lt;p&gt;Stop manually adding error boundaries. Use these prompts with &lt;strong&gt;Cursor (.cursorrules)&lt;/strong&gt;, &lt;strong&gt;Replit Agent&lt;/strong&gt;, or &lt;strong&gt;Claude&lt;/strong&gt; to automate your BugMail integration.&lt;/p&gt;




&lt;h2&gt;
  
  
  1. The "Global Safety Net" (For Cursor/Replit)
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;Goal&lt;/strong&gt;: Wrap every API route with BugMail error reporting.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;"Review all files in &lt;code&gt;/app/api&lt;/code&gt; (or &lt;code&gt;/pages/api&lt;/code&gt;). For every route, ensure there is a try/catch block. If an error is caught, use &lt;code&gt;@bugmail-js/next&lt;/code&gt; to &lt;code&gt;captureServerError(error)&lt;/code&gt;. Make sure to include relevant context like the route path and request method. If a route doesn't have a try/catch, add one now."&lt;/p&gt;
&lt;/blockquote&gt;

&lt;h2&gt;
  
  
  2. The "UI Defense" (For React/Next.js)
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;Goal&lt;/strong&gt;: Catch frontend crashes in interactive components.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;"Add a global React Error Boundary to my main layout using &lt;code&gt;@bugmail-js/next&lt;/code&gt;. Additionally, scan my &lt;code&gt;/components&lt;/code&gt; folder. For any component that handles user input or complex state, add a localized &lt;code&gt;try/catch&lt;/code&gt; that reports to BugMail without breaking the UI flow."&lt;/p&gt;
&lt;/blockquote&gt;

&lt;h2&gt;
  
  
  3. The "Silent 500" Hunter (For Vercel users)
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;Goal&lt;/strong&gt;: Catch unhandled server crashes that normally show a blank screen.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;"Create an &lt;code&gt;app/error.tsx&lt;/code&gt; file that uses &lt;code&gt;createAppRouterErrorHandler&lt;/code&gt; from BugMail. This file should report the crash and show a user-friendly 'Our team has been notified' message instead of the generic Vercel 500 page."&lt;/p&gt;
&lt;/blockquote&gt;

&lt;h2&gt;
  
  
  4. The "Prompt Secret" for your &lt;code&gt;.cursorrules&lt;/code&gt;
&lt;/h2&gt;

&lt;p&gt;Add this to your &lt;code&gt;.cursorrules&lt;/code&gt; to ensure AI always writes safe code:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;- ALWAYS include BugMail error reporting in any new API route logic.
- NEVER leave a catch block empty. 
- ALWAYS use `captureServerError` for backend and `captureError` for frontend logic.
- Use context tags like { feature: "[feature name]" } to make errors easier to find in the inbox.
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;p&gt;&lt;strong&gt;Ship fast, but don't ship blind.&lt;/strong&gt;&lt;br&gt;
&lt;a href="https://bugmail.site" rel="noopener noreferrer"&gt;Get your API Key at bugmail.site&lt;/a&gt;&lt;/p&gt;

</description>
      <category>ai</category>
      <category>claude</category>
      <category>cursorai</category>
      <category>debugging</category>
    </item>
    <item>
      <title>Why my friend's Supabase app went silent during its first 1,000 users (and how we found the "Silent 500")</title>
      <dc:creator>Mark Kaave</dc:creator>
      <pubDate>Sat, 17 Jan 2026 12:52:00 +0000</pubDate>
      <link>https://forem.com/mark_kaave/why-my-friends-supabase-app-went-silent-during-its-first-1000-users-and-how-we-found-the-silent-1ddd</link>
      <guid>https://forem.com/mark_kaave/why-my-friends-supabase-app-went-silent-during-its-first-1000-users-and-how-we-found-the-silent-1ddd</guid>
      <description>&lt;p&gt;Last week, a developer friend of mine reached out with a problem that most indie hackers would kill for, but is actually a nightmare when you're in the middle of it, (literally lol).&lt;/p&gt;

&lt;p&gt;He had built a fairly simple SaaS, a tool for managing local sports leagues. He used &lt;strong&gt;Supabase&lt;/strong&gt; because it’s the default choice for anyone building with Next.js these days. It’s fast, the documentation is great, and you don't have to worry about managing a Postgres instance yourself.&lt;/p&gt;

&lt;p&gt;He did a soft launch. No massive social media campaign, just some local outreach and a post in a few niche forums. Within 48 hours, he hit his first 1,000 active users, and this was insane, even i didnt hit 1000 users in 48 hours(on supabase free tier , this is something).&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Then the "ghost bugs" started.&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;He messaged me on Wednesday afternoon. Users were starting to complain that the app was slow, but when he checked his Vercel logs, everything looked fine. His Supabase dashboard showed some spikes in CPU, but nothing that suggested a total system failure.&lt;/p&gt;

&lt;p&gt;But for a significant chunk of his users, the "Leagues" dashboard was just... empty. No error message. No "Try again later." Just a loading spinner that eventually timed out into nothingness(white screen of death as i like to call it ).&lt;/p&gt;

&lt;p&gt;He couldn't reproduce it on his own machine cos it worked. typical "it works on my machine" vibe&lt;/p&gt;

&lt;p&gt;We spent the evening digging into it. It wasn't a code bug in his React components. It wasn't a logic error in his RLS (Row Level Security) policies.&lt;/p&gt;

&lt;p&gt;It was &lt;strong&gt;Connection Pool Exhaustion&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;When you're starting out with Supabase, it’s easy to use the direct connection string. But as your traffic grows, every visitor who lands on your site opens a direct connection to PostgreSQL. Databases have a finite number of connection slots. Once they are full, the database starts dropping new requests.&lt;/p&gt;

&lt;p&gt;Because his app was using standard &lt;code&gt;async/await&lt;/code&gt; calls in the frontend, the browser was waiting for a response that the Supabase gateway was never sending. The requests were timing out &lt;em&gt;before&lt;/em&gt; they even reached his application logic.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;To his monitoring tools, it looked like a "slow network." To his users, the app was broken.&lt;/strong&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Why Traditional Logs Fail During Scaling
&lt;/h2&gt;

&lt;p&gt;Here is the hard truth about building on a "BaaS" (Backend-as-a-Service): &lt;strong&gt;You are often blind to the infra-level failures.&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;If your database is too busy to accept a connection, your server-side logs won't show anything because the request never made it to your server! It's a "Silent 500" a failure at the gateway level that leaves no trace in your application logs.&lt;/p&gt;

&lt;p&gt;If you don't have &lt;strong&gt;Client-Side Visibility&lt;/strong&gt;, you have no idea why your users are leaving.&lt;/p&gt;

&lt;h2&gt;
  
  
  Moving Beyond "Soft Launches"
&lt;/h2&gt;

&lt;p&gt;My friend had made the mistake of assuming that "Serverless" meant "Infinite." But every database even a managed one like Supabase has physical limits.&lt;/p&gt;

&lt;p&gt;We fixed it by doing two things:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Switching to the Supabase connection pooler (Supavisor).&lt;/li&gt;
&lt;li&gt;Adding a client-side "Safety Net" to track what users were actually seeing.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;He didn't want a complex observability platform. He's a solo founder; he doesn't have time to stare at Grafana charts all day. He just wanted to know the second a database query failed.&lt;/p&gt;

&lt;p&gt;We added &lt;a href="https://bugmail.site" rel="noopener noreferrer"&gt;BugMail&lt;/a&gt; to his project. It took about 60 seconds to drop into his &lt;code&gt;layout.tsx&lt;/code&gt;. &lt;br&gt;
Now, instead of guessing why a user is seeing an empty dashboard, he gets an email with the exact Postgres error code. &lt;/p&gt;

&lt;p&gt;here is the setup we used to ensure he never ships blind again:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;strong&gt;Auth Context&lt;/strong&gt;: We used BugMail's &lt;code&gt;setUser&lt;/code&gt; inside the Supabase &lt;code&gt;onAuthStateChange&lt;/code&gt; listener. If an error happens, we know exactly which user is affected.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Query Errors&lt;/strong&gt;: Every call to &lt;code&gt;supabase.from()&lt;/code&gt; now checks the &lt;code&gt;error&lt;/code&gt; object and reports it to BugMail. This captures the "Gateway Timeouts" and "Rate Limits" that standard logs miss.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;User Breadcrumbs&lt;/strong&gt;: We track the user's journey. "User clicked 'View Stats'" → "Supabase Query Started" → "Error: Pool Exhausted".&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;then on friday (literally just 2 days after ), we caught a weird RLS mismatch that only happened for users in specific time zones. We saw it in the BugMail dashboard within minutes of it happening. We fixed it before the user even had time to send a support email.&lt;/p&gt;

&lt;h2&gt;
  
  
  The Lesson for Every Builder
&lt;/h2&gt;

&lt;p&gt;If you're building with Supabase, don't wait for your friends to tell you your app is broken. Databases are physical things, and "Serverless" is just someone else's server.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Infrastructure fails. Your job is to make sure you hear the failure before your users do.&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;I wrote a massive, high-depth technical guide on the exact technical setup we used to monitor Supabase accurately here: &lt;a href="https://bugmail.site/blog/supabase-errors" rel="noopener noreferrer"&gt;The Complete Guide to Supabase Production Monitoring&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Stop guessing. Start monitoring.&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;&lt;em&gt;I’m building BugMail to help indie hackers scale without fear. Follow the journey at &lt;a href="https://bugmail.site" rel="noopener noreferrer"&gt;bugmail.site&lt;/a&gt;.&lt;/em&gt;&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>programming</category>
      <category>javascript</category>
      <category>database</category>
    </item>
    <item>
      <title>I Built a SaaS in 2 Hours with Replit Agent—Then the "Silent 500s" Started (Here's How I Fixed It)</title>
      <dc:creator>Mark Kaave</dc:creator>
      <pubDate>Thu, 08 Jan 2026 09:43:15 +0000</pubDate>
      <link>https://forem.com/mark_kaave/i-built-a-saas-in-2-hours-with-replit-agent-then-the-silent-500s-started-heres-how-i-fixed-it-3ldc</link>
      <guid>https://forem.com/mark_kaave/i-built-a-saas-in-2-hours-with-replit-agent-then-the-silent-500s-started-heres-how-i-fixed-it-3ldc</guid>
      <description>&lt;p&gt;If you haven’t tried &lt;strong&gt;Replit Agent&lt;/strong&gt; yet, you’re missing out on the pure dopamine hit of "vibecoding." &lt;/p&gt;

&lt;p&gt;I literally typed &lt;em&gt;"Build me a subscription-based habit tracker,"&lt;/em&gt; watched the AI spin up a Postgres DB, handle auth, and deploy the whole thing, and 2 hours later, I was live. I felt like a god.&lt;/p&gt;

&lt;p&gt;Then i asked my friend to try it out (dev friend btw). And that’s when the vibe died lol .&lt;/p&gt;

&lt;p&gt;i realized that vibecoding is great until it isn't. When you build an app with an AI agent, you don't always know &lt;em&gt;exactly&lt;/em&gt; how the error handling is structured. You just know it "works" on your machine.&lt;/p&gt;

&lt;p&gt;But in production? Replit apps can be a black box. &lt;/p&gt;

&lt;p&gt;I got a dm from my friend saying : &lt;em&gt;"Hey, the app just spins forever when I try to save a habit."&lt;/em&gt; &lt;/p&gt;

&lt;p&gt;I checked the Replit Console. Nothing. Standard &lt;code&gt;POST /api/habits 500&lt;/code&gt;. No stack trace. No reason. No clue why the AI-generated code was failing for that specific user. i was in confusion honestly &lt;br&gt;
If you’re trying to build a "ShipFast" style micro-SaaS, your biggest enemy isn't competition it's &lt;strong&gt;trust&lt;/strong&gt;. &lt;br&gt;
If a user hits a white screen on their first try, they aren't going to email you for support. They’re just going to close the tab and never come back. ive been here trust me&lt;br&gt;
so  i knew i need a way to track errors in production, &lt;br&gt;
some users(most users wont come back ) they'd just leave , so i needed a way to find out the bug they hit and how they hit the bug (and the users context , so i can circle back )&lt;/p&gt;

&lt;p&gt;needed something that took 0 effort to set up (because if I'm vibecoding, I'm not in the mood for a 4-hour Sentry configuration).&lt;/p&gt;

&lt;p&gt;That’s when I dropped &lt;strong&gt;BugMail&lt;/strong&gt; into my Replit project.&lt;/p&gt;

&lt;p&gt;It took me exactly &lt;strong&gt;60 seconds&lt;/strong&gt; to set up. I didn't even have to understand the code the Agent wrote. I just told the Agent: &lt;em&gt;"Add BugMail error tracking to every API route and send me an email if anything breaks."&lt;/em&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  Here is the prompt I used:
&lt;/h3&gt;

&lt;blockquote&gt;
&lt;p&gt;"Install @bugmail-js/next. Wrap all existing try/catch blocks in my API routes to report errors using BugMail. Use my API Key and Project ID from secrets. If a crash happens, I want the full stack trace in my inbox immediately."&lt;/p&gt;
&lt;/blockquote&gt;

&lt;h2&gt;
  
  
  The Result: Real-Time Debugging
&lt;/h2&gt;

&lt;p&gt;The next time a "Silent 500" happened, I didn't have to hunt through messy streaming logs. &lt;/p&gt;

&lt;p&gt;I got an instant notification. I opened the BugMail dashboard which is literally an inbox and there it was.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;The Bug&lt;/strong&gt;: A missing database constraint that the AI forgot to add.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;The Context&lt;/strong&gt;: The exact user ID and the data they were trying to save.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;The Fix&lt;/strong&gt;: BugMail’s AI summarized the error in plain English: &lt;em&gt;"Hey, your Postgres table 'habits' is missing a 'user_id' column for this specific query."&lt;/em&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;I fixed it in 30 seconds, pushed the update, and the "vibes" were back.&lt;/p&gt;

&lt;h2&gt;
  
  
  Stop Guessing. Start Shipping.
&lt;/h2&gt;

&lt;p&gt;If you’re building with Replit Agent, Cursor, or v0, you are moving at 100mph. Don't let a silent error at 2 AM kill your launch. &lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;2-Minute Setup&lt;/strong&gt;: Zero config bloat.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Email First&lt;/strong&gt;: Catch bugs where you actually live.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;AI-Powered&lt;/strong&gt;: Let the AI explain the AI's mistakes.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;You can try it for free at &lt;a href="https://bugmail.site" rel="noopener noreferrer"&gt;bugmail.site&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;Now go back to vibecoding. I've got your back hehe.&lt;/p&gt;

</description>
    </item>
    <item>
      <title>The Vercel "Silent 500": How to Actually See Your Production Errors (In Under 2 Minutes)</title>
      <dc:creator>Mark Kaave</dc:creator>
      <pubDate>Tue, 06 Jan 2026 21:01:26 +0000</pubDate>
      <link>https://forem.com/mark_kaave/the-vercel-silent-500-how-to-actually-see-your-production-errors-in-under-2-minutes-dp3</link>
      <guid>https://forem.com/mark_kaave/the-vercel-silent-500-how-to-actually-see-your-production-errors-in-under-2-minutes-dp3</guid>
      <description>&lt;p&gt;You know that feeling. You just pushed to production. Your CI/CD is green. You're feeling like a rockstar.&lt;/p&gt;

&lt;p&gt;Then you test your live site, click a button, and... &lt;/p&gt;

&lt;p&gt;&lt;strong&gt;"500: INTERNAL_SERVER_ERROR"&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Blank white screen. No stack trace. No clues. Just you, your browser, and a generic Vercel error page that basically says, &lt;em&gt;"Something broke, but I'm not telling you what."&lt;/em&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  The "Security vs. Sanity" Tradeoff
&lt;/h2&gt;

&lt;p&gt;Vercel is built for security. In production, it intentionally hides error details to prevent leaking sensitive info (like your database strings or API keys) to the public. &lt;/p&gt;

&lt;p&gt;That’s great for security, but it's a nightmare for debugging. &lt;/p&gt;

&lt;p&gt;To see what actually happened, you have to:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Log into Vercel.&lt;/li&gt;
&lt;li&gt;Find the right project.&lt;/li&gt;
&lt;li&gt;Click "Logs."&lt;/li&gt;
&lt;li&gt;Hope the streaming logs didn't already flush the error away.&lt;/li&gt;
&lt;li&gt;Sift through thousands of lines of &lt;code&gt;GET /_next/static/...&lt;/code&gt; to find the one red line.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;If you’re lucky, you find it. If you’re not or if the error happened while you were at the gym it’s effectively gone.&lt;/p&gt;

&lt;h2&gt;
  
  
  I tried the "Enterprise" tools...
&lt;/h2&gt;

&lt;p&gt;I looked at Sentry and Rollbar. They are powerful, don't get me wrong. But setting them up feels like a weekend project. &lt;/p&gt;

&lt;p&gt;I don't want to spend 3 hours configuring "Inbound Filters," mapping source maps, and managing a "monitoring stack" for a side project I'm building by myself or with a tiny team.&lt;/p&gt;

&lt;p&gt;I just want to know &lt;strong&gt;why my app crashed&lt;/strong&gt; and &lt;strong&gt;how to fix it.&lt;/strong&gt; Preferably via email so I don't have to live in another dashboard.&lt;/p&gt;

&lt;h2&gt;
  
  
  The 120-Second Fix: BugMail
&lt;/h2&gt;

&lt;p&gt;I found &lt;strong&gt;BugMail&lt;/strong&gt;, and it changed how I ship Next.js apps. It’s an error tracker designed for speed. No complex charts but just an inbox for your bugs.&lt;/p&gt;

&lt;p&gt;Here is how I set it up in exactly 2 minutes:&lt;/p&gt;

&lt;h3&gt;
  
  
  1. Install the SDK
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;pnpm add @bugmail-js/next
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  2. Add Your Keys
&lt;/h3&gt;

&lt;p&gt;Add your API keys to Vercel or your &lt;code&gt;.env.production&lt;/code&gt;:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="nv"&gt;NEXT_PUBLIC_BUGMAIL_API_KEY&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;your_key
&lt;span class="nv"&gt;NEXT_PUBLIC_BUGMAIL_PROJECT_ID&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;your_id
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  3. The "Catch-All" Error Boundary
&lt;/h3&gt;

&lt;p&gt;In Next.js App Router, you can create a global &lt;code&gt;app/error.tsx&lt;/code&gt; file. This is the magic spot that catches every unhandled crash in your UI.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="c1"&gt;// app/error.tsx&lt;/span&gt;
&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;use client&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;useEffect&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="s1"&gt;react&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;createAppRouterErrorHandler&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="s1"&gt;@bugmail-js/next&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;reportError&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;createAppRouterErrorHandler&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt;
  &lt;span class="na"&gt;apiKey&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;process&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;env&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;NEXT_PUBLIC_BUGMAIL_API_KEY&lt;/span&gt;&lt;span class="o"&gt;!&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="na"&gt;projectId&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;process&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;env&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;NEXT_PUBLIC_BUGMAIL_PROJECT_ID&lt;/span&gt;&lt;span class="o"&gt;!&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="na"&gt;baseUrl&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;https://api.bugmail.site&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;
&lt;span class="p"&gt;});&lt;/span&gt;

&lt;span class="k"&gt;export&lt;/span&gt; &lt;span class="k"&gt;default&lt;/span&gt; &lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;Error&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt; &lt;span class="nx"&gt;error&lt;/span&gt; &lt;span class="p"&gt;}:&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nl"&gt;error&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nb"&gt;Error&lt;/span&gt; &lt;span class="p"&gt;})&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nf"&gt;useEffect&lt;/span&gt;&lt;span class="p"&gt;(()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="c1"&gt;// Send the crash report instantly&lt;/span&gt;
    &lt;span class="nf"&gt;reportError&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;error&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
  &lt;span class="p"&gt;},&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;error&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="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;div&lt;/span&gt; &lt;span class="nx"&gt;className&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;flex flex-col items-center justify-center min-h-screen&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;
      &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;h2&lt;/span&gt; &lt;span class="nx"&gt;className&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;text-2xl font-bold&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;&lt;span class="nx"&gt;Something&lt;/span&gt; &lt;span class="nx"&gt;went&lt;/span&gt; &lt;span class="nx"&gt;wrong&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/h2&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;      &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;p&lt;/span&gt; &lt;span class="nx"&gt;className&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;text-white/60&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;&lt;span class="nx"&gt;The&lt;/span&gt; &lt;span class="nx"&gt;developer&lt;/span&gt; &lt;span class="nx"&gt;has&lt;/span&gt; &lt;span class="nx"&gt;been&lt;/span&gt; &lt;span class="nf"&gt;notified &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;via&lt;/span&gt; &lt;span class="nx"&gt;email&lt;/span&gt;&lt;span class="o"&gt;!&lt;/span&gt;&lt;span class="p"&gt;).&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/p&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;    &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/div&lt;/span&gt;&lt;span class="err"&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;h2&gt;
  
  
  The Result: No More Log Digging
&lt;/h2&gt;

&lt;p&gt;Now, when my Vercel app hits a 500, I don't go hunting for logs. &lt;/p&gt;

&lt;p&gt;I get an instant email. The BugMail dashboard looks like &lt;strong&gt;Gmail&lt;/strong&gt;. I open it up and see:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;The full stack trace.&lt;/li&gt;
&lt;li&gt;The exact URL where it happened.&lt;/li&gt;
&lt;li&gt;The user's device/browser info.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;An AI-generated summary&lt;/strong&gt; that tells me exactly what the issue is in plain English.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;I fix the bug, archive the "email" in my BugMail inbox, and get back to building features.&lt;/p&gt;

&lt;h2&gt;
  
  
  Why this works for Small Teams
&lt;/h2&gt;

&lt;p&gt;If you're building a SaaS, a mobile app, or a web tool, you don't need a monitoring suite that requires a PhD to navigate. You need something that respects your focus.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Fast&lt;/strong&gt;: 2-minute setup, no config bloat.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;AI-Powered&lt;/strong&gt;: Let Claude/GPT explain the crash to you so you don't have to decipher minified JS at 2 AM.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;If you’re shipping on Vercel, don't let your errors be silent. &lt;/p&gt;

&lt;p&gt;Try it for free at &lt;a href="https://bugmail.site" rel="noopener noreferrer"&gt;bugmail.site&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;Now I can actually trust my production deployments.&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>react</category>
      <category>buildinpublic</category>
      <category>saas</category>
    </item>
    <item>
      <title>I made a simple way to catch production Errors with 4 lines of code(No config)</title>
      <dc:creator>Mark Kaave</dc:creator>
      <pubDate>Thu, 01 Jan 2026 20:10:07 +0000</pubDate>
      <link>https://forem.com/mark_kaave/i-made-a-simple-way-to-catch-production-errors-with-4-lines-of-codeno-config-31ne</link>
      <guid>https://forem.com/mark_kaave/i-made-a-simple-way-to-catch-production-errors-with-4-lines-of-codeno-config-31ne</guid>
      <description>&lt;p&gt;in 2025 one thing i got tired of was constantly getting feedback from people say "this is not working on the site" and i didnt want to go through all that "sentry" stress , yeah i know sentry isnt difficult to setup , but the dashboard kinda looked too overwhelming and "enterpriseyy" so i built gmail for bugs (basically you see your errors as emails in an inbox) and it takes 4 lines of code to get started&lt;/p&gt;

&lt;p&gt;but the interesting part is , ive been able to create the nextjs SDK , and React and nodejs , so i'd recommend the full sdk setup , but the script tag is just a simple way to get started.&lt;/p&gt;

&lt;p&gt;get started here: &lt;a href="https://www.bugmail.site" rel="noopener noreferrer"&gt;Here&lt;/a&gt;&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>react</category>
      <category>softwareengineering</category>
      <category>nextjs</category>
    </item>
    <item>
      <title>Turns Out My Stripe Integration Was Silently Breaking (Here's How I Catch It Now)</title>
      <dc:creator>Mark Kaave</dc:creator>
      <pubDate>Mon, 29 Dec 2025 10:51:01 +0000</pubDate>
      <link>https://forem.com/mark_kaave/turns-out-my-stripe-integration-was-silently-breaking-heres-how-i-catch-it-now-33hj</link>
      <guid>https://forem.com/mark_kaave/turns-out-my-stripe-integration-was-silently-breaking-heres-how-i-catch-it-now-33hj</guid>
      <description>&lt;p&gt;You know that feeling when you finally launch your project, the traffic starts coming in, and you're just waiting for that first Stripe notification?&lt;/p&gt;

&lt;p&gt;Yeah, me too. But for me, that notification didn't come. &lt;/p&gt;

&lt;p&gt;Instead, I got an email from a customer: &lt;strong&gt;"Hey, tried to buy the Pro plan but the checkout page just says 'Something went wrong'. Is it me or you?"&lt;/strong&gt; and most times , customers wouldnt reach out😭&lt;/p&gt;

&lt;p&gt;I checked my logs. Next.js on Vercel is great for security, but in production, it's a black box. It hides every stack trace to prevent leaking sensitive info. All I saw was a bunch of &lt;code&gt;POST /api/checkout 500&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;No reason. No context. Just a dead end.&lt;/p&gt;

&lt;p&gt;I was losing sales at 2 AM because my Stripe integration was silently breaking, and I was completely oblivious.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Sentry? Not Tonight&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;I looked at Sentry. I've used it before, but honestly? It's huge. &lt;br&gt;
and the dashboards are overwhelming tbh.&lt;/p&gt;

&lt;p&gt;so i built bugmail 🙃&lt;br&gt;
A "2-minute setup" and an interface that looked exactly like Gmail. No complex charts, just an inbox for my bugs.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;How I Fixed It (In Under 2 Minutes)&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;I didn't want to spend my night reading docs. I wanted to catch the next failing sale. Here is exactly what I did:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;1. The Quick Install&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;pnpm add @bugmail-js/next
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;2. The API Route Wrap&lt;/strong&gt;&lt;br&gt;
I didn't even have to change my logic. I just wrapped my checkout route to report the error if something exploded&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;
// app/api/checkout/route.ts
import { captureServerError } from '@bugmail-js/next/server';

export async function POST(req: Request) {
  try {
    // My Stripe logic...
    const session = await stripe.checkout.sessions.create({ ... });
    return Response.json({ url: session.url });
  } catch (error) {
    // This is the lifesaver right here
    await captureServerError(error, {
      context: { source: 'stripe-checkout' }
    });
    return Response.json({ error: 'Check logs' }, { status: 500 });
  }
}

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;3. The React Hook for Client Drops&lt;/strong&gt;&lt;br&gt;
Stripe.js can fail on the client too (card declines, network drops). I used the hook to catch those:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;'use client';
import { useBugMail } from '@bugmail-js/next';

export function PaymentComponent() {
  const { captureError } = useBugMail();

  const handlePay = async () =&amp;gt; {
    const { error } = await stripe.confirmPayment({ ... });
    if (error) {
      captureError(error); // Caught it.
    }
  };
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;The Result: Inbox Zero for Bugs&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;The next time a customer hit a snag, I didn't find out via a support email. &lt;/p&gt;

&lt;p&gt;I got a notification that looked like a regular email. I opened the BugMail dashboard—which is literally an inbox—and there it was: &lt;strong&gt;"StripeCardError: Your card was declined."&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;I had the user's email, the items in their cart, and the exact timestamp. No digging through logs. No guessing.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Why this works for me:&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;If you're a solo dev or part of a small team, you don't need a heavy enterprise suite for error tracking. You need something that gets out of your way and lets you ship with confidence.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Fast&lt;/strong&gt;: I was done in minutes.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Familiar&lt;/strong&gt;: It feels like Gmail. Read, archive, or snooze.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Context&lt;/strong&gt;: It actually tells me &lt;em&gt;why&lt;/em&gt; the sale failed.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;If you're shipping Next.js apps with Stripe, don't wait for your customers to tell you your checkout is broken. &lt;/p&gt;

&lt;p&gt;You can try it for free at &lt;a href="https://bugmail.site" rel="noopener noreferrer"&gt;bugmail.site&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;Now I can finally go back to sleep.&lt;/p&gt;

</description>
      <category>stripe</category>
      <category>buildinpublic</category>
      <category>saas</category>
      <category>webdev</category>
    </item>
    <item>
      <title>I wrote a simple error relay for Next.js to bypass Vercel's log filtering URL</title>
      <dc:creator>Mark Kaave</dc:creator>
      <pubDate>Thu, 18 Dec 2025 13:01:19 +0000</pubDate>
      <link>https://forem.com/mark_kaave/i-wrote-a-simple-error-relay-for-nextjs-to-bypass-vercels-log-filtering-url-2nm0</link>
      <guid>https://forem.com/mark_kaave/i-wrote-a-simple-error-relay-for-nextjs-to-bypass-vercels-log-filtering-url-2nm0</guid>
      <description>&lt;p&gt;When code fails on Vercel, Next.js production builds sanitize the output. You get an "Internal Server Error" ID, but the stack trace is often missing from the runtime logs unless you have an external log drain configured.&lt;/p&gt;

&lt;p&gt;I didn't want to install a heavy SDK or pay for enterprise-grade observability just to see where my checkout was crashing. I wrote a tiny wrapper for app/error.tsx that captures the raw error object, attaches the current URL/context, and relays it to a webhook.&lt;/p&gt;

&lt;p&gt;It’s barely 50 lines of code. No heavy dependencies or sourcemap uploads required.&lt;/p&gt;

&lt;p&gt;Implementation details: &lt;a href="https://bugmail.site/shipfast" rel="noopener noreferrer"&gt;bugmail integration guide&lt;/a&gt;&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>programming</category>
      <category>javascript</category>
      <category>react</category>
    </item>
    <item>
      <title>When you ship fast, there are chances that you might ship bugs in production, Here's how I deal with that</title>
      <dc:creator>Mark Kaave</dc:creator>
      <pubDate>Tue, 16 Dec 2025 22:00:06 +0000</pubDate>
      <link>https://forem.com/mark_kaave/when-you-ship-fast-there-are-chances-that-you-might-ship-bugs-in-production-heres-how-i-deal-bcj</link>
      <guid>https://forem.com/mark_kaave/when-you-ship-fast-there-are-chances-that-you-might-ship-bugs-in-production-heres-how-i-deal-bcj</guid>
      <description>&lt;p&gt;Hey everyone , since we're all shipping startups in days and moving with speed, i noticed that a lot of times people ship and dont have a way to track errors or check if their users hit any bugs in production.&lt;/p&gt;

&lt;p&gt;Most people add an option on their site where users can give feedback or report, but i've actually never used that. its just stressful to me honestly. funny thing is , i faced this challenge once , where i launched and users rage quit my saas because they hit errors.&lt;/p&gt;

&lt;p&gt;i recently started working on something that solves this for me. although there are other error trackers out there like sentry and the rest , those are kind of an overkill for me , and the dashboards look too overwhelming for a simple project. so i built Bugmail(it literally looks like gmail) and its very easy to setup. bugmail notifies you (either through gmail or discord or slack) when something breaks in production and it shows you the event that caused the bug(breadcrumbs).&lt;/p&gt;

&lt;p&gt;I initially built this for myself alone , but i realized there might be other devs out there who face this same issue of not having a way to track errors and the existing solutions out there are too much stress to setup or are bloated. so i put bugmail out there and its free to get started&lt;/p&gt;

&lt;p&gt;&lt;a href="https:://www.bugmail.site" rel="noopener noreferrer"&gt;Bugmail&lt;/a&gt;&lt;/p&gt;

</description>
      <category>ship</category>
    </item>
    <item>
      <title>When you ship fast, there are chances that you might ship bugs in production, Here's how I deal with that</title>
      <dc:creator>Mark Kaave</dc:creator>
      <pubDate>Tue, 16 Dec 2025 21:56:57 +0000</pubDate>
      <link>https://forem.com/mark_kaave/when-you-ship-fast-there-are-chances-that-you-might-ship-bugs-in-production-heres-how-i-deal-2kod</link>
      <guid>https://forem.com/mark_kaave/when-you-ship-fast-there-are-chances-that-you-might-ship-bugs-in-production-heres-how-i-deal-2kod</guid>
      <description>&lt;p&gt;Hey everyone , since we're all shipping startups in days and moving with speed, i noticed that a lot of times people ship and dont have a way to track errors or check if their users hit any bugs in production.&lt;/p&gt;

&lt;p&gt;Most people add an option on their site where users can give feedback or report, but i've actually never used that. its just stressful to me honestly. funny thing is , i faced this challenge once , where i launched and users rage quit my saas because they hit errors.&lt;/p&gt;

&lt;p&gt;i recently started working on something that solves this for me. although there are other error trackers out there like sentry and the rest , those are kind of an overkill for me , and the dashboards look too overwhelming for a simple project. so i built Bugmail(it literally looks like gmail) and its very easy to setup. bugmail notifies you (either through gmail or discord or slack) when something breaks in production and it shows you the event that caused the bug(breadcrumbs).&lt;/p&gt;

&lt;p&gt;I initially built this for myself alone , but i realized there might be other devs out there who face this same issue of not having a way to track errors and the existing solutions out there are too much stress to setup or are bloated. so i put bugmail out there and its free to get started &lt;/p&gt;

&lt;p&gt;check it out here: &lt;a href="https://www.bugmail.site" rel="noopener noreferrer"&gt;Bugmail&lt;/a&gt;&lt;/p&gt;

</description>
      <category>productivity</category>
    </item>
    <item>
      <title>Track Errors in Supabase Edge Functions with BugMail</title>
      <dc:creator>Mark Kaave</dc:creator>
      <pubDate>Fri, 12 Dec 2025 09:30:21 +0000</pubDate>
      <link>https://forem.com/mark_kaave/track-errors-in-supabase-edge-functions-with-bugmail-33c4</link>
      <guid>https://forem.com/mark_kaave/track-errors-in-supabase-edge-functions-with-bugmail-33c4</guid>
      <description>&lt;p&gt;Supabase Edge Functions run on Deno at the edge, giving you lightning-fast serverless functions. But when they crash in production, you're flying blind — no stack traces, no context, just silent failures.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;The challenge ⚠️&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Traditional error trackers like Sentry don't officially support Deno. BugMail's core client uses the standard Fetch API, making it naturally compatible with Deno's runtime — no Node.js dependencies required.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Why BugMail Works with Deno&lt;/strong&gt;&lt;br&gt;
BugMail's core client is built on web standards:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Fetch API for HTTP requests&lt;/strong&gt; (native in Deno, browsers, and Node.js 18+)&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Zero Node.js dependencies&lt;/strong&gt; — works anywhere JavaScript runs&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;ESM imports&lt;/strong&gt; from esm.sh or deno.land&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;Step 1: Get Your API Key&lt;/strong&gt;&lt;br&gt;
Sign up at &lt;a href="https://www.bugmail.site" rel="noopener noreferrer"&gt;bugmail&lt;/a&gt; (free tier available). Copy your API Key and Project ID from the dashboard.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Step 2: Import the Core Client&lt;/strong&gt;&lt;br&gt;
Import BugMail's core client directly from esm.sh in your Edge Function:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;# Install BugMail Core (works with Deno)
# Add to your import_map.json or import directly from esm.sh
import { BugMailCoreClient } from 'https://esm.sh/@bugmail-js/core@latest';
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;Step 3: Basic Error Tracking Setup&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Wrap your function logic in a try/catch block and report errors to BugMail:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;// supabase/functions/your-function/index.ts
import { BugMailCoreClient } from 'https://esm.sh/@bugmail-js/core@latest';

// Initialize BugMail client
const bugmail = new BugMailCoreClient({
  baseUrl: 'https://api.bugmail.site',
  apiPath: '/api/sdk/v1/errors',
  apiKey: Deno.env.get('BUGMAIL_API_KEY'),
});

Deno.serve(async (req) =&amp;gt; {
  try {
    // Your edge function logic
    const data = await req.json();
    const result = await processData(data);

    return new Response(JSON.stringify(result), {
      headers: { 'Content-Type': 'application/json' },
    });
  } catch (error) {
    // Report error to BugMail
    await bugmail.captureException(error, {
      headers: { 'x-bugmail-api-key': Deno.env.get('BUGMAIL_API_KEY') },
      payload: {
        error: {
          name: error.name,
          message: error.message,
          stack: error.stack,
        },
        context: {
          environment: 'production',
          runtime: 'deno-supabase-edge',
          url: req.url,
          method: req.method,
        },
        project_id: Deno.env.get('BUGMAIL_PROJECT_ID'),
        timestamp: new Date().toISOString(),
      },
    });

    return new Response('Internal Server Error', { status: 500 });
  }
});

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;Step 4: Real-World Example (Payment Webhook)&lt;/strong&gt;&lt;br&gt;
Here's a complete example tracking errors in a Stripe webhook handler:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;// supabase/functions/payment-webhook/index.ts
import { BugMailCoreClient } from 'https://esm.sh/@bugmail-js/core@latest';
import { createClient } from 'https://esm.sh/@supabase/supabase-js@2';

const bugmail = new BugMailCoreClient({
  baseUrl: 'https://api.bugmail.site',
  apiPath: '/api/sdk/v1/errors',
  apiKey: Deno.env.get('BUGMAIL_API_KEY'),
});

const supabase = createClient(
  Deno.env.get('SUPABASE_URL') ?? '',
  Deno.env.get('SUPABASE_SERVICE_ROLE_KEY') ?? ''
);

Deno.serve(async (req) =&amp;gt; {
  try {
    const signature = req.headers.get('stripe-signature');
    if (!signature) throw new Error('Missing stripe signature');

    // Verify webhook signature
    const payload = await req.text();
    const event = verifyWebhook(payload, signature);

    // Process payment
    if (event.type === 'payment_intent.succeeded') {
      const { data, error } = await supabase
        .from('payments')
        .insert({ 
          user_id: event.data.object.metadata.user_id,
          amount: event.data.object.amount,
          status: 'success'
        });

      if (error) throw error;
    }

    return new Response(JSON.stringify({ received: true }), {
      headers: { 'Content-Type': 'application/json' },
    });
  } catch (error) {
    // Capture with rich context
    await bugmail.captureException(error, {
      headers: { 'x-bugmail-api-key': Deno.env.get('BUGMAIL_API_KEY') },
      payload: {
        error: {
          name: error.name,
          message: error.message,
          stack: error.stack,
        },
        context: {
          environment: Deno.env.get('ENVIRONMENT') || 'production',
          runtime: 'deno-supabase-edge',
          function: 'payment-webhook',
          url: req.url,
          method: req.method,
          headers: Object.fromEntries(req.headers.entries()),
        },
        project_id: Deno.env.get('BUGMAIL_PROJECT_ID'),
        timestamp: new Date().toISOString(),
      },
    });

    return new Response(
      JSON.stringify({ error: 'Webhook processing failed' }), 
      { status: 500, headers: { 'Content-Type': 'application/json' } }
    );
  }
});
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;Step 5: Add Environment Variables&lt;/strong&gt;&lt;br&gt;
In the Supabase Dashboard, navigate to Edge Functions → Secrets and add:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;# Supabase Dashboard &amp;gt; Edge Functions &amp;gt; Secrets
# Add these environment variables:

BUGMAIL_API_KEY=your_api_key_here
BUGMAIL_PROJECT_ID=your_project_id_here
ENVIRONMENT=production
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;You're Done!&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Now when your Edge Function throws an error, you'll receive an instant email with the stack trace, request context, and environment details. No complex dashboards, just instant alerts.&lt;/p&gt;

</description>
      <category>database</category>
      <category>supabase</category>
      <category>javascript</category>
    </item>
    <item>
      <title>I built a tool that Lets you know when your app breaks in production.</title>
      <dc:creator>Mark Kaave</dc:creator>
      <pubDate>Mon, 08 Dec 2025 14:40:02 +0000</pubDate>
      <link>https://forem.com/mark_kaave/i-built-a-tool-that-lets-you-know-when-your-app-breaks-in-production-1f1a</link>
      <guid>https://forem.com/mark_kaave/i-built-a-tool-that-lets-you-know-when-your-app-breaks-in-production-1f1a</guid>
      <description>&lt;p&gt;I worked on a few projects early this year, but one of them really went sideways , there were production errors that i did not know of. until a friend had to point them out.&lt;/p&gt;

&lt;p&gt;dawned on me that user feedback might not always come, sometimes they might just leave and rage quit.&lt;br&gt;
So I looked for something to track errors , i tried Sentry and it was way too complex for what I needed. I didn't want to configure alert rules or navigate dashboard hell. i just wanted an email when something breaks with the stack trace, breadcrumbs, and who it happened to. Couldn't find anything simple enough, so I built Bugmail. What it does:&lt;br&gt;
Errors show up in a Gmail-style inbox You get the stack trace, user context, and what they were doing. That's it. No config files, no complex dashboards&lt;/p&gt;

&lt;p&gt;It's basically emails me when shit breaks but actually usable. Built it for my own projects, figured other indie devs might want the same thing.&lt;/p&gt;

&lt;p&gt;try it out here : &lt;a href="https://www.bugmail.site" rel="noopener noreferrer"&gt;Bugmail&lt;/a&gt;&lt;/p&gt;

</description>
      <category>debugging</category>
      <category>buildinpublic</category>
    </item>
  </channel>
</rss>
