T
tRPC

❓-help

Controller is already closed crash

MMugetsu1/22/2024
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"
},
MMugetsu1/23/2024
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.

Looking for more? Join the community!