1"use strict"; 2var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) { 3 if (k2 === undefined) k2 = k; 4 var desc = Object.getOwnPropertyDescriptor(m, k); 5 if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) { 6 desc = { enumerable: true, get: function() { return m[k]; } }; 7 } 8 Object.defineProperty(o, k2, desc); 9}) : (function(o, m, k, k2) { 10 if (k2 === undefined) k2 = k; 11 o[k2] = m[k]; 12})); 13var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) { 14 Object.defineProperty(o, "default", { enumerable: true, value: v }); 15}) : function(o, v) { 16 o["default"] = v; 17}); 18var __importStar = (this && this.__importStar) || function (mod) { 19 if (mod && mod.__esModule) return mod; 20 var result = {}; 21 if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k); 22 __setModuleDefault(result, mod); 23 return result; 24}; 25Object.defineProperty(exports, "__esModule", { value: true }); 26exports.ErrorOverlayBodyContents = exports.ErrorOverlayBody = exports.LogBoxInspector = exports.LogBoxInspectorContainer = void 0; 27/** 28 * Copyright (c) 650 Industries. 29 * Copyright (c) Meta Platforms, Inc. and affiliates. 30 * 31 * This source code is licensed under the MIT license found in the 32 * LICENSE file in the root directory of this source tree. 33 */ 34const react_1 = __importStar(require("react")); 35const react_native_1 = require("react-native"); 36const LogBoxData = __importStar(require("./Data/LogBoxData")); 37const LogContext_1 = require("./Data/LogContext"); 38const LogBoxStyle = __importStar(require("./UI/LogBoxStyle")); 39const LogBoxInspectorCodeFrame_1 = require("./overlay/LogBoxInspectorCodeFrame"); 40const LogBoxInspectorFooter_1 = require("./overlay/LogBoxInspectorFooter"); 41const LogBoxInspectorHeader_1 = require("./overlay/LogBoxInspectorHeader"); 42const LogBoxInspectorMessageHeader_1 = require("./overlay/LogBoxInspectorMessageHeader"); 43const LogBoxInspectorStackFrames_1 = require("./overlay/LogBoxInspectorStackFrames"); 44const HEADER_TITLE_MAP = { 45 warn: 'Console Warning', 46 error: 'Console Error', 47 fatal: 'Uncaught Error', 48 syntax: 'Syntax Error', 49 static: 'Static Rendering Error (Node.js)', 50 component: 'Render Error', 51}; 52function LogBoxInspectorContainer() { 53 const { selectedLogIndex, logs } = (0, LogContext_1.useLogs)(); 54 const log = logs[selectedLogIndex]; 55 if (log == null) { 56 return null; 57 } 58 return react_1.default.createElement(LogBoxInspector, { log: log, selectedLogIndex: selectedLogIndex, logs: logs }); 59} 60exports.LogBoxInspectorContainer = LogBoxInspectorContainer; 61function LogBoxInspector({ log, selectedLogIndex, logs, }) { 62 const onDismiss = (0, react_1.useCallback)(() => { 63 // Here we handle the cases when the log is dismissed and it 64 // was either the last log, or when the current index 65 // is now outside the bounds of the log array. 66 const logsArray = Array.from(logs); 67 if (selectedLogIndex != null) { 68 if (logsArray.length - 1 <= 0) { 69 LogBoxData.setSelectedLog(-1); 70 } 71 else if (selectedLogIndex >= logsArray.length - 1) { 72 LogBoxData.setSelectedLog(selectedLogIndex - 1); 73 } 74 LogBoxData.dismiss(logsArray[selectedLogIndex]); 75 } 76 }, [selectedLogIndex]); 77 const onMinimize = (0, react_1.useCallback)(() => { 78 LogBoxData.setSelectedLog(-1); 79 }, []); 80 const onChangeSelectedIndex = (0, react_1.useCallback)((index) => { 81 LogBoxData.setSelectedLog(index); 82 }, []); 83 (0, react_1.useEffect)(() => { 84 if (log) { 85 LogBoxData.symbolicateLogNow('stack', log); 86 LogBoxData.symbolicateLogNow('component', log); 87 } 88 }, [log]); 89 (0, react_1.useEffect)(() => { 90 // Optimistically symbolicate the last and next logs. 91 if (logs.length > 1) { 92 const selected = selectedLogIndex; 93 const lastIndex = logs.length - 1; 94 const prevIndex = selected - 1 < 0 ? lastIndex : selected - 1; 95 const nextIndex = selected + 1 > lastIndex ? 0 : selected + 1; 96 for (const type of ['component', 'stack']) { 97 LogBoxData.symbolicateLogLazy(type, logs[prevIndex]); 98 LogBoxData.symbolicateLogLazy(type, logs[nextIndex]); 99 } 100 } 101 }, [logs, selectedLogIndex]); 102 (0, react_1.useEffect)(() => { 103 react_native_1.Keyboard.dismiss(); 104 }, []); 105 const _handleRetry = (0, react_1.useCallback)((type) => { 106 LogBoxData.retrySymbolicateLogNow(type, log); 107 }, [log]); 108 return (react_1.default.createElement(react_native_1.View, { style: styles.container }, 109 react_1.default.createElement(LogBoxInspectorHeader_1.LogBoxInspectorHeader, { onSelectIndex: onChangeSelectedIndex, level: log.level }), 110 react_1.default.createElement(ErrorOverlayBody, { onRetry: _handleRetry }), 111 react_1.default.createElement(LogBoxInspectorFooter_1.LogBoxInspectorFooter, { onDismiss: onDismiss, onMinimize: onMinimize }))); 112} 113exports.LogBoxInspector = LogBoxInspector; 114function ErrorOverlayBody({ onRetry }) { 115 const log = (0, LogContext_1.useSelectedLog)(); 116 return react_1.default.createElement(ErrorOverlayBodyContents, { log: log, onRetry: onRetry }); 117} 118exports.ErrorOverlayBody = ErrorOverlayBody; 119function ErrorOverlayBodyContents({ log, onRetry, }) { 120 const [collapsed, setCollapsed] = (0, react_1.useState)(true); 121 (0, react_1.useEffect)(() => { 122 setCollapsed(true); 123 }, [log]); 124 const headerTitle = HEADER_TITLE_MAP[log.isComponentError ? 'component' : log.level] ?? log.type; 125 const header = (react_1.default.createElement(LogBoxInspectorMessageHeader_1.LogBoxInspectorMessageHeader, { collapsed: collapsed, onPress: () => setCollapsed(!collapsed), message: log.message, level: log.level, title: headerTitle })); 126 return (react_1.default.createElement(react_1.default.Fragment, null, 127 collapsed && header, 128 react_1.default.createElement(react_native_1.ScrollView, { style: styles.scrollBody }, 129 !collapsed && header, 130 react_1.default.createElement(LogBoxInspectorCodeFrame_1.LogBoxInspectorCodeFrame, { codeFrame: log.codeFrame }), 131 react_1.default.createElement(LogBoxInspectorStackFrames_1.LogBoxInspectorStackFrames, { type: "stack", 132 // eslint-disable-next-line react/jsx-no-bind 133 onRetry: onRetry.bind(onRetry, 'stack') }), 134 !!log?.componentStack?.length && (react_1.default.createElement(LogBoxInspectorStackFrames_1.LogBoxInspectorStackFrames, { type: "component", 135 // eslint-disable-next-line react/jsx-no-bind 136 onRetry: onRetry.bind(onRetry, 'component') }))))); 137} 138exports.ErrorOverlayBodyContents = ErrorOverlayBodyContents; 139const styles = react_native_1.StyleSheet.create({ 140 scrollBody: { 141 backgroundColor: LogBoxStyle.getBackgroundColor(1), 142 flex: 1, 143 }, 144 container: { 145 top: 0, 146 left: 0, 147 bottom: 0, 148 right: 0, 149 zIndex: 999, 150 flex: 1, 151 // @ts-expect-error: fixed is not in the RN types but it works on web 152 position: 'fixed', 153 }, 154}); 155exports.default = LogBoxData.withSubscription(LogBoxInspectorContainer); 156//# sourceMappingURL=ErrorOverlay.js.map