Sam Posts - Answer Overflow

Sam

Explore posts from servers

•Created by Sam on 7/1/2024 in #✋｜help

Is there a way to check metrics for a specific day?

Hey there, we discovered one of our services started to ramp up in RAM usage gradually over the past week and didn't spot it until today. We're trying to narrow down which commit caused this to start happening but because we can't view metrics for a specific day there doesn't seem to be a way for us to do some further research. Please advise.

8 replies

RRailway

•Created by Sam on 4/22/2024 in #✋｜help

Dockerized next.js app - not getting environment variables on runtime

Hi there, I'm having troubles dockerizing my next.js app, at this point I'm able to get it building and using ARG to get the environment variables on buildtime but for some reason they're not being passed through on runtime. Here's my dockerfile:

FROM node:18-alpine AS base

ARG BOT_WEBHOOK_API_KEY
ARG CLIENT_ID
ARG CLIENT_SECRET
ARG DATABASE_URL
ARG REDIRECT_URI
ARG VATSIM_API_KEY

ENV BOT_WEBHOOK_API_KEY=$BOT_WEBHOOK_API_KEY \
  CLIENT_ID=$CLIENT_ID \
  CLIENT_SECRET=$CLIENT_SECRET \
  DATABASE_URL=$DATABASE_URL \
  REDIRECT_URI=$REDIRECT_URI \
  VATSIM_API_KEY=$VATSIM_API_KEY

# Install dependencies only when needed
FROM base AS deps
# Check https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine to understand why libc6-compat might be needed.
RUN apk add --no-cache libc6-compat
WORKDIR /app

ARG BOT_WEBHOOK_API_KEY
ARG CLIENT_ID
ARG CLIENT_SECRET
ARG DATABASE_URL
ARG REDIRECT_URI
ARG VATSIM_API_KEY

ENV BOT_WEBHOOK_API_KEY=$BOT_WEBHOOK_API_KEY \
  CLIENT_ID=$CLIENT_ID \
  CLIENT_SECRET=$CLIENT_SECRET \
  DATABASE_URL=$DATABASE_URL \
  REDIRECT_URI=$REDIRECT_URI \
  VATSIM_API_KEY=$VATSIM_API_KEY

# Install dependencies based on the preferred package manager
COPY package.json yarn.lock* package-lock.json* pnpm-lock.yaml* ./
COPY prisma ./prisma/
RUN \
  if [ -f yarn.lock ]; then yarn --frozen-lockfile; \
  elif [ -f package-lock.json ]; then npm ci; \
  elif [ -f pnpm-lock.yaml ]; then corepack enable pnpm && pnpm i --frozen-lockfile; \
  else echo "Lockfile not found." && exit 1; \
  fi


# Rebuild the source code only when needed
FROM base AS builder
WORKDIR /app
COPY --from=deps /app/node_modules ./node_modules
COPY . .

ARG BOT_WEBHOOK_API_KEY
ARG CLIENT_ID
ARG CLIENT_SECRET
ARG DATABASE_URL
ARG REDIRECT_URI
ARG VATSIM_API_KEY

ENV BOT_WEBHOOK_API_KEY=$BOT_WEBHOOK_API_KEY \
  CLIENT_ID=$CLIENT_ID \
  CLIENT_SECRET=$CLIENT_SECRET \
  DATABASE_URL=$DATABASE_URL \
  REDIRECT_URI=$REDIRECT_URI \
  VATSIM_API_KEY=$VATSIM_API_KEY

# Next.js collects completely anonymous telemetry data about general usage.
# Learn more here: https://nextjs.org/telemetry
# Uncomment the following line in case you want to disable telemetry during the build.
# ENV NEXT_TELEMETRY_DISABLED 1

RUN \
  if [ -f yarn.lock ]; then yarn run build; \
  elif [ -f package-lock.json ]; then npm run build; \
  elif [ -f pnpm-lock.yaml ]; then corepack enable pnpm && pnpm run build; \
  else echo "Lockfile not found." && exit 1; \
  fi

# Production image, copy all the files and run next
FROM base AS runner
WORKDIR /app

ARG BOT_WEBHOOK_API_KEY
ARG CLIENT_ID
ARG CLIENT_SECRET
ARG DATABASE_URL
ARG REDIRECT_URI
ARG VATSIM_API_KEY

