DEV Community

Cover image for How to Add Error Alerts to ShipFast in 30 Seconds
Mark Kaave
Mark Kaave

Posted on • Originally published at bugmail.site

How to Add Error Alerts to ShipFast in 30 Seconds

#javascript #typescript #react #testing

ShipFast is amazing for launching in days. But once you deploy to Vercel, Next.js hides your error details in production to protect your security. If a user's checkout fails, you won't know why — you just lose the sale.

The Problem ⚠️
Setting up Sentry takes ~30 minutes of configuration. BugMail takes 30 seconds and emails you instantly when something breaks.

The Solution✅
Step 1: Get Your Free API Key
Head to https://bugmail.site and sign up for free. Copy your API Key and Project ID from the dashboard.

Step 2: Install the SDK
Install the BugMail Next.js SDK using your preferred package manager:

# Using pnpm (recommended for ShipFast)
pnpm add @bugmail-js/next

# Or using npm
npm install @bugmail-js/next
Enter fullscreen mode Exit fullscreen mode

Step 3: Create the Provider
Create a "safe" provider that checks for API keys. If keys aren't configured, your app works normally — making BugMail 100% optional:

// components/bugmail-provider.tsx
'use client';

import { BugMailProvider } from '@bugmail-js/next';

export function SafeBugMailProvider({ children }: { children: React.ReactNode }) {
  const apiKey = process.env.NEXT_PUBLIC_BUGMAIL_API_KEY;
  const projectId = process.env.NEXT_PUBLIC_BUGMAIL_PROJECT_ID;

  // If not configured, app works normally (no-op)
  if (!apiKey || !projectId) {
    return <>{children}</>;
  }

  // If configured, wrap with BugMail
  return (
    <BugMailProvider
      apiKey={apiKey}
      projectId={projectId}
      endpoint="https://api.bugmail.site"
    >
      {children}
    </BugMailProvider>
  );
}
Enter fullscreen mode Exit fullscreen mode

Step 4: Update Your Layout
Wrap your app with the SafeBugMailProvider in your root layout:

// app/layout.tsx
import { SafeBugMailProvider } from '@/components/bugmail-provider';

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <SafeBugMailProvider>
          {children}
        </SafeBugMailProvider>
      </body>
    </html>
  );
}
Enter fullscreen mode Exit fullscreen mode

Step 5: Add the Error Handler
Create an error boundary that reports errors to BugMail. This catches both client-side and server-side errors:

// app/error.tsx
'use client';

import { useEffect } from 'react';
import { createAppRouterErrorHandler } from '@bugmail-js/next';

// Initialize conditionally
const apiKey = process.env.NEXT_PUBLIC_BUGMAIL_API_KEY;
const projectId = process.env.NEXT_PUBLIC_BUGMAIL_PROJECT_ID;

const reportError = (apiKey && projectId) 
  ? createAppRouterErrorHandler({
      apiKey,
      projectId,
      baseUrl: 'https://api.bugmail.site',
      environment: process.env.NODE_ENV,
    })
  : null;

export default function Error({ error, reset }) {
  useEffect(() => {
    // Only report if BugMail is configured
    if (reportError) {
      reportError(error);
    }
    console.error(error);
  }, [error]);

  return (
    <div>
      <h2>Something went wrong!</h2>
      <button onClick={() => reset()}>Try again</button>
    </div>
  );
}
Enter fullscreen mode Exit fullscreen mode

Step 6: Add Environment Variables

Add your BugMail credentials to your .env.local file:

# .env.local

# BugMail: Simple error tracking via email
# Get keys from https://bugmail.site
NEXT_PUBLIC_BUGMAIL_API_KEY=your_api_key_here
NEXT_PUBLIC_BUGMAIL_PROJECT_ID=your_project_id_here
Enter fullscreen mode Exit fullscreen mode

✅That's it!

Now when a user hits an error, you'll get an instant email with the full stack trace, user context, and URL. No setup hell and features you dont need.

Top comments (0)