configuring sentry + instrumenting backend

Author: nikolovlazar

.env.example

@@ -0,0 +1,3 @@
+SENTRY_DSN=
+NEXT_PUBLIC_SENTRY_DSN=
+SENTRY_AUTH_TOKEN=

.env.sentry-build-plugin.example

@@ -0,0 +1,5 @@
+# DO NOT commit this file to your repository!
+# The SENTRY_AUTH_TOKEN variable is picked up by the Sentry Build Plugin.
+# It's used for authentication when uploading source maps.
+# You can also set this env variable in your own `.env` files and remove this file.
+SENTRY_AUTH_TOKEN=

.gitignore

@@ -36,3 +36,9 @@ yarn-error.log*
 next-env.d.ts
 
 sqlite.db
+
+# Sentry Config File
+.env.sentry-build-plugin
+
+# Environment variables
+.env

app/(auth)/actions.ts

@@ -13,17 +13,26 @@ import { Label } from "../../_components/ui/label";
 import { Separator } from "../../_components/ui/separator";
 import { Button } from "../../_components/ui/button";
 import { useState } from "react";
-import { signIn } from "../actions";
+import { useRouter } from "next/navigation";
 
 export default function SignIn() {
  const [error, setError] = useState<string>();
+ const router = useRouter();
+
  const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
  event.preventDefault();
 
  const formData = new FormData(event.currentTarget);
- const res = await signIn(formData);
- if (res && res.error) {
- setError(res.error);
+ const res = await fetch("/api/auth/sign-in", {
+ method: "POST",
+ body: formData,
+ });
+
+ if (res.ok) {
+ router.push("/");
+ } else {
+ const { error } = await res.json();
+ setError(error);
  }
  };
 

app/(auth)/sign-in/page.tsx

@@ -1,6 +1,10 @@
 "use client";
 
 import Link from "next/link";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+
+import { Button } from "../../_components/ui/button";
 import {
  Card,
  CardContent,
@@ -11,12 +15,11 @@ import {
 import { Input } from "../../_components/ui/input";
 import { Label } from "../../_components/ui/label";
 import { Separator } from "../../_components/ui/separator";
-import { Button } from "../../_components/ui/button";
-import { signUp } from "../actions";
-import { useState } from "react";
 
 export default function SignUp() {
  const [error, setError] = useState<string>();
+ const router = useRouter();
+
  const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
  event.preventDefault();
 
@@ -30,9 +33,15 @@ export default function SignUp() {
  return;
  }
 
- const res = await signUp(formData);
- if (res && res.error) {
- setError(res.error);
+ const res = await fetch("/api/auth/sign-up", {
+ method: "POST",
+ body: formData,
+ });
+ if (res.ok) {
+ router.push("/");
+ } else {
+ const { error } = await res.json();
+ setError(error);
  }
  };
 

app/(auth)/sign-up/page.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { signOut } from "@/app/(auth)/actions";
+import { useRouter } from "next/navigation";
 import { Avatar, AvatarFallback } from "./avatar";
 import {
  DropdownMenu,
@@ -10,6 +10,17 @@ import {
 } from "./dropdown-menu";
 
 export function UserMenu() {
+ const router = useRouter();
+
+ const handleSignOut = async () => {
+ const res = await fetch("/api/auth/sign-out", {
+ method: "POST",
+ });
+ if (res.ok) {
+ router.push("/sign-in");
+ }
+ };
+
  return (
  <DropdownMenu>
  <DropdownMenuTrigger>
@@ -18,7 +29,10 @@ export function UserMenu() {
  </Avatar>
  </DropdownMenuTrigger>
  <DropdownMenuContent>
- <DropdownMenuItem className="cursor-pointer" onClick={() => signOut()}>
+ <DropdownMenuItem
+ className="cursor-pointer"
+ onClick={() => handleSignOut()}
+ >
  Sign out
  </DropdownMenuItem>
  </DropdownMenuContent>

app/_components/ui/user-menu.tsx

@@ -1,26 +1,31 @@
 "use client";
 
 import { Plus } from "lucide-react";
-import { Button } from "./_components/ui/button";
-import { Input } from "./_components/ui/input";
-import { createTodo } from "./actions";
+import { useRouter } from "next/navigation";
 import { useRef } from "react";
 import { toast } from "sonner";
 
+import { Button } from "./_components/ui/button";
+import { Input } from "./_components/ui/input";
+
 export function CreateTodo() {
  const inputRef = useRef<HTMLInputElement>(null);
+ const router = useRouter();
 
  const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
  event.preventDefault();
 
  const formData = new FormData(event.currentTarget);
- const res = await createTodo(formData);
+ const res = await fetch("/api/todos", { method: "PUT", body: formData });
 
- if (res) {
- if (res.error) {
- toast.error(res.error);
- } else if (res.success) {
- toast.success("Todo created!");
+ if (res.ok) {
+ toast.success("Todo created!");
+ router.refresh();
+ } else {
+ const { error } = await res.json();
+ toast.error(error);
+ if (res.status === 401) {
+ router.push("/sign-in");
  }
  }
 

app/actions.ts

@@ -0,0 +1,42 @@
+import { captureException } from "@sentry/nextjs";
+import { cookies } from "next/headers";
+
+import { AuthenticationError } from "@/src/entities/errors/auth";
+import { InputParseError } from "@/src/entities/errors/common";
+import { Cookie } from "@/src/entities/models/cookie";
+import { signInController } from "@/src/interface-adapters/controllers/auth/sign-in.controller";
+
+export async function POST(request: Request) {
+ const formData = await request.formData();
+ const username = formData.get("username")?.toString();
+ const password = formData.get("password")?.toString();
+
+ let sessionCookie: Cookie;
+ try {
+ sessionCookie = await signInController({ username, password });
+ } catch (err) {
+ if (err instanceof InputParseError || err instanceof AuthenticationError) {
+ return Response.json(
+ { error: "Incorrect username or password" },
+ { status: 400 },
+ );
+ }
+
+ captureException(err);
+ return Response.json(
+ {
+ error:
+ "An error happened. The developers have been notified. Please try again later.",
+ },
+ { status: 500 },
+ );
+ }
+
+ cookies().set(
+ sessionCookie.name,
+ sessionCookie.value,
+ sessionCookie.attributes,
+ );
+
+ return new Response();
+}