react-native-inapp-inspector 2.3.14 → 2.3.15
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/commonjs/components/AnimatedEntrance.js +3 -3
- package/dist/commonjs/components/ConsoleLogCard.js +174 -100
- package/dist/commonjs/components/Inspector/ConsoleTab.js +25 -16
- package/dist/commonjs/components/Inspector/CrashTab.js +19 -5
- package/dist/commonjs/components/Inspector/DeviceInfoTab.js +198 -98
- package/dist/commonjs/components/Inspector/InspectorHeader.js +2 -2
- package/dist/commonjs/components/Inspector/MainScreen.js +56 -56
- package/dist/commonjs/components/Inspector/NetworkTab.js +1 -335
- package/dist/commonjs/components/Inspector/PerformanceTab.js +32 -6
- package/dist/commonjs/components/Inspector/ReduxTab.js +3 -1
- package/dist/commonjs/components/Inspector/StorageTab.js +23 -5
- package/dist/commonjs/components/JsonViewer.js +14 -2
- package/dist/commonjs/components/LogCard.js +428 -227
- package/dist/commonjs/constants/version.d.ts +1 -1
- package/dist/commonjs/constants/version.js +1 -1
- package/dist/commonjs/customHooks/analyticsLogger.js +1 -1
- package/dist/commonjs/customHooks/consoleLogger.js +34 -2
- package/dist/commonjs/customHooks/crashHandler.js +1 -1
- package/dist/commonjs/customHooks/networkLogger.js +184 -26
- package/dist/commonjs/helpers/searchQueryParser.d.ts +1 -1
- package/dist/commonjs/helpers/searchQueryParser.js +37 -291
- package/dist/commonjs/index.js +141 -27
- package/dist/esm/components/AnimatedEntrance.js +3 -3
- package/dist/esm/components/ConsoleLogCard.js +141 -100
- package/dist/esm/components/Inspector/ConsoleTab.js +25 -16
- package/dist/esm/components/Inspector/CrashTab.js +19 -5
- package/dist/esm/components/Inspector/DeviceInfoTab.js +198 -98
- package/dist/esm/components/Inspector/InspectorHeader.js +3 -3
- package/dist/esm/components/Inspector/MainScreen.js +56 -56
- package/dist/esm/components/Inspector/NetworkTab.js +2 -336
- package/dist/esm/components/Inspector/PerformanceTab.js +32 -6
- package/dist/esm/components/Inspector/ReduxTab.js +3 -1
- package/dist/esm/components/Inspector/StorageTab.js +23 -5
- package/dist/esm/components/JsonViewer.js +14 -2
- package/dist/esm/components/LogCard.js +422 -221
- package/dist/esm/constants/version.d.ts +1 -1
- package/dist/esm/constants/version.js +1 -1
- package/dist/esm/customHooks/analyticsLogger.js +1 -1
- package/dist/esm/customHooks/consoleLogger.js +34 -2
- package/dist/esm/customHooks/crashHandler.js +1 -1
- package/dist/esm/customHooks/networkLogger.js +184 -26
- package/dist/esm/helpers/searchQueryParser.d.ts +1 -1
- package/dist/esm/helpers/searchQueryParser.js +37 -291
- package/dist/esm/index.js +141 -27
- package/package.json +1 -1
- package/src/components/AnimatedEntrance.tsx +3 -3
- package/src/components/ConsoleLogCard.tsx +154 -103
- package/src/components/Inspector/ConsoleTab.tsx +27 -18
- package/src/components/Inspector/CrashTab.tsx +19 -5
- package/src/components/Inspector/DeviceInfoTab.tsx +224 -102
- package/src/components/Inspector/InspectorHeader.tsx +5 -3
- package/src/components/Inspector/MainScreen.tsx +2 -3
- package/src/components/Inspector/NetworkTab.tsx +1 -402
- package/src/components/Inspector/PerformanceTab.tsx +36 -7
- package/src/components/Inspector/ReduxTab.tsx +9 -1
- package/src/components/Inspector/StorageTab.tsx +27 -7
- package/src/components/JsonViewer.tsx +15 -2
- package/src/components/LogCard.tsx +528 -339
- package/src/constants/version.ts +1 -1
- package/src/customHooks/analyticsLogger.ts +1 -1
- package/src/customHooks/consoleLogger.ts +36 -3
- package/src/customHooks/crashHandler.ts +1 -1
- package/src/customHooks/networkLogger.ts +214 -26
- package/src/helpers/searchQueryParser.ts +40 -285
- package/src/index.tsx +332 -211
|
@@ -40,15 +40,15 @@ const AnimatedEntrance = react_1.default.memo(function AnimatedEntrance({ childr
|
|
|
40
40
|
return <react_native_1.View style={style}>{children}</react_native_1.View>;
|
|
41
41
|
}
|
|
42
42
|
const progress = (0, react_1.useRef)(new react_native_1.Animated.Value(0)).current;
|
|
43
|
+
const initialIndex = (0, react_1.useRef)(index).current;
|
|
43
44
|
(0, react_1.useEffect)(() => {
|
|
44
|
-
progress.setValue(0);
|
|
45
45
|
react_native_1.Animated.timing(progress, {
|
|
46
46
|
toValue: 1,
|
|
47
47
|
duration,
|
|
48
|
-
delay: delay + Math.min(
|
|
48
|
+
delay: delay + Math.min(initialIndex, 8) * 12,
|
|
49
49
|
useNativeDriver: true,
|
|
50
50
|
}).start();
|
|
51
|
-
}, [
|
|
51
|
+
}, []);
|
|
52
52
|
return (<react_native_1.Animated.View style={[
|
|
53
53
|
style,
|
|
54
54
|
{
|
|
@@ -1,10 +1,43 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
+
var __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
|
+
}));
|
|
13
|
+
var __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
|
+
});
|
|
18
|
+
var __importStar = (this && this.__importStar) || (function () {
|
|
19
|
+
var ownKeys = function(o) {
|
|
20
|
+
ownKeys = Object.getOwnPropertyNames || function (o) {
|
|
21
|
+
var ar = [];
|
|
22
|
+
for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
|
|
23
|
+
return ar;
|
|
24
|
+
};
|
|
25
|
+
return ownKeys(o);
|
|
26
|
+
};
|
|
27
|
+
return function (mod) {
|
|
28
|
+
if (mod && mod.__esModule) return mod;
|
|
29
|
+
var result = {};
|
|
30
|
+
if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
|
|
31
|
+
__setModuleDefault(result, mod);
|
|
32
|
+
return result;
|
|
33
|
+
};
|
|
34
|
+
})();
|
|
2
35
|
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
36
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
37
|
};
|
|
5
38
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
39
|
exports.ConsoleLogCard = void 0;
|
|
7
|
-
const react_1 =
|
|
40
|
+
const react_1 = __importStar(require("react"));
|
|
8
41
|
const i18n_1 = require("../i18n");
|
|
9
42
|
const react_native_1 = require("react-native");
|
|
10
43
|
const AppColors_1 = require("../styles/AppColors");
|
|
@@ -68,8 +101,8 @@ const getLogMessageWithBadges = (message, searchStr, textStyle, highlightStyle,
|
|
|
68
101
|
return (<react_native_1.View key={i} style={[
|
|
69
102
|
styles.prefixTag,
|
|
70
103
|
{
|
|
71
|
-
backgroundColor: `${dec.color}
|
|
72
|
-
borderColor: `${dec.color}
|
|
104
|
+
backgroundColor: `${dec.color}14`,
|
|
105
|
+
borderColor: `${dec.color}33`,
|
|
73
106
|
},
|
|
74
107
|
]}>
|
|
75
108
|
<IconComp color={dec.color} size={10}/>
|
|
@@ -87,6 +120,7 @@ const getLogMessageWithBadges = (message, searchStr, textStyle, highlightStyle,
|
|
|
87
120
|
exports.ConsoleLogCard = react_1.default.memo(function ConsoleLogCard({ item, searchStr = '', }) {
|
|
88
121
|
const { setSelectedLog } = (0, InspectorContext_1.useInspector)();
|
|
89
122
|
const { t } = (0, i18n_1.useTranslation)();
|
|
123
|
+
const [isExpanded, setIsExpanded] = (0, react_1.useState)(false);
|
|
90
124
|
const jsonContent = (0, helpers_1.getJsonContent)(item.message);
|
|
91
125
|
const isAnalyticsError = item.message
|
|
92
126
|
.toLowerCase()
|
|
@@ -101,61 +135,61 @@ exports.ConsoleLogCard = react_1.default.memo(function ConsoleLogCard({ item, se
|
|
|
101
135
|
if (isAnalyticsError || type === 'error' || method === 'error') {
|
|
102
136
|
return {
|
|
103
137
|
border: AppColors_1.AppColors.errorColor,
|
|
104
|
-
badgeBg: AppColors_1.AppColors.
|
|
105
|
-
badgeText: AppColors_1.AppColors.
|
|
138
|
+
badgeBg: `${AppColors_1.AppColors.errorColor}18`,
|
|
139
|
+
badgeText: AppColors_1.AppColors.errorColor,
|
|
106
140
|
label: 'ERROR',
|
|
107
|
-
cardBg:
|
|
108
|
-
methodBorder: AppColors_1.AppColors.
|
|
109
|
-
methodBg: AppColors_1.AppColors.
|
|
110
|
-
methodText: AppColors_1.AppColors.
|
|
141
|
+
cardBg: '#FFF8F8',
|
|
142
|
+
methodBorder: `${AppColors_1.AppColors.errorColor}30`,
|
|
143
|
+
methodBg: `${AppColors_1.AppColors.errorColor}12`,
|
|
144
|
+
methodText: AppColors_1.AppColors.errorColor,
|
|
111
145
|
textColor: AppColors_1.AppColors.redErrorText,
|
|
112
146
|
};
|
|
113
147
|
}
|
|
114
148
|
if (type === 'warn' || method === 'warn') {
|
|
115
149
|
return {
|
|
116
150
|
border: AppColors_1.AppColors.amber600,
|
|
117
|
-
badgeBg: AppColors_1.AppColors.
|
|
118
|
-
badgeText: AppColors_1.AppColors.
|
|
151
|
+
badgeBg: `${AppColors_1.AppColors.amber600}18`,
|
|
152
|
+
badgeText: AppColors_1.AppColors.amber800,
|
|
119
153
|
label: 'WARN',
|
|
120
|
-
cardBg:
|
|
121
|
-
methodBorder: AppColors_1.AppColors.
|
|
122
|
-
methodBg: AppColors_1.AppColors.
|
|
123
|
-
methodText: AppColors_1.AppColors.
|
|
124
|
-
textColor: AppColors_1.AppColors.
|
|
154
|
+
cardBg: '#FFFDF5',
|
|
155
|
+
methodBorder: `${AppColors_1.AppColors.amber600}33`,
|
|
156
|
+
methodBg: `${AppColors_1.AppColors.amber600}14`,
|
|
157
|
+
methodText: AppColors_1.AppColors.amber800,
|
|
158
|
+
textColor: AppColors_1.AppColors.amber800,
|
|
125
159
|
};
|
|
126
160
|
}
|
|
127
161
|
if (type === 'debug' || method === 'debug') {
|
|
128
162
|
return {
|
|
129
163
|
border: AppColors_1.AppColors.purple500,
|
|
130
|
-
badgeBg: AppColors_1.AppColors.
|
|
131
|
-
badgeText: AppColors_1.AppColors.
|
|
164
|
+
badgeBg: `${AppColors_1.AppColors.purple500}18`,
|
|
165
|
+
badgeText: AppColors_1.AppColors.purple,
|
|
132
166
|
label: 'DEBUG',
|
|
133
|
-
cardBg:
|
|
134
|
-
methodBorder: AppColors_1.AppColors.
|
|
135
|
-
methodBg: AppColors_1.AppColors.
|
|
136
|
-
methodText: AppColors_1.AppColors.
|
|
167
|
+
cardBg: '#FAF8FD',
|
|
168
|
+
methodBorder: `${AppColors_1.AppColors.purple500}33`,
|
|
169
|
+
methodBg: `${AppColors_1.AppColors.purple500}12`,
|
|
170
|
+
methodText: AppColors_1.AppColors.purple,
|
|
137
171
|
textColor: AppColors_1.AppColors.purpleText,
|
|
138
172
|
};
|
|
139
173
|
}
|
|
140
174
|
if (type === 'info' || method === 'info') {
|
|
141
175
|
return {
|
|
142
176
|
border: AppColors_1.AppColors.sky500,
|
|
143
|
-
badgeBg: AppColors_1.AppColors.
|
|
144
|
-
badgeText: AppColors_1.AppColors.
|
|
177
|
+
badgeBg: `${AppColors_1.AppColors.sky500}18`,
|
|
178
|
+
badgeText: AppColors_1.AppColors.sky600,
|
|
145
179
|
label: 'INFO',
|
|
146
|
-
cardBg:
|
|
147
|
-
methodBorder: AppColors_1.AppColors.
|
|
148
|
-
methodBg: AppColors_1.AppColors.
|
|
149
|
-
methodText: AppColors_1.AppColors.
|
|
180
|
+
cardBg: '#F8FAFC',
|
|
181
|
+
methodBorder: `${AppColors_1.AppColors.sky500}33`,
|
|
182
|
+
methodBg: `${AppColors_1.AppColors.sky500}12`,
|
|
183
|
+
methodText: AppColors_1.AppColors.sky600,
|
|
150
184
|
textColor: AppColors_1.AppColors.blue800,
|
|
151
185
|
};
|
|
152
186
|
}
|
|
153
187
|
return {
|
|
154
188
|
border: AppColors_1.AppColors.indigo500,
|
|
155
|
-
badgeBg: AppColors_1.AppColors.
|
|
189
|
+
badgeBg: `${AppColors_1.AppColors.indigo500}15`,
|
|
156
190
|
badgeText: AppColors_1.AppColors.indigo600Alt,
|
|
157
191
|
label: 'LOG',
|
|
158
|
-
cardBg: AppColors_1.AppColors.
|
|
192
|
+
cardBg: AppColors_1.AppColors.white,
|
|
159
193
|
methodBorder: AppColors_1.AppColors.dividerColor,
|
|
160
194
|
methodBg: AppColors_1.AppColors.indigo50,
|
|
161
195
|
methodText: AppColors_1.AppColors.indigo600Alt,
|
|
@@ -169,6 +203,10 @@ exports.ConsoleLogCard = react_1.default.memo(function ConsoleLogCard({ item, se
|
|
|
169
203
|
const openDetail = () => {
|
|
170
204
|
setSelectedLog(item);
|
|
171
205
|
};
|
|
206
|
+
const toggleExpand = (e) => {
|
|
207
|
+
e?.stopPropagation?.();
|
|
208
|
+
setIsExpanded(prev => !prev);
|
|
209
|
+
};
|
|
172
210
|
return (<react_native_1.View style={styles.container}>
|
|
173
211
|
<react_native_1.Pressable onPress={openDetail} style={({ pressed }) => [
|
|
174
212
|
styles.card,
|
|
@@ -179,6 +217,7 @@ exports.ConsoleLogCard = react_1.default.memo(function ConsoleLogCard({ item, se
|
|
|
179
217
|
},
|
|
180
218
|
pressed && styles.cardPressed,
|
|
181
219
|
]}>
|
|
220
|
+
|
|
182
221
|
<react_native_1.View style={styles.cardHeader}>
|
|
183
222
|
<react_native_1.View style={styles.headerLeft}>
|
|
184
223
|
<react_native_1.View style={[styles.typeChip, { backgroundColor: colors.badgeBg }]}>
|
|
@@ -204,11 +243,11 @@ exports.ConsoleLogCard = react_1.default.memo(function ConsoleLogCard({ item, se
|
|
|
204
243
|
{jsonContent && (<react_native_1.View style={[
|
|
205
244
|
styles.metaChip,
|
|
206
245
|
{
|
|
207
|
-
backgroundColor: AppColors_1.AppColors.
|
|
208
|
-
borderColor: AppColors_1.AppColors.
|
|
246
|
+
backgroundColor: `${AppColors_1.AppColors.teal600}14`,
|
|
247
|
+
borderColor: `${AppColors_1.AppColors.teal600}33`,
|
|
209
248
|
},
|
|
210
249
|
]}>
|
|
211
|
-
<react_native_1.Text style={[styles.metaChipText, { color: AppColors_1.AppColors.
|
|
250
|
+
<react_native_1.Text style={[styles.metaChipText, { color: AppColors_1.AppColors.teal600, fontFamily: AppFonts_1.AppFonts.interBold }]}>
|
|
212
251
|
{Array.isArray(jsonContent.data)
|
|
213
252
|
? `Array[${jsonContent.data.length}]`
|
|
214
253
|
: `Object{${Object.keys(jsonContent.data).length}}`}
|
|
@@ -235,23 +274,31 @@ exports.ConsoleLogCard = react_1.default.memo(function ConsoleLogCard({ item, se
|
|
|
235
274
|
</react_native_1.View>
|
|
236
275
|
</react_native_1.View>
|
|
237
276
|
|
|
277
|
+
|
|
238
278
|
<react_native_1.View style={styles.cardBody}>
|
|
239
279
|
{jsonContent ? (<>
|
|
240
|
-
{jsonContent.header ? (getLogMessageWithBadges(jsonContent.header, searchStr, [styles.messageText, { color: AppColors_1.AppColors.primaryBlack }], styles.highlight, 2)) : null}
|
|
280
|
+
{jsonContent.header ? (getLogMessageWithBadges(jsonContent.header, searchStr, [styles.messageText, { color: AppColors_1.AppColors.primaryBlack }], styles.highlight, isExpanded ? undefined : 2)) : null}
|
|
241
281
|
{jsonPreview && (<react_native_1.View style={styles.jsonPreviewContainer}>
|
|
242
282
|
<LogSyntaxHighlighter_1.default text={jsonPreview.text} search={searchStr} style={[
|
|
243
283
|
styles.jsonPreviewText,
|
|
244
284
|
{ color: AppColors_1.AppColors.primaryBlack },
|
|
245
|
-
]} detectLinks={false} numberOfLines={
|
|
285
|
+
]} detectLinks={false} numberOfLines={isExpanded ? undefined : 4}/>
|
|
286
|
+
{jsonPreview.text.split('\n').length > 4 && (<react_native_1.Pressable onPress={toggleExpand} hitSlop={6} style={styles.expandToggle}>
|
|
287
|
+
<react_native_1.Text style={styles.expandToggleText}>
|
|
288
|
+
{isExpanded ? 'Show less' : 'Show full preview'}
|
|
289
|
+
</react_native_1.Text>
|
|
290
|
+
<NetworkIcons_1.ChevronIcon color={AppColors_1.AppColors.purple} size={11} direction={isExpanded ? 'up' : 'down'}/>
|
|
291
|
+
</react_native_1.Pressable>)}
|
|
246
292
|
</react_native_1.View>)}
|
|
247
|
-
</>) : (getLogMessageWithBadges(item.message, searchStr, [styles.messageText, { color: AppColors_1.AppColors.primaryBlack }], styles.highlight,
|
|
293
|
+
</>) : (getLogMessageWithBadges(item.message, searchStr, [styles.messageText, { color: AppColors_1.AppColors.primaryBlack }], styles.highlight, isExpanded ? undefined : 4))}
|
|
248
294
|
</react_native_1.View>
|
|
249
295
|
|
|
296
|
+
|
|
250
297
|
<react_native_1.View style={styles.cardFooter}>
|
|
251
298
|
<react_native_1.View style={styles.footerLeft}>
|
|
252
|
-
<react_native_1.Text style={styles.
|
|
299
|
+
<react_native_1.Text style={styles.footerId}>#{item.id + 1}</react_native_1.Text>
|
|
253
300
|
<react_native_1.View style={styles.footerDot}/>
|
|
254
|
-
<react_native_1.Text style={styles.
|
|
301
|
+
<react_native_1.Text style={styles.footerTime}>{(0, helpers_1.formatTime)(item.timestamp)}</react_native_1.Text>
|
|
255
302
|
{parsedCaller && (<>
|
|
256
303
|
<react_native_1.View style={styles.footerDot}/>
|
|
257
304
|
<react_native_1.Pressable onPress={e => {
|
|
@@ -259,44 +306,27 @@ exports.ConsoleLogCard = react_1.default.memo(function ConsoleLogCard({ item, se
|
|
|
259
306
|
(0, helpers_1.openInVSCode)(parsedCaller.rawFilePath ||
|
|
260
307
|
parsedCaller.fullPath ||
|
|
261
308
|
parsedCaller.fileName, parsedCaller.lineNumber, parsedCaller.columnNumber);
|
|
262
|
-
}} hitSlop={8} style={
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
paddingHorizontal: 3.5,
|
|
280
|
-
paddingVertical: 0.5,
|
|
281
|
-
}}>
|
|
282
|
-
<react_native_1.Text style={{
|
|
283
|
-
fontFamily: AppFonts_1.AppFonts.interBold,
|
|
284
|
-
fontSize: 8,
|
|
285
|
-
color: parsedCaller.fileExt === 'tsx' || parsedCaller.fileExt === 'ts'
|
|
286
|
-
? AppColors_1.AppColors.brandPurple
|
|
287
|
-
: AppColors_1.AppColors.teal600,
|
|
288
|
-
}}>
|
|
309
|
+
}} hitSlop={8} style={styles.callerPill}>
|
|
310
|
+
{parsedCaller.fileExt && parsedCaller.fileExt !== 'other' && (<react_native_1.View style={[
|
|
311
|
+
styles.extBadge,
|
|
312
|
+
{
|
|
313
|
+
backgroundColor: parsedCaller.fileExt === 'tsx' || parsedCaller.fileExt === 'ts'
|
|
314
|
+
? `${AppColors_1.AppColors.brandPurple}22`
|
|
315
|
+
: `${AppColors_1.AppColors.teal600}22`,
|
|
316
|
+
},
|
|
317
|
+
]}>
|
|
318
|
+
<react_native_1.Text style={[
|
|
319
|
+
styles.extBadgeText,
|
|
320
|
+
{
|
|
321
|
+
color: parsedCaller.fileExt === 'tsx' || parsedCaller.fileExt === 'ts'
|
|
322
|
+
? AppColors_1.AppColors.brandPurple
|
|
323
|
+
: AppColors_1.AppColors.teal600,
|
|
324
|
+
},
|
|
325
|
+
]}>
|
|
289
326
|
{parsedCaller.fileExt.toUpperCase()}
|
|
290
327
|
</react_native_1.Text>
|
|
291
328
|
</react_native_1.View>)}
|
|
292
|
-
<react_native_1.Text style={
|
|
293
|
-
styles.footerText,
|
|
294
|
-
{
|
|
295
|
-
fontFamily: AppFonts_1.AppFonts.interBold,
|
|
296
|
-
color: AppColors_1.AppColors.sky600,
|
|
297
|
-
fontSize: 9.5,
|
|
298
|
-
},
|
|
299
|
-
]} numberOfLines={1} ellipsizeMode="middle">
|
|
329
|
+
<react_native_1.Text style={styles.callerFileName} numberOfLines={1} ellipsizeMode="middle">
|
|
300
330
|
{parsedCaller.fileName}
|
|
301
331
|
{parsedCaller.lineNumber ? `:${parsedCaller.lineNumber}` : ''}
|
|
302
332
|
</react_native_1.Text>
|
|
@@ -335,32 +365,34 @@ exports.ConsoleLogCard = react_1.default.memo(function ConsoleLogCard({ item, se
|
|
|
335
365
|
});
|
|
336
366
|
const styles = react_native_1.StyleSheet.create({
|
|
337
367
|
container: {
|
|
338
|
-
paddingHorizontal:
|
|
339
|
-
paddingVertical:
|
|
368
|
+
paddingHorizontal: 10,
|
|
369
|
+
paddingVertical: 3.5,
|
|
340
370
|
},
|
|
341
371
|
card: {
|
|
342
372
|
alignSelf: 'stretch',
|
|
343
|
-
borderRadius:
|
|
373
|
+
borderRadius: 11,
|
|
344
374
|
borderWidth: 1,
|
|
345
375
|
borderColor: AppColors_1.AppColors.grayBorderSecondary,
|
|
346
376
|
borderLeftWidth: 3.5,
|
|
347
|
-
|
|
348
|
-
|
|
377
|
+
paddingHorizontal: 12,
|
|
378
|
+
paddingTop: 10,
|
|
379
|
+
paddingBottom: 9,
|
|
380
|
+
backgroundColor: AppColors_1.AppColors.white,
|
|
349
381
|
shadowColor: AppColors_1.AppColors.black,
|
|
350
|
-
shadowOpacity: 0.
|
|
351
|
-
shadowRadius:
|
|
352
|
-
shadowOffset: { width: 0, height:
|
|
353
|
-
elevation:
|
|
382
|
+
shadowOpacity: 0.04,
|
|
383
|
+
shadowRadius: 3,
|
|
384
|
+
shadowOffset: { width: 0, height: 1.5 },
|
|
385
|
+
elevation: 1.5,
|
|
354
386
|
},
|
|
355
387
|
cardPressed: {
|
|
356
|
-
opacity: 0.
|
|
357
|
-
transform: [{ scale: 0.
|
|
388
|
+
opacity: 0.88,
|
|
389
|
+
transform: [{ scale: 0.995 }],
|
|
358
390
|
},
|
|
359
391
|
cardHeader: {
|
|
360
392
|
flexDirection: 'row',
|
|
361
393
|
justifyContent: 'space-between',
|
|
362
394
|
alignItems: 'center',
|
|
363
|
-
marginBottom:
|
|
395
|
+
marginBottom: 6,
|
|
364
396
|
gap: 8,
|
|
365
397
|
},
|
|
366
398
|
headerLeft: {
|
|
@@ -373,7 +405,7 @@ const styles = react_native_1.StyleSheet.create({
|
|
|
373
405
|
headerRight: {
|
|
374
406
|
flexDirection: 'row',
|
|
375
407
|
alignItems: 'center',
|
|
376
|
-
gap:
|
|
408
|
+
gap: 6,
|
|
377
409
|
},
|
|
378
410
|
typeChip: {
|
|
379
411
|
flexDirection: 'row',
|
|
@@ -395,7 +427,7 @@ const styles = react_native_1.StyleSheet.create({
|
|
|
395
427
|
},
|
|
396
428
|
metaChip: {
|
|
397
429
|
paddingHorizontal: 6,
|
|
398
|
-
paddingVertical: 2
|
|
430
|
+
paddingVertical: 2,
|
|
399
431
|
borderRadius: 6,
|
|
400
432
|
borderWidth: 1,
|
|
401
433
|
},
|
|
@@ -405,12 +437,7 @@ const styles = react_native_1.StyleSheet.create({
|
|
|
405
437
|
letterSpacing: 0.2,
|
|
406
438
|
},
|
|
407
439
|
cardBody: {
|
|
408
|
-
|
|
409
|
-
paddingHorizontal: 10,
|
|
410
|
-
paddingVertical: 8,
|
|
411
|
-
borderRadius: 9,
|
|
412
|
-
borderWidth: 1,
|
|
413
|
-
borderColor: AppColors_1.AppColors.grayBorderSecondary,
|
|
440
|
+
paddingVertical: 2,
|
|
414
441
|
},
|
|
415
442
|
messageText: {
|
|
416
443
|
fontFamily: AppFonts_1.AppFonts.interMedium,
|
|
@@ -426,10 +453,11 @@ const styles = react_native_1.StyleSheet.create({
|
|
|
426
453
|
jsonPreviewContainer: {
|
|
427
454
|
marginTop: 6,
|
|
428
455
|
backgroundColor: AppColors_1.AppColors.grayBackground,
|
|
429
|
-
borderRadius:
|
|
456
|
+
borderRadius: 8,
|
|
430
457
|
borderWidth: 1,
|
|
431
458
|
borderColor: AppColors_1.AppColors.grayBorderSecondary,
|
|
432
|
-
|
|
459
|
+
paddingHorizontal: 9,
|
|
460
|
+
paddingVertical: 7,
|
|
433
461
|
},
|
|
434
462
|
jsonPreviewText: {
|
|
435
463
|
fontFamily: AppFonts_1.AppFonts.interRegular,
|
|
@@ -437,11 +465,29 @@ const styles = react_native_1.StyleSheet.create({
|
|
|
437
465
|
color: AppColors_1.AppColors.primaryBlack,
|
|
438
466
|
lineHeight: 16,
|
|
439
467
|
},
|
|
468
|
+
expandToggle: {
|
|
469
|
+
flexDirection: 'row',
|
|
470
|
+
alignItems: 'center',
|
|
471
|
+
justifyContent: 'center',
|
|
472
|
+
gap: 4,
|
|
473
|
+
marginTop: 5,
|
|
474
|
+
paddingVertical: 2,
|
|
475
|
+
borderTopWidth: 1,
|
|
476
|
+
borderTopColor: AppColors_1.AppColors.dividerColor,
|
|
477
|
+
},
|
|
478
|
+
expandToggleText: {
|
|
479
|
+
fontFamily: AppFonts_1.AppFonts.interBold,
|
|
480
|
+
fontSize: 10,
|
|
481
|
+
color: AppColors_1.AppColors.purple,
|
|
482
|
+
},
|
|
440
483
|
cardFooter: {
|
|
441
484
|
flexDirection: 'row',
|
|
442
485
|
alignItems: 'center',
|
|
443
486
|
justifyContent: 'space-between',
|
|
444
|
-
marginTop:
|
|
487
|
+
marginTop: 7,
|
|
488
|
+
paddingTop: 6,
|
|
489
|
+
borderTopWidth: 1,
|
|
490
|
+
borderTopColor: `${AppColors_1.AppColors.dividerColor}88`,
|
|
445
491
|
gap: 6,
|
|
446
492
|
},
|
|
447
493
|
footerLeft: {
|
|
@@ -463,14 +509,42 @@ const styles = react_native_1.StyleSheet.create({
|
|
|
463
509
|
backgroundColor: AppColors_1.AppColors.grayTextWeak,
|
|
464
510
|
opacity: 0.6,
|
|
465
511
|
},
|
|
466
|
-
|
|
467
|
-
fontFamily: AppFonts_1.AppFonts.
|
|
512
|
+
footerId: {
|
|
513
|
+
fontFamily: AppFonts_1.AppFonts.interBold,
|
|
514
|
+
fontSize: 10,
|
|
515
|
+
color: AppColors_1.AppColors.grayTextWeak,
|
|
516
|
+
},
|
|
517
|
+
footerTime: {
|
|
518
|
+
fontFamily: AppFonts_1.AppFonts.interMedium,
|
|
468
519
|
fontSize: 10,
|
|
469
520
|
color: AppColors_1.AppColors.grayTextWeak,
|
|
470
521
|
letterSpacing: 0.1,
|
|
471
522
|
},
|
|
472
|
-
|
|
473
|
-
|
|
523
|
+
callerPill: {
|
|
524
|
+
flexDirection: 'row',
|
|
525
|
+
alignItems: 'center',
|
|
526
|
+
gap: 4,
|
|
527
|
+
maxWidth: 185,
|
|
528
|
+
backgroundColor: `${AppColors_1.AppColors.sky600}10`,
|
|
529
|
+
borderColor: `${AppColors_1.AppColors.sky600}2B`,
|
|
530
|
+
borderWidth: 1,
|
|
531
|
+
borderRadius: 5,
|
|
532
|
+
paddingHorizontal: 5,
|
|
533
|
+
paddingVertical: 1.5,
|
|
534
|
+
},
|
|
535
|
+
extBadge: {
|
|
536
|
+
borderRadius: 3,
|
|
537
|
+
paddingHorizontal: 3.5,
|
|
538
|
+
paddingVertical: 0.5,
|
|
539
|
+
},
|
|
540
|
+
extBadgeText: {
|
|
541
|
+
fontFamily: AppFonts_1.AppFonts.interBold,
|
|
542
|
+
fontSize: 8,
|
|
543
|
+
},
|
|
544
|
+
callerFileName: {
|
|
545
|
+
fontFamily: AppFonts_1.AppFonts.interBold,
|
|
546
|
+
color: AppColors_1.AppColors.sky600,
|
|
547
|
+
fontSize: 9.5,
|
|
474
548
|
},
|
|
475
549
|
footerBadge: {
|
|
476
550
|
paddingHorizontal: 6,
|
|
@@ -63,31 +63,40 @@ const ConsoleTab = react_1.default.memo(() => {
|
|
|
63
63
|
const isAllSelected = logFilters.has('all') ||
|
|
64
64
|
!Array.from(logFilters).some(f => f !== 'all');
|
|
65
65
|
if (isAllSelected) {
|
|
66
|
-
return (<react_native_1.
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
66
|
+
return (<react_native_1.View style={{ paddingHorizontal: 12, paddingTop: 8, paddingBottom: 3 }}>
|
|
67
|
+
<react_native_1.Text style={{
|
|
68
|
+
fontFamily: AppFonts_1.AppFonts.interMedium,
|
|
69
|
+
fontSize: 11,
|
|
70
|
+
color: AppColors_1.AppColors.grayTextWeak,
|
|
71
|
+
letterSpacing: 0.2,
|
|
72
|
+
}}>
|
|
73
|
+
{filtered === total
|
|
74
|
+
? `Showing ${total} logs`
|
|
75
|
+
: `Showing ${filtered} of ${total} logs`}
|
|
76
|
+
</react_native_1.Text>
|
|
77
|
+
</react_native_1.View>);
|
|
72
78
|
}
|
|
73
79
|
else {
|
|
74
80
|
const activeFilterNames = Array.from(logFilters)
|
|
75
81
|
.filter(f => f !== 'all')
|
|
76
82
|
.map(f => {
|
|
77
83
|
if (f === 'user-log')
|
|
78
|
-
return '
|
|
84
|
+
return 'Log';
|
|
79
85
|
if (f === 'analytics')
|
|
80
86
|
return 'Analytics';
|
|
81
87
|
return (f.charAt(0).toUpperCase() +
|
|
82
88
|
f.slice(1));
|
|
83
89
|
});
|
|
84
|
-
return (<react_native_1.
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
90
|
+
return (<react_native_1.View style={{ paddingHorizontal: 12, paddingTop: 8, paddingBottom: 3 }}>
|
|
91
|
+
<react_native_1.Text style={{
|
|
92
|
+
fontFamily: AppFonts_1.AppFonts.interMedium,
|
|
93
|
+
fontSize: 11,
|
|
94
|
+
color: AppColors_1.AppColors.grayTextWeak,
|
|
95
|
+
letterSpacing: 0.2,
|
|
96
|
+
}}>
|
|
97
|
+
Filtered by {activeFilterNames.join(', ')} ({filtered} of {total} logs)
|
|
98
|
+
</react_native_1.Text>
|
|
99
|
+
</react_native_1.View>);
|
|
91
100
|
}
|
|
92
101
|
}, [visibleConsoleLogs.length, filteredConsoleLogs.length, logFilters]);
|
|
93
102
|
const [isSearchFocused, setIsSearchFocused] = react_1.default.useState(false);
|
|
@@ -519,11 +528,11 @@ const ConsoleTab = react_1.default.memo(() => {
|
|
|
519
528
|
</react_native_1.ScrollView>
|
|
520
529
|
</react_native_1.View>
|
|
521
530
|
|
|
522
|
-
<react_native_1.FlatList ref={listRef} data={filteredConsoleLogs} keyExtractor={keyExtractor} ListHeaderComponent={listHeader} renderItem={renderItem} initialNumToRender={12} maxToRenderPerBatch={8} windowSize={5} removeClippedSubviews={true} renderToHardwareTextureAndroid={true} ListEmptyComponent={<EmptyState_1.default isSearch={logSearch.length > 0 || logFilters.
|
|
531
|
+
<react_native_1.FlatList ref={listRef} data={filteredConsoleLogs} keyExtractor={keyExtractor} ListHeaderComponent={listHeader} renderItem={renderItem} initialNumToRender={12} maxToRenderPerBatch={8} windowSize={5} removeClippedSubviews={true} renderToHardwareTextureAndroid={true} ListEmptyComponent={<EmptyState_1.default isSearch={logSearch.length > 0 || !logFilters.has('all')} searchQuery={logSearch} customTitle={logSearch.length > 0
|
|
523
532
|
? 'No matching console logs'
|
|
524
533
|
: 'No console logs'} onClearSearch={() => {
|
|
525
534
|
setLogSearch('');
|
|
526
|
-
setLogFilters(new Set());
|
|
535
|
+
setLogFilters(new Set(['all']));
|
|
527
536
|
}}/>} ListFooterComponent={filteredConsoleLogs.length > 0 ? (<EndOfListFooter_1.default count={filteredConsoleLogs.length} label="logs"/>) : null} contentContainerStyle={[
|
|
528
537
|
styles_1.default.listContent,
|
|
529
538
|
filteredConsoleLogs.length === 0 && { flexGrow: 1 },
|
|
@@ -425,13 +425,27 @@ const CrashTab = react_1.default.memo(() => {
|
|
|
425
425
|
<react_native_1.View style={localStyles.emptyIconCircle}>
|
|
426
426
|
<NetworkIcons_1.ShieldAlertIcon size={38} color={AppColors_1.AppColors.greenColor}/>
|
|
427
427
|
</react_native_1.View>
|
|
428
|
-
<react_native_1.Text style={localStyles.emptyTitle}>
|
|
428
|
+
<react_native_1.Text style={localStyles.emptyTitle}>
|
|
429
|
+
{searchQuery.length > 0
|
|
430
|
+
? 'No matching crash entries'
|
|
431
|
+
: filterType !== 'all' || !(0, CrashFilterModal_1.isCrashFiltersDefault)(crashFilters)
|
|
432
|
+
? 'No crashes match filters'
|
|
433
|
+
: t('crash.emptyTitle')}
|
|
434
|
+
</react_native_1.Text>
|
|
429
435
|
<react_native_1.Text style={localStyles.emptySub}>
|
|
430
436
|
{searchQuery
|
|
431
|
-
?
|
|
432
|
-
:
|
|
437
|
+
? `No crash entries matched "${searchQuery}"`
|
|
438
|
+
: filterType !== 'all' || !(0, CrashFilterModal_1.isCrashFiltersDefault)(crashFilters)
|
|
439
|
+
? 'Try adjusting your filters or search keywords.'
|
|
440
|
+
: t('crash.emptySubtitle')}
|
|
433
441
|
</react_native_1.Text>
|
|
434
|
-
{searchQuery.length > 0
|
|
442
|
+
{(searchQuery.length > 0 ||
|
|
443
|
+
filterType !== 'all' ||
|
|
444
|
+
!(0, CrashFilterModal_1.isCrashFiltersDefault)(crashFilters)) && (<TouchableScale_1.default onPress={() => {
|
|
445
|
+
setSearchQuery('');
|
|
446
|
+
setFilterType('all');
|
|
447
|
+
setCrashFilters(CrashFilterModal_1.DEFAULT_CRASH_FILTERS);
|
|
448
|
+
}} style={{
|
|
435
449
|
marginTop: 10,
|
|
436
450
|
paddingHorizontal: 14,
|
|
437
451
|
paddingVertical: 7,
|
|
@@ -443,7 +457,7 @@ const CrashTab = react_1.default.memo(() => {
|
|
|
443
457
|
fontSize: 11.5,
|
|
444
458
|
color: AppColors_1.AppColors.white,
|
|
445
459
|
}}>
|
|
446
|
-
Clear Search
|
|
460
|
+
Clear Search & Filters
|
|
447
461
|
</react_native_1.Text>
|
|
448
462
|
</TouchableScale_1.default>)}
|
|
449
463
|
</react_native_1.ScrollView>) : (<>
|