Skip to content

Commit 11c54f0

Browse files
authored
Update source map section in RN docs (#664)
1 parent 265cc07 commit 11c54f0

File tree

1 file changed

+49
-14
lines changed

1 file changed

+49
-14
lines changed

docs/integrations/react-native.rst

Lines changed: 49 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -49,37 +49,72 @@ app, you’ll want to create a new release inside Sentry. This is for two
4949
important reasons:
5050

5151
- You can associate errors tracked by Sentry with a particular build
52-
- You can store your source maps generated for each build inside Sentry
52+
- You can store your source files/source maps generated for each build inside Sentry
5353

5454
Unlike a normal web application where your JavaScript files (and source
5555
maps) are served and hosted from a web server, your React Native code is
5656
being served from the target device’s filesystem. So you’ll need to upload
5757
both your **source code** AND **source maps** directly to Sentry, so that
5858
we can generate handy stack traces for you to browse when examining
59-
exceptions trigged by your application.
59+
exceptions triggered by your application.
6060

6161

62-
Generating source maps
63-
-----------------------
62+
Generating and Uploading Source Files/Source Maps
63+
-------------------------------------------------
6464

65-
To generate source maps for your project, first start the `React Native Packager`_:
66-
67-
.. _React Native Packager: https://github.com/facebook/react-native/tree/master/packager#react-native-packager
65+
To generate both an application JavaScript file (main.jsbundle) and source map for your project (main.jsbundle.map), use the react-native CLI tool:
6866

6967
.. code-block:: bash
7068
71-
$ npm start
69+
react-native bundle \
70+
--dev false \
71+
--platform ios \
72+
--entry-file index.ios.js \
73+
--bundle-output main.jsbundle \
74+
--sourcemap-output main.jsbundle.map
7275
73-
Then, in another tab, curl the packager service for your source map:
76+
This will write both main.jsbundle and main.jsbundle.map to the current directory. Next, you'll need to `create a new release and upload these files as release artifacts
77+
<https://docs.getsentry.com/hosted/clients/javascript/sourcemaps/#uploading-source-maps-to-sentry>`__.
7478

75-
.. code-block:: bash
79+
Naming your Artifacts
80+
~~~~~~~~~~~~~~~~~~~~~
7681

77-
$ curl http://127.0.0.1:8081/index.ios.map -o index.ios.map
82+
In Sentry, artifacts are designed to be "named" using the full URL or path at which that artifact is located (e.g. `https://example.org/app.js` or `/path/to/file.js/`).
83+
Since React Native applications are installed to a user's device, on a path that includes unique device identifiers (and thus different for every user),
84+
the React Native plugin strips the entire path leading up to your application root.
7885

79-
This will write a file index.ios.map to the current directory.
86+
This means that although your code may live at the following path:
87+
88+
.. code::
89+
90+
/var/containers/Bundle/Application/{DEVICE_ID}/HelloWorld.app/main.jsbundle
91+
92+
The React Native plugin will reduce this to:
93+
94+
.. code::
95+
96+
/main.jsbundle
97+
98+
Therefore in this example, you should name your artifacts as "/main.jsbundle" and "/main.jsbundle.map".
99+
100+
Source Maps with the Simulator
101+
------------------------------
102+
103+
When developing with the simulator, it is not necessary to build source maps manually, as they are generated automatically on-demand.
104+
105+
Note however that artifact names are completely different when using the simulator. This is because instead of those files existing
106+
on a path on a device, they are served over HTTP via the `React Native packager
107+
<https://github.com/facebook/react-native/tree/master/packager>`__.
108+
109+
Typically, simulator assets are served at the following URLs:
110+
111+
- Bundle: http://localhost:8081/index.ios.bundle?platform=ios&dev=true
112+
- Source map: http://localhost:8081/index.ios.map?platform=ios&dev=true
113+
114+
If you want to evaluate Sentry's source map support using the simulator, you will need to fetch these assets at these URLs (while the React Native
115+
packager is running), and upload them to Sentry as artifacts. They should be named using the full URL at which they are located, including
116+
the query string.
80117

81-
Lastly, you'll need to `create a new release and upload your source code files and source maps as release artifact
82-
<https://docs.getsentry.com/hosted/clients/javascript/sourcemaps/#uploading-source-maps-to-sentry>`__.
83118

84119
Expanded Usage
85120
--------------

0 commit comments

Comments
 (0)