one 1.2.57 → 1.2.58

package/src/views/ErrorBoundary.tsx

@@ -1,171 +1,169 @@
-// import { LogContext } from '@expo/metro-runtime/build/error-overlay/Data/LogContext'
-// import { LogBoxInspectorStackFrames } from '@expo/metro-runtime/build/error-overlay/overlay/LogBoxInspectorStackFrames'
-// import { LogBoxLog, parseErrorStack } from '@expo/metro-runtime/symbolicate'
 import { BottomTabBarHeightContext } from '@react-navigation/bottom-tabs'
 import React from 'react'
-import { View } from 'react-native'
+import { Pressable, ScrollView, StyleSheet, Text, View } from 'react-native'
 import { SafeAreaView } from 'react-native-safe-area-context'
 
 import type { ErrorBoundaryProps } from './Try'
 
-// function useMetroSymbolication(error: Error) {
-//   const [logBoxLog, setLogBoxLog] = React.useState<LogBoxLog | null>(null)
-
-//   React.useEffect(() => {
-//     let isMounted = true
-//     const stack = parseErrorStack(error.stack)
-
-//     const log = new LogBoxLog({
-//       level: 'error',
-//       message: {
-//         content: error.message,
-//         substitutions: [],
-//       },
-//       isComponentError: false,
-//       stack,
-//       category: error.message,
-//       componentStack: [],
-//     })
-
-//     log.symbolicate('stack', (symbolicatedLog) => {
-//       if (isMounted) {
-//         setLogBoxLog(log)
-//       }
-//     })
+/**
+ * Default error boundary component for native platforms.
+ * Shows a user-friendly error message with retry capability.
+ *
+ * This component is used when:
+ * - A route doesn't export its own ErrorBoundary
+ * - An error occurs during rendering
+ *
+ * Users can override this by exporting their own ErrorBoundary from a route.
+ */
+export function ErrorBoundary({ error, retry, route }: ErrorBoundaryProps) {
+  const inTabBar = React.useContext(BottomTabBarHeightContext)
+  const Wrapper = inTabBar ? View : SafeAreaView
+  const isDev = process.env.NODE_ENV === 'development'
 
-//     return () => {
-//       isMounted = false
-//     }
-//   }, [error])
+  console.error('[One] Error in route:', route?.routeName || 'unknown', error)
 
-//   return logBoxLog
-// }
+  return (
+    <Wrapper style={styles.container}>
+      <View style={styles.content}>
+        {/* Error icon */}
+        <View style={styles.iconContainer}>
+          <Text style={styles.iconText}>!</Text>
+        </View>
 
-export function ErrorBoundary({ error, retry }: ErrorBoundaryProps) {
-  // const logBoxLog = useMetroSymbolication(error)
-  const inTabBar = React.useContext(BottomTabBarHeightContext)
-  const Wrapper = inTabBar ? View : SafeAreaView
+        {/* Title */}
+        <Text style={styles.title}>Something went wrong</Text>
 
-  console.error('error', error)
+        {/* Route info */}
+        {route?.routeName && (
+          <Text style={styles.routeInfo}>on route: {route.routeName}</Text>
+        )}
 
-  return null
+        {/* Error message */}
+        <View style={styles.errorBox}>
+          <Text style={styles.errorMessage}>
+            {error?.message || 'An unexpected error occurred'}
+          </Text>
+        </View>
 
-  // return (
-  //   <View style={styles.container}>
-  //     <Wrapper style={{ flex: 1, gap: 8, maxWidth: 720, marginHorizontal: 'auto' }}>
-  //       <View
-  //         style={{
-  //           marginBottom: 12,
-  //           flexDirection: 'row',
-  //           flexWrap: 'wrap',
-  //           justifyContent: 'space-between',
-  //           alignItems: 'center',
-  //         }}
-  //       >
-  //         <Text role="heading" aria-level={1} style={styles.title}>
-  //           Something went wrong
-  //         </Text>
-  //       </View>
+        {/* Stack trace (dev only) */}
+        {isDev && error?.stack && (
+          <ScrollView style={styles.stackContainer}>
+            <Text style={styles.stackTitle}>Stack trace:</Text>
+            <Text style={styles.stackText}>{error.stack}</Text>
+          </ScrollView>
+        )}
 
-  //       <StackTrace logData={logBoxLog} />
-  //       {process.env.NODE_ENV === 'development' && (
-  //         <Link href="/_sitemap" style={styles.link}>
-  //           Sitemap
-  //         </Link>
-  //       )}
-  //       <Pressable onPress={retry}>
-  //         {({ hovered, pressed }) => (
-  //           <View
-  //             style={[
-  //               styles.buttonInner,
-  //               (hovered || pressed) && { backgroundColor: 'white' },
-  //             ]}
-  //           >
-  //             <Text
-  //               style={[
-  //                 styles.buttonText,
-  //                 {
-  //                   transitionDuration: '100ms',
-  //                   color: hovered || pressed ? 'black' : 'white',
-  //                 },
-  //               ]}
-  //             >
-  //               Retry
-  //             </Text>
-  //           </View>
-  //         )}
-  //       </Pressable>
-  //     </Wrapper>
-  //   </View>
-  // )
+        {/* Actions */}
+        <View style={styles.actions}>
+          <Pressable
+            onPress={() => retry()}
+            style={({ pressed }) => [
+              styles.button,
+              styles.primaryButton,
+              pressed && styles.buttonPressed,
+            ]}
+          >
+            <Text style={styles.primaryButtonText}>Try Again</Text>
+          </Pressable>
+        </View>
+      </View>
+    </Wrapper>
+  )
 }
 
-// function StackTrace({ logData }: { logData: LogBoxLog | null }) {
-//   if (!logData?.symbolicated?.stack?.stack) {
-//     return null
-//   }
-//   return (
-//     <ScrollView style={{ flex: 1 }}>
-//       <LogContext.Provider
-//         value={{
-//           isDisabled: false,
-//           logs: [logData],
-//           selectedLogIndex: 0,
-//         }}
-//       >
-//         <LogBoxInspectorStackFrames onRetry={function () {}} type="stack" />
-//       </LogContext.Provider>
-//     </ScrollView>
-//   )
-// }
-
-// const styles = StyleSheet.create({
-//   container: {
-//     flex: 1,
-//     backgroundColor: 'black',
-//     padding: 24,
-//     alignItems: 'stretch',
-//     justifyContent: 'center',
-//   },
-//   title: {
-//     color: 'white',
-//     fontSize: Platform.select({ web: 32, default: 24 }),
-//     fontWeight: 'bold',
-//   },
-//   buttonText: {
-//     fontSize: 18,
-//     fontWeight: 'bold',
-//     color: 'black',
-//   },
-//   buttonInner: {
-//     transitionDuration: '100ms',
-//     paddingVertical: 12,
-//     paddingHorizontal: 24,
-//     borderColor: 'white',
-//     borderWidth: 2,
-//     marginLeft: 8,
-//     justifyContent: 'center',
-//     alignItems: 'center',
-//   },
-//   code: {
-//     fontFamily: Platform.select({
-//       default: 'Courier',
-//       ios: 'Courier New',
-//       android: 'monospace',
-//     }),
-//     fontWeight: '500',
-//   },
-//   subtitle: {
-//     color: 'white',
-//     fontSize: 14,
-//     marginBottom: 12,
-//     // textAlign: "center",
-//   },
-//   link: {
-//     color: 'rgba(255,255,255,0.4)',
-//     textDecorationStyle: 'solid',
-//     textDecorationLine: 'underline',
-//     fontSize: 14,
-//     textAlign: 'center',
-//   },
-// })
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#0a0a0f',
+  },
+  content: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: 24,
+  },
+  iconContainer: {
+    width: 64,
+    height: 64,
+    backgroundColor: '#ef4444',
+    borderRadius: 32,
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginBottom: 24,
+  },
+  iconText: {
+    color: 'white',
+    fontSize: 32,
+    fontWeight: 'bold',
+  },
+  title: {
+    fontSize: 22,
+    fontWeight: '600',
+    color: '#e8e8e8',
+    marginBottom: 8,
+    textAlign: 'center',
+  },
+  routeInfo: {
+    fontSize: 13,
+    color: '#666',
+    marginBottom: 16,
+  },
+  errorBox: {
+    backgroundColor: '#1a1a2e',
+    borderRadius: 8,
+    padding: 16,
+    marginBottom: 16,
+    width: '100%',
+    maxWidth: 400,
+  },
+  errorMessage: {
+    fontFamily: 'monospace',
+    fontSize: 14,
+    lineHeight: 20,
+    color: '#f87171',
+    textAlign: 'center',
+  },
+  stackContainer: {
+    maxHeight: 150,
+    width: '100%',
+    maxWidth: 400,
+    backgroundColor: '#16162a',
+    borderRadius: 8,
+    padding: 12,
+    marginBottom: 16,
+  },
+  stackTitle: {
+    fontSize: 11,
+    color: '#666',
+    marginBottom: 8,
+  },
+  stackText: {
+    fontFamily: 'monospace',
+    fontSize: 10,
+    lineHeight: 16,
+    color: '#a0a0a0',
+  },
+  actions: {
+    flexDirection: 'row',
+    gap: 12,
+    marginTop: 8,
+  },
+  button: {
+    paddingVertical: 12,
+    paddingHorizontal: 24,
+    borderRadius: 8,
+    minWidth: 120,
+    alignItems: 'center',
+  },
+  primaryButton: {
+    backgroundColor: '#3b82f6',
+  },
+  buttonPressed: {
+    opacity: 0.8,
+  },
+  primaryButtonText: {
+    color: 'white',
+    fontSize: 14,
+    fontWeight: '500',
+  },
+})