ENV BOT_WEBHOOK_API_KEY=$BOT_WEBHOOK_API_KEY \
  CLIENT_ID=$CLIENT_ID \
  CLIENT_SECRET=$CLIENT_SECRET \
  DATABASE_URL=$DATABASE_URL \
  REDIRECT_URI=$REDIRECT_URI \
  VATSIM_API_KEY=$VATSIM_API_KEY

ENV NODE_ENV production
# Uncomment the following line in case you want to disable telemetry during runtime.
# ENV NEXT_TELEMETRY_DISABLED 1

RUN addgroup --system --gid 1001 nodejs
RUN adduser --system --uid 1001 nextjs

COPY --from=builder /app/public ./public

# Set the correct permission for prerender cache
RUN mkdir .next
RUN chown nextjs:nodejs .next

# Automatically leverage output traces to reduce image size
# https://nextjs.org/docs/advanced-features/output-file-tracing
COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static

USER nextjs

EXPOSE 3000

ENV PORT 3000

# server.js is created by next build from the standalone output
# https://nextjs.org/docs/pages/api-reference/next-config-js/output
CMD HOSTNAME="0.0.0.0" node server.js

FROM node:18-alpine AS base

ARG BOT_WEBHOOK_API_KEY
ARG CLIENT_ID
ARG CLIENT_SECRET
ARG DATABASE_URL
ARG REDIRECT_URI
ARG VATSIM_API_KEY

ENV BOT_WEBHOOK_API_KEY=$BOT_WEBHOOK_API_KEY \
  CLIENT_ID=$CLIENT_ID \
  CLIENT_SECRET=$CLIENT_SECRET \
  DATABASE_URL=$DATABASE_URL \
  REDIRECT_URI=$REDIRECT_URI \
  VATSIM_API_KEY=$VATSIM_API_KEY

# Install dependencies only when needed
FROM base AS deps
# Check https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine to understand why libc6-compat might be needed.
RUN apk add --no-cache libc6-compat
WORKDIR /app

ARG BOT_WEBHOOK_API_KEY
ARG CLIENT_ID
ARG CLIENT_SECRET
ARG DATABASE_URL
ARG REDIRECT_URI
ARG VATSIM_API_KEY

ENV BOT_WEBHOOK_API_KEY=$BOT_WEBHOOK_API_KEY \
  CLIENT_ID=$CLIENT_ID \
  CLIENT_SECRET=$CLIENT_SECRET \
  DATABASE_URL=$DATABASE_URL \
  REDIRECT_URI=$REDIRECT_URI \
  VATSIM_API_KEY=$VATSIM_API_KEY

# Install dependencies based on the preferred package manager
COPY package.json yarn.lock* package-lock.json* pnpm-lock.yaml* ./
COPY prisma ./prisma/
RUN \
  if [ -f yarn.lock ]; then yarn --frozen-lockfile; \
  elif [ -f package-lock.json ]; then npm ci; \
  elif [ -f pnpm-lock.yaml ]; then corepack enable pnpm && pnpm i --frozen-lockfile; \
  else echo "Lockfile not found." && exit 1; \
  fi


# Rebuild the source code only when needed
FROM base AS builder
WORKDIR /app
COPY --from=deps /app/node_modules ./node_modules
COPY . .

ARG BOT_WEBHOOK_API_KEY
ARG CLIENT_ID
ARG CLIENT_SECRET
ARG DATABASE_URL
ARG REDIRECT_URI
ARG VATSIM_API_KEY

ENV BOT_WEBHOOK_API_KEY=$BOT_WEBHOOK_API_KEY \
  CLIENT_ID=$CLIENT_ID \
  CLIENT_SECRET=$CLIENT_SECRET \
  DATABASE_URL=$DATABASE_URL \
  REDIRECT_URI=$REDIRECT_URI \
  VATSIM_API_KEY=$VATSIM_API_KEY

# Next.js collects completely anonymous telemetry data about general usage.
# Learn more here: https://nextjs.org/telemetry
# Uncomment the following line in case you want to disable telemetry during the build.
# ENV NEXT_TELEMETRY_DISABLED 1

