// 👇 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
}
)
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
Just add our babel plugin to your Next.js configuration, and you're ready to go.
next.config.js
const { nextjs } = require('@useflytrap/logs-transform')
/** @type {import('next').NextConfig} */
const nextConfig = {
webpack: nextjs({
// 👈 plugin options here
})
}
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.”
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
We encrypt all sensitive data by default. Our encryption implementation is fully open-source. View it here
We're driven by improving the developer experience of fixing bugs end-to-end on both the front- and back-end.
Invite team members to collaborate on fixing bugs.
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?
Go from zero to everything needed for keeping your Next.js app healthy in minutes