|
| 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 both your **source code** AND **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`_: |
| 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 service for your source map: |
| 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 | +Lastly, you'll need to `create a new release and upload your source code files and source maps as release artifacts`_. |
| 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