RUN \
  if [ -f yarn.lock ]; then yarn run build; \
  elif [ -f package-lock.json ]; then npm run build; \
  elif [ -f pnpm-lock.yaml ]; then corepack enable pnpm && pnpm run build; \
  else echo "Lockfile not found." && exit 1; \
  fi

# Production image, copy all the files and run next
FROM base AS runner
WORKDIR /app

ARG BOT_WEBHOOK_API_KEY
ARG CLIENT_ID
ARG CLIENT_SECRET
ARG DATABASE_URL
ARG REDIRECT_URI
ARG VATSIM_API_KEY

ENV BOT_WEBHOOK_API_KEY=$BOT_WEBHOOK_API_KEY \
  CLIENT_ID=$CLIENT_ID \
  CLIENT_SECRET=$CLIENT_SECRET \
  DATABASE_URL=$DATABASE_URL \
  REDIRECT_URI=$REDIRECT_URI \
  VATSIM_API_KEY=$VATSIM_API_KEY

ENV NODE_ENV production
# Uncomment the following line in case you want to disable telemetry during runtime.
# ENV NEXT_TELEMETRY_DISABLED 1

RUN addgroup --system --gid 1001 nodejs
RUN adduser --system --uid 1001 nextjs

COPY --from=builder /app/public ./public

# Set the correct permission for prerender cache
RUN mkdir .next
RUN chown nextjs:nodejs .next

# Automatically leverage output traces to reduce image size
# https://nextjs.org/docs/advanced-features/output-file-tracing
COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static

USER nextjs

EXPOSE 3000

ENV PORT 3000

# server.js is created by next build from the standalone output
# https://nextjs.org/docs/pages/api-reference/next-config-js/output
CMD HOSTNAME="0.0.0.0" node server.js

210 replies

TTCTheo's Typesafe Cult

•Created by Sam on 8/3/2023 in #questions

Submitting form on main page from within dialog

Hi there, I'm using shadcn/ui for my UI and i'm trying to figure out how to make a form confirmation dialog. The <Button type="submit">Upgrade</Button> doesn't seem to submit the form on the outside of the dialog. Here is my code:

