Skip to content

Commit 40fdc33

Browse files
committed
sourcemap-tools: snippet/comments generation updates and bugfixes
1 parent 1e525cc commit 40fdc33

42 files changed

Lines changed: 555 additions & 223 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

examples/sdk/reactNative/App.tsx

Lines changed: 70 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,56 +1,89 @@
1-
import { BacktraceClient } from '@backtrace/react-native';
2-
import { Alert, FlatList, Image, SafeAreaView, ScrollView, StyleSheet, Text, View } from 'react-native';
1+
import { BacktraceClient, ErrorBoundary } from '@backtrace/react-native';
2+
import {
3+
Alert,
4+
FlatList,
5+
Image,
6+
SafeAreaView,
7+
ScrollView,
8+
StyleSheet,
9+
Text,
10+
TouchableOpacity,
11+
View,
12+
} from 'react-native';
313
import { generateActions } from './src/actions/actions';
414
import { CustomizableButton } from './src/components/CustomizableButton';
15+
import ErrorBoundaryFallback from './src/components/ErrorBoundaryFallback';
16+
import { ErrorBoundaryTrigger } from './src/components/ErrorBoundaryTrigger';
517
import { SUBMISSION_URL } from './src/consts';
618

719
function App(): JSX.Element {
820
const client = BacktraceClient.instance as BacktraceClient;
921
if (!client) {
1022
throw new Error('BacktraceClient is uninitialized. Call "BacktraceClient.initialize" function first.');
1123
}
12-
1324
if (SUBMISSION_URL.includes('your-universe')) {
1425
Alert.alert('Don\'t forget to update your submission url in "./src/consts.ts" with your universe and token!');
1526
}
1627

1728
client.addAttribute({ startup: Date.now() });
1829

1930
return (
20-
<SafeAreaView style={{ backgroundColor: '#d8f8e9', height: '100%' }}>
21-
<ScrollView contentInsetAdjustmentBehavior="automatic">
22-
<View style={styles.sectionContainer}>
23-
<Image
24-
style={styles.headerLogo}
25-
resizeMode="center"
26-
alt="Sauce Labs"
27-
source={{
28-
uri: 'https://info.saucelabs.com/rs/468-XBT-687/images/SL%20logo%20horizontal%20color%2Bdark%402x.png',
29-
}}
30-
/>
31-
<Text style={styles.title}>Welcome to the Backtrace React SDK demo</Text>
32-
<Text>Click the button below to test Backtrace integration</Text>
33-
34-
<ScrollView horizontal={true} contentContainerStyle={{ flexGrow: 1, justifyContent: 'center' }}>
35-
<FlatList
36-
data={generateActions(client)}
37-
renderItem={({ item }) => (
38-
<CustomizableButton
39-
title={item.name}
40-
callback={() => {
41-
item.action();
42-
}}
43-
></CustomizableButton>
44-
)}
45-
/>
46-
</ScrollView>
31+
<ErrorBoundary
32+
fallback={
33+
<View>
34+
<Text style={styles.defaultText}>Global error boundary</Text>
4735
</View>
48-
</ScrollView>
49-
</SafeAreaView>
36+
}
37+
>
38+
<SafeAreaView style={{ backgroundColor: '#d8f8e9', height: '100%' }}>
39+
<ScrollView contentInsetAdjustmentBehavior="automatic">
40+
<View style={styles.sectionContainer}>
41+
<Image
42+
style={styles.headerLogo}
43+
resizeMode="center"
44+
alt="Sauce Labs"
45+
source={{
46+
uri: 'https://info.saucelabs.com/rs/468-XBT-687/images/SL%20logo%20horizontal%20color%2Bdark%402x.png',
47+
}}
48+
/>
49+
<Text style={styles.title}>Welcome to the Backtrace React SDK demo</Text>
50+
<Text>Click the button below to test Backtrace integration</Text>
51+
52+
<View>
53+
<TouchableOpacity style={styles.actionButton}>
54+
<ErrorBoundary fallback={<ErrorBoundaryFallback textStyle={styles.defaultText} />}>
55+
<ErrorBoundaryTrigger textStyle={styles.defaultText} />
56+
</ErrorBoundary>
57+
</TouchableOpacity>
58+
</View>
59+
60+
<ScrollView horizontal={true} contentContainerStyle={{ flexGrow: 1, justifyContent: 'center' }}>
61+
<FlatList
62+
data={generateActions(client)}
63+
renderItem={({ item }) => (
64+
<CustomizableButton
65+
title={item.name}
66+
callback={() => {
67+
item.action();
68+
}}
69+
></CustomizableButton>
70+
)}
71+
/>
72+
</ScrollView>
73+
</View>
74+
</ScrollView>
75+
</SafeAreaView>
76+
</ErrorBoundary>
5077
);
5178
}
5279

