devcorpio
commented
2 years ago Hi @suraj-dot-gupta,
At present, RUM agent is not supported on react-native and there are no plans yet for so.
Despite so, I would like to provide you with a workaround:
Disclaimer: there is no guarantee that this is going to work perfectly. It's not thoroughly tested, this is just to provide you a solution that works on the basic level. (E.g. page-load instrumentation have to be disabled)
--
elastic-apm-rum-react-native-adapter.js
// Setup that allow the agent initialisation
window.addEventListener = function noop() {};
window.location = {
href: 'https://write-here-some-meaningful-but-static-url.yours/'
};
global.document = {
currentScript: null,
location: {
href: 'https://write-here-some-meaningful-but-static-url.yours/'
},
getElementsByTagName() {
return {
length: 0
}
}
};react native main file:
import * as React from 'react';
import { Text, View, StyleSheet, Button } from 'react-native';
import Constants from 'expo-constants';
import AssetExample from './components/AssetExample';
import { Card } from 'react-native-paper';
// IMPORTS RELATED WITH ELASTIC START HERE:
// this is a small implementation of crypto.getRandomValues
// without this the transaction/span ids will not be generated
import 'react-native-get-random-values'
import './elastic-apm-rum-react-native-adapter.js'; // <--- load it before the RUM agent
import '@elastic/apm-rum';
elasticApm.init({
serviceName: "react-native-app-demo-rum-v1",
serverUrl: 'yourUrl',
disableInstrumentations: ['page-load']
})
export default function App() {
// Custom transaction
const transaction = elasticApm.startTransaction("my-transaction", "custom")
const span = transaction.startSpan("my-span", "my-span-type")
// just an example of how to use the API
setTimeout(() => {
span.end()
}, 300)
return (
<View style={styles.container}>
<Text style={styles.paragraph}>
Change code in the editor and watch it change on your phone! Save to get a shareable url.
</Text>
<Card>
<AssetExample />
</Card>
<Button
onPress={() => {
fetch('https://snack.expo.dev/') // just an example of http request
}}
title="Press Me"
/>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
paddingTop: Constants.statusBarHeight,
backgroundColor: '#ecf0f1',
padding: 8,
},
paragraph: {
margin: 24,
fontSize: 18,
fontWeight: 'bold',
textAlign: 'center',
},
});
You have also access to the react native example application through this link.
I have also recorded a video where you can see how the created transactions are visible in Kibana. You will see:
- one custom transaction
- http-request transaction
Thanks, Alberto
Suraj-Gupta-ML
freefiona85
Hi @devcorpio , how can we use the package in react-native.
Since react-native is not browser based, we cannot use this package.
i tried using this react-native package, but there router events and errors are not getting captured.
could you pls help in resolving the issue?.
Thanks!!