chore: release v1.34.1

Before, special characters in those ids would break the UI as the ids are used as URI components

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "langfuse-core",
-  "version": "1.34.0",
+  "version": "1.34.1",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "langfuse-core",
-      "version": "1.34.0",
+      "version": "1.34.1",
       "hasInstallScript": true,
       "dependencies": {
         "@anthropic-ai/tokenizer": "^0.0.4",
@@ -62,7 +62,7 @@
         "decimal.js": "^10.4.3",
         "exponential-backoff": "^3.1.1",
         "lodash": "^4.17.21",
-        "lucide-react": "^0.306.0",
+        "lucide-react": "^0.314.0",
         "next": "^14.1.0",
         "next-auth": "^4.24.5",
         "next-query-params": "^5.0.0",
@@ -73,7 +73,7 @@
         "react-day-picker": "^8.10.0",
         "react-dom": "18.2.0",
         "react-hook-form": "^7.49.2",
-        "react-icons": "^4.12.0",
+        "react-icons": "^5.0.1",
         "react-responsive": "^9.0.2",
         "react18-json-view": "^0.2.7-canary.2",
         "superjson": "2.2.1",
@@ -13429,9 +13429,9 @@
       }
     },
     "node_modules/lucide-react": {
-      "version": "0.306.0",
-      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.306.0.tgz",
-      "integrity": "sha512-eShuk2PI3vxN4YN8kNPmhAsroSvPXbtaxU/UX/zrBcLLg8FeFH9MG7C2EYzYsT2rNrPVjbP7rpBz3mOviZYN3A==",
+      "version": "0.314.0",
+      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.314.0.tgz",
+      "integrity": "sha512-c2zOW7TOyKxPCaSs1og2lFdoI3SR4iii3yrZJU2Zpdc78nOw4fUmrcFNultaCiwZcr4CyiKdzjMdvKNlBBk+UQ==",
       "peerDependencies": {
         "react": "^16.5.1 || ^17.0.0 || ^18.0.0"
       }
@@ -15574,9 +15574,9 @@
       }
     },
     "node_modules/react-icons": {
-      "version": "4.12.0",
-      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.12.0.tgz",
-      "integrity": "sha512-IBaDuHiShdZqmfc/TwHu6+d6k2ltNCf3AszxNmjJc1KUfXdEeRJOKyNvLmAHaarhzGmTSVygNdyu8/opXv2gaw==",
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.0.1.tgz",
+      "integrity": "sha512-WqLZJ4bLzlhmsvme6iFdgO8gfZP17rfjYEJ2m9RsZjZ+cc4k1hTzknEz63YS1MeT50kVzoa1Nz36f4BEx+Wigw==",
       "peerDependencies": {
         "react": "*"
       }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "langfuse-core",
-  "version": "1.34.0",
+  "version": "1.34.1",
   "private": true,
   "scripts": {
     "prebuild": "cp generated/openapi-client/openapi.yml public/openapi-client.yml && cp generated/openapi-server/openapi.yml public/openapi-server.yml",
@@ -79,7 +79,7 @@
     "decimal.js": "^10.4.3",
     "exponential-backoff": "^3.1.1",
     "lodash": "^4.17.21",
-    "lucide-react": "^0.306.0",
+    "lucide-react": "^0.314.0",
     "next": "^14.1.0",
     "next-auth": "^4.24.5",
     "next-query-params": "^5.0.0",
@@ -90,7 +90,7 @@
     "react-day-picker": "^8.10.0",
     "react-dom": "18.2.0",
     "react-hook-form": "^7.49.2",
-    "react-icons": "^4.12.0",
+    "react-icons": "^5.0.1",
     "react-responsive": "^9.0.2",
     "react18-json-view": "^0.2.7-canary.2",
     "superjson": "2.2.1",

src/__e2e__/auth.spec.ts

@@ -2,6 +2,7 @@ import { test, expect } from "@playwright/test";
 
 test("should redirect to sign-in if not signed in", async ({ page }) => {
   await page.goto("/");
+  await page.waitForTimeout(2000);
   await expect(page).toHaveURL("/auth/sign-in");
 });
 

src/__e2e__/create-project.spec.ts

@@ -3,28 +3,33 @@ import { test, expect } from "@playwright/test";
 test("should see new projects dialog open after clicking new project btn", async ({
   page,
 }) => {
-  await page.goto("/auth/sign-in");
-  await page.fill('input[name="email"]', "demo@langfuse.com");
+  await page.goto("auth/sign-up");
+  await page.fill('input[name="name"]', "demo user");
+  await page.fill('input[name="email"]', randomEmailAddress());
   await page.fill('input[type="password"]', "password");
   await page.click('button[type="submit"]');
   await page.waitForTimeout(2000);
   await page.waitForTimeout(2000);
-  await page.isVisible("Create new project");
+  expect(await page.innerHTML("data-testid=create-new-project-title")).toBe(
+    "Create new project",
+  );
   await page.click('[data-testid="create-project-btn"]');
   await page.waitForTimeout(2000);
-  await page.isVisible('[data-testid="new-project-form"]');
+  await expect(page.locator("data-testid=new-project-form")).toBeVisible();
 });
 
 test("Create a project with provided name", async ({ page }) => {
+  test.setTimeout(60000);
+
   await page.goto("/auth/sign-in");
   await page.fill('input[name="email"]', "demo@langfuse.com");
   await page.fill('input[type="password"]', "password");
   await page.click('button[type="submit"]');
   await page.waitForTimeout(2000);
-  await page.isVisible("Create new project");
+  await page.isVisible('[data-testid="new-project-form"]');
   await page.click('[data-testid="create-project-btn"]');
   await page.waitForTimeout(2000);
-  await page.isVisible('[data-testid="new-project-form"]');
+  await expect(page.locator("data-testid=new-project-form")).toBeVisible();
   await page.fill(
     '[data-testid="new-project-name-input"]',
     "my e2e demo project",
@@ -33,7 +38,11 @@ test("Create a project with provided name", async ({ page }) => {
   await page.waitForTimeout(2000);
   expect(page.url()).toContain("/project/");
   await page.waitForTimeout(2000);
-  expect(await page.getByTestId("project-title-span-1").textContent()).toBe(
+  expect(await page.getByTestId("project-name").textContent()).toContain(
     "my e2e demo project",
   );
 });
+
+// random email address to be used in tests
+const randomEmailAddress = () =>
+  Math.random().toString(36).substring(2, 11) + "@example.com";

src/components/session/index.tsx

@@ -68,15 +68,22 @@ export const SessionPage: React.FC<{
           />,
           <DetailPageNav
             key="nav"
-            currentId={sessionId}
-            path={(id) => `/project/${projectId}/sessions/${id}`}
+            currentId={encodeURIComponent(sessionId)}
+            path={(id) =>
+              `/project/${projectId}/sessions/${encodeURIComponent(id)}`
+            }
             listKey="sessions"
           />,
         ]}
       />
       <div className="flex flex-wrap gap-2">
-        {session.data?.users.map((userId) => (
-          <Link key={userId} href={`/project/${projectId}/users/${userId}`}>
+        {session.data?.users.filter(Boolean).map((userId) => (
+          <Link
+            key={userId}
+            href={`/project/${projectId}/users/${encodeURIComponent(
+              userId ?? "",
+            )}`}
+          >
             <Badge>User ID: {userId}</Badge>
           </Link>
         ))}

src/components/table/use-cases/sessions.tsx

@@ -130,7 +130,7 @@ export default function SessionsTable({
         const value = row.getValue("id");
         return value && typeof value === "string" ? (
           <TableLink
-            path={`/project/${projectId}/sessions/${value}`}
+            path={`/project/${projectId}/sessions/${encodeURIComponent(value)}`}
             value={value}
           />
         ) : undefined;
@@ -169,7 +169,7 @@ export default function SessionsTable({
             {(value as string[]).map((user) => (
               <TableLink
                 key={user}
-                path={`/project/${projectId}/users/${user}`}
+                path={`/project/${projectId}/users/${encodeURIComponent(user)}`}
                 value={user}
                 truncateAt={40}
               />

src/components/table/use-cases/traces.tsx

@@ -247,7 +247,7 @@ export default function TracesTable({
         const value = row.getValue("userId");
         return value && typeof value === "string" ? (
           <TableLink
-            path={`/project/${projectId}/users/${value}`}
+            path={`/project/${projectId}/users/${encodeURIComponent(value)}`}
             value={value}
             truncateAt={40}
           />
@@ -264,7 +264,7 @@ export default function TracesTable({
         const value = row.getValue("sessionId");
         return value && typeof value === "string" ? (
           <TableLink
-            path={`/project/${projectId}/sessions/${value}`}
+            path={`/project/${projectId}/sessions/${encodeURIComponent(value)}`}
             value={value}
             truncateAt={40}
           />

src/components/trace/index.tsx

@@ -184,18 +184,18 @@ export function TracePage({ traceId }: { traceId: string }) {
       <div className="flex flex-wrap gap-2">
         {trace.data.sessionId ? (
           <Link
-            href={`/project/${router.query.projectId as string}/sessions/${
-              trace.data.sessionId
-            }`}
+            href={`/project/${
+              router.query.projectId as string
+            }/sessions/${encodeURIComponent(trace.data.sessionId)}`}
           >
             <Badge>Session: {trace.data.sessionId}</Badge>
           </Link>
         ) : null}
         {trace.data.userId ? (
           <Link
-            href={`/project/${router.query.projectId as string}/users/${
-              trace.data.userId
-            }`}
+            href={`/project/${
+              router.query.projectId as string
+            }/users/${encodeURIComponent(trace.data.userId)}`}
           >
             <Badge>User ID: {trace.data.userId}</Badge>
           </Link>

src/constants/VERSION.ts

@@ -1 +1 @@
-export const VERSION = "v1.34.0";
+export const VERSION = "v1.34.1";

src/features/projects/components/RenameProject.tsx

@@ -69,7 +69,7 @@ export default function RenameProject(props: { projectId: string }) {
             <b>{form.watch().newName}</b>&quot;.
           </p>
         ) : (
-          <p className="mb-4 text-sm text-gray-700">
+          <p className="mb-4 text-sm text-gray-700" data-testid="project-name">
             Your Project is currently named &quot;<b>{projectName}</b>
             &quot;.
           </p>

src/pages/index.tsx

@@ -54,7 +54,9 @@ export default function GetStartedPage() {
       <div className="grid grid-cols-1 gap-5 lg:grid-cols-2">
         <Card className="flex-1">
           <CardHeader>
-            <CardTitle>Create new project</CardTitle>
+            <CardTitle data-testid="create-new-project-title">
+              Create new project
+            </CardTitle>
           </CardHeader>
           <CardContent>
             <p>

src/pages/project/[projectId]/sessions/[sessionId].tsx

@@ -3,7 +3,7 @@ import { SessionPage } from "@/src/components/session";
 
 export default function Trace() {
   const router = useRouter();
-  const sessionId = router.query.sessionId as string;
+  const sessionId = decodeURIComponent(router.query.sessionId as string);
   const projectId = router.query.projectId as string;
 
   return <SessionPage sessionId={sessionId} projectId={projectId} />;

src/pages/project/[projectId]/users.tsx

@@ -47,7 +47,7 @@ export default function UsersPage() {
       console.log("setting detail page list");
       setDetailPageList(
         "users",
-        users.data.map((u) => u.userId),
+        users.data.map((u) => encodeURIComponent(u.userId)),
       );
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -63,7 +63,7 @@ export default function UsersPage() {
         return typeof value === "string" ? (
           <>
             <TableLink
-              path={`/project/${projectId}/users/${value}`}
+              path={`/project/${projectId}/users/${encodeURIComponent(value)}`}
               value={value}
               truncateAt={40}
             />

src/pages/project/[projectId]/users/[userId].tsx

@@ -12,9 +12,9 @@ import SessionsTable from "@/src/components/table/use-cases/sessions";
 
 const tabs = ["Details", "Sessions", "Traces", "Scores"] as const;
 
-export default function TracePage() {
+export default function UserPage() {
   const router = useRouter();
-  const userId = router.query.userId as string;
+  const userId = decodeURIComponent(router.query.userId as string);
   const projectId = router.query.projectId as string;
 
   const [currentTab, setCurrentTab] = useQueryParam(
@@ -51,8 +51,10 @@ export default function TracePage() {
         ]}
         actionButtons={
           <DetailPageNav
-            currentId={userId}
-            path={(id) => `/project/${projectId}/users/${id}`}
+            currentId={encodeURIComponent(userId)}
+            path={(id) =>
+              `/project/${projectId}/users/${encodeURIComponent(id)}`
+            }
             listKey="users"
           />
         }

tsconfig.json

@@ -16,6 +16,7 @@
     "jsx": "preserve",
     "incremental": true,
     "noUncheckedIndexedAccess": true,
+    "noErrorTruncation": true,
     "baseUrl": ".",
     "types": ["jest", "node"],
     "paths": {