Skip to content

Commit 4fef637

Browse files
committed
Add react-native docs
1 parent 2b6b1f6 commit 4fef637

File tree

2 files changed

+98
-0
lines changed

2 files changed

+98
-0
lines changed

docs/integrations/index.rst

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,3 +30,4 @@ regarding that.
3030
backbone
3131
ember
3232
react
33+
react-native

docs/integrations/react-native.rst

Lines changed: 97 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
1+
React Native
2+
============
3+
4+
Installation
5+
------------
6+
7+
In the root of your React Native project, install raven-js via npm:
8+
9+
.. sourcecode:: bash
10+
11+
$ npm install --save raven-js
12+
13+
At the top of your main application file (e.g. index.ios.js and/or index.android.js), add the following code:
14+
15+
.. sourcecode:: javascript
16+
17+
var React = require('react');
18+
19+
var Raven = require('raven-js');
20+
require('raven-js/plugins/react-native')(Raven);
21+
22+
Configuring the Client
23+
----------------------
24+
25+
Now we need to set up Raven.js to use your Sentry DSN:
26+
27+
.. code-block:: javascript
28+
29+
Raven
30+
.config('https://___PUBLIC_DSN___', { release: RELEASE_ID })
31+
.install();
32+
33+
RELEASE_ID is a string representing the “version” of the build you are about to distribute. This can be the SHA of your Git repository’s HEAD. It can also be a semantic version number (e.g. “1.1.2”), pulled from your project’s package.json file. More below.
34+
35+
About Releases
36+
--------------
37+
38+
Every time you build and distribute a new version of your React Native app, you’ll want to create a new release inside Sentry. This is for two important reasons:
39+
40+
- You can associate errors tracked by Sentry with a particular build
41+
- You can store your source maps generated for each build inside Sentry
42+
43+
Unlike a normal web application where your JavaScript files (and source maps) are served and hosted from a web server, your React Native code is being served from the target device’s filesystem. So you’ll need to upload your source maps directly to Sentry, so that we can generate handy stack traces for you to browse when examining exceptions trigged by your application.
44+
45+
46+
Generating source maps
47+
-----------------------
48+
49+
To generate source maps for your project, first start the `React Native Packager`_ via npm start:
50+
51+
.. _React Native Packager: https://github.com/facebook/react-native/tree/master/packager#react-native-packager
52+
53+
.. code-block:: bash
54+
55+
$ npm start
56+
57+
Then, in another tab, curl the packager server:
58+
59+
.. code-block:: bash
60+
61+
$ curl http://127.0.0.1:8081/index.ios.map -o index.ios.map
62+
63+
This will write a file index.ios.map to the current directory.
64+
65+
Next, you'll need to `create a new release and upload your source map as a release artifact`_.
66+
67+
.. _create a new release and upload your source map as a release artifact: https://docs.getsentry.com/hosted/clients/javascript/sourcemaps/#uploading-source-maps-to-sentry
68+
69+
Expanded Usage
70+
--------------
71+
72+
It's likely you'll end up in situations where you want to gracefully
73+
handle errors. A good pattern for this would be to setup a logError helper:
74+
75+
.. code-block:: javascript
76+
77+
function logException(ex, context) {
78+
Raven.captureException(ex, {
79+
extra: context
80+
});
81+
/*eslint no-console:0*/
82+
window.console && console.error && console.error(ex);
83+
}
84+
85+
Now in your components (or anywhere else), you can fail gracefully:
86+
87+
.. code-block:: javascript
88+
89+
var Component = React.createClass({
90+
render() {
91+
try {
92+
// ..
93+
} catch (ex) {
94+
logException(ex);
95+
}
96+
}
97+
});

0 commit comments

Comments
 (0)