How to fix "RangeError: Invalid Websocket frame: invalid payload length 126" In NestJS GraphQL Subscription (graphql-ws)

[omizha]

In NestJS GraphQL Subscription (graphql-ws), The error is occurring for an unknown reason.

"RangeError: Invalid Websocket frame: invalid payload length 126"
We also do not know the conditions under which the error occurred.

When this error appears, it shuts down the server, which is very fatal.

I think, problem point is graphql-ws or nestjs8 (graphql)
But in downgrade nestjs 7, It works fine.
(nestjs7, using graphql-subscription-ws)

minimum reproduction link : https://github.com/maemenaver/nestjs-graphql-ws-issue

[enisdenjo]

From websockets/ws#1662 (comment):

Hi, you get this error when the "payload length" of a control frame (ping, pong, or close) has a value bigger than 125. All control frames must have a payload length of 125 bytes or less.

See https://tools.ietf.org/html/rfc6455#section-5.2 and https://tools.ietf.org/html/rfc6455#section-5.5 for more info.

You most probably have an error thrown during the execution whose message is trying to be sent to the client, but it fails because the error message is too big. I guess here:

graphql-ws/src/use/ws.ts

Lines 107 to 117 in c47dcf0

	onMessage: (cb) =>
	socket.on('message', async (event) => {
	try {
	await cb(String(event));
	} catch (err) {
	socket.close(
	CloseCode.InternalServerError,
	isProd ? 'Internal server error' : err.message,
	);
	}
	}),

[omizha]

Could it be that err.message is too long? Wouldn't this issue no longer occur if the environment is a production environment, so isProd is true?

[enisdenjo]

Thats right, @maemenaver, the error message is too long. Please see #243 (comment) for more info.

[enisdenjo]

An error occurred during the massage handling phase and its message is too long. Luckily, with v5.5.1, the transmitted error message is limited and is logged to the console. You should update graphql-ws to prevent the length exception and see the original error.

[omizha]

I'll update soon @nestjs/graphql (included graphql-ws >= v5.5.1) and report back if there are any problems. very thx!!! ✨✨

[CristianCiubancan]

Still getting this error when using gracefull restart RangeError: Invalid WebSocket frame: invalid payload length 126
at Receiver.getInfo tried 5.5.1 and 5.5.3 same result

[CristianCiubancan]

full code can be found at https://github.com/CristianCiubancan/chat-server/tree/error

this is my index.js:

import "reflect-metadata";
import "dotenv-safe/config";
import path from "path";
import { createConnection } from "typeorm";
import ws from "ws";
import { useServer } from "graphql-ws/lib/use/ws";
import { redis } from "./redis";
import { buildSchema } from "type-graphql";
import express from "express";
import connectRedis from "connect-redis";
import session, { Session, SessionData } from "express-session";
import cors from "cors";
import { COOKIE_NAME, prod } from "./constants";
import { ApolloServer } from "apollo-server-express";
import { MyContext } from "./types/MyContext";
import { createUsersLoader } from "./utils/createUsersLoader";
import { createChatsLoader } from "./utils/createChatsLoader";
import { createMessagesLoader } from "./utils/createMessagesLoader";
import { createReaderLoader } from "./utils/createReaderLoader";
import { createLastMessageLoader } from "./utils/createLastMessageLoader";
import { graphqlUploadExpress } from "graphql-upload";
import { User } from "./enitities/User";
import { Chat } from "./enitities/Chat";
import { ChatMembers } from "./enitities/ChatMembers";
import { Message } from "./enitities/Message";
import { Reader } from "./enitities/Reader";
import { UserResolver } from "./resolvers/user";
import { ChatResolver } from "./resolvers/chat";
import { MessageResolver } from "./resolvers/message";
import { RedisPubSub } from "graphql-redis-subscriptions";

