Added BugMail integration

.env.example

@@ -108,3 +108,8 @@ STRIPE_WEBHOOK_SECRET=
 
 # Support URL
 NEXT_PUBLIC_SUPPORT_URL=
+
+# [Optional] BugMail: Simple error tracking via email
+# Get keys from https://bugmail.site
+NEXT_PUBLIC_BUGMAIL_API_KEY=
+NEXT_PUBLIC_BUGMAIL_PROJECT_ID=

README.md

@@ -196,6 +196,22 @@ The default login options are email and GitHub. Configure below:
 1. Create an account on [Sentry](https://sentry.io/), skip the onboarding and create a new Next.js project.
 2. At the bottom of the page, get the DSN and add it to the `.env` file as `SENTRY_DSN`. The other variables are optional.
 
+### 🐛 BugMail Setup
+
+BugMail is a simple, lightweight alternative to Sentry that captures errors and sends them to your inbox.
+
+1.  **Create an Account:** Go to [BugMail.site](https://bugmail.site) and sign up.
+2.  **Create a Project:** Follow the onboarding steps to create your first project.
+3.  **Get Credentials:** Copy your **API Key** and **Project ID** from the dashboard.
+4.  **Configure Environment:** Add the following to your `.env` file:
+
+    ```bash
+    NEXT_PUBLIC_BUGMAIL_API_KEY=your_api_key_here
+    NEXT_PUBLIC_BUGMAIL_PROJECT_ID=your_project_id_here
+    ```
+
+That's it! Errors will now be captured and sent to your BugMail inbox. If you don't provide these keys, the integration will be automatically disabled.
+
 #### Fully customizable boilerplate out of the box, see images below 👇👇👇
 
 ![saas-starter-kit-poster](/public/saas-starter-kit-poster.png)

components/SafeBugMailProvider.tsx

@@ -0,0 +1,30 @@
+import { BugMailProvider, ErrorBoundary } from '@bugmail-js/react';
+import React from 'react';
+
+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;
+
+  // 1. If no keys, just render children (app works normally)
+  if (!apiKey || !projectId) {
+    return <>{children}</>;
+  }
+
+  // 2. If keys exist, wrap with Provider AND ErrorBoundary
+  return (
+    <BugMailProvider
+      apiKey={apiKey}
+      projectId={projectId}
+      endpoint="https://api.bugmail.site"
+    >
+      {/* eslint-disable-next-line i18next/no-literal-string */}
+      <ErrorBoundary fallback={<div>Something went wrong</div>}>
+        {children}
+      </ErrorBoundary>
+    </BugMailProvider>
+  );
+}

package.json

@@ -30,6 +30,7 @@
     "@boxyhq/metrics": "0.2.10",
     "@boxyhq/react-ui": "3.4.1",
     "@boxyhq/saml-jackson": "1.49.0",
+    "@bugmail-js/react": "^0.1.1",
     "@heroicons/react": "2.2.0",
     "@next-auth/prisma-adapter": "1.0.7",
     "@prisma/client": "6.9.0",

pages/_app.tsx

@@ -14,6 +14,7 @@ import env from '@/lib/env';
 import { Theme, applyTheme } from '@/lib/theme';
 import { Themer } from '@boxyhq/react-ui/shared';
 import { AccountLayout } from '@/components/layouts';
+import { SafeBugMailProvider } from '@/components/SafeBugMailProvider';
 
 function MyApp({ Component, pageProps }: AppPropsWithLayout) {
   const { session, ...props } = pageProps;
@@ -60,7 +61,9 @@ function MyApp({ Component, pageProps }: AppPropsWithLayout) {
             '--primary-color-950': colors.blue['950'],
           }}
         >
-          {getLayout(<Component {...props} />)}
+          <SafeBugMailProvider>
+            {getLayout(<Component {...props} />)}
+          </SafeBugMailProvider>
         </Themer>
       </SessionProvider>
     </>