Update example app runtime defaults

Author: niemyjski

example/browser/index.js

@@ -1,5 +1,5 @@
 import { Exceptionless, prune } from "../../node_modules/@exceptionless/browser/dist/index.bundle.js";
-import "/node_modules/jquery/dist/jquery.js";
+import "../../node_modules/jquery/dist/jquery.js";
 
 import { divide } from "./math.js";
 import { TextAreaLogger } from "./text-area-logger.js";

example/expo/App.tsx

@@ -1,34 +1,28 @@
-import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
-import { NavigationContainer } from "@react-navigation/native";
 import Constants from "expo-constants";
 import * as Device from "expo-device";
-import { GlassView } from "expo-glass-effect";
 import * as SplashScreen from "expo-splash-screen";
 import { StatusBar } from "expo-status-bar";
 import { useEffect, useMemo, useState } from "react";
-import { Platform, StyleSheet, Text, View } from "react-native";
+import { Platform, Pressable, StyleSheet, Text, View } from "react-native";
 import { SafeAreaProvider, SafeAreaView } from "react-native-safe-area-context";
+import { Tabs, type TabSelectedEvent } from "react-native-screens";
 import { Exceptionless } from "@exceptionless/react-native";
 
 import { callbackLog, getLogEntries, subscribeToLogs } from "./logging";
 import ErrorsScreen from "./screens/ErrorsScreen";
 import EventsScreen from "./screens/EventsScreen";
 import LogsScreen from "./screens/LogsScreen";
 
-type TabParamList = {
-  Errors: undefined;
-  Events: undefined;
-  Logs: undefined;
-};
+type TabKey = "Errors" | "Events" | "Logs";
 
-const Tab = createBottomTabNavigator<TabParamList>();
+const appTabs: Array<{ icon: string; key: TabKey; title: string }> = [
+  { icon: "exclamationmark.triangle", key: "Errors", title: "Errors" },
+  { icon: "tray.and.arrow.up", key: "Events", title: "Events" },
+  { icon: "list.bullet.rectangle", key: "Logs", title: "Logs" }
+];
 
 const serverUrl = getServerUrl();
 