const main = async () => {
const conn = await createConnection({
type: "postgres",
url: process.env.DATABASE_URL,
logging: false,
ssl: prod ? { rejectUnauthorized: false } : false,
synchronize: true,
migrations: [path.join(__dirname, "./migrations/*")],
entities: [User, Chat, ChatMembers, Message, Reader],
});

await conn.runMigrations();

const pubSub = new RedisPubSub({
connection: process.env.REDIS_URL as any,
});

const schema = await buildSchema({
resolvers: [UserResolver, ChatResolver, MessageResolver],
pubSub,
});

const app = express();
const RedisStore = connectRedis(session);

const redisClient = redis;

app.set("trust proxy", 1);

app.use(
cors({
origin: process.env.CORS_ORIGIN, //asa obijnuia sa fie
credentials: true,
})
);

const sessionMiddleware = session({
store: new RedisStore({
client: redisClient,
disableTouch: true,
}),
name: COOKIE_NAME,
secret: process.env.SESSION_SECRET,
resave: false,
saveUninitialized: false,
cookie: {
httpOnly: true,
sameSite: "lax",
secure: prod, //cookie only works in https
domain: prod ? ".happyoctopus.net" : undefined, //de scos secure false si de folosit ce e comentat
maxAge: 1000 * 60 * 60 * 24 * 365 * 10, //10 years
},
} as any);

app.use(sessionMiddleware);

const apolloServer = new ApolloServer({
schema,
context: ({ req, res }: MyContext) => ({
req,
res,
redis,
usersLoader: createUsersLoader(),
chatsLoader: createChatsLoader(),
messagesLoader: createMessagesLoader(),
readerLoader: createReaderLoader(),
lastMessageLoader: createLastMessageLoader(),
}),
});

app.use(graphqlUploadExpress({ maxFileSize: 10000000, maxFiles: 10 }));
app.use("/images", express.static(path.join(__dirname, "../images")));
app.use("/sounds", express.static(path.join(__dirname, "../sounds")));

await apolloServer.start();
apolloServer.applyMiddleware({
app,
cors: false,
});

const server = app.listen(parseInt(process.env.PORT), () => {
const wsServer = new ws.Server({
server,
path: "/graphql",
});

useServer(
  {
    schema,
    context: async (ctx: any) => {
      const promise = new Promise((resolve) => {
        const req = ctx.extra.request as express.Request & {
          session: Session & Partial<SessionData> & { userId?: number };
        };
        const res = {} as any as express.Response;
        sessionMiddleware(req, res, (_: any) => {
          return resolve({ req, res });
        });
      });
      const { req, res } = (await promise) as any;
      return {
        req,
        res,
        redis,
        usersLoader: createUsersLoader(),
        chatsLoader: createChatsLoader(),
        messagesLoader: createMessagesLoader(),
        readerLoader: createReaderLoader(),
        lastMessageLoader: createLastMessageLoader(),
      };
    },
    // onConnect: (ctx) => {
    //   console.log("Connect", ctx);
    // },
    // onSubscribe: (ctx, msg) => {
    //   console.log("Subscribe", { ctx, msg });
    // },
    // onNext: (ctx, msg, args, result) => {
    //   const { payload } = msg;
    //   // console.debug("Next", { ctx, msg, args, result });
    //   console.log(payload);
    // },
    // onError: (ctx, msg, errors) => {
    //   console.error("Error", { ctx, msg, errors });
    // },
    // onComplete: (ctx, msg) => {
    //   console.log("Complete", { ctx, msg });
    // },
  },
  wsServer
);
console.log(
  `🚀 Graphql server ready at http://localhost:4000${apolloServer.graphqlPath}`
);

});
};

main();
C:\Users\ciuba\Desktop\chatapp\server\node_modules\graphql-ws\package.json:
{
"name": "graphql-ws",
"version": "5.5.3",
"description": "Coherent, zero-dependency, lazy, simple, GraphQL over WebSocket Protocol compliant server and client",
"keywords": [
"protocol",
"graphql",
"transport",
"subscriptions",
"websockets",
"server",
"client",
"observables",
"express",
"relay",
"apollo",
"fastify",
"uwebsockets"
],
"author": "Denis Badurina [email protected]",
"license": "MIT",
"homepage": "https://github.com/enisdenjo/graphql-ws#readme",
"repository": {
"type": "git",
"url": "https://github.com/enisdenjo/graphql-ws.git"
},
"engines": {
"node": ">=10"
},
"main": "lib/index.js",
"module": "lib/index.mjs",
"browser": "umd/graphql-ws.js",
"exports": {
".": {
"require": "./lib/index.js",
"import": "./lib/index.mjs",
"browser": "./umd/graphql-ws.js"
},
"./lib/use/ws": {
"require": "./lib/use/ws.js",
"import": "./lib/use/ws.mjs"
},
"./lib/use/uWebSockets": {
"require": "./lib/use/uWebSockets.js",
"import": "./lib/use/uWebSockets.mjs"
},
"./lib/use/fastify-websocket": {
"require": "./lib/use/fastify-websocket.js",
"import": "./lib/use/fastify-websocket.mjs"
},
"./package.json": "./package.json"
},
"types": "lib/index.d.ts",
"files": [
"lib",
"umd",
"README.md",
"LICENSE.md",
"PROTOCOL.md"
],
"sideEffects": [
"umd/*"
],
"publishConfig": {
"access": "public"
},
"scripts": {
"gendocs": "typedoc --options typedoc.js src/",
"lint": "eslint 'src'",
"type-check": "tsc --noEmit",
"test": "jest",
"bench:start-servers": "NODE_ENV=production node benchmark/servers/index.mjs",
"bench": "k6 run benchmark/k6.mjs",
"build:esm": "tsc -b tsconfig.esm.json && node scripts/esm-post-process.js",
"build:cjs": "tsc -b tsconfig.cjs.json",
"build:umd": "rollup -c && gzip umd/graphql-ws.min.js -c > umd/graphql-ws.min.js.gz",
"build": "yarn build:esm && yarn build:cjs && yarn build:umd",
"release": "semantic-release"
},
"peerDependencies": {
"graphql": ">=0.11 <=16"
},
"devDependencies": {
"@babel/core": "^7.15.8",
"@babel/plugin-proposal-class-properties": "^7.14.5",
"@babel/plugin-proposal-nullish-coalescing-operator": "^7.14.5",
"@babel/plugin-proposal-object-rest-spread": "^7.15.6",
"@babel/plugin-proposal-optional-chaining": "^7.14.5",
"@babel/preset-env": "^7.15.8",
"@babel/preset-typescript": "^7.15.0",
"@rollup/plugin-typescript": "^8.3.0",
"@semantic-release/changelog": "^6.0.0",
"@semantic-release/git": "^10.0.0",
"@types/jest": "^26.0.24",
"@types/ws": "^8.2.0",
"@typescript-eslint/eslint-plugin": "^5.1.0",
"@typescript-eslint/parser": "^5.1.0",
"babel-jest": "^27.3.1",
"eslint": "^8.0.1",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-prettier": "^4.0.0",
"fastify": "^3.22.1",
"fastify-websocket": "^4.0.0",
"glob": "^7.2.0",
"graphql": "16.0.0-rc.5",
"jest": "^27.3.1",
"prettier": "^2.4.1",
"replacestream": "^4.0.3",
"rollup": "^2.58.0",
"rollup-plugin-terser": "^7.0.2",
"semantic-release": "^18.0.0",
"subscriptions-transport-ws": "^0.9.19",
"tslib": "^2.3.1",
"typedoc": "0.22.6",
"typedoc-plugin-markdown": "^3.11.3",
"typescript": "^4.4.4",
"uWebSockets.js": "uNetworking/uWebSockets.js#v20.0.0",
"ws": "^8.2.3",
"ws7": "npm:ws@^7.5.5"
}
}

