feedback

apps/dotcom/src/components/ErrorPage/ErrorPage.tsx

@@ -1,4 +1,5 @@
 import { Link } from 'react-router-dom'
+import { isInIframe } from '../../utils/iFrame'
 
 export function ErrorPage({
 	icon,
@@ -19,9 +20,7 @@ export function ErrorPage({
 					<p>{messages.para1}</p>
 					{messages.para2 && <p>{messages.para2}</p>}
 				</div>
-				<Link to={'/'}>
-					<a>Take me home.</a>
-				</Link>
+				<Link to={'/'}>{isInIframe() ? 'Open tldraw.' : 'Back to tldraw.'}</Link>
 			</div>
 		</div>
 	)

apps/dotcom/src/components/StoreErrorScreen.tsx

@@ -1,9 +1,11 @@
 import { TLIncompatibilityReason } from '@tldraw/tlsync'
-import { ErrorScreen, exhaustiveSwitchError } from 'tldraw'
+import { exhaustiveSwitchError } from 'tldraw'
 import { RemoteSyncError } from '../utils/remote-sync/remote-sync'
+import { ErrorPage } from './ErrorPage/ErrorPage'
 
 export function StoreErrorScreen({ error }: { error: Error }) {
-	let message = 'Could not connect to server.'
+	let header = 'Could not connect to server.'
+	let message = ''
 
 	if (error instanceof RemoteSyncError) {
 		switch (error.reason) {
@@ -27,8 +29,8 @@ export function StoreErrorScreen({ error }: { error: Error }) {
 				break
 			}
 			case TLIncompatibilityReason.RoomNotFound: {
-				message =
-					'The room you are trying to connect to does not exist. Please check the URL and try again. If the problem persists contact the system administrator.'
+				header = 'Room not found'
+				message = 'The room you are trying to connect to does not exist.'
 				break
 			}
 			default:
@@ -36,9 +38,5 @@ export function StoreErrorScreen({ error }: { error: Error }) {
 		}
 	}
 
-	return (
-		<div className="tldraw__editor tl-container">
-			<ErrorScreen>{message}</ErrorScreen>
-		</div>
-	)
+	return <ErrorPage icon messages={{ header, para1: message }} />
 }

apps/dotcom/src/utils/remote-sync/ClientWebSocketAdapter.test.ts

@@ -174,6 +174,16 @@ describe(ClientWebSocketAdapter, () => {
 		expect(onStatusChange).toHaveBeenCalledWith('error', undefined)
 	})
 
+	it('signals the correct closeCode when a room is not found', async () => {
+		const onStatusChange = jest.fn()
+		adapter.onStatusChange(onStatusChange)
+		await waitFor(() => adapter._ws?.readyState === WebSocket.OPEN)
+
+		adapter._ws!.onclose?.({ code: 4099 } as any)
+
+		expect(onStatusChange).toHaveBeenCalledWith('error', 4099)
+	})
+
 	it('signals status changes while restarting', async () => {
 		const onStatusChange = jest.fn()
 		await waitFor(() => adapter._ws?.readyState === WebSocket.OPEN)

apps/dotcom/styles/core.css

@@ -183,6 +183,7 @@ a {
 	font-weight: 500;
 	color: var(--text-color-2);
 	padding: 12px 4px;
+	text-decoration: underline;
 }
 
 /* ------------------ Board history ----------------- */

packages/tlsync/src/lib/TLSyncClient.ts

@@ -31,9 +31,9 @@ type SubscribingFn<T> = (cb: (val: T) => void) => () => void
  *
  * @public
  */
-export enum TLCloseEventCode {
-	NOT_FOUND = 4099,
-}
+export const TLCloseEventCode = {
+	NOT_FOUND: 4099,
+} as const
 
 /** @public */
 export type TLPersistentClientSocketStatus = 'online' | 'offline' | 'error'