Viewer Comments

Hello dear Specklers,

in our deployment we have the issue, that the comment does not leave the loading loop (see video). Only after the refresh of the browser, the comment is visible. I will try to find something in the log

1 Like

the line I have fished out from the log:

{"level":"info","time":"2024-01-10T13:10:30.304Z","req":{"id":"IiGvU4bg9KRIbdk4mPs8D","method":"POST","path":"/graphql","headers":{"host":"speckle.xyz","connection":"upgrade","content-length":"551313","x-forwarded-proto":"https","sec-ch-ua":"\"Not_A Brand\";v=\"8\", \"Chromium\";v=\"120\", \"Microsoft Edge\";v=\"120\"","apollographql-client-name":"frontend-2","sec-ch-ua-mobile":"?0","user-agent":"Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36 Edg/120.0.0.0","content-type":"application/json","accept":"*/*","apollographql-client-version":"2.17.9","x-request-id":"IiGvU4bg9KRIbdk4mPs8D","sec-ch-ua-platform":"\"Windows\"","origin":"https://speckle.xyz","sec-fetch-site":"same-origin","sec-fetch-mode":"cors","sec-fetch-dest":"empty","referer":"https://speckle.xyz/projects/d47bf0f75b/models/e224e6892d","accept-encoding":"gzip, deflate, br","accept-language":"en,de;q=0.9,de-DE;q=0.8,en-GB;q=0.7,en-US;q=0.6","x-speckle-client-ip":"12.116.135.255"}},"authContext":{"auth":true,"userId":"03efe98277","role":"server:admin","scopes":["apps:read","apps:write","profile:delete","profile:email","profile:read","server:setup","server:stats","streams:read","streams:write","tokens:read","tokens:write","users:email","users:invite","users:read"],"appId":"spklwebapp"},"req":{"id":"IiGvU4bg9KRIbdk4mPs8D","method":"POST","headers":{"host":"speckle.xyz","connection":"upgrade","content-length":"551313","x-forwarded-proto":"https","sec-ch-ua":"\"Not_A Brand\";v=\"8\", \"Chromium\";v=\"120\", \"Microsoft Edge\";v=\"120\"","apollographql-client-name":"frontend-2","sec-ch-ua-mobile":"?0","user-agent":"Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36 Edg/120.0.0.0","content-type":"application/json","accept":"*/*","apollographql-client-version":"2.17.9","x-request-id":"IiGvU4bg9KRIbdk4mPs8D","sec-ch-ua-platform":"\"Windows\"","origin":"https://speckle.xyz","sec-fetch-site":"same-origin","sec-fetch-mode":"cors","sec-fetch-dest":"empty","referer":"https://speckle.xyz/projects/d47bf0f75b/models/e224e6892d","accept-encoding":"gzip, deflate, br","accept-language":"en,de;q=0.9,de-DE;q=0.8,en-GB;q=0.7,en-US;q=0.6","x-speckle-client-ip":"12.116.135.255"}},"authContext":{"auth":true,"userId":"03efe98277","role":"server:admin","scopes":["apps:read","apps:write","profile:delete","profile:email","profile:read","server:setup","server:stats","streams:read","streams:write","tokens:read","tokens:write","users:email","users:invite","users:read"],"appId":"spklwebapp"},"component":"graphql","graphql_operation_kind":"mutation","graphql_query":"mutation CreateCommentThread($input: CreateCommentInput!) {\n  commentMutations {\n    create(input: $input) {\n      ...ViewerCommentThread\n      __typename\n    }\n    __typename\n  }\n}\n\nfragment ViewerCommentThread on Comment {\n  ...ViewerCommentsListItem\n  ...ViewerCommentBubblesData\n  ...ViewerCommentsReplyItem\n  __typename\n}\n\nfragment ViewerCommentsListItem on Comment {\n  id\n  rawText\n  archived\n  author {\n    ...LimitedUserAvatar\n    __typename\n  }\n  createdAt\n  viewedAt\n  replies {\n    totalCount\n    cursor\n    items {\n      ...ViewerCommentsReplyItem\n      __typename\n    }\n    __typename\n  }\n  replyAuthors(limit: 4) {\n    totalCount\n    items {\n      ...FormUsersSelectItem\n      __typename\n    }\n    __typename\n  }\n  resources {\n    resourceId\n    resourceType\n    __typename\n  }\n  __typename\n}\n\nfragment LimitedUserAvatar on LimitedUser {\n  id\n  name\n  avatar\n  __typename\n}\n\nfragment ViewerCommentsReplyItem on Comment {\n  id\n  archived\n  rawText\n  text {\n    doc\n    __typename\n  }\n  author {\n    ...LimitedUserAvatar\n    __typename\n  }\n  createdAt\n  ...ThreadCommentAttachment\n  __typename\n}\n\nfragment ThreadCommentAttachment on Comment {\n  text {\n    attachments {\n      id\n      fileName\n      fileType\n      fileSize\n      __typename\n    }\n    __typename\n  }\n  __typename\n}\n\nfragment FormUsersSelectItem on LimitedUser {\n  id\n  name\n  avatar\n  __typename\n}\n\nfragment ViewerCommentBubblesData on Comment {\n  id\n  viewedAt\n  viewerState\n  __typename\n}\n","graphql_variables":{"input":{"projectId":"d47bf0f75b","resourceIdString":"e224e6892d","content":{"doc":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"test"}]}]},"blobIds":[]},"viewerState":{"projectId":"d47bf0f75b","sessionId":"dE0gbtdRo0zpKyE7C76Lw","viewer":{"metadata":{"filteringState":{}}},"resources":{"request":{"resourceIdString":"e224e6892d@5d40ef32fd","threadFilters":{}}},"ui":{"threads":{"openThread":{"threadId":null,"isTyping":true,"newThreadEditor":true}},"diff":{"command":null,"time":0.5,"mode":1},"spotlightUserSessionId":null,"filters":{"isolatedObjectIds":[],"hiddenObjectIds":[],"selectedObjectIds":["eec6af72b011fe64b86a8c72029f32bf"],"propertyFilter":{"key":null,"isApplied":false}},"camera":{"position":[50.123405022141924,26.98851255210992,25.909548724421615],"target":[36.90001780559141,14.967656838032642,17.819882815253504],"isOrthoProjection":false,"zoom":1},"sectionBox":null,"lightConfig":{"enabled":true,"castShadow":true,"intensity":5,"color":16777215,"elevation":1.33,"azimuth":0.75,"radius":0,"indirectLightIntensity":1.2,"shadowcatcher":true},"explodeFactor":0,"selection":[30.482182237708365,20.695453913691495,24.648224664333963],"measurement":{"enabled":false,"options":{"visible":true,"type":1,"units":"m","vertexSnap":true,"precision":2}}}},"screenshot":"}},"graphql_operation_value":"GQL mutation commentMutations","graphql_operation_name":"GQL commentMutations","actionName":"mutation commentMutations","msg":"graphql response"}