[CristianCiubancan]

also here is my client side wsLink implementation with react native:
import {
ApolloLink,
Operation,
FetchResult,
Observable,
} from "@apollo/client/core";
import { print } from "graphql";
import { createClient, ClientOptions, Client } from "graphql-ws";
import { host } from "../modules/shared/constants";
import { client as standaloneClient } from "./apolloClient";

interface RestartableClient extends Client {
restart(): void;
}

function createRestartableClient(options: ClientOptions): RestartableClient {
let restartRequested = false;
let restart = () => {
restartRequested = true;
};

const client = createClient({
...options,
on: {
...options.on,
opened: (socket: any) => {
standaloneClient.resetStore();
options.on?.opened?.(socket);
restart = () => {
if (socket.readyState === WebSocket.OPEN) {
console.log("ws already opened");
// if the socket is still open for the restart, do the restart
socket.close(4205, "Client Restart");
} else {
console.log("ws not opened");
// otherwise the socket might've closed, indicate that you want
// a restart on the next opened event
restartRequested = true;
}
};

    // just in case you were eager to restart
    if (restartRequested) {
      console.log("restart requested");
      restartRequested = false;
      restart();
    }
  },
},

});

return {
...client,
restart: () => restart(),
};
}

class WebSocketLink extends ApolloLink {
private client: Client;

constructor(options: ClientOptions) {
super();
this.client = createRestartableClient(options);
}

public request(operation: Operation): Observable {
return new Observable((sink) => {
return this.client.subscribe(
{ ...operation, query: print(operation.query) },
{
next: sink.next.bind(sink),
complete: sink.complete.bind(sink),
error: (err) => {},
}
);
});
}
}

export const webSocketLink = () => {
return new WebSocketLink({
url: ${host}/graphql as string,
retryWait: async function waitForServerHealthyBeforeRetry() {
await new Promise((resolve) =>
setTimeout(resolve, 1000 + Math.random() * 3000)
);
},
});
};

[enisdenjo]

Hmm, glancing over the code, everything seems fine. Can you share the causing error? There should be an error logo on the server starting with "Internal error occurred during message handling. Please check your implementation." because of:

graphql-ws/src/use/ws.ts

Lines 113 to 117 in 68d6f6e

	console.error(
	'Internal error occurred during message handling. ' +
	'Please check your implementation.',
	err,
	);

Do you have it?

[enisdenjo]

I think I know where the issue is, @CristianCiubancan. Fix coming soon, please bear with me.

[enisdenjo]

Hey @CristianCiubancan, see #243 (comment). v5.5.4 should gracefully close the socket and report the causing error to the console, please update and try again.

Thanks for taking the time to report the issue!

[enisdenjo]

An error occurred during the massage handling phase and its message is too long. Luckily, with v5.5.1, the transmitted error message is limited and is logged to the console. You should update graphql-ws to prevent the length exception and see the original error.

Additionally, with v5.5.4, all emitted errors events (both on the WebSocket server and each distinct socket) will have the transmitted messages limited and errors will be logged to the console. Please update the graphql-ws version.

[CristianCiubancan]

thank you very much for your quick response and great implication!

[CristianCiubancan]

I can confirm it works