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