Tom
Tom
Explore posts from servers
TTCTheo's Typesafe Cult
Created by Tom on 10/15/2023 in #questions
google fonts in vercel/og image
Basically the title. Does anyone have an example of using google fonts in vercel/og image generation? The examples don't have anything, but it seems weird since the rest of my fonts are managed with next/font.
2 replies
TTCTheo's Typesafe Cult
Created by Tom on 10/8/2023 in #questions
OCR (Tesseract) not working well with very clear text (in c or js)
No description
2 replies
TTCTheo's Typesafe Cult
Created by Tom on 8/12/2023 in #questions
Upstash ratelimitting + trpc
In my project I use upstash/ratelimit (pretty much directly copy / pasted from the how-to) and trpc in my nextjs app. Right now, when people hit the ratelimit I get a TRPC error that says "Unexpected end of JSON" because upstash ratelimitting just redirects to this page (again straight from the tutorial)
import type { NextApiRequest, NextApiResponse } from "next";

export default function handler(_req: NextApiRequest, res: NextApiResponse) {
res.status(429);
return res.end();
}
import type { NextApiRequest, NextApiResponse } from "next";

export default function handler(_req: NextApiRequest, res: NextApiResponse) {
res.status(429);
return res.end();
}
Obviously this doesn't match what TRPC expects. how can I return a TRPC error from this non-trpc api route?
3 replies
TTCTheo's Typesafe Cult
Created by Tom on 8/8/2023 in #questions
How to add one-off scripts to a T3 app
I started my project with create-t3-app a long time ago. i see that they've added the new t3 env-next module for managing environment variables in a typesafe way and i decided to switch to it. However, this seems to have broken my scripts directory which can no longer run one-off db scripts because its now importing a .mjs module. What is the recommended way to run one-off typescript scripts in a ct3a project?
8 replies
TTCTheo's Typesafe Cult
Created by Tom on 8/4/2023 in #questions
Is there a way to upgrade env vars in a ct3a project?
I have an app I created a bunch of months aho with create-t3-app. The environment variables were done with a few schema.mjs files and i never reeally knew how to use it so I just did my environment vars with process.env.*. it looks like there a new way to deal with them in a type-safe way. Is there a way to upgrade to the new way? https://create.t3.gg/en/usage/env-variables
5 replies
TTCTheo's Typesafe Cult
Created by Tom on 7/11/2023 in #questions
how does vercel take screenshot?
8 replies
TTCTheo's Typesafe Cult
Created by Tom on 5/6/2023 in #questions
Multiple Database reads in a single roundtrip with Kysely
Is it possible to do multiple SELECTs from the db without another await? I'm assuming I could do something similar with Promise.all(). Is this the best solution?
5 replies
TTCTheo's Typesafe Cult
Created by Tom on 5/5/2023 in #questions
How to do a WHERE clause for a JSON field in kysely
Basically the title. I'm trying to convert the following prisma query to kysely and can't figure out how to do the individual statements inside the where:
prisma.tournament.findMany({
take: 24,
where: {
AND: [
{ data: { path: ["privacy"], equals: "public" } },
{ data: { path: ["deleteTime"], equals: Prisma.JsonNull } },
{ data: { path: ["endTime"], equals: Prisma.JsonNull } },
],
},
}),
prisma.tournament.findMany({
take: 24,
where: {
AND: [
{ data: { path: ["privacy"], equals: "public" } },
{ data: { path: ["deleteTime"], equals: Prisma.JsonNull } },
{ data: { path: ["endTime"], equals: Prisma.JsonNull } },
],
},
}),
data is a Jsonb column. Anybody know how to do this?
5 replies
TTCTheo's Typesafe Cult
Created by Tom on 5/3/2023 in #questions
How to debug Vercel cache misses with tRPC?
Basically. I have a tRPC endpoint with the following NextApiHandler config:
export default createNextApiHandler({
router: appRouter,
createContext: createTrpcContext,
responseMeta: (opts) => {
const { paths, errors, type } = opts;

if (
paths &&
paths.every((path) => path === "tournaments.getTournamentInternal") &&
errors.length === 0 &&
type === "query"
) {
return {
headers: { "cache-control": `max-age=0, s-maxage=30` },
};
}

return {};
},
onError:
env.NODE_ENV === "development"
? ({ path, error }) => {
console.error(`❌ tRPC failed on ${path}: ${error}`);
}
: undefined,
});
export default createNextApiHandler({
router: appRouter,
createContext: createTrpcContext,
responseMeta: (opts) => {
const { paths, errors, type } = opts;

if (
paths &&
paths.every((path) => path === "tournaments.getTournamentInternal") &&
errors.length === 0 &&
type === "query"
) {
return {
headers: { "cache-control": `max-age=0, s-maxage=30` },
};
}

return {};
},
onError:
env.NODE_ENV === "development"
? ({ path, error }) => {
console.error(`❌ tRPC failed on ${path}: ${error}`);
}
: undefined,
});
Right now even if I make 2 requests within a fairly short time I end up with a cache miss. How can I debug this?
2 replies
TTCTheo's Typesafe Cult
Created by Tom on 5/3/2023 in #questions
Fire trpc useQuery only when a callback is called
I have kind of a weird use case. I would like to run a trpc useQuery() only when a callback is called. This callback is triggered by a push notification so I don't want the query to update on its own, only when the callback fires. How can i do this?
6 replies
TTCTheo's Typesafe Cult
Created by Tom on 4/30/2023 in #questions
Calling a 'fire and forget' webhook from trpc without waiting
I would like to call a webhook from a trpc endpoint. Right now I simply call the webhooks without awaiting them so I can get on with returning the response immediately. The problem is that the serverless endpoint is killed as soon as the trpc endpoint returns so sometimes the webhook doesnt run. I want to send a response and THEN process the webhooks so the client isnt waiting. Is there a way to do that?
13 replies
TTCTheo's Typesafe Cult
Created by Tom on 4/30/2023 in #questions
prisma type error on union type stored as json
4 replies
TTCTheo's Typesafe Cult
Created by Tom on 4/24/2023 in #questions
vitest error
5 replies
TTCTheo's Typesafe Cult
Created by Tom on 4/23/2023 in #questions
where to start making my site accessible
I have been working on my site for a while and I’m looking into making it accessible. What are the most important things to do / ensure? So far all I’ve done is add aria labels to my icon buttons.
2 replies
TTCTheo's Typesafe Cult
Created by Tom on 3/21/2023 in #questions
Is there a way to get a flamegraph on a vercel API call?
Basically the title. How do people normally debug requests that take a long time on serverless?
4 replies
TTCTheo's Typesafe Cult
Created by Tom on 3/12/2023 in #questions
How to protect my app against abuse
I'm getting ready to release my app next week and I'm trying to make the final preparations. I have ip-based ratelimitting with upstash so users cant make more than 10 requests per 10s from the same IP. However, I'm a bit concerned about people who might abuse the app and drive up the costs on my serverless backends. My app runs tournaments and currently uses the following services: - Google Cloud Firestore for maintaining the state of each tournament and pushing it to clients in realtime - Google Cloud Storage for holding profile pictures and thumbnails for the tournaments - Algolia for fuzzy searching of the tournaments - Upstash for ratelimitting my API requests - Vercel for hosting the app - Vercel's next/image for caching images My current list of questions are: - What kind of general protections can I put in place to make sure users can't abuse my app. Right now I just have IP based ratelimitting? - What to prevents someone from calling one of the functions to update a tournament over and over agains from a few different computers and driving up cost? - How should I limit the the size of images being uploaded to the app for thumbnails / profile pictures? - Should I be concerned about next/image caching costs?
2 replies
TTCTheo's Typesafe Cult
Created by Tom on 3/7/2023 in #questions
Tiptap Rich Text Editor data validation (alternatives welcome)
Hi. I'm using TipTap to provide a rich text editor for my app. Has anyone ever validated the data going into / out of tiptap? I'm not sure how to write a zod parser for it or if theres a more reasonable way to check the data.
3 replies
TTCTheo's Typesafe Cult
Created by Tom on 3/3/2023 in #questions
running npm script from within npm script fails with ESM error
here are the scripts from my package.json:
"scripts": {
"build": "next build",
"dev": "next dev",
"lint": "next lint",
"start": "next start",
"test:run": "vitest",
"test": "firebase emulators:exec 'npm run test:run'"
},
"scripts": {
"build": "next build",
"dev": "next dev",
"lint": "next lint",
"start": "next start",
"test:run": "vitest",
"test": "firebase emulators:exec 'npm run test:run'"
},
when I run npm run test I get the following error:
> firebase emulators:exec 'npm run test:run'

