Mugetsu•7mo ago

Controller is already closed crash

Im using trpc with nextjs 14 app router and started to see that my app crashes due to such error. Did anyone encouter such error before ??

     "error": {
        "type": "TRPCError",
        "message": "Invalid state: Controller is already closed: Invalid state: Controller is already closed",
        "stack": "TypeError [ERR_INVALID_STATE]: Invalid state: Controller is already closed\n    at new NodeError (node:internal/errors:406:5)\n    at ReadableStreamDefaultController.enqueue (node:internal/webstreams/readablestream:1065:13)\n    at unstable_onChunk (webpack-internal:///(rsc)/./node_modules/.pnpm/@trpc+server@10.45.0/node_modules/@trpc/server/dist/adapters/fetch/index.mjs:94:24)\n    at resolveHTTPResponse (webpack-internal:///(rsc)/./node_modules/.pnpm/@trpc+server@10.45.0/node_modules/@trpc/server/dist/resolveHTTPResponse-37afa02e.mjs:242:17)\n    at processTicksAndRejections (node:internal/process/task_queues:95:5)\ncaused by: TypeError [ERR_INVALID_STATE]: Invalid state: Controller is already closed\n    at new NodeError (node:internal/errors:406:5)\n    at ReadableStreamDefaultController.enqueue (node:internal/webstreams/readablestream:1065:13)\n    at unstable_onChunk (webpack-internal:///(rsc)/./node_modules/.pnpm/@trpc+server@10.45.0/node_modules/@trpc/server/dist/adapters/fetch/index.mjs:94:24)\n    at resolveHTTPResponse (webpack-internal:///(rsc)/./node_modules/.pnpm/@trpc+server@10.45.0/node_modules/@trpc/server/dist/resolveHTTPResponse-37afa02e.mjs:242:17)\n    at processTicksAndRejections (node:internal/process/task_queues:95:5)",
        "code": "INTERNAL_SERVER_ERROR",
        "name": "TRPCError"
      },

     "error": {
        "type": "TRPCError",
        "message": "Invalid state: Controller is already closed: Invalid state: Controller is already closed",
        "stack": "TypeError [ERR_INVALID_STATE]: Invalid state: Controller is already closed\n    at new NodeError (node:internal/errors:406:5)\n    at ReadableStreamDefaultController.enqueue (node:internal/webstreams/readablestream:1065:13)\n    at unstable_onChunk (webpack-internal:///(rsc)/./node_modules/.pnpm/@trpc+server@10.45.0/node_modules/@trpc/server/dist/adapters/fetch/index.mjs:94:24)\n    at resolveHTTPResponse (webpack-internal:///(rsc)/./node_modules/.pnpm/@trpc+server@10.45.0/node_modules/@trpc/server/dist/resolveHTTPResponse-37afa02e.mjs:242:17)\n    at processTicksAndRejections (node:internal/process/task_queues:95:5)\ncaused by: TypeError [ERR_INVALID_STATE]: Invalid state: Controller is already closed\n    at new NodeError (node:internal/errors:406:5)\n    at ReadableStreamDefaultController.enqueue (node:internal/webstreams/readablestream:1065:13)\n    at unstable_onChunk (webpack-internal:///(rsc)/./node_modules/.pnpm/@trpc+server@10.45.0/node_modules/@trpc/server/dist/adapters/fetch/index.mjs:94:24)\n    at resolveHTTPResponse (webpack-internal:///(rsc)/./node_modules/.pnpm/@trpc+server@10.45.0/node_modules/@trpc/server/dist/resolveHTTPResponse-37afa02e.mjs:242:17)\n    at processTicksAndRejections (node:internal/process/task_queues:95:5)",
        "code": "INTERNAL_SERVER_ERROR",
        "name": "TRPCError"
      },

4 Replies

Mugetsu•7mo ago

this is really bothering me and I cant find the problem with this. This error completely crashes my app So after some digging I found that the fetch request inside the tRPC procedure is causing this error to happen. It's not clear to me why this happens but when I have such procedure

export const appRouter = createTRPCRouter({
  getSchemas: procedure.query(async ({ ctx }) => {
    try {
      const response = await fetch(
        `${serverEnv.LOCATION_SERVICE_URL}/v4/schemas`,
        {
          headers: {
            Authorization: `Bearer ${ctx.sessionIdToken}`,
          },
        },
      );
      const apiSchemas = await response.json();
      const currentSchemaId = cookies().get(SCHEMA_COOKIE_KEY)?.value;
      const locationsSchema = new LocationSchema(
        apiSchemas.locationSchemas,
        currentSchemaId,
      );

      return locationsSchema.toJSON();
    } catch (e) {
      trpcLogger.error(e, 'Error getting schema');

      return undefined;
    }
  }),

  post: postRouter,
});

export const appRouter = createTRPCRouter({
  getSchemas: procedure.query(async ({ ctx }) => {
    try {
      const response = await fetch(
        `${serverEnv.LOCATION_SERVICE_URL}/v4/schemas`,
        {
          headers: {
            Authorization: `Bearer ${ctx.sessionIdToken}`,
          },
        },
      );
      const apiSchemas = await response.json();
      const currentSchemaId = cookies().get(SCHEMA_COOKIE_KEY)?.value;
      const locationsSchema = new LocationSchema(
        apiSchemas.locationSchemas,
        currentSchemaId,
      );

      return locationsSchema.toJSON();
    } catch (e) {
      trpcLogger.error(e, 'Error getting schema');

      return undefined;
    }
  }),

  post: postRouter,
});

And I do manually refresh my app (browser refresh) fast enough multiple times in a row the query errors and then it throws Invalid state: Controller is already closed and crash the app. When I just remove the fetch call it never throws that controller error but I still can see enigmatic error for the query in the console.

JLN•4mo ago

did u manage to fix it?

Mugetsu•4mo ago

@JLN hi. No. I still experience these errors but simply ignore them atm. They happen from time to time

.vuolo•2mo ago

@Mugetsu Fixed it by disabling batch and trpc-batch-mode headers lmao