feat: distributed tracing - 3

apps/web/public/static/locales/en/common.json

@@ -30,6 +30,7 @@
   "verify_email_change_success_toast": "Updated your email to {{email}}",
   "verify_email_change_failure_toast": "Failed to update email.",
   "change_of_email": "Verify your new {{appName}} email address",
+  "trace_reference_id": "Trace reference ID",
   "change_of_email_toast": "We have sent a verification link to {{email}}. We will update your email address once you click this link.",
   "copy_somewhere_safe": "Save this API key somewhere safe. You will not be able to view it again.",
   "verify_email_email_body": "Please verify your email address by clicking the button below.",

packages/features/bookings/Booker/components/BookEventForm/BookEventForm.tsx

@@ -323,6 +323,12 @@ const getError = ({
   return error?.message ? (
     <>
       {responseVercelIdHeader ?? ""} {t(messageKey, { date, count })}
+      {error.data?.traceId && (
+        <div className="text-subtle mt-2 text-xs">
+          <span className="font-medium">{t("trace_reference_id")}:</span>
+          <code className="ml-1 select-all break-all font-mono">{error.data.traceId}</code>
+        </div>
+      )}
     </>
   ) : (
     <>{t("can_you_try_again")}</>

packages/features/bookings/Booker/components/hooks/useBookings.ts

@@ -400,6 +400,7 @@ export const useBookings = ({ event, hashedLink, bookingForm, metadata, isBookin
 
       const error = err as Error & {
         data: { rescheduleUid: string; startTime: string; attendees: string[] };
+        traceId?: string;
       };
 
       if (error.message === ErrorCode.BookerLimitExceededReschedule && error.data?.rescheduleUid) {
@@ -521,6 +522,11 @@ export const useBookings = ({ event, hashedLink, bookingForm, metadata, isBookin
             : event?.data?.forwardParamsSuccessRedirect,
       });
     },
+    onError: (err, _, ctx) => {
+      console.error("Error creating recurring booking", err);
+      // eslint-disable-next-line @calcom/eslint/no-scroll-into-view-embed -- It is only called when user takes an action in embed
+      bookerFormErrorRef && bookerFormErrorRef.current?.scrollIntoView({ behavior: "smooth" });
+    },
   });
 
   const handleBookEvent = useHandleBookEvent({

packages/lib/server/getServerErrorFromUnknown.test.ts

@@ -1,9 +1,14 @@
+import { Prisma } from "@calcom/prisma/client";
 import { describe, expect, test } from "vitest";
+import { ZodError } from "zod";
 
 import { ErrorCode } from "@calcom/lib/errorCodes";
 import { ErrorWithCode } from "@calcom/lib/errors";
 
+import { TRPCError } from "@trpc/server";
+
 import { HttpError } from "../http-error";
+import { TracedError } from "../tracing/error";
 import { getServerErrorFromUnknown } from "./getServerErrorFromUnknown";
 
 const test400Codes = [
@@ -113,6 +118,135 @@ describe("getServerErrorFromUnknown", () => {
   });
 });
 
+describe("TracedError handling", () => {
+  test("should extract traceId and tracedData from TracedError", () => {
+    const originalError = new Error("Original error message");
+    const tracedData = { userId: "123", operation: "booking" };
+    const traceContext = {
+      traceId: "trace_abc123",
+      spanId: "span_123",
+      operation: "test_operation",
+    };
+
+    const tracedError = new TracedError(originalError, traceContext, tracedData);
+
+    const result = getServerErrorFromUnknown(tracedError);
+
+    expect(result.statusCode).toBe(500);
+    expect(result.message).toBe("Original error message");
+    expect(result.data).toEqual({ ...tracedData, traceId: traceContext.traceId });
+  });
+
+  test("should handle TracedError wrapping ErrorWithCode", () => {
+    const originalError = new ErrorWithCode(ErrorCode.BookingNotFound, "Booking not found");
+    const tracedData = { bookingId: "456" };
+    const traceContext = {
+      traceId: "trace_def456",
+      spanId: "span_456",
+      operation: "booking_lookup",
+    };
+
+    const tracedError = new TracedError(originalError, traceContext, tracedData);
+
+    const result = getServerErrorFromUnknown(tracedError);
+
+    expect(result.statusCode).toBe(404);
+    expect(result.message).toBe("Booking not found");
+    expect(result.data).toEqual({ ...tracedData, traceId: traceContext.traceId });
+  });
+});
+
+describe("TRPCError handling", () => {
+  test("should handle TRPCError with BAD_REQUEST", () => {
+    const trpcError = new TRPCError({
+      code: "BAD_REQUEST",
+      message: "Invalid input data",
+    });
+
+    const result = getServerErrorFromUnknown(trpcError);
+
+    expect(result.statusCode).toBe(400);
+    expect(result.message).toBe("Invalid input data");
+    expect(result.data).toBeUndefined();
+  });
+
+  test("should handle TracedError wrapping TRPCError", () => {
+    const trpcError = new TRPCError({
+      code: "NOT_FOUND",
+      message: "Resource not found",
+    });
+    const tracedData = { resourceId: "789" };
+    const traceContext = {
+      traceId: "trace_trpc123",
+      spanId: "span_trpc123",
+      operation: "resource_lookup",
+    };
+
+    const tracedError = new TracedError(trpcError, traceContext, tracedData);
+
+    const result = getServerErrorFromUnknown(tracedError);
+
+    expect(result.statusCode).toBe(404);
+    expect(result.message).toBe("Resource not found");
+    expect(result.data).toEqual({ ...tracedData, traceId: traceContext.traceId });
+  });
+});
+
+describe("ZodError handling", () => {
+  test("should handle ZodError with validation issues", () => {
+    const zodError = new ZodError([
+      {
+        code: "invalid_type",
+        expected: "string",
+        received: "number",
+        path: ["name"],
+        message: "Expected string, received number",
+      },
+    ]);
+
+    const result = getServerErrorFromUnknown(zodError);
+
+    expect(result.statusCode).toBe(400);
+    expect(result.message).toBe("invalid_type in 'name': Expected string, received number");
+    expect(result.cause).toBe(zodError);
+  });
+});
+
+describe("Prisma error handling", () => {
+  test("should handle Prisma P2025 error (record not found)", () => {
+    const prismaError = new Error("Record to delete does not exist.") as any;
+    prismaError.code = "P2025";
+    prismaError.clientVersion = "5.0.0";
+    Object.setPrototypeOf(prismaError, Prisma.PrismaClientKnownRequestError.prototype);
+
+    const result = getServerErrorFromUnknown(prismaError);
+
+    expect(result.statusCode).toBe(404);
+    expect(result.message).toBe("Record to delete does not exist.");
+    expect(result.cause).toBe(prismaError);
+  });
+
+  test("should handle other Prisma errors as 400", () => {
+    const prismaError = new Error("Foreign key constraint failed") as any;
+    prismaError.code = "P2003";
+    prismaError.clientVersion = "5.0.0";
+    Object.setPrototypeOf(prismaError, Prisma.PrismaClientKnownRequestError.prototype);
+
+    const result = getServerErrorFromUnknown(prismaError);
+
+    expect(result.statusCode).toBe(400);
+    expect(result.message).toBe("Foreign key constraint failed");
+  });
+});
+
+test("should handle unknown type fallback", () => {
+  const result = getServerErrorFromUnknown({ someProperty: "value" });
+
+  expect(result.statusCode).toBe(500);
+  expect(result.message).toBe("Unhandled error of type 'object'. Please reach out for our customer support.");
+  expect(result.data).toBeUndefined();
+});
+
 test400Codes.forEach((errorCode) => {
   test(`${errorCode} should return 400 Bad Request`, () => {
     const error = new ErrorWithCode(errorCode, `Test message for ${errorCode}`);

packages/lib/server/getServerErrorFromUnknown.ts

@@ -5,9 +5,13 @@ import { ErrorCode } from "@calcom/lib/errorCodes";
 import { ErrorWithCode } from "@calcom/lib/errors";
 import { Prisma } from "@calcom/prisma/client";
 
+import { TRPCError } from "@trpc/server";
+import { getHTTPStatusCodeFromError } from "@trpc/server/http";
+
 import { HttpError } from "../http-error";
 import { redactError } from "../redactError";
 import { stripeInvalidRequestErrorSchema } from "../stripe-error";
+import { TracedError } from "../tracing/error";
 
 function hasName(cause: unknown): cause is { name: string } {
   return !!cause && typeof cause === "object" && "name" in cause;
@@ -34,37 +38,71 @@ function parseZodErrorIssues(issues: ZodIssue[]): string {
 }
 
 export function getServerErrorFromUnknown(cause: unknown): HttpError {
+  let traceId: string | undefined;
+  let tracedData: Record<string, unknown> | undefined;
+
+  if (cause instanceof TracedError) {
+    traceId = cause.traceId;
+    tracedData = cause.data;
+    cause = cause.originalError;
+  }
+
+  if (cause instanceof TRPCError) {
+    const statusCode = getHTTPStatusCodeFromError(cause);
+    return new HttpError({
+      statusCode,
+      message: cause.message,
+      data: traceId ? { ...tracedData, traceId } : undefined,
+    });
+  }
   if (isZodError(cause)) {
     return new HttpError({
       statusCode: 400,
       message: parseZodErrorIssues(cause.issues),
       cause,
+      data: traceId ? { ...tracedData, traceId } : undefined,
     });
   }
   if (cause instanceof SyntaxError) {
     return new HttpError({
       statusCode: 500,
       message: "Unexpected error, please reach out for our customer support.",
+      data: traceId ? { ...tracedData, traceId } : undefined,
     });
   }
   if (isPrismaError(cause)) {
-    return getServerErrorFromPrismaError(cause);
+    const prismaError = getServerErrorFromPrismaError(cause);
+    return new HttpError({
+      statusCode: prismaError.statusCode,
+      message: prismaError.message,
+      cause: prismaError.cause,
+      data: traceId ? { ...tracedData, ...prismaError.data, traceId } : prismaError.data,
+    });
   }
   const parsedStripeError = stripeInvalidRequestErrorSchema.safeParse(cause);
   if (parsedStripeError.success) {
-    return getHttpError({ statusCode: 400, cause: parsedStripeError.data });
+    const stripeErrorObj = new Error(parsedStripeError.data.message || "Stripe error");
+    stripeErrorObj.name = parsedStripeError.data.type || "StripeInvalidRequestError";
+    const stripeError = getHttpError({ statusCode: 400, cause: stripeErrorObj });
+    return new HttpError({
+      statusCode: stripeError.statusCode,
+      message: stripeError.message,
+      cause: stripeError.cause,
+      data: traceId ? { ...tracedData, ...stripeError.data, traceId } : stripeError.data,
+    });
   }
   if (cause instanceof ErrorWithCode) {
     const statusCode = getStatusCode(cause);
     return new HttpError({
       statusCode,
       message: cause.message ?? "",
-      data: cause.data,
+      data: traceId ? { ...cause.data, ...tracedData, traceId } : cause.data,
       cause,
     });
   }
   if (cause instanceof HttpError) {
     const redactedCause = redactError(cause);
+    const originalData = cause.data;
     return {
       ...redactedCause,
       name: cause.name,
@@ -73,22 +111,35 @@ export function getServerErrorFromUnknown(cause: unknown): HttpError {
       url: cause.url,
       statusCode: cause.statusCode,
       method: cause.method,
+      data: traceId ? { ...originalData, ...tracedData, traceId } : originalData,
     };
   }
   if (cause instanceof Error) {
     const statusCode = getStatusCode(cause);
-    return getHttpError({ statusCode, cause });
+    const error = getHttpError({ statusCode, cause });
+    return new HttpError({
+      statusCode: error.statusCode,
+      message: error.message,
+      cause: error.cause,
+      data: traceId ? { ...tracedData, ...error.data, traceId } : error.data,
+    });
   }
   if (typeof cause === "string") {
+    // @ts-expect-error https://github.com/tc39/proposal-error-cause
+    const error = new Error(cause, { cause });
+    const httpError = getHttpError({ statusCode: 500, cause: error });
     return new HttpError({
-      statusCode: 500,
-      message: cause,
+      statusCode: httpError.statusCode,
+      message: httpError.message,
+      cause: httpError.cause,
+      data: traceId ? { ...tracedData, ...httpError.data, traceId } : httpError.data,
     });
   }
 
   return new HttpError({
     statusCode: 500,
     message: `Unhandled error of type '${typeof cause}'. Please reach out for our customer support.`,
+    data: traceId ? { ...tracedData, traceId } : tracedData,
   });
 }