fix(sveltekit): Avoid capturing 404 errors on client side (#9902)

Looks like 404 errors weren't passed to the client side `handleError`
hook in Kit 1.x but in 2.x they're now passed into the hook. This means,
we need to filter them out.

packages/e2e-tests/test-applications/sveltekit-2/package.json

@@ -24,6 +24,7 @@
  "@sveltejs/adapter-auto": "^3.0.0",
  "@sveltejs/adapter-node": "^2.0.0",
  "@sveltejs/kit": "^2.0.0",
+ "@sveltejs/vite-plugin-svelte": "^3.0.0",
  "svelte": "^4.2.8",
  "svelte-check": "^3.6.0",
  "ts-node": "10.9.1",

packages/sveltekit/src/client/handleError.ts

@@ -11,23 +11,37 @@ function defaultErrorHandler({ error }: Parameters<HandleClientError>[0]): Retur
  });
 }
 
-// TODO: add backwards-compatible type for kit 1.x (soon)
 type HandleClientErrorInput = Parameters<HandleClientError>[0];
 
+/**
+ * Backwards-compatible HandleServerError Input type for SvelteKit 1.x and 2.x
+ * `message` and `status` were added in 2.x.
+ * For backwards-compatibility, we make them optional
+ *
+ * @see https://kit.svelte.dev/docs/migrating-to-sveltekit-2#improved-error-handling
+ */
+type SafeHandleServerErrorInput = Omit<HandleClientErrorInput, 'status' | 'message'> &
+ Partial<Pick<HandleClientErrorInput, 'status' | 'message'>>;
+
 /**
  * Wrapper for the SvelteKit error handler that sends the error to Sentry.
  *
  * @param handleError The original SvelteKit error handler.
  */
 export function handleErrorWithSentry(handleError: HandleClientError = defaultErrorHandler): HandleClientError {
- return (input: HandleClientErrorInput): ReturnType<HandleClientError> => {
- captureException(input.error, {
- mechanism: {
- type: 'sveltekit',
- handled: false,
- },
- });
+ return (input: SafeHandleServerErrorInput): ReturnType<HandleClientError> => {
+ // SvelteKit 2.0 offers a reliable way to check for a 404 error:
+ if (input.status !== 404) {
+ captureException(input.error, {
+ mechanism: {
+ type: 'sveltekit',
+ handled: false,
+ },
+ });
+ }
 
+ // We're extra cautious with SafeHandleServerErrorInput - this type is not compatible with HandleServerErrorInput
+ // @ts-expect-error - we're still passing the same object, just with a different (backwards-compatible) type
  return handleError(input);
  };
 }

packages/sveltekit/test/client/handleError.test.ts

@@ -38,6 +38,7 @@ describe('handleError', () => {
  it('invokes the default handler if no handleError func is provided', async () => {
  const wrappedHandleError = handleErrorWithSentry();
  const mockError = new Error('test');
+ // @ts-expect-error - purposefully omitting status and message to cover SvelteKit 1.x compatibility
  const returnVal = await wrappedHandleError({ error: mockError, event: navigationEvent });
 
  expect(returnVal).not.toBeDefined();
@@ -50,6 +51,7 @@ describe('handleError', () => {
  it('invokes the user-provided error handler', async () => {
  const wrappedHandleError = handleErrorWithSentry(handleError);
  const mockError = new Error('test');
+ // @ts-expect-error - purposefully omitting status and message to cover SvelteKit 1.x compatibility
  const returnVal = (await wrappedHandleError({ error: mockError, event: navigationEvent })) as any;
 
  expect(returnVal.message).toEqual('Whoops!');
@@ -59,4 +61,19 @@ describe('handleError', () => {
  expect(consoleErrorSpy).toHaveBeenCalledTimes(0);
  });
  });
+
+ it("doesn't capture 404 errors", async () => {
+ const wrappedHandleError = handleErrorWithSentry(handleError);
+ const returnVal = (await wrappedHandleError({
+ error: new Error('404 Not Found'),
+ event: navigationEvent,
+ status: 404,
+ message: 'Not Found',
+ })) as any;
+
+ expect(returnVal.message).toEqual('Whoops!');
+ expect(mockCaptureException).not.toHaveBeenCalled();
+ // Check that the default handler wasn't invoked
+ expect(consoleErrorSpy).toHaveBeenCalledTimes(0);
+ });
 });