Skip to content

Commit 51f41d6

Browse files
committed
Add react-native docs
1 parent 2b6b1f6 commit 51f41d6

File tree

2 files changed

+84
-0
lines changed

2 files changed

+84
-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: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
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+
To generate sourcemaps when bundling your React Native application:
46+
47+
.. code-block:: bash
48+
49+
$ react-native bundle --write-sourcemap
50+
51+
Once the sourcemaps are built, you'll need to `create a new release and upload them as release artifacts`_.
52+
53+
.. _create a new release and upload them as release artifacts: https://docs.getsentry.com/hosted/clients/javascript/sourcemaps/#uploading-source-maps-to-sentry
54+
55+
Expanded Usage
56+
--------------
57+
58+
It's likely you'll end up in situations where you want to gracefully
59+
handle errors. A good pattern for this would be to setup a logError helper:
60+
61+
.. code-block:: javascript
62+
63+
function logException(ex, context) {
64+
Raven.captureException(ex, {
65+
extra: context
66+
});
67+
/*eslint no-console:0*/
68+
window.console && console.error && console.error(ex);
69+
}
70+
71+
Now in your components (or anywhere else), you can fail gracefully:
72+
73+
.. code-block:: javascript
74+
75+
var Component = React.createClass({
76+
render() {
77+
try {
78+
// ..
79+
} catch (ex) {
80+
logException(ex);
81+
}
82+
}
83+
});

0 commit comments

Comments
 (0)