// start.ts

import { createStart } from '@tanstack/react-start';
import { sdkExceptionHandler, sdkSerializationAdapter } from './sdk';

export const startInstance = createStart({
  functionMiddleware: [sdkExceptionHandler],
  serializationAdapters: [sdkSerializationAdapter]
});


// sdk.ts

// Generated by typescript-fetch, basically
// export class ResponseError extends Error { public readonly response: Response }
import { ResponseError } from '@mynamespace/sdk';

interface ResultWithError<T extends Error = Error> {
  error?: T;
}

export class SdkError<T extends object = object> extends Error {
  constructor(
    public readonly data: T,
    public readonly status: number,
  ) {
    super((data as { message?: string }).message ?? 'An unknown error occurred.');
  }
}

export const sdkExceptionHandler = createMiddleware({ type: 'function' }).server(async ({ next }) => {
  const result = await next();

  // I still don't get why this result is so poorly typed,
  // it doesn't reflect what's actually being returned
  const { error } = result as ResultWithError;

  if (error instanceof ResponseError) {
    (result as ResultWithError<SdkError>).error = new SdkError(
      await error.response.json(),
      error.response.status,
    );
  }

  return result;
});

export const sdkSerializationAdapter = createSerializationAdapter({
  key: 'SdkError',
  test: (value: any) => value instanceof SdkError,
  toSerializable: ({ data, status }: SdkError) => ({ data, status }),
  fromSerializable: ({ data, status }) => new SdkError(data, status);
});


// route/some/file.tsx

import { SdkError } from '@/sdk';

const RouteComponent = () => {
  const mutateFn = useServerFn(someServerFn);

  const { mutate } = useMutation({
    mutateFn,
    onError: (error) => {
      if (error instanceof SdkError) {
        const { data, status } = error;
        handleErrorByStatus(status, data);
      } else {
        handleErrorByStatus(500, { message: 'An unknown error occurred.' });
      }
    },
  });
};