i emulators: Starting emulators: auth, firestore, storage
i firestore: Firestore Emulator logging to firestore-debug.log
✔ firestore: Firestore Emulator UI websocket is running on 9150.
i Running script: npm run test:run

> [email protected] test:run /Users/tom/Development/projects/t3-true-finals
> vitest

node:internal/modules/cjs/loader:979
throw new ERR_REQUIRE_ESM(filename, true);
^

Error [ERR_REQUIRE_ESM]: require() of ES Module /Users/tom/Development/projects/t3-true-finals/node_modules/vitest/vitest.mjs not supported.
Instead change the require of /Users/tom/Development/projects/t3-true-finals/node_modules/vitest/vitest.mjs to a dynamic import() which is available in all CommonJS modules.
at Function.runMain (pkg/prelude/bootstrap.js:1983:12) {
code: 'ERR_REQUIRE_ESM'
}
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] test:run: `vitest`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] test:run script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! /Users/tom/.npm/_logs/2023-03-03T02_28_14_203Z-debug.log
> firebase emulators:exec 'npm run test:run'

i emulators: Starting emulators: auth, firestore, storage
i firestore: Firestore Emulator logging to firestore-debug.log
✔ firestore: Firestore Emulator UI websocket is running on 9150.
i Running script: npm run test:run

> [email protected] test:run /Users/tom/Development/projects/t3-true-finals
> vitest

node:internal/modules/cjs/loader:979
throw new ERR_REQUIRE_ESM(filename, true);
^

Error [ERR_REQUIRE_ESM]: require() of ES Module /Users/tom/Development/projects/t3-true-finals/node_modules/vitest/vitest.mjs not supported.
Instead change the require of /Users/tom/Development/projects/t3-true-finals/node_modules/vitest/vitest.mjs to a dynamic import() which is available in all CommonJS modules.
at Function.runMain (pkg/prelude/bootstrap.js:1983:12) {
code: 'ERR_REQUIRE_ESM'
}
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] test:run: `vitest`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] test:run script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! /Users/tom/.npm/_logs/2023-03-03T02_28_14_203Z-debug.log
4 replies
TTCTheo's Typesafe Cult
Created by Tom on 3/2/2023 in #questions
Does vitest have a global teardown function?
I would like to run some cleanup mode in vitest after ALL tests in every test module are done. Is there a way to do this? All of the module files seem to run in parallel.
3 replies