ByoungSooPark/modeling-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Show when authentication is bad (cookie header only)

Browse Source
This commit is contained in:
49lf
2024-04-14 14:09:26 -04:00
parent 32f2411394
commit db08e67215
4 changed files with 316 additions and 260 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/components/Loading.tsx
View File

@ -1,6 +1,8 @@
import { useEffect, useState } from 'react'
import {
EngineConnectionStateType,
DisconnectingType,
EngineCommandManagerEvents,
EngineConnectionEvents,
ConnectionError,
@ -13,8 +15,12 @@ const Loading = ({ children }: React.PropsWithChildren) => {
const [error, setError] = useState<ConnectionError>(ConnectionError.Unset)
useEffect(() => {
const onConnectionStateChange = (state: EngineConnectionState) => {
console.log("<Loading/>", state)
const onConnectionStateChange = ({ detail: state }: CustomEvent) => {
if (
(state.type !== EngineConnectionStateType.Disconnected
|| state.type !== EngineConnectionStateType.Disconnecting)
&& state.value?.type !== DisconnectingType.Error) return
setError(state.value.value.error)
}
const onEngineAvailable = ({ detail: engineConnection }: CustomEvent) => {

6
src/hooks/useNetworkStatus.tsx
View File

@ -56,11 +56,11 @@ export function useNetworkStatus() {
useEffect(() => {
const onlineCallback = () => {
setSteps(initialConnectingTypeGroupState)
setInternetConnected(true)
}
const offlineCallback = () => {
setInternetConnected(false)
setSteps(structuredClone(initialConnectingTypeGroupState))
}
window.addEventListener('online', onlineCallback)
window.addEventListener('offline', offlineCallback)
@ -70,10 +70,6 @@ export function useNetworkStatus() {
}
}, [])
useEffect(() => {
console.log("pingPongHealth", pingPongHealth)
}, [pingPongHealth])
useEffect(() => {
const issues = {
[ConnectingTypeGroup.WebSocket]: steps[

18
src/hooks/useSetupEngineManager.ts
View File

@ -43,7 +43,7 @@ export function useSetupEngineManager(
engineCommandManager.pool = settings.pool
}
useLayoutEffect(() => {
const startEngineInstance = () => {
// Load the engine command manager once with the initial width and height,
// then we do not want to reload it.
const { width: quadWidth, height: quadHeight } = getDimensions(
@ -73,7 +73,9 @@ export function useSetupEngineManager(
})
hasSetNonZeroDimensions.current = true
}
}, [streamRef?.current?.offsetWidth, streamRef?.current?.offsetHeight])
}
useLayoutEffect(startEngineInstance, [streamRef?.current?.offsetWidth, streamRef?.current?.offsetHeight])
useEffect(() => {
const handleResize = deferExecution(() => {
@ -96,8 +98,20 @@ export function useSetupEngineManager(
}
}, 500)
const onOnline = () => {
startEngineInstance()
}
const onOffline = () => {
engineCommandManager.tearDown()
}
window.addEventListener('online', onOnline)
window.addEventListener('offline', onOffline)
window.addEventListener('resize', handleResize)
return () => {
window.removeEventListener('online', onOnline)
window.removeEventListener('offline', onOffline)
window.removeEventListener('resize', handleResize)
}
}, [])

94
src/lang/std/engineConnection.ts
View File

@ -1,8 +1,11 @@
import { PathToNode, Program, SourceRange } from 'lang/wasm'
import { VITE_KC_API_WS_MODELING_URL } from 'env'
import { invoke } from '@tauri-apps/api/core'
import { VITE_KC_API_WS_MODELING_URL, VITE_KC_API_BASE_URL } from 'env'
import { Models } from '@kittycad/lib'
import { exportSave } from 'lib/exportSave'
import { uuidv4 } from 'lib/utils'
import withBaseURL from 'lib/withBaseURL'
import { isTauri } from 'lib/isTauri'
import { getNodePathFromSourceRange } from 'lang/queryAst'
import { Themes, getThemeColorForEngine, getOppositeTheme } from 'lib/theme'
import { DefaultPlanes } from 'wasm-lib/kcl/bindings/DefaultPlanes'
@ -140,7 +143,7 @@ export const CONNECTION_ERROR_TEXT: Record<ConnectionError, string> = {
[ConnectionError.DataChannelError]: "The data channel signaled an error.",
[ConnectionError.WebSocketError]: "The websocket signaled an error.",
[ConnectionError.LocalDescriptionInvalid]: "The local description is invalid.",
[ConnectionError.BadAuthToken]: "Your authorization token is not valid; please login again.",
[ConnectionError.BadAuthToken]: "Your authorization token is invalid; please login again.",
[ConnectionError.TooManyConnections]: "There are too many connections.",
[ConnectionError.Unknown]: "An unexpected error occurred. Please report this to us.",
}
@ -150,7 +153,7 @@ export interface ErrorType {
error: ConnectionError,
// Additional context.
context?: string,
context?: any,
// We assign this in the state setter because we may have not failed at
// a Connecting state, which we check for there.
@ -276,10 +279,11 @@ class EngineConnection extends EventTarget {
if (next.type === EngineConnectionStateType.Disconnecting) {
const sub = next.value
if (sub.type === DisconnectingType.Error) {
console.log(sub)
// Record the last step we failed at.
// (Check the current state that we're about to override that
// it was a Connecting state.)
console.log(sub)
if (this._state.type === EngineConnectionStateType.Connecting) {
if (!sub.value) sub.value = {}
sub.value.lastConnectingValue = this._state.value
@ -366,13 +370,18 @@ class EngineConnection extends EventTarget {
return
}
// Information on the connect transaction
const createPeerConnection = () => {
this.pc = new RTCPeerConnection({
bundlePolicy: 'max-bundle',
})
// Other parts of the application expect pc to be initialized when firing.
this.dispatchEvent(
new CustomEvent(EngineConnectionEvents.ConnectionStarted, {
detail: this,
})
)
// Data channels MUST BE specified before SDP offers because requesting
// them affects what our needs are!
const DATACHANNEL_NAME_UMC = 'unreliable_modeling_cmds'
@ -440,7 +449,7 @@ class EngineConnection extends EventTarget {
type: DisconnectingType.Error,
value: {
error: ConnectionError.ICENegotiate,
context: event.toString(),
context: event,
},
},
}
@ -566,7 +575,6 @@ class EngineConnection extends EventTarget {
})
this.unreliableDataChannel.addEventListener('close', (event) => {
console.log("data channel close")
this.disconnectAll()
this.finalizeIfAllConnectionsClosed()
@ -581,7 +589,7 @@ class EngineConnection extends EventTarget {
type: DisconnectingType.Error,
value: {
error: ConnectionError.DataChannelError,
context: event.toString(),
context: event,
},
},
}
@ -619,6 +627,7 @@ class EngineConnection extends EventTarget {
},
}
const createWebSocketConnection = () => {
this.websocket = new WebSocket(this.url, [])
this.websocket.binaryType = 'arraybuffer'
@ -638,16 +647,11 @@ class EngineConnection extends EventTarget {
// Otherwise when run in a browser, the token is sent implicitly via
// the Cookie header.
if (this.token) {
this.send({
type: 'headers',
headers: { Authorization: `Bearer ${this.token}` },
})
this.send({ headers: { Authorization: `Bearer ${this.token}` } })
}
})
this.websocket.addEventListener('close', (event) => {
console.log("websocket close")
this.disconnectAll()
this.finalizeIfAllConnectionsClosed()
})
@ -661,7 +665,7 @@ class EngineConnection extends EventTarget {
type: DisconnectingType.Error,
value: {
error: ConnectionError.WebSocketError,
context: event.toString(),
context: event,
},
},
}
@ -675,8 +679,6 @@ class EngineConnection extends EventTarget {
// when assuming we're the only consumer or that all messages will
// be carefully formatted here.
console.log("websocket message", event)
if (typeof event.data !== 'string') {
return
}
@ -697,6 +699,7 @@ class EngineConnection extends EventTarget {
`Error in response to request ${message.request_id}:\n${errorsString}
failed cmd type was ${artifactThatFailed?.commandType}`
)
console.log(artifactThatFailed)
} else {
console.error(`Error from server:\n${errorsString}`)
}
@ -802,10 +805,7 @@ failed cmd type was ${artifactThatFailed?.commandType}`
return this.pc?.setLocalDescription(offer).then(() => {
this.send({
type: 'sdp_offer',
offer: {
sdp: offer.sdp || '',
type: offer.type,
},
offer,
})
this.state = {
type: EngineConnectionStateType.Connecting,
@ -824,7 +824,7 @@ failed cmd type was ${artifactThatFailed?.commandType}`
type: DisconnectingType.Error,
value: {
error: ConnectionError.LocalDescriptionInvalid,
context: err.toString(),
context: err,
},
},
}
@ -885,12 +885,52 @@ failed cmd type was ${artifactThatFailed?.commandType}`
break
}
})
}
this.dispatchEvent(
new CustomEvent(EngineConnectionEvents.ConnectionStarted, {
detail: this,
// api-deux currently doesn't report if an auth token is invalid on the
// websocket. As a workaround we can invoke two endpoints: /user and
// /user/session/{token} . Former for regular operations, latter for
// development.
// Resolver: https://github.com/KittyCAD/api-deux/issues/1628
const promiseIsAuthed = this.token
// We can't check tokens in localStorage, at least not yet.
// Resolver: https://github.com/KittyCAD/api-deux/issues/1629
? Promise.resolve({ status: 200 })
: !isTauri()
? fetch(withBaseURL('/user'))
: invoke<Models['User_type'] | Record<'error_code', unknown>>('get_user', {
token: this.token,
hostname: VITE_KC_API_BASE_URL,
})
promiseIsAuthed
.then((e) => {
if (e.status >= 200 && e.status < 400) {
createWebSocketConnection()
} else if (e.status === 401) {
this.state = {
type: EngineConnectionStateType.Disconnected,
value: {
type: DisconnectingType.Error,
value: {
error: ConnectionError.BadAuthToken,
context: e,
},
},
}
} else {
this.state = {
type: EngineConnectionStateType.Disconnected,
value: {
type: DisconnectingType.Error,
value: {
error: ConnectionError.Unknown,
context: e,
},
},
}
}
})
)
}
// Do not change this back to an object or any, we should only be sending the
// WebSocketRequest type!