Skip to content

Commit 72d324e

Browse files
krystofwoldrichshanamatthews
krystofwoldrich
and
shanamatthews
authored
Add Expo source maps guide (#8854)
Co-authored-by: Shana Matthews <[email protected]>
1 parent a0418cd commit 72d324e

15 files changed

+762
-416
lines changed

‎src/includes/react-native-expo-metro-plugin-code-snippet.mdx

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
```javascript {tabTitle:metro.config.js}
2+
// const { getDefaultConfig } = require("expo/metro-config");
3+
const { getSentryExpoConfig } = require("@sentry/react-native/metro");
4+
5+
// const config = getDefaultConfig(__dirname);
6+
const config = getSentryExpoConfig(__dirname);
7+
8+
module.exports = config;
9+
```

‎src/includes/react-native-expo-plugin-code-snippet.mdx

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
```javascript {tabTitle:app.json/app.config.json}
2+
{
3+
"expo": {
4+
"plugins": [
5+
[
6+
"@sentry/react-native/expo",
7+
{
8+
"url": "https://sentry.io/",
9+
"warning": "DO NOT COMMIT YOUR AUTH TOKEN",
10+
"authToken": "___ORG_AUTH_TOKEN___",
11+
"project": "___PROJECT_SLUG___",
12+
"organization": "___ORG_SLUG___"
13+
}
14+
]
15+
]
16+
}
17+
}
18+
```
19+
20+
```javascript {tabTitle:app.config.js}
21+
const { withSentry } = require("@sentry/react-native/expo");
22+
23+
const config = {
24+
name: "Expo Example",
25+
slug: "expo-example",
26+
};
27+
28+
module.exports = withSentry(config, {
29+
url: "https://sentry.io/",
30+
// DO NOT COMMIT YOUR AUTH TOKEN
31+
authToken: "___ORG_AUTH_TOKEN___",
32+
project: "___PROJECT_SLUG___s",
33+
organization: "___ORG_SLUG___",
34+
});
35+
```
36+
37+
```typescript {tabTitle:app.config.ts}
38+
import { ExpoConfig } from "expo/config";
39+
import { withSentry } from "@sentry/react-native/expo";
40+
41+
const config: ExpoConfig = {
42+
name: "Expo Example",
43+
slug: "expo-example",
44+
};
45+
46+
export default withSentry(config, {
47+
url: "https://sentry.io/",
48+
// DO NOT COMMIT YOUR AUTH TOKEN
49+
authToken: "___ORG_AUTH_TOKEN___",
50+
project: "___PROJECT_SLUG___",
51+
organization: "___ORG_SLUG___",
52+
});
53+
```

‎src/includes/react-native-sourcemaps-expo-common-instructions.mdx

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
## Common Setup
2+
3+
To upload source maps, the Sentry Expo Plugin and the Sentry Metro Plugin need to be added to the Expo application.
4+
5+
### Add the Sentry Expo Plugin
6+
7+
To ensure bundles and source maps are automatically uploaded during the local and EAS native applications builds, add the `@sentry/react-native/expo` config plugin to the Expo application configuration:
8+
9+
<Include name="react-native-expo-plugin-code-snippet.mdx" />
10+
11+
### Add the Sentry Metro Plugin
12+
13+
To ensure unique Debug IDs are assigned to the generated bundles and source maps, add the Sentry Metro Plugin to the configuration:
14+
15+
<Include name="react-native-expo-metro-plugin-code-snippet.mdx" />

‎src/includes/react-native-sourcemaps-wizard-instructions.mdx

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
The easiest way to configure automatic source maps upload is to use the Sentry Wizard:
2+
3+
```bash
4+
npx @sentry/wizard@latest -i reactNative
5+
```

‎src/platforms/react-native/manual-setup/expo.mdx

Lines changed: 22 additions & 74 deletions
Original file line numberDiff line numberDiff line change
@@ -5,13 +5,13 @@ description: "Learn how to set up an Expo-managed project with the Sentry React
55

66
<Alert level="info" title="Experimental Support">
77

8-
Expo support is currently experimental and available since Sentry React Native SDK version `5.16.0-alpha.1` and Expo SDK version 50.
8+
Expo support is currently experimental and available since Sentry React Native SDK version `5.16.0-alpha.4` and Expo SDK version 50.
99

1010
Experimental support means it may have bugs. We recognize the irony.
1111

1212
</Alert>
1313

14-
To set up the Sentry React Native SDK in your Expo-managed project, follow the steps on this page.
14+
To set up the Sentry React Native SDK in your Expo project, follow the steps on this page.
1515

1616
### Install the Sentry SDK
1717

@@ -33,7 +33,7 @@ yarn add @sentry/react-native
3333

3434
Import the `@sentry/react-native` package and call `init` with your DSN:
3535

36-
```javascript {tabTitle:App.js/App.tsx}
36+
```javascript {tabTitle:App.js or app/_layout.js}
3737
import { Text, View } from "react-native";
3838
import * as Sentry from "@sentry/react-native";
3939

@@ -57,87 +57,25 @@ function App() {
5757
export default Sentry.wrap(App);
5858
```
5959

60-
### Add the Sentry Expo Plugin
60+
### Wrap Your App
6161

62-
To ensure the bundles and source maps are automatically uploaded during the native applications builds, add `withSentry` to the Expo application configuration:
63-
64-
```javascript {tabTitle:app.json/app.config.json}
65-
{
66-
"expo": {
67-
"plugins": [
68-
[
69-
"@sentry/react-native/expo",
70-
{
71-
"url": "https://sentry.io/",
72-
"warning": "DO NOT COMMIT YOUR AUTH TOKEN",
73-
"authToken": "___ORG_AUTH_TOKEN___",
74-
"project": "___PROJECT_SLUG___",
75-
"organization": "___ORG_SLUG___"
76-
}
77-
]
78-
]
79-
}
80-
}
81-
```
62+
Wrap the root component of your application with `Sentry.wrap`:
8263

83-
```javascript {tabTitle:app.config.js}
84-
const { withSentry } = require("@sentry/react-native/expo");
64+
```javascript {tabTitle:App.js or app/_layout.js}
65+
export default Sentry.wrap(App);
66+
```
8567

86-
const config = {
87-
name: "Expo Example",
88-
slug: "expo-example",
89-
};
68+
### Add the Sentry Expo Plugin
9069

91-
module.exports = withSentry(config, {
92-
url: "https://sentry.io/",
93-
// DO NOT COMMIT YOUR AUTH TOKEN
94-
authToken: "___ORG_AUTH_TOKEN___",
95-
project: "___PROJECT_SLUG___s",
96-
organization: "___ORG_SLUG___",
97-
});
98-
```
70+
To ensure bundles and source maps are automatically uploaded during the native applications builds, add `withSentry` to the Expo application configuration:
9971

100-
```typescript {tabTitle:app.config.ts}
101-
import { ExpoConfig } from "expo/config";
102-
import { withSentry } from "@sentry/react-native/expo";
103-
104-
const config: ExpoConfig = {
105-
name: "Expo Example",
106-
slug: "expo-example",
107-
};
108-
109-
export default withSentry(config, {
110-
url: "https://sentry.io/",
111-
// DO NOT COMMIT YOUR AUTH TOKEN
112-
authToken: "___ORG_AUTH_TOKEN___",
113-
project: "___PROJECT_SLUG___s",
114-
organization: "___ORG_SLUG___",
115-
});
116-
```
72+
<Include name="react-native-expo-plugin-code-snippet.mdx" />
11773

11874
### Add Sentry Metro Plugin
11975

12076
To ensure unique Debug IDs get assigned to the generated bundles and source maps, add Sentry Serializer to the Metro configuration:
12177

122-
```javascript {tabTitle:metro.config.js}
123-
const { mergeConfig } = require("metro");
124-
const { getDefaultConfig } = require("expo/metro-config");
125-
const { createSentryMetroSerializer } = require("@sentry/react-native/metro");
126-
const {
127-
withExpoSerializers,
128-
} = require("@expo/metro-config/build/serializer/withExpoSerializers");
129-
130-
const config = getDefaultConfig(__dirname);
131-
132-
const sentryConfig = {
133-
serializer: {
134-
customSerializer: createSentryMetroSerializer(),
135-
},
136-
};
137-
138-
const finalConfig = mergeConfig(config, sentryConfig);
139-
module.exports = withExpoSerializers(finalConfig);
140-
```
78+
<Include name="react-native-expo-metro-plugin-code-snippet.mdx" />
14179

14280
## Verify Setup
14381

@@ -151,3 +89,13 @@ To verify that everything is working as expected, build the `Release` version of
15189
}}
15290
/>
15391
```
92+
93+
## Next Steps
94+
95+
- [Learn how to upload source maps for native builds and Expo Updates](/platforms/react-native/sourcemaps/uploading/expo/)
96+
97+
## Notes
98+
99+
- Don't commit your auth token. Instead, use an environment variable like `SENTRY_AUTH_TOKEN`.
100+
- Source maps for the `Release` version of your application are uploaded automatically during the native application build.
101+
- During development, the source code is resolved using the Metro Server and source maps aren't used. This currently doesn't work on web.

0 commit comments

Comments
 (0)