comments

Author: lindesvard

apps/api/src/controllers/gsc-oauth-callback.controller.ts

@@ -4,6 +4,22 @@ import type { FastifyReply, FastifyRequest } from 'fastify';
 import { z } from 'zod';
 import { LogError } from '@/utils/errors';
 
+const OAUTH_SENSITIVE_KEYS = ['code', 'state'];
+
+function sanitizeOAuthQuery(
+  query: Record<string, unknown> | null | undefined
+): Record<string, string> {
+  if (!query || typeof query !== 'object') {
+    return {};
+  }
+  return Object.fromEntries(
+    Object.entries(query).map(([k, v]) => [
+      k,
+      OAUTH_SENSITIVE_KEYS.includes(k) ? '<redacted>' : String(v),
+    ])
+  );
+}
+
 export async function gscGoogleCallback(
   req: FastifyRequest,
   reply: FastifyReply
@@ -16,27 +32,35 @@ export async function gscGoogleCallback(
 
     const query = schema.safeParse(req.query);
     if (!query.success) {
-      throw new LogError('Invalid GSC callback query params', {
-        error: query.error,
-        query: req.query,
-      });
+      throw new LogError(
+        'Invalid GSC callback query params',
+        sanitizeOAuthQuery(req.query as Record<string, unknown>)
+      );
     }
 
     const { code, state } = query.data;
     const storedState = req.cookies.gsc_oauth_state ?? null;
     const codeVerifier = req.cookies.gsc_code_verifier ?? null;
     const projectId = req.cookies.gsc_project_id ?? null;
 
-    if (!storedState || !codeVerifier || !projectId) {
+    const hasStoredState = storedState !== null;
+    const hasCodeVerifier = codeVerifier !== null;
+    const hasProjectId = projectId !== null;
+    const hasAllCookies = hasStoredState && hasCodeVerifier && hasProjectId;
+    if (!hasAllCookies) {
       throw new LogError('Missing GSC OAuth cookies', {
-        storedState: storedState === null,
-        codeVerifier: codeVerifier === null,
-        projectId: projectId === null,
+        storedState: !hasStoredState,
+        codeVerifier: !hasCodeVerifier,
+        projectId: !hasProjectId,
       });
     }
 
     if (state !== storedState) {
-      throw new LogError('GSC OAuth state mismatch', { state, storedState });
+      throw new LogError('GSC OAuth state mismatch', {
+        hasState: true,
+        hasStoredState: true,
+        stateMismatch: true,
+      });
     }
 
     const tokens = await googleGsc.validateAuthorizationCode(
@@ -91,6 +115,9 @@ export async function gscGoogleCallback(
     return reply.redirect(redirectUrl);
   } catch (error) {
     req.log.error(error);
+    reply.clearCookie('gsc_oauth_state');
+    reply.clearCookie('gsc_code_verifier');
+    reply.clearCookie('gsc_project_id');
     return redirectWithError(reply, error);
   }
 }

apps/start/src/components/page/gsc-breakdown-table.tsx

@@ -43,6 +43,7 @@ export function GscBreakdownTable({ projectId, value, type }: GscBreakdownTableP
 
   const breakdownKey = type === 'page' ? 'query' : 'page';
   const breakdownLabel = type === 'page' ? 'Query' : 'Page';
+  const pluralLabel = type === 'page' ? 'queries' : 'pages';
 
   const maxClicks = Math.max(
     ...(breakdownRows as { clicks: number }[]).map((r) => r.clicks),
@@ -52,7 +53,7 @@ export function GscBreakdownTable({ projectId, value, type }: GscBreakdownTableP
   return (
     <div className="card overflow-hidden">
       <div className="border-b p-4">
-        <h3 className="font-medium text-sm">Top {breakdownLabel.toLowerCase()}s</h3>
+        <h3 className="font-medium text-sm">Top {pluralLabel}</h3>
       </div>
       {isLoading ? (
         <OverviewWidgetTable

apps/start/src/components/page/gsc-cannibalization.tsx

@@ -1,6 +1,7 @@
+import type { IChartRange, IInterval } from '@openpanel/validation';
 import { keepPreviousData, useQuery } from '@tanstack/react-query';
 import { AlertCircleIcon, ChevronsUpDownIcon } from 'lucide-react';
-import { useMemo, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { Pagination } from '@/components/pagination';
 import { useAppContext } from '@/hooks/use-app-context';
 import { useTRPC } from '@/integrations/trpc/react';
@@ -9,8 +10,8 @@ import { cn } from '@/utils/cn';
 
 interface GscCannibalizationProps {
   projectId: string;
-  range: string;
-  interval: string;
+  range: IChartRange;
+  interval: IInterval;
   startDate?: string;
   endDate?: string;
 }
@@ -30,7 +31,13 @@ export function GscCannibalization({
 
   const query = useQuery(
     trpc.gsc.getCannibalization.queryOptions(
-      { projectId, range: range as any, interval: interval as any },
+      {
+        projectId,
+        range,
+        interval,
+        startDate,
+        endDate,
+      },
       { placeholderData: keepPreviousData }
     )
   );
@@ -50,6 +57,9 @@ export function GscCannibalization({
   const items = query.data ?? [];
 
   const pageCount = Math.ceil(items.length / pageSize) || 1;
+  useEffect(() => {
+    setPage((p) => Math.max(0, Math.min(p, pageCount - 1)));
+  }, [items, pageSize, pageCount]);
   const paginatedItems = useMemo(
     () => items.slice(page * pageSize, (page + 1) * pageSize),
     [items, page, pageSize]
@@ -99,7 +109,6 @@ export function GscCannibalization({
           ))}
         {paginatedItems.map((item) => {
           const isOpen = expanded.has(item.query);
-          const winner = item.pages[0];
           const avgCtr =
             item.pages.reduce((s, p) => s + p.ctr, 0) / item.pages.length;
 

apps/start/src/components/pages/page-sparkline.tsx

@@ -8,7 +8,7 @@ interface SparklineBarsProps {
   data: { date: string; pageviews: number }[];
 }
 
-const gap = 1;
+const defaultGap = 1;
 const height = 24;
 const width = 100;
 
@@ -38,7 +38,16 @@ function SparklineBars({ data }: SparklineBarsProps) {
   }
   const max = Math.max(...data.map((d) => d.pageviews), 1);
   const total = data.length;
-  const barW = Math.max(2, Math.floor((width - gap * (total - 1)) / total));
+  // Compute bar width to fit SVG width; reduce gap if needed so barW >= 1 when possible
+  let gap = defaultGap;
+  let barW = Math.floor((width - gap * (total - 1)) / total);
+  if (barW < 1 && total > 1) {
+    gap = 0;
+    barW = Math.floor((width - gap * (total - 1)) / total);
+  }
+  if (barW < 1) {
+    barW = 1;
+  }
   const trend = getTrendDirection(data);
   const trendColor =
     trend === '↑'
@@ -71,9 +80,9 @@ function SparklineBars({ data }: SparklineBarsProps) {
       <Tooltiper
         content={
           trend === '↑'
-            ? 'Upgoing trend'
+            ? 'Upward trend'
             : trend === '↓'
-              ? 'Downgoing trend'
+              ? 'Downward trend'
               : 'Stable trend'
         }
       >

apps/start/src/components/pages/table/columns.tsx

@@ -103,6 +103,16 @@ export function useColumns({
           if (prev == null) {
             return <span className="text-muted-foreground">—</span>;
           }
+          if (prev === 0) {
+            return (
+              <div className="flex items-center gap-2">
+                <span className="font-mono text-sm tabular-nums">
+                  {number.short(row.original.sessions)}
+                </span>
+                <span className="text-muted-foreground">new</span>
+              </div>
+            );
+          }
 
           const pct = ((row.original.sessions - prev) / prev) * 100;
           const isPos = pct >= 0;
@@ -112,15 +122,12 @@ export function useColumns({
               <span className="font-mono text-sm tabular-nums">
                 {number.short(row.original.sessions)}
               </span>
-              {prev === 0 && <span className="text-muted-foreground">new</span>}
-              {prev > 0 && (
-                <span
-                  className={`font-mono text-sm tabular-nums ${isPos ? 'text-emerald-600 dark:text-emerald-400' : 'text-red-600 dark:text-red-400'}`}
-                >
-                  {isPos ? '+' : ''}
-                  {pct.toFixed(1)}%
-                </span>
-              )}
+              <span
+                className={`font-mono text-sm tabular-nums ${isPos ? 'text-emerald-600 dark:text-emerald-400' : 'text-red-600 dark:text-red-400'}`}
+              >
+                {isPos ? '+' : ''}
+                {pct.toFixed(1)}%
+              </span>
             </div>
           );
         },

apps/start/src/components/pages/table/index.tsx

@@ -26,7 +26,12 @@ export function PagesTable({ projectId }: PagesTableProps) {
 
   const pagesQuery = useQuery(
     trpc.event.pages.queryOptions(
-      { projectId, cursor: 1, take: 1000, search: undefined, range, interval },
+      {
+        projectId,
+        search: debouncedSearch ?? undefined,
+        range,
+        interval,
+      },
       { placeholderData: keepPreviousData },
     ),
   );
@@ -44,7 +49,7 @@ export function PagesTable({ projectId }: PagesTableProps) {
         range,
         startDate: startDate ?? undefined,
         endDate: endDate ?? undefined,
-        limit: 1000,
+        limit: 10_000,
       },
       { enabled: isGscConnected },
     ),
@@ -88,22 +93,11 @@ export function PagesTable({ projectId }: PagesTableProps) {
     }));
   }, [pagesQuery.data, gscMap]);
 
-  const filteredData = useMemo(() => {
-    if (!debouncedSearch) return rawData;
-    const q = debouncedSearch.toLowerCase();
-    return rawData.filter(
-      (p) =>
-        p.path.toLowerCase().includes(q) ||
-        p.origin.toLowerCase().includes(q) ||
-        (p.title ?? '').toLowerCase().includes(q),
-    );
-  }, [rawData, debouncedSearch]);
-
   const columns = useColumns({ projectId, isGscConnected, previousMap });
 
   const { table } = useTable({
     columns,
-    data: filteredData,
+    data: rawData,
     loading: pagesQuery.isLoading,
     pageSize: 50,
     name: 'pages',
@@ -133,7 +127,9 @@ export function PagesTable({ projectId }: PagesTableProps) {
             : 'Integrate our web SDK to your site to get pages here.',
         }}
         onRowClick={(row) => {
-          if (!isGscConnected) return;
+          if (!isGscConnected) {
+            return;
+          }
           const page = row.original;
           pushModal('PageDetails', {
             type: 'page',