logging clean up

add axiom web vitals

README.md

@@ -4,11 +4,11 @@ CodeReal is an app that challenges users to solve a daily coding question.
 
 ## Background
 
-I had this idea for this app last year (2022) during the height of the initial [BeReal](https://bereal.com/) craze... BeReal but for code.
+I had this idea for this app last year (2022) during the height of the initial [BeReal](https://bereal.com/) craze (at least in my circles)... BeReal but for code.
 
 I set out to create the app with Python and React on AWS Lambda. I quickly found that building a severless application beyond a few functions was quite cumbersome without a deployment framework. I attempted to write IaC for everything (functions, DynamDB tables, IAM roles, etc) with CloudFormation, but quickly got burned out and never finished the applicaiton.
 
-In the beginning of 2023 I was introduced to Vercel and nextjs. At my job, I was tasked with migrating a rather large nextjs application from Vercel to AWS (containerized on ECS) to increase backend performance. The team decided that the performance boost was worth the increased cost of a always-running server. However, I quickly realized how useful Vercel's atomic deployments were (as well as other features like secret managment, DNS, etc) as I worked to automate the deployment of this application without Vercel. I figured this would be a good bet for my next side project.
+In the beginning of 2023 I was introduced to Vercel and nextjs. At my job, I was tasked with migrating a rather large nextjs application from Vercel to AWS (containerized on ECS) to increase backend performance. The team decided that the performance boost was worth the increased cost of an always-running server. However, I quickly realized how useful Vercel's atomic deployments were (as well as other features like secret managment, DNS, etc) as I worked to automate the deployment of this application without Vercel. I figured this would be a good bet for my next side project.
 
 In summer of 2023 I stumbled upon Theo's [T3 stack](https://t3.gg/) that utilized nextjs as well as several other services to make building a full webapp quite easy. I love how easy it is to integrate my frontend and backend code in a type-safe way. I wanted to give it a try!
 
@@ -38,14 +38,10 @@ This app is also inspired by:
 ## Future work
 
 - share score button (mobile and web)
-- add Google as a third-party login
 - per-question page where you can solve past questions individually
   - accessible via a past questions page with list, similar to current past submissions list page
 - consolidate loading states using React's new suspense boundaries (it's a bit of a waterfall at the moment)
 - add a "current streak" (i.e. questions answered in a row) to user stats
-
-### Distant future work
-
 - add more languages!
 
 ---

package.json

@@ -27,6 +27,7 @@
     "@uiw/react-codemirror": "^4.21.18",
     "dayjs": "^1.11.10",
     "next": "^13.5.6",
+    "next-axiom": "^0.18.1",
     "patch-package": "^8.0.0",
     "react": "18.2.0",
     "react-collapsed": "^4.0.4",

src/pages/_app.tsx

@@ -4,6 +4,7 @@ import { ClerkProvider } from "@clerk/nextjs";
 import "~/styles/globals.css";
 import { PageLayout } from "~/components/layout";
 import { Toaster } from "react-hot-toast";
+export { reportWebVitals } from 'next-axiom'
 
 const MyApp: AppType = ({ Component, pageProps }) => {
   return (

src/pages/api/trpc/[trpc].ts

@@ -1,6 +1,5 @@
 import { createNextApiHandler } from "@trpc/server/adapters/next";
 
-import { env } from "~/env.mjs";
 import { appRouter } from "~/server/api/appRouter";
 import { createTRPCContext } from "~/server/api/trpc";
 
@@ -18,14 +17,11 @@ const cacheConfigs: CacheConfigs = {
 export default createNextApiHandler({
   router: appRouter,
   createContext: createTRPCContext,
-  onError:
-    env.NODE_ENV === "development"
-      ? ({ path, error }) => {
-        console.error(
-          `❌ tRPC failed on ${path ?? "<no-path>"}: ${error.message}`
-        );
-      }
-      : undefined,
+  onError: ({ error }) => {
+    console.error(
+      `tRPC error: ${error.message}`
+    );
+  },
   responseMeta({ paths, type, errors }) {
     if (!paths || paths.length !== 1) return {}
 
@@ -36,7 +32,7 @@ export default createNextApiHandler({
       const path = paths[0] ?? ''
       const config = cacheConfigs[path]
       if (config) {
-        console.log(`[${path}] setting cache time to ${config.maxage}`)
+        console.log(`setting cache time to ${config.maxage}`)
         return {
           headers: {
             'Cache-Control': `max-age=${config.maxage}`,