And the direct lines after:

{"level":"info","time":"2024-01-10T13:10:30.306Z","req":{"id":"IiGvU4bg9KRIbdk4mPs8D","method":"POST","path":"/graphql","headers":{"host":"speckle.xyz.com","connection":"upgrade","content-length":"551313","x-forwarded-proto":"https","sec-ch-ua":"\"Not_A Brand\";v=\"8\", \"Chromium\";v=\"120\", \"Microsoft Edge\";v=\"120\"","apollographql-client-name":"frontend-2","sec-ch-ua-mobile":"?0","user-agent":"Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36 Edg/120.0.0.0","content-type":"application/json","accept":"*/*","apollographql-client-version":"2.17.9","x-request-id":"IiGvU4bg9KRIbdk4mPs8D","sec-ch-ua-platform":"\"Windows\"","origin":"https://speckle.xyz.com","sec-fetch-site":"same-origin","sec-fetch-mode":"cors","sec-fetch-dest":"empty","referer":"https://speckle.xyz.com/projects/d47bf0f75b/models/e224e6892d","accept-encoding":"gzip, deflate, br","accept-language":"en,de;q=0.9,de-DE;q=0.8,en-GB;q=0.7,en-US;q=0.6","x-speckle-client-ip":"12.116.135.255"}},"res":{"statusCode":200,"headers":{"x-request-id":"IiGvU4bg9KRIbdk4mPs8D","access-control-allow-origin":"*","x-ratelimit-remaining":49,"content-type":"application/json; charset=utf-8","content-length":"20852","etag":"W/\"5174-h7K0NY/to6XA1jiEFw/HdiCDayw\""}},"responseTime":169,"msg":"request completed"}
{"level":"info","time":"2024-01-10T13:10:30.406Z","req":{"id":"IiGvU4bg9KRIbdk4mPs8D","method":"POST","path":"/graphql","headers":{"host":"speckle.xyz.com","connection":"upgrade","content-length":"1602","x-forwarded-proto":"https","sec-ch-ua":"\"Not_A Brand\";v=\"8\", \"Chromium\";v=\"120\", \"Microsoft Edge\";v=\"120\"","apollographql-client-name":"frontend-2","sec-ch-ua-mobile":"?0","user-agent":"Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36 Edg/120.0.0.0","content-type":"application/json","accept":"*/*","apollographql-client-version":"2.17.9","x-request-id":"IiGvU4bg9KRIbdk4mPs8D","sec-ch-ua-platform":"\"Windows\"","origin":"https://speckle.xyz.com","sec-fetch-site":"same-origin","sec-fetch-mode":"cors","sec-fetch-dest":"empty","referer":"https://speckle.xyz.com/projects/d47bf0f75b/models/e224e6892d","accept-encoding":"gzip, deflate, br","accept-language":"en,de;q=0.9,de-DE;q=0.8,en-GB;q=0.7,en-US;q=0.6","x-speckle-client-ip":"12.116.135.255"}},"authContext":{"auth":true,"userId":"03efe98277","role":"server:admin","scopes":["apps:read","apps:write","profile:delete","profile:email","profile:read","server:setup","server:stats","streams:read","streams:write","tokens:read","tokens:write","users:email","users:invite","users:read"],"appId":"spklwebapp"},"req":{"id":"IiGvU4bg9KRIbdk4mPs8D","method":"POST","headers":{"host":"speckle.xyz.com","connection":"upgrade","content-length":"1602","x-forwarded-proto":"https","sec-ch-ua":"\"Not_A Brand\";v=\"8\", \"Chromium\";v=\"120\", \"Microsoft Edge\";v=\"120\"","apollographql-client-name":"frontend-2","sec-ch-ua-mobile":"?0","user-agent":"Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36 Edg/120.0.0.0","content-type":"application/json","accept":"*/*","apollographql-client-version":"2.17.9","x-request-id":"IiGvU4bg9KRIbdk4mPs8D","sec-ch-ua-platform":"\"Windows\"","origin":"https://speckle.xyz.com","sec-fetch-site":"same-origin","sec-fetch-mode":"cors","sec-fetch-dest":"empty","referer":"https://speckle.xyz.com/projects/d47bf0f75b/models/e224e6892d","accept-encoding":"gzip, deflate, br","accept-language":"en,de;q=0.9,de-DE;q=0.8,en-GB;q=0.7,en-US;q=0.6","x-speckle-client-ip":"12.116.135.255"}},"authContext":{"auth":true,"userId":"03efe98277","role":"server:admin","scopes":["apps:read","apps:write","profile:delete","profile:email","profile:read","server:setup","server:stats","streams:read","streams:write","tokens:read","tokens:write","users:email","users:invite","users:read"],"appId":"spklwebapp"},"component":"graphql","graphql_operation_kind":"mutation","graphql_query":"mutation BroadcastViewerUserActivity($projectId: String!, $resourceIdString: String!, $message: ViewerUserActivityMessageInput!) {\n  broadcastViewerUserActivity(\n    projectId: $projectId\n    resourceIdString: $resourceIdString\n    message: $message\n  )\n}\n","graphql_variables":{"resourceIdString":"e224e6892d","message":{"userId":"03efe98277","userName":"Alexander Hofbeck","state":{"projectId":"d47bf0f75b","sessionId":"dE0gbtdRo0zpKyE7C76Lw","viewer":{"metadata":{"filteringState":{}}},"resources":{"request":{"resourceIdString":"e224e6892d","threadFilters":{}}},"ui":{"threads":{"openThread":{"threadId":null,"isTyping":true,"newThreadEditor":true}},"diff":{"command":null,"time":0.5,"mode":1},"spotlightUserSessionId":null,"filters":{"isolatedObjectIds":[],"hiddenObjectIds":[],"selectedObjectIds":["eec6af72b011fe64b86a8c72029f32bf"],"propertyFilter":{"key":null,"isApplied":false}},"camera":{"position":[50.123405022141924,26.98851255210992,25.909548724421615],"target":[36.90001780559141,14.967656838032642,17.819882815253504],"isOrthoProjection":false,"zoom":1},"sectionBox":null,"lightConfig":{"enabled":true,"castShadow":true,"intensity":5,"color":16777215,"elevation":1.33,"azimuth":0.75,"radius":0,"indirectLightIntensity":1.2,"shadowcatcher":true},"explodeFactor":0,"selection":[30.482182237708365,20.695453913691495,24.648224664333963],"measurement":{"enabled":false,"options":{"visible":true,"type":1,"units":"m","vertexSnap":true,"precision":2}}}},"sessionId":"dE0gbtdRo0zpKyE7C76Lw","status":"VIEWING"},"projectId":"d47bf0f75b"},"graphql_operation_value":"GQL mutation broadcastViewerUserActivity","graphql_operation_name":"GQL broadcastViewerUserActivity","actionName":"mutation broadcastViewerUserActivity","msg":"graphql response"}
{"level":"info","time":"2024-01-10T13:10:30.406Z","req":{"id":"IiGvU4bg9KRIbdk4mPs8D","method":"POST","path":"/graphql","headers":{"host":"speckle.xyz.com","connection":"upgrade","content-length":"1602","x-forwarded-proto":"https","sec-ch-ua":"\"Not_A Brand\";v=\"8\", \"Chromium\";v=\"120\", \"Microsoft Edge\";v=\"120\"","apollographql-client-name":"frontend-2","sec-ch-ua-mobile":"?0","user-agent":"Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36 Edg/120.0.0.0","content-type":"application/json","accept":"*/*","apollographql-client-version":"2.17.9","x-request-id":"IiGvU4bg9KRIbdk4mPs8D","sec-ch-ua-platform":"\"Windows\"","origin":"https://speckle.xyz.com","sec-fetch-site":"same-origin","sec-fetch-mode":"cors","sec-fetch-dest":"empty","referer":"https://speckle.xyz.com/projects/d47bf0f75b/models/e224e6892d","accept-encoding":"gzip, deflate, br","accept-language":"en,de;q=0.9,de-DE;q=0.8,en-GB;q=0.7,en-US;q=0.6","x-speckle-client-ip":"12.116.135.255"}},"res":{"statusCode":200,"headers":{"x-request-id":"IiGvU4bg9KRIbdk4mPs8D","access-control-allow-origin":"*","x-ratelimit-remaining":48,"content-type":"application/json; charset=utf-8","content-length":"46","etag":"W/\"2e-1bNd0g4v5pxTJkLy4F3BwcGoFro\""}},"responseTime":73,"msg":"request completed"}
{"level":"info","time":"2024-01-10T13:10:32.469Z","req":{"id":"ed619508-ffc0-409c-a866-5680db47b8c0","method":"GET","path":"/graphql","headers":{"content-type":"application/json","host":"127.0.0.1:3000","connection":"close","x-request-id":"ed619508-ffc0-409c-a866-5680db47b8c0"}},"authContext":{"auth":false},"req":{"id":"ed619508-ffc0-409c-a866-5680db47b8c0","method":"GET","headers":{"content-type":"application/json","host":"127.0.0.1:3000","connection":"close","x-request-id":"ed619508-ffc0-409c-a866-5680db47b8c0"}},"authContext":{"auth":false},"component":"graphql","graphql_operation_kind":"query","graphql_query":"{serverInfo{version}}","graphql_operation_value":"GQL query serverInfo","graphql_operation_name":"GQL serverInfo","actionName":"query serverInfo","msg":"graphql response"}
{"level":"info","time":"2024-01-10T13:10:32.470Z","req":{"id":"ed619508-ffc0-409c-a866-5680db47b8c0","method":"GET","path":"/graphql","headers":{"content-type":"application/json","host":"127.0.0.1:3000","connection":"close","x-request-id":"ed619508-ffc0-409c-a866-5680db47b8c0"}},"res":{"statusCode":200,"headers":{"x-request-id":"ed619508-ffc0-409c-a866-5680db47b8c0","access-control-allow-origin":"*","x-ratelimit-remaining":499,"content-type":"application/json; charset=utf-8","content-length":"45","etag":"W/\"2d-xbu9jmIivsF+hqWRIJmqI1YS3rU\""}},"responseTime":5,"msg":"request completed"}

The issue arose out of our NGINX reverse proxy in front of the Speckle server which did not allow for websocket.

What helped me was this:
Nginx Configuring WebSocket Reverse Proxy | Tutorials | Tinkink

I used the link above and added the lines to my server settings of the Speckle server … afterwards all those red comments in the log vanished.

As a result the comments work as they should

3 Likes