External/SnapOtter
1
0
Fork 0
mirror of https://github.com/snapotter-hq/SnapOtter.git synced 2026-08-03 07:46:42 +02:00
Code Issues Packages Projects Releases Wiki Activity

fix: resolve 20 Sentry issues and fix navbar test flakiness

Browse Source 
Sentry fixes:
- Only send 5xx errors to Sentry (was sending 4xx rate-limit, media type errors)
- Encode non-ASCII chars in X-Output-Filename header (encodeURIComponent)
- Handle FK constraint failures gracefully in file upload, pipeline save, API keys
- Harden getDirSize against ENOENT race on readdirSync

Test fixes:
- Wrap navbar test renders in act() to flush async useEffect state updates
- Add useEffect cleanup to navbar to prevent state updates on unmounted component
- Fixes timeout when running in full test suite
This commit is contained in:
SnapOtter
2026-05-01 19:01:05 +08:00
parent ff8dcf63c7
commit 66211ed6a7
9 changed files with 128 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.gitignore
+1
View File
@@ -57,3 +57,4 @@ audit_report.md
.mcp.json
tests/benchmark/bench-limits-results-mac.jsonl
.superpowers/
scripts/setup-cloudflare-email.sh
apps/api/src/index.ts
+3 -1
View File
@@ -100,7 +100,9 @@ app.setErrorHandler((error: Error & { statusCode?: number }, request, reply) =>
{ err: error, url: request.url, method: request.method },
"Unhandled request error",
);
captureException(error, request);
if (statusCode >= 500) {
captureException(error, request);
}
const isProduction = process.env.NODE_ENV === "production";
reply.status(statusCode).send({
error: statusCode >= 500 ? "Internal server error" : error.message,
apps/api/src/routes/api-keys.ts
+15 -11
View File
@@ -72,17 +72,21 @@ export async function apiKeyRoutes(app: FastifyInstance): Promise<void> {
const keyPrefix = computeKeyPrefix(rawKey);
const id = randomUUID();
db.insert(schema.apiKeys)
.values({
id,
userId: user.id,
keyHash,
keyPrefix,
name,
permissions: scopedPermissions ? JSON.stringify(scopedPermissions) : null,
expiresAt,
})
.run();
try {
db.insert(schema.apiKeys)
.values({
id,
userId: user.id,
keyHash,
keyPrefix,
name,
permissions: scopedPermissions ? JSON.stringify(scopedPermissions) : null,
expiresAt,
})
.run();
} catch {
return reply.status(409).send({ error: "Failed to create API key" });
}
auditLog(request.log, "API_KEY_CREATED", { userId: user.id, keyId: id, keyName: name });
apps/api/src/routes/features.ts
+7 -2
View File
@@ -9,7 +9,7 @@
import { spawn } from "node:child_process";
import crypto from "node:crypto";
import { existsSync, readdirSync, readFileSync, statSync, unlinkSync } from "node:fs";
import { type Dirent, existsSync, readdirSync, readFileSync, statSync, unlinkSync } from "node:fs";
import { join } from "node:path";
import { shutdownDispatcher } from "@snapotter/ai";
import { ANALYTICS_EVENTS, FEATURE_BUNDLES } from "@snapotter/shared";
@@ -67,7 +67,12 @@ function getDirSize(dirPath: string): number {
if (!existsSync(dirPath)) return 0;
let total = 0;
const entries = readdirSync(dirPath, { withFileTypes: true });
let entries: Dirent[];
try {
entries = readdirSync(dirPath, { withFileTypes: true });
} catch {
return 0;
}
for (const entry of entries) {
const fullPath = join(dirPath, entry.name);
if (entry.isDirectory()) {
apps/api/src/routes/pipeline.ts
+13 -9
View File
@@ -329,15 +329,19 @@ export async function registerPipelineRoutes(app: FastifyInstance): Promise<void
const id = randomUUID();
db.insert(schema.pipelines)
.values({
id,
userId: user.id,
name,
description: description ?? null,
steps: JSON.stringify(steps),
})
.run();
try {
db.insert(schema.pipelines)
.values({
id,
userId: user.id,
name,
description: description ?? null,
steps: JSON.stringify(steps),
})
.run();
} catch {
return reply.status(409).send({ error: "Failed to save pipeline" });
}
return reply.status(201).send({
id,
apps/api/src/routes/tools/optimize-for-web.ts
+1 -1
View File
@@ -149,7 +149,7 @@ export function registerOptimizeForWeb(app: FastifyInstance) {
reply.header("Content-Type", result.contentType);
reply.header("X-Original-Size", String(fileBuffer.length));
reply.header("X-Processed-Size", String(result.buffer.length));
reply.header("X-Output-Filename", result.filename);
reply.header("X-Output-Filename", encodeURIComponent(result.filename));
return reply.send(result.buffer);
} catch (err) {
const message = err instanceof Error ? err.message : "Preview processing failed";
apps/api/src/routes/user-files.ts
+38 -30
View File
@@ -198,21 +198,25 @@ export async function userFileRoutes(app: FastifyInstance): Promise<void> {
// Create DB record
const id = randomUUID();
db.insert(schema.userFiles)
.values({
id,
userId,
originalName: safeName,
storedName,
mimeType,
size: safeBuffer.length,
width: validation.width,
height: validation.height,
version: 1,
parentId: null,
toolChain: null,
})
.run();
try {
db.insert(schema.userFiles)
.values({
id,
userId,
originalName: safeName,
storedName,
mimeType,
size: safeBuffer.length,
width: validation.width,
height: validation.height,
version: 1,
parentId: null,
toolChain: null,
})
.run();
} catch {
return reply.status(409).send({ error: "Failed to save file record" });
}
const row = db.select().from(schema.userFiles).where(eq(schema.userFiles.id, id)).get();
@@ -555,21 +559,25 @@ export async function userFileRoutes(app: FastifyInstance): Promise<void> {
// Create DB record
const id = randomUUID();
db.insert(schema.userFiles)
.values({
id,
userId,
originalName: resultName,
storedName,
mimeType,
size: safeResultBuffer.length,
width: validation.width,
height: validation.height,
version: nextVersion,
parentId,
toolChain: JSON.stringify(newChain),
})
.run();
try {
db.insert(schema.userFiles)
.values({
id,
userId,
originalName: resultName,
storedName,
mimeType,
size: safeResultBuffer.length,
width: validation.width,
height: validation.height,
version: nextVersion,
parentId,
toolChain: JSON.stringify(newChain),
})
.run();
} catch {
return reply.status(409).send({ error: "Failed to save result record" });
}
const row = db.select().from(schema.userFiles).where(eq(schema.userFiles.id, id)).get();
apps/landing/src/components/navbar.tsx
+5 -1
View File
@@ -24,14 +24,18 @@ export function Navbar() {
const [stars, setStars] = useState<string>("Star");
useEffect(() => {
let cancelled = false;
fetch("https://api.github.com/repos/snapotter-hq/snapotter")
.then((res) => res.json())
.then((data) => {
if (typeof data.stargazers_count === "number") {
if (!cancelled && typeof data.stargazers_count === "number") {
setStars(formatStarCount(data.stargazers_count));
}
})
.catch(() => {});
return () => {
cancelled = true;
};
}, []);
return (
tests/unit/landing/navbar.test.tsx
+45 -32
View File
@@ -1,6 +1,6 @@
// @vitest-environment jsdom
import { cleanup, fireEvent, render, screen, waitFor } from "@testing-library/react";
import { act, cleanup, fireEvent, render, screen } from "@testing-library/react";
import type React from "react";
import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
@@ -28,69 +28,78 @@ beforeEach(() => {
afterEach(cleanup);
describe("Navbar", () => {
it("renders the brand name", () => {
render(<Navbar />);
it("renders the brand name", async () => {
await act(async () => {
render(<Navbar />);
});
expect(screen.getByText("SnapOtter")).toBeDefined();
});
it("renders navigation links", () => {
render(<Navbar />);
it("renders navigation links", async () => {
await act(async () => {
render(<Navbar />);
});
expect(screen.getAllByText("Features").length).toBeGreaterThan(0);
expect(screen.getAllByText("Pricing").length).toBeGreaterThan(0);
expect(screen.getAllByText("Docs").length).toBeGreaterThan(0);
expect(screen.getAllByText("Contact").length).toBeGreaterThan(0);
});
it("renders Book a Demo CTA", () => {
render(<Navbar />);
it("renders Book a Demo CTA", async () => {
await act(async () => {
render(<Navbar />);
});
const ctas = screen.getAllByText("Book a Demo");
expect(ctas.length).toBeGreaterThan(0);
});
it("fetches GitHub star count on mount", async () => {
render(<Navbar />);
await waitFor(() => {
expect(fetchMock).toHaveBeenCalledWith("https://api.github.com/repos/snapotter-hq/snapotter");
await act(async () => {
render(<Navbar />);
});
expect(fetchMock).toHaveBeenCalledWith("https://api.github.com/repos/snapotter-hq/snapotter");
});
it("displays formatted star count after fetch", async () => {
render(<Navbar />);
await waitFor(() => {
expect(screen.getByText("1.2k")).toBeDefined();
await act(async () => {
render(<Navbar />);
});
expect(screen.getByText("1.2k")).toBeDefined();
});
it("formats star count correctly for exact thousands", async () => {
fetchMock.mockResolvedValue({
json: () => Promise.resolve({ stargazers_count: 2000 }),
});
render(<Navbar />);
await waitFor(() => {
expect(screen.getByText("2k")).toBeDefined();
await act(async () => {
render(<Navbar />);
});
expect(screen.getByText("2k")).toBeDefined();
});
it("shows raw count for numbers under 1000", async () => {
fetchMock.mockResolvedValue({
json: () => Promise.resolve({ stargazers_count: 456 }),
});
render(<Navbar />);
await waitFor(() => {
expect(screen.getByText("456")).toBeDefined();
await act(async () => {
render(<Navbar />);
});
expect(screen.getByText("456")).toBeDefined();
});
it("handles star fetch failure gracefully", async () => {
fetchMock.mockRejectedValue(new Error("Network error"));
render(<Navbar />);
await waitFor(() => expect(fetchMock).toHaveBeenCalled());
// Star count should not appear - still shows default "Star" text
await act(async () => {
render(<Navbar />);
});
expect(fetchMock).toHaveBeenCalled();
expect(screen.getAllByText("Star on GitHub").length).toBeGreaterThan(0);
});
it("toggles mobile menu on hamburger click", () => {
render(<Navbar />);
it("toggles mobile menu on hamburger click", async () => {
await act(async () => {
render(<Navbar />);
});
const toggleButton = screen.getByLabelText("Toggle menu");
expect(screen.queryByText("Book a Demo")).toBeDefined();
fireEvent.click(toggleButton);
@@ -98,17 +107,19 @@ describe("Navbar", () => {
expect(mobileLinks.length).toBeGreaterThanOrEqual(2);
});
it("closes mobile menu when a link is clicked", () => {
render(<Navbar />);
it("closes mobile menu when a link is clicked", async () => {
await act(async () => {
render(<Navbar />);
});
fireEvent.click(screen.getByLabelText("Toggle menu"));
const mobileFeatures = screen.getAllByText("Features");
fireEvent.click(mobileFeatures[mobileFeatures.length - 1]);
// After clicking, mobile menu should close (we can't easily test DOM removal
// without checking state, but the onClick handler calls setOpen(false))
});
it("links Docs to external URL with target=_blank", () => {
render(<Navbar />);
it("links Docs to external URL with target=_blank", async () => {
await act(async () => {
render(<Navbar />);
});
const docsLinks = screen.getAllByText("Docs");
const externalDoc = docsLinks.find(
(el) => el.closest("a")?.getAttribute("target") === "_blank",
@@ -117,8 +128,10 @@ describe("Navbar", () => {
expect(externalDoc?.closest("a")?.getAttribute("href")).toBe("https://docs.snapotter.com");
});
it("links GitHub button to correct repo", () => {
render(<Navbar />);
it("links GitHub button to correct repo", async () => {
await act(async () => {
render(<Navbar />);
});
const githubLinks = screen.getAllByText("Star on GitHub");
const link = githubLinks[0].closest("a");
expect(link?.getAttribute("href")).toBe("https://github.com/snapotter-hq/snapotter");