|
| 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