5380
const styles = StyleSheet.create({
81+
actionButton: {
82+
backgroundColor: '#d8f8e9',
83+
width: '100%',
84+
padding: 5,
85+
borderRadius: 100 / 2,
86+
},
5487
sectionContainer: {
5588
margin: 25,
5689
padding: 20,
@@ -69,10 +102,6 @@ const styles = StyleSheet.create({
69102
justifyContent: 'center',
70103
alignItems: 'center',
71104
},
72-
actionButton: {
73-
backgroundColor: '#d8f8e9',
74-
margin: 5,
75-
},
76105
sectionDescription: {
77106
marginTop: 8,
78107
fontSize: 18,
@@ -81,6 +110,11 @@ const styles = StyleSheet.create({
81110
highlight: {
82111
fontWeight: '700',
83112
},
113+
defaultText: {
114+
color: 'black',
115+
fontWeight: 'bold',
116+
textAlign: 'center',
117+
},
84118
});
85119

86120
export default App;

examples/sdk/reactNative/ios/Podfile.lock

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
PODS:
2-
- backtrace-react-native (0.0.1):
2+
- backtrace-react-native (0.1.0):
33
- PLCrashReporter
44
- RCT-Folly (= 2021.07.22.00)
55
- React-Core
@@ -663,7 +663,7 @@ EXTERNAL SOURCES:
663663
:path: "../node_modules/react-native/ReactCommon/yoga"
664664

665665
SPEC CHECKSUMS:
666-
backtrace-react-native: b5e15cac52797b2d12e52ec2a57617be9390f1d7
666+
backtrace-react-native: 31c948bfc835a57b84d76433575d2441759088ef
667667
boost: 57d2868c099736d80fcd648bf211b4431e51a558
668668
CocoaAsyncSocket: 065fd1e645c7abab64f7a6a2007a48038fdc6a99
669669
DoubleConversion: 5189b271737e1565bdce30deb4a08d647e3f5f54
Lines changed: 30 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,35 @@
11
import { NativeModules } from 'react-native';
22
import { DemoAction } from '../actions';
33

4-
export const actions: DemoAction[] = [
5-
{
6-
name: 'ANR',
7-
platform: 'android',
8-
action: async () => {
9-
const errorGenerator = NativeModules.ErrorGenerator;
10-
if (!errorGenerator) {
11-
throw new Error('Native modules are not enabled.');
12-
}
4+
export const actions: DemoAction[] = __DEV__
5+
? []
6+
: [
7+
{
8+
name: 'ANR',
9+
platform: 'android',
10+
action: async () => {
11+
const errorGenerator = NativeModules.ErrorGenerator;
12+
if (!errorGenerator) {
13+
throw new Error('Native modules are not enabled.');
14+
}
1315

14-
await new Promise<void>((res) => {
15-
setTimeout(() => {
16-
res();
17-
}, 1000);
18-
});
19-
},
20-
},
21-
{
22-
name: 'Generate Android unhandled exception',
23-
platform: 'android',
24-
action: async () => {
25-
const errorGenerator = NativeModules.ErrorGenerator;
26-
if (!errorGenerator) {
27-
throw new Error('Native modules are not enabled.');
28-
}
16+
await new Promise<void>((res) => {
17+
setTimeout(() => {
18+
res();
19+
}, 1000);
20+
});
21+
},
22+
},
23+
{
24+
name: 'Generate Android unhandled exception',
25+
platform: 'android',
26+
action: async () => {
27+
const errorGenerator = NativeModules.ErrorGenerator;
28+
if (!errorGenerator) {
29+
throw new Error('Native modules are not enabled.');
30+
}
2931

30-
errorGenerator.throwError();
31-
},
32-
},
33-
];
32+
errorGenerator.throwError();
33+
},
34+
},
35+
];

examples/sdk/reactNative/src/components/CustomizableButton.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,8 @@ import { Text, TouchableOpacity, View } from 'react-native';
33

44
export type CustomizableButtonOptions = {
55
title: string;
6-
backgroundColor: string;
7-
textColor: string;
6+
backgroundColor?: string;
7+
textColor?: string;
88
callback: () => void | Promise<void>;
99
};
1010
export function CustomizableButton({
Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import React, { useEffect } from 'react';
2+
import { Alert, StyleProp, Text, TextStyle, View } from 'react-native';
3+
4+
export default function ErrorBoundaryFallback({ textStyle }: { textStyle: StyleProp<TextStyle> }) {
5+
useEffect(() => {
6+
Alert.alert(
7+
'Inner ErrorBoundary Triggered! Check your Backtrace console to see the Error and Component stacks.',
8+
);
9+
});
10+
return (
11+
<View>
12+
<Text style={textStyle}>Error boundary triggered</Text>
13+
</View>
14+
);
15+
}
Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import React, { useState } from 'react';
2+
import { Pressable, StyleProp, Text, TextStyle, View } from 'react-native';
3+
4+
export function ErrorBoundaryTrigger({ textStyle }: { textStyle: StyleProp<TextStyle> }) {
5+
const [clicked, setClicked] = useState(false);
6+
7+
if (clicked) {
8+
throw new Error('Button already clicked.');
9+
}
10+
11+
return (
12+
<>
13+
<View>
14+
<Pressable
15+
onPress={() => {
16+
setClicked(true);
17+
}}
18+
>
19+
<Text style={textStyle}>Trigger error boundary</Text>
20+
</Pressable>
21+
</View>
22+
</>
23+
);
24+
}

package-lock.json

Lines changed: 5 additions & 5 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

packages/react-native/src/ReactNativeRequestHandler.ts

Lines changed: 13 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,9 @@ export class ReactNativeRequestHandler implements BacktraceRequestHandler {
1313
private readonly JSON_HEADERS = {
1414
'Content-type': 'application/json',
1515
};
16+
private readonly MULTIPART_HEADERS = {
17+
'Transfer-Encoding': 'chunked',
18+
};
1619

1720
constructor(
1821
private readonly _options: {
@@ -29,8 +32,8 @@ export class ReactNativeRequestHandler implements BacktraceRequestHandler {
2932
attachments: BacktraceAttachment<Blob | string>[],
3033
abortSignal?: AbortSignal,
3134
): Promise<BacktraceReportSubmissionResult<T>> {
32-
const formData = this.createFormData(dataJson, attachments);
33-
return this.post(submissionUrl, formData, abortSignal);
35+
const payload = this.createSubmissionPayload(dataJson, attachments);
36+
return this.post(submissionUrl, payload, abortSignal);
3437
}
3538

3639
public async post<T>(
@@ -45,7 +48,7 @@ export class ReactNativeRequestHandler implements BacktraceRequestHandler {
4548
const response = await fetch(submissionUrl, {
4649
method: 'POST',
4750
body: payload,
48-
headers: typeof payload === 'string' ? this.JSON_HEADERS : {},
51+
headers: typeof payload === 'string' ? this.JSON_HEADERS : this.MULTIPART_HEADERS,
4952
signal: anySignal(abortSignal, controller.signal),
5053
});
5154

@@ -83,13 +86,15 @@ export class ReactNativeRequestHandler implements BacktraceRequestHandler {
8386
}
8487
}
8588

86-
private createFormData(json: string, attachments: BacktraceAttachment<Blob | string>[]) {
87-
const formData = new FormData();
88-
formData.append(this.UPLOAD_FILE_NAME, json);
89-
89+
private createSubmissionPayload(
90+
json: string,
91+
attachments: BacktraceAttachment<Blob | string>[],
92+
): FormData | string {
9093
if (!attachments || attachments.length === 0) {
91-
return formData;
94+
return json;
9295
}
96+
const formData = new FormData();
97+
formData.append(this.UPLOAD_FILE_NAME, json);
9398
for (const attachment of attachments) {
9499
const data = attachment.get();
95100
if (!data) {

tools/cli/CHANGELOG.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
1+
# Version 0.3.2
2+
3+
- update @backtrace/sourcemap-tools to 0.2.2
4+
15
# Version 0.3.0
26

37
- update @backtrace/sourcemap-tools to 0.2.1

tools/cli/package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@backtrace/javascript-cli",
3-
"version": "0.3.0",
3+
"version": "0.3.2",
44
"description": "Backtrace CLI for working with Javascript files.",
55
"main": "lib/index.js",
66
"types": "lib/index.d.ts",
@@ -45,7 +45,7 @@
4545
"/lib"
4646
],
4747
"dependencies": {
48-
"@backtrace/sourcemap-tools": "^0.2.1",
48+
"@backtrace/sourcemap-tools": "^0.2.3",
4949
"command-line-args": "^5.2.1",
5050
"command-line-usage": "^7.0.1",
5151
"glob": "^10.3.3",

0 commit comments

Comments
 (0)