🔥 MANEJO DE LOGS CON AXIOM

¿Qué son los logs?

Los logs en programación son registros detallados de eventos y acciones dentro de un sistema de software. Funcionan como un historial de actividad que permite a los desarrolladores rastrear y comprender lo que sucede en una aplicación. Estos registros contienen información valiosa, como mensajes de error, advertencias, solicitudes de usuarios y resultados de procesos. Los logs son esenciales para la depuración, el monitoreo y la mejora continua de aplicaciones. Facilitan la identificación de problemas y la resolución eficiente de errores al proporcionar pistas sobre cómo se comporta una aplicación en diferentes situaciones. Además, los logs son una herramienta valiosa para el análisis de rendimiento y la optimización del software. Interpretar adecuadamente los logs permite a los desarrolladores tomar decisiones informadas para garantizar la fiabilidad y eficacia de sus sistemas.

¿Cómo capturar logs de una aplicación de vercel con axiom?

Los los son una parte importante del desarrollo de un proyecto, nos permiten determinar que partes del mismo están produciendo errores para poder corregirlos. Para este caso vamos a utilizar axiom que es un servicio de logs en la nube que se puede integrar fácilmente con vercel.

1. Creamos una cuenta en [axiom.co][https://axiom.co/] si es que no tenemos una.
2. Una ves creada una cuenta nos pedirá crear una organización.
3. Abre vercel y busca dentro de Integrations > Axiom.
4. Asocia axiom a tu perfil y selecciona el proyecto sobre el cual estará montado.

Actualización de la base de datos

Para empezar a recibir los primeros datos, se requiere tener un modelo inicial en Prisma. Para ello vamos a actualizar nuestro schema.

1. Abrimos el archivo prisma/schema.prisma.

2. Eliminamos el modelo Example y agregamos uno nuevo llamado Post.

   model Post {
   id String @id @default(cuid())
   createdAt DateTime @default(now())
   
   content String @db.VarChar(255)
   authorId String
   
   @@index([authorId])
   }
   

3. Sincronizamos el esquema de prisma.

   pnpm prisma db push
   

   Esto generará los cambios necesarios en la base de datos.

4. Eliminamos el router src/server/api/routers/example.ts y creamos otro llamado posts.ts.

   import { createTRPCRouter, publicProcedure } from '~/server/api/trpc'
   
   export const postsRouter = createTRPCRouter({
       getAll: publicProcedure.query(({ ctx }) => {
           return ctx.prisma.post.findMany()
       }),
   })
   

5. Actualizamos la lista de routers en src/server/api/root.ts.

   import { createTRPCRouter } from '~/server/api/trpc'
   import { postsRouter } from './routers/post'
   
   export const appRouter = createTRPCRouter({
       posts: postsRouter,
   })
   
   export type AppRouter = typeof appRouter
   

6. Abrimos prisma studio para agregar un par de registros.

   pnpm prisma studio
   

7. Después de agregar un par de registros, actualiza el home para que muestre los resultados.

   import { SignIn, SignOutButton, useUser } from '@clerk/nextjs'
   import Head from 'next/head'
   import { api } from '~/utils/api'
   
   export default function Home() {
       const { data } = api.posts.getAll.useQuery()
       const { user, isSignedIn } = useUser()
   
       return (
           <>
               ...
               <main className="flex min-h-screen flex-col items-center justify-center bg-gradient-to-b from-[#2e026d] to-[#15162c]">
                   <div className="text-2xl text-white">
                       {isSignedIn ? <SignOutButton /> : <SignIn />}
                   </div>
                   <div>
                       {data?.map((post) => (
                           <div key={`post-${post.id}`}>{post.content}</div>
                       ))}
                   </div>
               </main>
           </>
       )
   }
   

En esta lección pudimos integrar un sistema de logs utilizando Axiom, esta solución nos ha permitido implementar logs directamente desde Vercel, sin la necesidad de tener que realizar ningún tipo de configuración adicional a nuestro proyecto.