Support for React Native?

[kenleezle]

This blog post led me to believe that raygun4js would work in a React Native environment.

https://raygun.com/blog/2016/07/react-native-typescript/

However, React Native does not have a document object.

facebook/react-native#1473

[fundead]

After some additional research we've discovered that this provider will need modifications or ideally a fork to fully support React Native; this work is planned for the near term.

[kenleezle]

👍

[kenleezle]

just checking back in on this. any ideas on an eta for this? i have an app in private beta so if you need a tester for something experimental i'm happy to oblige.

[fundead]

Hi again,

We've conducted further research into what's required to support React Native and there's a couple of work items and refactoring to be completed to achieve this goal. As the provider was conceived in 2012 when there wasn't any common industry standard around module formats, and now there is (as you're probably aware the JS ecosystem has moved fast and looks quite different since then), the first job is to fully support the UMD 'spec' so we can be require/imported using CommonJS/AMD/ES6 environments.

Once this is done the library can be included in React Native projects, the second task would be to then create a wrapper lib to streamline the inclusion of Raygun4Android/Raygun4iOS if required. This is on the roadmap and should be completed in the near term.

One thing that would help is understanding your precise requirements - for instance what language is your RN app written in - ES5/ES6/Typescript/Flow? Is reporting native errors from android/ios a requirement or a nice-to-have? With this info we can tailor a first cut beta for your use case and let you know when it is available for you to try out.

[kenleezle]

We are writing our RN app in ES6 and we are not currently using Typescript or Flow or any static typechecking. We will be investigating those options but we aren't using any yet.

We have already integrated Raygun4Android and Raygun4iOS natively and that is working. Our issue of course is the javascript errors, which is where we anticipate the large majority of our code to live.

We are anticipating a go live date of Dec 1. We have tested Raven/Sentry's js library as a backup plan and it works. We just subscribed to pulse and we love raygun so our preference is to wait and hope that you guys release support before our drop dead date.

[kenleezle]

update: we are using flow now. i don't see why that would impact you guys since many of the npm packages we are using are not using flow, and the flow annotations are stripped out before our javascript is actually interpreted.

[fundead]

Thanks for the update on your scenario, Ken - you are correct that Flow won't result in any change in scope or capabilities to the upgrades that result from this ticket. In the case that you/others were using TypeScript it may, however we also have this on our roadmap to update the community typings for full strong-typing support with that language.

[fundead]

Just an update on this one - Raygun4JS now has an artifact which contains itself exported as a UMD module in the latest v2.5.0 release. This should allow it to be consumed by CommonJS/AMD/RequireJS/Webpack/etc environments, including React Native. Those interested can check out the instructions at https://github.com/MindscapeHQ/raygun4js#react-nativeas-a-umd-module, noting the limitations with this approach. Feedback is appreciated as this is a 1.0 release of this feature.

[kenleezle]

@fundead any instructions for sourcemaps using react native? in the meantime while we waited we implemented sentry. the dev investment to get sourcemaps working for any of these bug tracking solutions is daunting.

[fundead]

The process is daunting because source maps themselves are a hack around the fact that minification isn't really truly supported by browsers, so the stack requires that dependency resolution, minification, concatenation, compiletime source mapping, source map loading, lookup, and runtime source mapping all happen correctly and precisely as the various tools expect they should - if anything is out, all guarantees are off.

Fortunately we have a bunch of experience in getting this working with the tooling so we can help you out with your specific stack and requirements. As the RN bundler will spit out an artifact JS file, assuming it is also set up to generate the corresponding .map file upon build/deploy, and it is uploaded to the Raygun source map center, Raygun will use it to map the minified stack traces that the bundle causes back to the human-readable source file.

General instructions are available from https://raygun.com/docs/workflow/source-maps, specifically the Hybrid Mobile Apps section. As the precise instructions will vary upon your environment and tooling you can open a ticket by emailing us at [email protected] and we'll give you specific guidance and help you get it working.

[Gyurme]

I'm trying to integrate Raygun into a React Native app but when I try and import Raygun4JS and follow the instructions on https://github.com/MindscapeHQ/raygun4js#react-nativeas-a-umd-module I still get an error with the "document" variable not being found.

Is there any step I might have missed?

The message I see whenever I try and import and use the raygun4js library is:

Can't find variable: document
<unknown>
raygun.umd.js:3092 

raygun.umd.js:3100 

raygun.umd.js:16
.....

[BenjaminHarding]

Just a quick note. Documentation with how to setup Raygun4JS with React Native can be found here, under the JavaScript provider documentation on the Raygun website.