<Form {...ratingForm}>
          <form
            onSubmit={ratingForm.handleSubmit((v) => {
              startTransition(() =>
                updateRating(member.id, {
                  comment: v.comment,
                  rating: v.rating,
                })
              );
            })}
            className="space-y-2"
          >
            <FormField
              control={ratingForm.control}
              name="rating"
              render={({ field }) => (
                <FormItem>
                  <FormLabel className="text-md">
                    Member: {member.name_first} {member.name_last}
                  </FormLabel>
                  <Select
                    onValueChange={field.onChange}
                    defaultValue={member.rating.toString()}
                  >
                    <FormControl>
                      <SelectTrigger className="w-[180px]">
                        <SelectValue />
                      </SelectTrigger>
                    </FormControl>
                    <SelectContent>
                      <SelectItem value="1">OBS</SelectItem>
                      <SelectItem value="2">S1</SelectItem>
                      <SelectItem value="3">S2</SelectItem>
                      <SelectItem value="4">S3</SelectItem>
                      <SelectItem value="5">C1</SelectItem>
                      <SelectItem value="7">C3</SelectItem>
                      <SelectItem value="8">I1</SelectItem>
                      <SelectItem value="10">I3</SelectItem>
                    </SelectContent>
                  </Select>
                  <FormMessage />
                </FormItem>
              )}
            />
            <FormField
              control={ratingForm.control}
              name="comment"
              render={({ field }) => (
                <FormItem>
                  <FormControl>
                    <Input placeholder="Comment..." {...field} />
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}
            />
            <Dialog>
              <DialogContent>
                <DialogHeader>
                  <DialogTitle>Are you sure absolutely sure?</DialogTitle>
                  <DialogDescription>
                    This action cannot be undone. This will permanently upgrade
                    the member&apos;s rating without any possibility to reverse
                    it.
                  </DialogDescription>
                </DialogHeader>
                <DialogFooter>
                  <Button type="submit">Upgrade</Button>
                </DialogFooter>
              </DialogContent>
              <DialogTrigger asChild>
                <Button>Upgrade</Button>
              </DialogTrigger>
            </Dialog>
          </form>
        </Form>

<Form {...ratingForm}>
          <form
            onSubmit={ratingForm.handleSubmit((v) => {
              startTransition(() =>
                updateRating(member.id, {
                  comment: v.comment,
                  rating: v.rating,
                })
              );
            })}
            className="space-y-2"
          >
            <FormField
              control={ratingForm.control}
              name="rating"
              render={({ field }) => (
                <FormItem>
                  <FormLabel className="text-md">
                    Member: {member.name_first} {member.name_last}
                  </FormLabel>
                  <Select
                    onValueChange={field.onChange}
                    defaultValue={member.rating.toString()}
                  >
                    <FormControl>
                      <SelectTrigger className="w-[180px]">
                        <SelectValue />
                      </SelectTrigger>
                    </FormControl>
                    <SelectContent>
                      <SelectItem value="1">OBS</SelectItem>
                      <SelectItem value="2">S1</SelectItem>
                      <SelectItem value="3">S2</SelectItem>
                      <SelectItem value="4">S3</SelectItem>
                      <SelectItem value="5">C1</SelectItem>
                      <SelectItem value="7">C3</SelectItem>
                      <SelectItem value="8">I1</SelectItem>
                      <SelectItem value="10">I3</SelectItem>
                    </SelectContent>
                  </Select>
                  <FormMessage />
                </FormItem>
              )}
            />
            <FormField
              control={ratingForm.control}
              name="comment"
              render={({ field }) => (
                <FormItem>
                  <FormControl>
                    <Input placeholder="Comment..." {...field} />
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}
            />
            <Dialog>
              <DialogContent>
                <DialogHeader>
                  <DialogTitle>Are you sure absolutely sure?</DialogTitle>
                  <DialogDescription>
                    This action cannot be undone. This will permanently upgrade
                    the member&apos;s rating without any possibility to reverse
                    it.
                  </DialogDescription>
                </DialogHeader>
                <DialogFooter>
                  <Button type="submit">Upgrade</Button>
                </DialogFooter>
              </DialogContent>
              <DialogTrigger asChild>
                <Button>Upgrade</Button>
              </DialogTrigger>
            </Dialog>
          </form>
        </Form>

1 replies

TTCTheo's Typesafe Cult

•Created by Sam on 5/4/2023 in #questions

Clerk + Next.js app router <SignedOut> children not rendered after <UserButton> sign out

Hi there! I'm currently building an app with Clerk and I've got signing in working however when I sign out using the <UserButton> component however after the redirect, my sign in button isn't rendered until a refresh of the page. Here's my code:

<SignedOut>
          <SignInButton />
        </SignedOut>
        <SignedIn>
          <div className="flex h-12 w-12 items-center">
            <UserButton
              afterSignOutUrl="/"
              appearance={{
                layout: {
                  logoPlacement: "none",
                },
                elements: {
                  userButtonAvatarBox: "h-8 w-8 sm:h-12 sm:w-12",
                },
              }}
            />
          </div>
        </SignedIn

<SignedOut>
          <SignInButton />
        </SignedOut>
        <SignedIn>
          <div className="flex h-12 w-12 items-center">
            <UserButton
              afterSignOutUrl="/"
              appearance={{
                layout: {
                  logoPlacement: "none",
                },
                elements: {
                  userButtonAvatarBox: "h-8 w-8 sm:h-12 sm:w-12",
                },
              }}
            />
          </div>
        </SignedIn

Thanks in advance!

6 replies

TTCTheo's Typesafe Cult

•Created by Sam on 5/3/2023 in #questions

Clerk re-render parent server component on sign out with custom sign out button.

Hi I'm probably being a little stupid here but I'm just wondering what the best and most simple way to create a custom sign out button when using Clerk? I was able to create a Sign out button with the following code but the parent server component wouldn't rerender so I needed to refresh for it to show me as logged out:

export const CustomSignOut = () => {
  const { signOut } = useClerk();

  return (
    <div>
      <Button onClick={() => signOut()} variant={"outline"}>
        Sign Out
      </Button>
    </div>
  );
};

export const CustomSignOut = () => {
  const { signOut } = useClerk();

  return (
    <div>
      <Button onClick={() => signOut()} variant={"outline"}>
        Sign Out
      </Button>
    </div>
  );
};

How can I get the parent server component to re-render on sign out? Thanks in advance!

6 replies

Gaming

Programming