-function TabIcon({ label, focused }: { label: string; focused: boolean }) {
-  return <Text style={[styles.tabIcon, focused && styles.tabIconFocused]}>{label}</Text>;
-}
-
 /**
  * Resolves the dev server URL based on the current platform.
  * - Web and iOS Simulator: localhost reaches the host Mac.
@@ -87,6 +81,67 @@ function TopDiagnostics() {
   );
 }
 
+function NativeTabs() {
+  const [selectedTab, setSelectedTab] = useState<TabKey>("Errors");
+  const [baseProvenance, setBaseProvenance] = useState(0);
+  const navStateRequest = useMemo(() => ({ baseProvenance, selectedScreenKey: selectedTab }), [baseProvenance, selectedTab]);
+
+  const handleTabSelected = (event: { nativeEvent: TabSelectedEvent }) => {
+    setSelectedTab(event.nativeEvent.selectedScreenKey as TabKey);
+    setBaseProvenance(event.nativeEvent.provenance);
+  };
+
+  if (Platform.OS === "web") {
+    const ActiveScreen = selectedTab === "Errors" ? ErrorsScreen : selectedTab === "Events" ? EventsScreen : LogsScreen;
+
+    return (
+      <View style={styles.webTabs}>
+        <View style={styles.webTabContent}>
+          <ActiveScreen />
+        </View>
+        <View style={styles.webTabBar}>
+          {appTabs.map((tab) => (
+            <Pressable
+              key={tab.key}
+              accessibilityRole="tab"
+              accessibilityState={{ selected: selectedTab === tab.key }}
+              onPress={() => setSelectedTab(tab.key)}
+              style={styles.webTabButton}
+            >
+              <Text style={[styles.webTabLabel, selectedTab === tab.key && styles.webTabLabelActive]}>{tab.title}</Text>
+            </Pressable>
+          ))}
+        </View>
+      </View>
+    );
+  }
+
+  return (
+    <Tabs.Host
+      colorScheme="light"
+      ios={{
+        tabBarControllerMode: "tabBar",
+        tabBarMinimizeBehavior: "never",
+        tabBarTintColor: "#0f172a"
+      }}
+      nativeContainerStyle={styles.nativeTabsContainer}
+      navStateRequest={navStateRequest}
+      onTabSelected={handleTabSelected}
+      rejectStaleNavStateUpdates
+    >
+      {appTabs.map((tab) => {
+        const Screen = tab.key === "Errors" ? ErrorsScreen : tab.key === "Events" ? EventsScreen : LogsScreen;
+
+        return (
+          <Tabs.Screen ios={{ icon: { name: tab.icon, type: "sfSymbol" } }} key={tab.key} screenKey={tab.key} style={styles.nativeTabScreen} title={tab.title}>
+            <Screen />
+          </Tabs.Screen>
+        );
+      })}
+    </Tabs.Host>
+  );
+}
+
 export default function App() {
   useEffect(() => {
     void Exceptionless.startup((config) => {
@@ -101,47 +156,11 @@ export default function App() {
 
   return (
     <SafeAreaProvider>
-      <NavigationContainer>
-        <View style={styles.appShell}>
-          <TopDiagnostics />
-          <Tab.Navigator
-            screenOptions={{
-              headerShown: false,
-              tabBarActiveTintColor: "#0f172a",
-              tabBarInactiveTintColor: "#64748b",
-              tabBarLabelStyle: styles.tabLabel,
-              tabBarStyle: styles.tabBar,
-              tabBarBackground: () => <GlassView glassEffectStyle="regular" isInteractive style={StyleSheet.absoluteFill} tintColor="rgba(255,255,255,0.58)" />
-            }}
-          >
-            <Tab.Screen
-              name="Errors"
-              component={ErrorsScreen}
-              options={{
-                title: "Errors",
-                tabBarIcon: ({ focused }) => <TabIcon label="!" focused={focused} />
-              }}
-            />
-            <Tab.Screen
-              name="Events"
-              component={EventsScreen}
-              options={{
-                title: "Events",
-                tabBarIcon: ({ focused }) => <TabIcon label="|" focused={focused} />
-              }}
-            />
-            <Tab.Screen
-              name="Logs"
-              component={LogsScreen}
-              options={{
-                title: "Logs",
-                tabBarIcon: ({ focused }) => <TabIcon label="#" focused={focused} />
-              }}
-            />
-          </Tab.Navigator>
-        </View>
-        <StatusBar style="auto" />
-      </NavigationContainer>
+      <View style={styles.appShell}>
+        <TopDiagnostics />
+        <NativeTabs />
+      </View>
+      <StatusBar style="auto" />
     </SafeAreaProvider>
   );
 }
@@ -210,31 +229,40 @@ const styles = StyleSheet.create({
     lineHeight: 15,
     marginTop: 8
   },
-  tabBar: {
-    backgroundColor: "rgba(255,255,255,0.5)",
-    borderTopColor: "rgba(148,163,184,0.22)",
+  nativeTabsContainer: {
+    backgroundColor: "#fff"
+  },
+  nativeTabScreen: {
+    backgroundColor: "#fff"
+  },
+  webTabs: {
+    flex: 1
+  },
+  webTabBar: {
+    alignItems: "center",
+    backgroundColor: "rgba(255,255,255,0.92)",
+    borderTopColor: "#e5e7eb",
     borderTopWidth: StyleSheet.hairlineWidth,
-    elevation: 0,
-    height: 78,
-    paddingBottom: 14,
-    paddingTop: 8,
-    position: "absolute",
-    shadowColor: "#0f172a",
-    shadowOffset: { height: -4, width: 0 },
-    shadowOpacity: 0.08,
-    shadowRadius: 18
-  },
-  tabIcon: {
-    color: "#64748b",
-    fontSize: 18,
-    fontWeight: "800",
-    lineHeight: 20
+    flexDirection: "row",
+    minHeight: 72,
+    paddingBottom: 12,
+    paddingTop: 8
   },
-  tabIconFocused: {
-    color: "#0f172a"
+  webTabButton: {
+    alignItems: "center",
+    flex: 1,
+    justifyContent: "center",
+    minHeight: 44
   },
-  tabLabel: {
+  webTabContent: {
+    flex: 1
+  },
+  webTabLabel: {
+    color: "#64748b",
     fontSize: 12,
     fontWeight: "700"
+  },
+  webTabLabelActive: {
+    color: "#0f172a"
   }
 });

example/nextjs/README.md

@@ -37,7 +37,14 @@ This sticks to the native Next.js file boundaries instead of inventing another f
 
 ### Environment variables
 
-Set the env vars you want the example to use:
+By default, the example uses the same local development Exceptionless project as the other samples:
+
+```js
+c.apiKey = "LhhP1C9gijpSKCslHHCvwdSIz298twx271nTest";
+c.serverUrl = "https://ex.dev.localhost:7111";
+```
+
+Set these env vars if you want the example to use a different project or server:
 
 - `NEXT_PUBLIC_EXCEPTIONLESS_API_KEY`
 - `NEXT_PUBLIC_EXCEPTIONLESS_SERVER_URL`

example/nextjs/lib/exceptionless-browser.js

@@ -2,17 +2,15 @@ import { Exceptionless, KnownEventDataKeys } from "@exceptionless/browser";
 
 export { Exceptionless };
 
+const DEFAULT_API_KEY = "LhhP1C9gijpSKCslHHCvwdSIz298twx271nTest";
+const DEFAULT_SERVER_URL = "https://ex.dev.localhost:7111";
+
 let startupPromise;
 
 export function startup() {
   startupPromise ??= Exceptionless.startup((config) => {
-    if (process.env.NEXT_PUBLIC_EXCEPTIONLESS_API_KEY) {
-      config.apiKey = process.env.NEXT_PUBLIC_EXCEPTIONLESS_API_KEY;
-    }
-
-    if (process.env.NEXT_PUBLIC_EXCEPTIONLESS_SERVER_URL) {
-      config.serverUrl = process.env.NEXT_PUBLIC_EXCEPTIONLESS_SERVER_URL;
-    }
+    config.apiKey = (process.env.NEXT_PUBLIC_EXCEPTIONLESS_API_KEY || DEFAULT_API_KEY).trim();
+    config.serverUrl = (process.env.NEXT_PUBLIC_EXCEPTIONLESS_SERVER_URL || DEFAULT_SERVER_URL).trim();
 
     if (process.env.NODE_ENV !== "production") {
       config.useDebugLogger();

example/nextjs/lib/exceptionless-server.js

@@ -2,19 +2,15 @@ import { Exceptionless, KnownEventDataKeys, toError } from "@exceptionless/node"
 
 export { Exceptionless, KnownEventDataKeys, toError };
 
+const DEFAULT_API_KEY = "LhhP1C9gijpSKCslHHCvwdSIz298twx271nTest";
+const DEFAULT_SERVER_URL = "https://ex.dev.localhost:7111";
+
 let startupPromise;
 
 export async function startup() {
   startupPromise ??= Exceptionless.startup((config) => {
-    const apiKey = (process.env.EXCEPTIONLESS_API_KEY || process.env.NEXT_PUBLIC_EXCEPTIONLESS_API_KEY || "").trim();
-    if (apiKey) {
-      config.apiKey = apiKey;
-    }
-
-    const serverUrl = (process.env.EXCEPTIONLESS_SERVER_URL || process.env.NEXT_PUBLIC_EXCEPTIONLESS_SERVER_URL || "").trim();
-    if (serverUrl) {
-      config.serverUrl = serverUrl;
-    }
+    config.apiKey = (process.env.EXCEPTIONLESS_API_KEY || process.env.NEXT_PUBLIC_EXCEPTIONLESS_API_KEY || DEFAULT_API_KEY).trim();
+    config.serverUrl = (process.env.EXCEPTIONLESS_SERVER_URL || process.env.NEXT_PUBLIC_EXCEPTIONLESS_SERVER_URL || DEFAULT_SERVER_URL).trim();
 
     if (process.env.NODE_ENV !== "production") {
       config.useDebugLogger();