Full-stack

observability platform

for Next.js

Automatic monitoring of front & back-end errors & bugs. Get alerted when bugs affect your end-users. Easily fix bugs with automatically added bug-context.
// πŸ‘‡ Server Actions, Route Handlers etc are transformed
export const sendFeedback = catchUncaughtAction( // ✨ injected
  async (feedback: string): Promise<ActionResponse> => {
    const user = await getCurrentUser();
    // ✨ Auth.js context added
    addContext({
      user,
    }) 

    const dbUser = await db.feedback.create({
      data: {
        id: typeid("feedback").toString(),
        createdAt: new Date(),
        userId: user.id,
        message: feedback,
      },
    })

    // ✨ Prisma DB context added
    addContext({
      prisma: {
        create: dbUser
      }
    }) 

    return { success: true, message: "Thank you a lot for the feedback! πŸŽ‰" }
  },
  {
    path: "@/lib/actions/sendFeedback" // ✨ injected
  } 
)
01 / 03
Install Plugin

Our plugin transforms your Next.js API routes, Server Actions & components and automatically captures context from the libraries and tools you use like Stripe, Supabase, Prisma, Drizzle. Learn more

1 / 3
Getting started

Effortless setup

done in minutes

Just add our babel plugin to your Next.js configuration, and you're ready to go.

next.config.js

const { webpack } = require('@useflytrap/logs-transform')

/** @type {import('next').NextConfig} */
const nextConfig = {
	webpack(config) {
		config.plugins = config.plugins ?? []
		config.infrastructureLogging = { level: 'error' }
		if (process.env.NODE_ENV === 'production') {
			config.plugins.push(webpack({
				// πŸ‘ˆ Plugin options go here
			}))
		}
		return config
	}
}

module.exports = nextConfig

β€œAt Flytrap, we believe that the full-stack observability & debugging experience is long overdue for a developer-experience focused overhaul. We're automating the tedious tasks with our babel plugin, so that you can spend more time shipping great software.”

Flytrap developer Rasmus Gustafsson
Rasmus Gustafsson
Developer @ Flytrap
Features

Everything you need

for a bug-free product

Monitor your app from front to the back-end. Get added context for all your bugs to make sure that no bug stays unsolved.

Automatic bug context

Flytrap's Next.js plugin automatically gathers context from the libraries and tools you use like Stripe, Supabase, Prisma & Drizzle, to make fixing bugs easier. Learn more

Simplified debugging

Get all the context needed to fix your end-user bugs in one place, both front- and back-end.

Stay informed

Automatic alerts will notify your team of elevated p99, p75, p50 latencies, API error rates or errors in React components. Learn more

Automatic observability dashboards

Flytrap automatically sets up dashboards for monitoring your API requests, Server Actions & React components. Monitor the system health of your Next.js app at a glance. Learn more

Security at the core

We encrypt all sensitive data by default. Our encryption implementation is fully open-source. View it here

DX-focused

We're driven by improving the developer experience of fixing bugs end-to-end on both the front- and back-end.

Collaboration

Invite team members to collaborate on fixing bugs.

FAQ

Everything you

need to know

Need something cleared up? Here are our most frequently asked questions.

Can I use this tool alongside my other logging infrastructure?

We want to build on top of the offerings of other products. If you want to use Flytrap in combination with existing logging infrastructure, please contact us.

Will you be able to access my sensitive data?

Do you have a money-back guarantee?

Get started

Ready to elevate your

debugging experience?

Go from zero to everything needed for keeping your Next.js app healthy in minutes

Β© 2024 Flytrap
Built with β™₯ in Helsinki, FI.