Tamás Soós
Tamás Soós
Explore posts from servers
TtRPCTTCTheo's Typesafe Cult
PostsComments
TtRPC
Created by cadams on 11/1/2023 in #❓-help
When error in tRPC route, the error message is vauge
Does that answer your questions?
12 replies
TtRPC
Created by cadams on 11/1/2023 in #❓-help
When error in tRPC route, the error message is vauge
Or send it to some other place automatically as described in the docs.
12 replies
TtRPC
Created by cadams on 11/1/2023 in #❓-help
When error in tRPC route, the error message is vauge
I can print the stack trace locally: 
'use client';

import { trpc } from '@/util/trpc';

export default function MagicNumber() {
  const { data, error, isError, isLoading } = trpc.magicNumber.useQuery();
  console.log(error?.data?.stack);

  if (isLoading) {
    return <span>Loading...</span>;
  }

  if (isError) {
    return <span>Error: {error.message}</span>;
  }

  return <span>Your magic number is {data}</span>;
}
'use client';

import { trpc } from '@/util/trpc';

export default function MagicNumber() {
  const { data, error, isError, isLoading } = trpc.magicNumber.useQuery();
  console.log(error?.data?.stack);

  if (isLoading) {
    return <span>Loading...</span>;
  }

  if (isError) {
    return <span>Error: {error.message}</span>;
  }

  return <span>Your magic number is {data}</span>;
}
To get: 
TRPCError: Magic number procedure error
    at eval (webpack-internal:///(:3000/rsc)/./src/server/routers/app.ts:15:19)
    at resolveMiddleware (webpack-internal:///(:3000/rsc)/./node_modules/@trpc/server/dist/index.mjs:431:36)
    at callRecursive (webpack-internal:///(:3000/rsc)/./node_modules/@trpc/server/dist/index.mjs:467:38)
    at resolve (webpack-internal:///(:3000/rsc)/./node_modules/@trpc/server/dist/index.mjs:497:30)
    at callProcedure (webpack-internal:///(:3000/rsc)/./node_modules/@trpc/server/dist/config-4c0f8e88.mjs:189:12)
    at inputToProcedureCall (webpack-internal:///(:3000/rsc)/./node_modules/@trpc/server/dist/resolveHTTPResponse-68c8befb.mjs:54:83)
    at eval (webpack-internal:///(:3000/rsc)/./node_modules/@trpc/server/dist/resolveHTTPResponse-68c8befb.mjs:177:51)
    at Array.map (<anonymous>)
    at resolveHTTPResponse (webpack-internal:///(:3000/rsc)/./node_modules/@trpc/server/dist/resolveHTTPResponse-68c8befb.mjs:177:32)
TRPCError: Magic number procedure error
    at eval (webpack-internal:///(:3000/rsc)/./src/server/routers/app.ts:15:19)
    at resolveMiddleware (webpack-internal:///(:3000/rsc)/./node_modules/@trpc/server/dist/index.mjs:431:36)
    at callRecursive (webpack-internal:///(:3000/rsc)/./node_modules/@trpc/server/dist/index.mjs:467:38)
    at resolve (webpack-internal:///(:3000/rsc)/./node_modules/@trpc/server/dist/index.mjs:497:30)
    at callProcedure (webpack-internal:///(:3000/rsc)/./node_modules/@trpc/server/dist/config-4c0f8e88.mjs:189:12)
    at inputToProcedureCall (webpack-internal:///(:3000/rsc)/./node_modules/@trpc/server/dist/resolveHTTPResponse-68c8befb.mjs:54:83)
    at eval (webpack-internal:///(:3000/rsc)/./node_modules/@trpc/server/dist/resolveHTTPResponse-68c8befb.mjs:177:51)
    at Array.map (<anonymous>)
    at resolveHTTPResponse (webpack-internal:///(:3000/rsc)/./node_modules/@trpc/server/dist/resolveHTTPResponse-68c8befb.mjs:177:32)
Which includes the line number.
12 replies
TtRPC
Created by cadams on 11/1/2023 in #❓-help
When error in tRPC route, the error message is vauge
That example with the console would just print undefined as it should, but if I do something like: 
import { procedure, router } from '@/server/trpc';
import { TRPCError } from '@trpc/server';

export const appRouter = router({
  magicNumber: procedure.query(() => {
    try {
      const arr: number[] = [];
      console.log(arr[0].toFixed());
    } catch (e) {
      throw new TRPCError({
        message: 'Magic number procedure error',
        code: 'BAD_REQUEST',
      });
    }
    return 42;
  }),
});

export type AppRouter = typeof appRouter;
import { procedure, router } from '@/server/trpc';
import { TRPCError } from '@trpc/server';

export const appRouter = router({
  magicNumber: procedure.query(() => {
    try {
      const arr: number[] = [];
      console.log(arr[0].toFixed());
    } catch (e) {
      throw new TRPCError({
        message: 'Magic number procedure error',
        code: 'BAD_REQUEST',
      });
    }
    return 42;
  }),
});

export type AppRouter = typeof appRouter;
It gives me Magic number procedure error on the client side. I'm using this setup. It has no additional error formatting.
12 replies
TtRPC
Created by junior1 on 11/1/2023 in #❓-help
trpc error
Did it work?
20 replies
TtRPC
Created by junior1 on 11/1/2023 in #❓-help
trpc error
Files containing JSX should have a .jsx or .tsx extension.
20 replies
TtRPC
Created by junior1 on 11/1/2023 in #❓-help
trpc error
Oh actually, can you try saving it as a tsx file instead of a ts file?
20 replies
TtRPC
Created by junior1 on 11/1/2023 in #❓-help
trpc error
I'll check it out in about an hour or so
20 replies
TtRPC
Created by benjaminreid on 11/1/2023 in #❓-help
Would you recommend tRPC’s usage in this case?
I think there's nothing wrong with creating a reusable piece of logic, but you say make the client its own package. Why the client? Personally I'd create a private package with only the common logic in it as an async function. No reference to even trpc. Then I'd install this package on both applications, and invoke the library function in a procedure somewhere in a router. This way you can easily: - Transform the results further. - Have completely unique trpc configurations. - Have different trpc clients / links - Use the api call anywhere, even without trpc. - Extend the library with other API integrations in the future. - Have independent repos for the two apps and the library without any issues.
7 replies
TtRPC
Created by Zion on 11/1/2023 in #❓-help
Help with inferring output
Sorry, forgot to address the conditionals. I found a bug report here
9 replies
TtRPC
Created by Zion on 11/1/2023 in #❓-help
Help with inferring output
Does this help? Prisma has some tools to infer the types of select, include, etc..., I also had a similar use case.
9 replies
TtRPC
Created by junior1 on 11/1/2023 in #❓-help
trpc error
Could you share a repo so i can reproduce your issue?
20 replies
TtRPC
Created by cadams on 11/1/2023 in #❓-help
When error in tRPC route, the error message is vauge
Could you share repo for reproduction?
12 replies
TtRPC
Created by aryzing on 10/31/2023 in #❓-help
How to configure context for a standalone server?
Maybe you're looking for this and this
6 replies
TtRPC
Created by aryzing on 10/31/2023 in #❓-help
What's the negative code returned in error responses?
tRPC is compliant with JSON-RPC and has specific error codes. You can find them here; The docs have a great explanation on handling errors.
6 replies
TTCTheo's Typesafe Cult
Created by quest1onmark on 10/29/2023 in #questions
TRPC server recieves... html?
You're welcome.
28 replies
TTCTheo's Typesafe Cult
Created by quest1onmark on 10/29/2023 in #questions
TRPC server recieves... html?
Oh and getting it to reproduce took longer than finding the cause. The global style import was wrong, then after getting the keys from clerk, it wasn't redirecting me to the login. I was just stuck on the home page. So I had to add a sign in / out button.
28 replies
TTCTheo's Typesafe Cult
Created by quest1onmark on 10/29/2023 in #questions
TRPC server recieves... html?
I had to play around with it a little, but it was mostly about trying to find where the html could come from. After finding the custom redirect response in the middleware I was pretty confident that's the issue.
28 replies
TTCTheo's Typesafe Cult
Created by quest1onmark on 10/29/2023 in #questions
TRPC server recieves... html?
The issue was in the middleware. Your custom redirect logic doesn't work well with tRPC. tRPC is meant to handle JSON formatted data, but the redirect will send some html down the wire. I suppose you wouldn't want to redirect in the middle of the mutation anyway, so one way to handle it would be to add one more condition to your redirect logic like this: 
import { authMiddleware, redirectToSignIn } from "@clerk/nextjs";
import { redirect } from "next/navigation";
import { NextResponse } from "next/server";

// This example protects all routes including api/trpc routes
// Please edit this to allow other routes to be public as needed.
// See https://clerk.com/docs/references/nextjs/auth-middleware for more information about configuring your Middleware
export default authMiddleware({
  afterAuth(auth, req, _evt) {
    if (!auth.userId && !auth.isPublicRoute) {
      redirectToSignIn({ returnBackUrl: req.url });
    }
    if (
      auth.userId &&
      !auth.user?.firstName &&
      !auth.user?.lastName &&
      !auth.user?.username &&
      !auth.user?.publicMetadata.yearsAtWork &&
      req.nextUrl.pathname !== "/sign-up" &&
      !req.nextUrl.pathname.match("/(api|trpc)(.*)") // <-- Don't redirect if it's a tRPC API call
    ) {
      const signUp = new URL("/sign-up", req.url);
      return NextResponse.redirect(signUp);
    }
  },
});

export const config = {
  matcher: ["/((?!.+\\.[\\w]+$|_next).*)", "/", "/(api|trpc)(.*)"],
};
import { authMiddleware, redirectToSignIn } from "@clerk/nextjs";
import { redirect } from "next/navigation";
import { NextResponse } from "next/server";

// This example protects all routes including api/trpc routes
// Please edit this to allow other routes to be public as needed.
// See https://clerk.com/docs/references/nextjs/auth-middleware for more information about configuring your Middleware
export default authMiddleware({
  afterAuth(auth, req, _evt) {
    if (!auth.userId && !auth.isPublicRoute) {
      redirectToSignIn({ returnBackUrl: req.url });
    }
    if (
      auth.userId &&
      !auth.user?.firstName &&
      !auth.user?.lastName &&
      !auth.user?.username &&
      !auth.user?.publicMetadata.yearsAtWork &&
      req.nextUrl.pathname !== "/sign-up" &&
      !req.nextUrl.pathname.match("/(api|trpc)(.*)") // <-- Don't redirect if it's a tRPC API call
    ) {
      const signUp = new URL("/sign-up", req.url);
      return NextResponse.redirect(signUp);
    }
  },
});

export const config = {
  matcher: ["/((?!.+\\.[\\w]+$|_next).*)", "/", "/(api|trpc)(.*)"],
};
28 replies
TTCTheo's Typesafe Cult
Created by quest1onmark on 10/29/2023 in #questions
TRPC server recieves... html?
Yeah I have to agree. Which page where you on? What did you do to get the error, etc...?
28 replies