package/src/views/ErrorBoundary.web.tsx

@@ -0,0 +1,321 @@
+import React from 'react'
+import type { ErrorBoundaryProps } from './Try'
+
+/**
+ * Default error boundary component for web.
+ * Shows a user-friendly error message with retry capability.
+ *
+ * This component is used when:
+ * - A route doesn't export its own ErrorBoundary
+ * - An error occurs during rendering
+ *
+ * Users can override this by exporting their own ErrorBoundary from a route.
+ */
+export function ErrorBoundary({ error, retry, route }: ErrorBoundaryProps) {
+  const isDev = process.env.NODE_ENV === 'development'
+
+  // Dispatch error event for devtools
+  React.useEffect(() => {
+    if (typeof window !== 'undefined') {
+      window.dispatchEvent(
+        new CustomEvent('one-error', {
+          detail: {
+            error: {
+              message: error.message,
+              stack: error.stack,
+              name: error.name,
+            },
+            route: route || {},
+            timestamp: Date.now(),
+            type: 'render',
+          },
+        })
+      )
+    }
+  }, [error, route])
+
+  return (
+    <div
+      style={{
+        minHeight: '100vh',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        backgroundColor: '#0a0a0f',
+        fontFamily:
+          '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif',
+        color: '#e8e8e8',
+        padding: '24px',
+      }}
+    >
+      <div
+        style={{
+          maxWidth: '600px',
+          width: '100%',
+          backgroundColor: '#1a1a2e',
+          borderRadius: '12px',
+          boxShadow: '0 8px 32px rgba(0, 0, 0, 0.4)',
+          overflow: 'hidden',
+        }}
+      >
+        {/* Header */}
+        <div
+          style={{
+            padding: '16px 20px',
+            backgroundColor: '#ef4444',
+            display: 'flex',
+            alignItems: 'center',
+            gap: '12px',
+          }}
+        >
+          <svg
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="white"
+            strokeWidth="2"
+          >
+            <circle cx="12" cy="12" r="10" />
+            <line x1="12" y1="8" x2="12" y2="12" />
+            <line x1="12" y1="16" x2="12.01" y2="16" />
+          </svg>
+          <div>
+            <div style={{ fontWeight: 600, fontSize: '16px', color: 'white' }}>
+              Something went wrong
+            </div>
+            {route?.pathname && (
+              <div
+                style={{
+                  fontSize: '13px',
+                  color: 'rgba(255,255,255,0.8)',
+                  marginTop: '2px',
+                }}
+              >
+                on {route.pathname}
+              </div>
+            )}
+          </div>
+        </div>
+
+        {/* Content */}
+        <div style={{ padding: '20px' }}>
+          {/* Error message */}
+          <div
+            style={{
+              backgroundColor: '#2a2a4a',
+              borderRadius: '8px',
+              padding: '16px',
+              marginBottom: '16px',
+            }}
+          >
+            <div
+              style={{
+                fontFamily: 'monospace',
+                fontSize: '14px',
+                lineHeight: '1.5',
+                color: '#f87171',
+                wordBreak: 'break-word',
+              }}
+            >
+              {error.message || 'An unexpected error occurred'}
+            </div>
+          </div>
+
+          {/* Stack trace (dev only) */}
+          {isDev && error.stack && (
+            <details
+              style={{
+                marginBottom: '16px',
+              }}
+            >
+              <summary
+                style={{
+                  cursor: 'pointer',
+                  fontSize: '13px',
+                  color: '#888',
+                  marginBottom: '8px',
+                }}
+              >
+                Stack trace
+              </summary>
+              <div
+                style={{
+                  backgroundColor: '#16162a',
+                  borderRadius: '8px',
+                  padding: '12px',
+                  maxHeight: '200px',
+                  overflow: 'auto',
+                }}
+              >
+                <pre
+                  style={{
+                    fontFamily: 'monospace',
+                    fontSize: '11px',
+                    lineHeight: '1.6',
+                    color: '#a0a0a0',
+                    margin: 0,
+                    whiteSpace: 'pre-wrap',
+                    wordBreak: 'break-word',
+                  }}
+                >
+                  {error.stack}
+                </pre>
+              </div>
+            </details>
+          )}
+
+          {/* Route info (dev only) */}
+          {isDev && route && (
+            <details
+              style={{
+                marginBottom: '16px',
+              }}
+            >
+              <summary
+                style={{
+                  cursor: 'pointer',
+                  fontSize: '13px',
+                  color: '#888',
+                  marginBottom: '8px',
+                }}
+              >
+                Route info
+              </summary>
+              <div
+                style={{
+                  backgroundColor: '#16162a',
+                  borderRadius: '8px',
+                  padding: '12px',
+                  display: 'grid',
+                  gridTemplateColumns: 'auto 1fr',
+                  gap: '8px',
+                  fontFamily: 'monospace',
+                  fontSize: '12px',
+                }}
+              >
+                {route.pathname && (
+                  <>
+                    <span style={{ color: '#888' }}>pathname</span>
+                    <span style={{ color: '#e8e8e8' }}>{route.pathname}</span>
+                  </>
+                )}
+                {route.routeName && (
+                  <>
+                    <span style={{ color: '#888' }}>route</span>
+                    <span style={{ color: '#e8e8e8' }}>{route.routeName}</span>
+                  </>
+                )}
+                {route.params && Object.keys(route.params).length > 0 && (
+                  <>
+                    <span style={{ color: '#888' }}>params</span>
+                    <span style={{ color: '#e8e8e8' }}>
+                      {JSON.stringify(route.params)}
+                    </span>
+                  </>
+                )}
+              </div>
+            </details>
+          )}
+
+          {/* Actions */}
+          <div style={{ display: 'flex', gap: '12px' }}>
+            <button
+              onClick={() => retry()}
+              style={{
+                flex: 1,
+                padding: '12px 20px',
+                backgroundColor: '#3b82f6',
+                color: 'white',
+                border: 'none',
+                borderRadius: '8px',
+                fontSize: '14px',
+                fontWeight: 500,
+                cursor: 'pointer',
+                transition: 'background-color 0.15s',
+              }}
+              onMouseOver={(e) => {
+                e.currentTarget.style.backgroundColor = '#2563eb'
+              }}
+              onMouseOut={(e) => {
+                e.currentTarget.style.backgroundColor = '#3b82f6'
+              }}
+            >
+              Try Again
+            </button>
+            <button
+              onClick={() => {
+                if (typeof window !== 'undefined') {
+                  window.location.href = '/'
+                }
+              }}
+              style={{
+                padding: '12px 20px',
+                backgroundColor: 'transparent',
+                color: '#888',
+                border: '1px solid #3a3a5a',
+                borderRadius: '8px',
+                fontSize: '14px',
+                fontWeight: 500,
+                cursor: 'pointer',
+                transition: 'all 0.15s',
+              }}
+              onMouseOver={(e) => {
+                e.currentTarget.style.backgroundColor = '#2a2a4a'
+                e.currentTarget.style.color = '#e8e8e8'
+              }}
+              onMouseOut={(e) => {
+                e.currentTarget.style.backgroundColor = 'transparent'
+                e.currentTarget.style.color = '#888'
+              }}
+            >
+              Go Home
+            </button>
+          </div>
+        </div>
+
+        {/* Footer */}
+        {isDev && (
+          <div
+            style={{
+              padding: '12px 20px',
+              backgroundColor: '#16162a',
+              borderTop: '1px solid #2a2a4a',
+              fontSize: '11px',
+              color: '#666',
+              display: 'flex',
+              alignItems: 'center',
+              gap: '8px',
+            }}
+          >
+            <svg
+              width="12"
+              height="12"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="#666"
+              strokeWidth="2"
+            >
+              <circle cx="12" cy="12" r="10" />
+              <path d="M12 16v-4" />
+              <path d="M12 8h.01" />
+            </svg>
+            <span>
+              Press{' '}
+              <kbd
+                style={{
+                  padding: '2px 6px',
+                  backgroundColor: '#2a2a4a',
+                  borderRadius: '4px',
+                }}
+              >
+                Alt+E
+              </kbd>{' '}
+              to open Error Panel
+            </span>
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}

package/src/views/Navigator.tsx

@@ -9,6 +9,7 @@ import { SafeAreaView } from 'react-native-safe-area-context'
 import { useFilterScreenChildren } from '../layouts/withLayoutContext'
 import { FlagsContext } from '../router/FlagsContext'
 import { useContextKey } from '../router/Route'
+import { registerProtectedRoutes, unregisterProtectedRoutes } from '../router/router'
 import { useSortedScreens } from '../router/useScreens'
 import { Screen } from './Screen'
 
@@ -44,12 +45,23 @@ export function Navigator({
   const contextKey = useContextKey()
 
   // Allows adding Screen components as children to configure routes.
-  const { screens, children: otherSlot } = useFilterScreenChildren(children, {
+  const { screens, children: otherSlot, protectedScreens } = useFilterScreenChildren(children, {
     isCustomNavigator: true,
     contextKey,
   })
 
-  const sorted = useSortedScreens(screens ?? [])
+  // Register protected routes globally so linkTo can block navigation to them
+  // Register immediately (not just in effect) to catch navigation attempts during first render
+  registerProtectedRoutes(contextKey, protectedScreens)
+
+  React.useEffect(() => {
+    registerProtectedRoutes(contextKey, protectedScreens)
+    return () => {
+      unregisterProtectedRoutes(contextKey)
+    }
+  }, [contextKey, protectedScreens])
+
+  const sorted = useSortedScreens(screens ?? [], { protectedScreens })
 
   if (!sorted.length) {
     console.warn(`Navigator at "${contextKey}" has no children.`)