How to Monitor Errors in Next.js App Router

// lib/safe-action.ts
import { logit } from "@/lib/logit";

export function withErrorTracking<T extends unknown[], R>(
  fn: (...args: T) => Promise<R>
) {
  return async (...args: T): Promise<R> => {
    try {
      return await fn(...args);
    } catch (error) {
      await logit.now("errors", {
        event: "Server action error",
        description: error instanceof Error ? error.message : "Unknown error",
        icon: "❌",
        notify: true,
        metadata: {
          error: error instanceof Error ? error.message : String(error),
          stack: error instanceof Error ? error.stack?.slice(0, 500) : undefined,
        },
      });
      throw error;
    }
  };
}

// Usage:
export const createPost = withErrorTracking(async (data: PostData) => {
  // your action logic
});

// app/api/[...route]/route.ts
import { logit } from "@/lib/logit";

export async function POST(req: Request) {
  try {
    // your handler
    return Response.json({ ok: true });
  } catch (error) {
    await logit.now("errors", {
      event: "API route error",
      description: `POST ${new URL(req.url).pathname}: ${error instanceof Error ? error.message : "Unknown"}`,
      icon: "🔴",
      notify: true,
      metadata: {
        url: req.url,
        method: "POST",
        error: error instanceof Error ? error.message : String(error),
      },
    });
    return Response.json({ error: "Internal error" }, { status: 500 });
  }
}

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

export default function ErrorBoundary({ error, reset }: {
  error: Error & { digest?: string };
  reset: () => void;
}) {
  // Note: can't call logit directly from client — use an API route
  fetch("/api/log-error", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ message: error.message, digest: error.digest }),
  }).catch(() => {});

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

notify: process.env.NODE_ENV === "production",