fix: web UI connect errors (#439)

filecoin-project · Apr 13, 2022 · d7e0fe7 · d7e0fe7
1 parent 4da0f55
commit d7e0fe7
Show file tree

Hide file tree

Showing 9 changed files with 47 additions and 25 deletions.
diff --git a/go.mod b/go.mod
@@ -5,6 +5,7 @@ go 1.16
 replace github.com/filecoin-project/filecoin-ffi => ./extern/filecoin-ffi
 
 // replace github.com/filecoin-project/lotus => ../lotus
+replace github.com/graph-gophers/graphql-transport-ws => github.com/dirkmc/graphql-transport-ws v0.0.2-0.20220413103002-bd2222a7a5d5
 
 require (
 	contrib.go.opencensus.io/exporter/prometheus v0.4.0

diff --git a/go.sum b/go.sum
@@ -249,6 +249,8 @@ github.com/dgrijalva/jwt-go v3.2.0+incompatible/go.mod h1:E3ru+11k8xSBh+hMPgOLZm
 github.com/dgryski/go-farm v0.0.0-20190104051053-3adb47b1fb0f/go.mod h1:SqUrOPUnsFjfmXRMNPybcSiG0BgUW2AuFH8PAnS2iTw=
 github.com/dgryski/go-farm v0.0.0-20190423205320-6a90982ecee2 h1:tdlZCpZ/P9DhczCTSixgIKmwPv6+wP5DGjqLYw5SUiA=
 github.com/dgryski/go-farm v0.0.0-20190423205320-6a90982ecee2/go.mod h1:SqUrOPUnsFjfmXRMNPybcSiG0BgUW2AuFH8PAnS2iTw=
+github.com/dirkmc/graphql-transport-ws v0.0.2-0.20220413103002-bd2222a7a5d5 h1:4e71q6H/pEFIrNnFHV1Q4cRpOFRZPp1WxwOkyhwZy5w=
+github.com/dirkmc/graphql-transport-ws v0.0.2-0.20220413103002-bd2222a7a5d5/go.mod h1:5BVKvFzOd2BalVIBFfnfmHjpJi/MZ5rOj8G55mXvZ8g=
 github.com/docker/go-units v0.4.0 h1:3uh0PgVws3nIA0Q+MwDC8yjEPf9zjRfZZWXZYDct3Tw=
 github.com/docker/go-units v0.4.0/go.mod h1:fgPhTUdO+D/Jk86RDLlptpiXQzgHJF7gydDDbaIK4Dk=
 github.com/drand/bls12-381 v0.3.2/go.mod h1:dtcLgPtYT38L3NO6mPDYH0nbpc5tjPassDqiniuAt4Y=
@@ -600,8 +602,6 @@ github.com/gorilla/websocket v1.4.2 h1:+/TMaTYc4QFitKJxsQ7Yye35DkWvkdLcvGKqM+x0U
 github.com/gorilla/websocket v1.4.2/go.mod h1:YR8l580nyteQvAITg2hZ9XVh4b55+EU/adAjf1fMHhE=
 github.com/graph-gophers/graphql-go v1.2.0 h1:j3tCG0UcE+3f84OAw/4/6YQKyTr+r0yuUKtnxiu5OH4=
 github.com/graph-gophers/graphql-go v1.2.0/go.mod h1:9CQHMSxwO4MprSdzoIEobiHpoLtHm77vfxsvsIN5Vuc=
-github.com/graph-gophers/graphql-transport-ws v0.0.1 h1:w4bTkZ0bAVuV1z5AduAfDlsPTM9QVy5SEp2rrOvZMzQ=
-github.com/graph-gophers/graphql-transport-ws v0.0.1/go.mod h1:NIGAcH2JJLkVA0X1qArIk2c4mvrvGzJDzzg09TTbc/w=
 github.com/gregjones/httpcache v0.0.0-20180305231024-9cad4c3443a7/go.mod h1:FecbI9+v66THATjSRHfNgh1IVFe/9kFxbXtjV0ctIMA=
 github.com/grpc-ecosystem/go-grpc-middleware v1.0.1-0.20190118093823-f849b5445de4/go.mod h1:FiyG127CGDf3tlThmgyCl78X/SZQqEOJBCDaAfeWzPs=
 github.com/grpc-ecosystem/go-grpc-middleware v1.1.0/go.mod h1:f5nM7jw/oeRSadq3xCzHAvxcr8HZnzsqU6ILg/0NiiE=

diff --git a/gql/resolver.go b/gql/resolver.go
@@ -145,19 +145,14 @@ func (r *resolver) DealUpdate(ctx context.Context, args struct{ ID graphql.ID })
 		return nil, err
 	}
 
-	net := make(chan *dealResolver, 1)
-
 	// Send an update to the client with the initial state
 	deal, err := r.dealByID(ctx, dealUuid)
 	if err != nil {
 		return nil, err
 	}
 
-	select {
-	case <-ctx.Done():
-		return nil, ctx.Err()
-	case net <- newDealResolver(deal, r.dealsDB, r.logsDB, r.spApi):
-	}
+	net := make(chan *dealResolver, 1)
+	net <- newDealResolver(deal, r.dealsDB, r.logsDB, r.spApi)
 
 	// Updates to deal state are broadcast on pubsub. Pipe these updates to the
 	// client
@@ -471,6 +466,7 @@ func (dr *dealResolver) Message(ctx context.Context) string {
 func (dr *dealResolver) sealingState(ctx context.Context) string {
 	si, err := dr.spApi.SectorsStatus(ctx, dr.SectorID, false)
 	if err != nil {
+		log.Warnw("error getting sealing status for sector", "sector", dr.SectorID, "error", err)
 		return "Sealer: Sealing"
 	}
 

diff --git a/gql/server.go b/gql/server.go
@@ -11,6 +11,7 @@ import (
 	"runtime"
 	"strings"
 	"sync"
+	"time"
 
 	"golang.org/x/xerrors"
 
@@ -78,7 +79,13 @@ func (s *Server) Start(ctx context.Context) error {
 
 	// GraphQL handler
 	queryHandler := &relay.Handler{Schema: schema}
-	wsHandler := graphqlws.NewHandlerFunc(schema, queryHandler)
+	wsOpts := []graphqlws.Option{
+		// Add a 5 second timeout for writing responses to the web socket.
+		// A lot of people will expose Boost over an ssh tunnel so the
+		// connection may be quite laggy.
+		graphqlws.WithWriteTimeout(5 * time.Second),
+	}
+	wsHandler := graphqlws.NewHandlerFunc(schema, queryHandler, wsOpts...)
 
 	listenAddr := fmt.Sprintf(":%d", httpPort)
 	s.srv = &http.Server{Addr: listenAddr, Handler: mux}

diff --git a/react/src/Deals.css b/react/src/Deals.css
@@ -37,3 +37,7 @@
 .deals td.message {
     width: 100%;
 }
+
+.deals tr.error {
+    opacity: 0.8;
+}
diff --git a/react/src/Deals.js b/react/src/Deals.js
@@ -17,6 +17,7 @@ import {DealsPerPage} from "./deals-per-page";
 import columnsGapImg from './bootstrap-icons/icons/columns-gap.svg'
 import './Deals.css'
 import {Pagination} from "./Pagination";
+import {Warn} from "./Info";
 
 export function StorageDealsPage(props) {
     return <PageContainer pageType="storage-deals" title="Storage Deals">
@@ -131,13 +132,11 @@ function DealRow(props) {
     })
 
     if (error) {
-        return <tr>
-            <td colSpan={5}>Error: {error.message}</td>
-        </tr>
+        console.error('Error subscribing to deal ' + props.deal.ID, error)
     }
 
     var deal = props.deal
-    if (!loading) {
+    if (!loading && !error) {
         deal = data.dealUpdate
     }
 
@@ -150,7 +149,7 @@ function DealRow(props) {
     }
 
     return (
-        <tr>
+        <tr className={error ? "error" : ""}>
             <td className="start" onClick={props.toggleTimestampFormat}>
                 {start}
             </td>
@@ -161,7 +160,12 @@ function DealRow(props) {
             <td className="client">
                 <ShortClientAddress address={deal.ClientAddress} />
             </td>
-            <td className="message">{deal.Message}</td>
+            <td className="message">
+                {deal.Message}
+                {error ? (
+                    <Warn>{"Web UI Subscription Error: " + error.message}</Warn>
+                ) : null}
+            </td>
         </tr>
     )
 }

diff --git a/react/src/Info.css b/react/src/Info.css
@@ -5,16 +5,17 @@
 
 .info .target {
     display: inline-block;
-    border: 1px solid #465298;
-    color: #465298;
     cursor: pointer;
-    font-size: 0.6em;
-    width: 0.25em;
-    height: 1.2em;
-    border-radius: 2em;
-    padding: 0.2em 0.5em 0 0.55em;
+    font-size: 1em;
+    width: 1em;
+    height: 1em;
     vertical-align: top;
     margin-left: 0.5em;
+    background: url("./bootstrap-icons/icons/info-circle.svg");
+}
+
+.info.warning .target {
+    background: url("./bootstrap-icons/icons/exclamation-circle.svg");
 }
 
 .info .content {

diff --git a/react/src/Info.js b/react/src/Info.js
@@ -2,6 +2,14 @@ import {React, useEffect, useState} from "react";
 import "./Info.css"
 
 export function Info(props) {
+    return <InfoBox {...props} />
+}
+
+export function Warn(props) {
+    return <InfoBox {...props} className="warning" />
+}
+
+function InfoBox(props) {
     const [show, setShow] = useState(false)
     useEffect(() => {
         const onClick = () => show && setShow(false)
@@ -12,8 +20,8 @@ export function Info(props) {
     })
 
     return (
-        <div className="info">
-            <div className="target" onClick={() => setShow(!show)}>i</div>
+        <div className={"info " + props.className || ""}>
+            <div className="target" onClick={() => setShow(!show)}></div>
             { show ? <div className="content">{props.children}</div> : null }
         </div>
     )

diff --git a/react/src/gql.js b/react/src/gql.js
@@ -32,6 +32,7 @@ const wsLink = new WebSocketLink({
     uri: `ws://${graphqlEndpoint}/graphql/subscription`,
     options: {
         reconnect: true,
+        minTimeout: 5000,
         lazy: true,
     },
 });