Merged in feat/sw-2872-dependency-inject-app-context-in-trpc-package (pull request #2478)

feat(SW-2872) Dependency inject app context in trpc package

* Move appRouter to trpc package

* WIP Move serverClient to trpc package

Doesn't handle errors yet

* Don't use global

* Use trpc everywhere


Approved-by: Linus Flood

apps/partner-sas/app/page.tsx

@@ -1,15 +1,26 @@
 import { Temp } from "@scandic-hotels/booking-flow/test-entry"
+import { Lang } from "@scandic-hotels/common/constants/language"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
+import { serverClient } from "@/lib/trpc"
+
 import styles from "./page.module.css"
 
-export default function Home() {
+export default async function Home() {
+  const caller = await serverClient()
+  const destinations = await caller.autocomplete.destinations({
+    lang: Lang.en,
+    includeTypes: ["hotels"],
+    query: "Göteborg",
+  })
+  const hotel = destinations.hits.hotels[0].name
+
   return (
     <div className={styles.page}>
       <main>
         <Typography variant="Title/Decorative/lg">
           {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
-          <p>hello world</p>
+          <p>hello world with data: {hotel}</p>
         </Typography>
         <Typography>
           {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}

apps/partner-sas/global.d.ts

@@ -0,0 +1,4 @@
+import "@scandic-hotels/common/global.d.ts"
+import "@scandic-hotels/trpc/types.d.ts"
+import "@scandic-hotels/trpc/auth.d.ts"
+import "@scandic-hotels/trpc/jwt.d.ts"

apps/partner-sas/lib/trpc.ts

@@ -0,0 +1,34 @@
+import { headers } from "next/headers"
+
+import { createContext } from "@scandic-hotels/trpc/context"
+import {
+  appServerClient,
+  configureServerClient,
+} from "@scandic-hotels/trpc/serverClient"
+
+import type { Lang } from "@scandic-hotels/common/constants/language"
+
+export async function createAppContext() {
+  const headersList = await headers()
+
+  const ctx = createContext({
+    lang: headersList.get("x-lang") as Lang,
+    pathname: headersList.get("x-pathname")!,
+    uid: headersList.get("x-uid"),
+    url: headersList.get("x-url")!,
+    contentType: headersList.get("x-contenttype")!,
+    auth: async () => {
+      return null
+    },
+  })
+
+  return ctx
+}
+
+configureServerClient(createAppContext)
+
+export async function serverClient() {
+  const ctx = await createAppContext()
+
+  return appServerClient(ctx)
+}

apps/partner-sas/next.config.ts

@@ -1,3 +1,5 @@
+import * as Sentry from "@sentry/nextjs"
+
 import type { NextConfig } from "next"
 
 const nextConfig: NextConfig = {
@@ -27,4 +29,23 @@ const nextConfig: NextConfig = {
   },
 }
 
-export default nextConfig
+export default Sentry.withSentryConfig(nextConfig, {
+  org: "scandic-hotels",
+  project: "partner-sas",
+
+  authToken: process.env.SENTRY_AUTH_TOKEN,
+
+  // Only print logs for uploading source maps in CI
+  silent: !process.env.CI,
+
+  // Upload a larger set of source maps for prettier stack traces (increases build time)
+  widenClientFileUpload: true,
+
+  // Automatically annotate React components to show their full name in breadcrumbs and session replay
+  reactComponentAnnotation: {
+    enabled: true,
+  },
+
+  hideSourceMaps: true,
+  disableLogger: true,
+})

apps/partner-sas/package.json

@@ -18,6 +18,7 @@
     "@netlify/plugin-nextjs": "^5.11.2",
     "@scandic-hotels/booking-flow": "workspace:*",
     "@scandic-hotels/design-system": "workspace:*",
+    "@sentry/nextjs": "^8.41.0",
     "next": "15.3.4",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"

apps/scandic-web/app/api/web/trpc/[trpc]/route.ts

@@ -1,7 +1,8 @@
 import { fetchRequestHandler } from "@trpc/server/adapters/fetch"
 
+import { appRouter } from "@scandic-hotels/trpc/routers/appRouter"
+
 import { createAppContext } from "@/lib/trpc/server"
-import { appRouter } from "@/server"
 
 async function handler(req: Request) {
   return fetchRequestHandler({

apps/scandic-web/i18n/serverContext.ts

@@ -4,7 +4,6 @@ import { headers } from "next/headers"
 import { cache } from "react"
 
 import { Lang } from "@scandic-hotels/common/constants/language"
-
 import { languageSchema } from "@scandic-hotels/common/utils/languages"
 
 const getRef = cache(() => ({ current: undefined as Lang | undefined }))

apps/scandic-web/lib/trpc/client.ts

@@ -1,9 +1,8 @@
 import { createTRPCReact } from "@trpc/react-query"
 
+import type { AppRouter } from "@scandic-hotels/trpc/routers/appRouter"
 import type { inferRouterInputs, inferRouterOutputs } from "@trpc/server"
 
-import type { AppRouter } from "@/server"
-
 export const trpc = createTRPCReact<AppRouter>()
 
 export type RouterInput = inferRouterInputs<AppRouter>

apps/scandic-web/lib/trpc/server.ts

@@ -1,22 +1,21 @@
-import * as Sentry from "@sentry/nextjs"
 import { TRPCError } from "@trpc/server"
 import { cookies, headers } from "next/headers"
 import { redirect } from "next/navigation"
 
 import { Lang } from "@scandic-hotels/common/constants/language"
-import { createCallerFactory } from "@scandic-hotels/trpc"
 import { createContext } from "@scandic-hotels/trpc/context"
+import {
+  appServerClient,
+  configureServerClient,
+} from "@scandic-hotels/trpc/serverClient"
 
 import { login } from "@/constants/routes/handleAuth"
 import { webviews } from "@/constants/routes/webviews"
-import { appRouter } from "@/server"
 
 import { auth } from "@/auth"
 
 import type { Session } from "next-auth"
 
-const createCaller = createCallerFactory(appRouter)
-
 export async function createAppContext() {
   const headersList = await headers()
   const cookie = await cookies()
@@ -49,17 +48,13 @@ export async function createAppContext() {
   return ctx
 }
 
+configureServerClient(createAppContext)
+
 export async function serverClient() {
   const ctx = await createAppContext()
 
-  return createCaller(ctx, {
-    onError: ({ ctx, error, input, path, type }) => {
-      console.error(`[serverClient] error for ${type}: ${path}`, error)
-
-      if (input) {
-        console.error(`[serverClient] received input:`, input)
-      }
-
+  return appServerClient(ctx, {
+    onError: ({ ctx, error }) => {
       if (error instanceof TRPCError) {
         if (error.code === "UNAUTHORIZED") {
           let lang = Lang.en
@@ -90,19 +85,6 @@ export async function serverClient() {
           redirect(redirectUrl)
         }
       }
-
-      Sentry.captureException(error, {
-        extra: {
-          input,
-          path,
-          type,
-          url: ctx?.url,
-          lang: ctx?.lang,
-          pathname: ctx?.pathname,
-          contentType: ctx?.contentType,
-          uid: ctx?.uid,
-        },
-      })
     },
   })
 }

apps/scandic-web/package.json

@@ -66,7 +66,6 @@
     "@vercel/otel": "^1.12.0",
     "@vis.gl/react-google-maps": "^1.5.2",
     "class-variance-authority": "^0.7.1",
-    "clean-deep": "^3.4.0",
     "contentstack": "^3.25.3",
     "date-fns": "^4.1.0",
     "dayjs": "^1.11.13",

apps/scandic-web/server/index.ts

@@ -1,21 +0,0 @@
-/** Routers */
-import { router } from "@scandic-hotels/trpc"
-import { autocompleteRouter } from "@scandic-hotels/trpc/routers/autocomplete"
-import { bookingRouter } from "@scandic-hotels/trpc/routers/booking"
-import { contentstackRouter } from "@scandic-hotels/trpc/routers/contentstack"
-import { hotelsRouter } from "@scandic-hotels/trpc/routers/hotels"
-import { navigationRouter } from "@scandic-hotels/trpc/routers/navigation"
-import { partnerRouter } from "@scandic-hotels/trpc/routers/partners"
-import { userRouter } from "@scandic-hotels/trpc/routers/user"
-
-export const appRouter = router({
-  booking: bookingRouter,
-  contentstack: contentstackRouter,
-  hotel: hotelsRouter,
-  user: userRouter,
-  partner: partnerRouter,
-  navigation: navigationRouter,
-  autocomplete: autocompleteRouter,
-})
-
-export type AppRouter = typeof appRouter

apps/scandic-web/server/routers/utils/index.ts

@@ -1,15 +0,0 @@
-import cleaner from "clean-deep"
-
-/**
- * Function to remove empty objects from a fetched content type.
- * Used since Contentstack returns empty objects for all non
- * queried in modular blocks.
- */
-export function removeEmptyObjects<T>(obj: T) {
-  return cleaner(obj, {
-    emptyArrays: false,
-    emptyStrings: false,
-    nullValues: false,
-    undefinedValues: false,
-  })
-}