topic Re: Dynatrace Instrument mobile apps with Expo-Router in Real User Monitoring

Dynatrace Instrument mobile apps with Expo-Router

Simon_kbs — Mon, 14 Oct 2024 09:14:43 GMT

Hey Community,

we are creating a React native application using Expo and expo-router. When trying to do the auto-instrumentation the application is loading, BUT expo is telling us that there is no route set to start from.

We tried looking for some documentation or known issues regarding expo-router but we were not able to find any. If you know more regarding the issue we encounter, the usage of Dynatrace in combination with expo-router or would need a more detailed description, feel free to comment 🙂

Cheers,

Simon

Re: Dynatrace Instrument mobile apps with Expo-Router

matthias_hochri — Mon, 14 Oct 2024 11:24:53 GMT

Hi Simon, we observed some issues in the past. I checked out the expo example: https://github.com/expo/expo/tree/main/templates/expo-template-tabs and tested with this and it worked for me. Did you do a prebuild with expo so the Android and iOS folder are created?

We also have an ongoing support case where we observed problems with metro.config.js. I used the following lines:

const {getDefaultConfig} = require('expo/metro-config'); const config = getDefaultConfig(__dirname); config.transformer.babelTransformerPath = require.resolve( '@dynatrace/react-native-plugin/lib/dynatrace-transformer', ); config.reporter = require('@dynatrace/react-native-plugin/lib/dynatrace-reporter'); module.exports = config;

Please confirm if this helps your situation.

Re: Dynatrace Instrument mobile apps with Expo-Router

Simon_kbs — Mon, 14 Oct 2024 15:15:22 GMT

Hi Matthias, thanks for looking into it. So we've tried the following steps from a fresh repo:

install dynatrace plugin.
Add our dynatrace.config.js downloaded from the dynatrace portal.
Setup metro:

Setup babel

module.exports = { presets: [ [ "babel-preset-expo", { jsxRuntime: "automatic", jsxImportSource: "@dynatrace/react-native-plugin", }, ], ], };

npx expo prebuild which create the ios and android directories.
npx instrumentDynatrace plist=./ios/<project>/Info.plist as the cmd could not find the .plist file
npx expo run:ios or npx expo run:android which result in the following:

We do see logs from dynatrace but on opening the application we do not land on our application and instead see the expo welcome screen.

Re: Dynatrace Instrument mobile apps with Expo-Router

matthias_hochri — Tue, 15 Oct 2024 05:10:04 GMT

Thanks for your input. By fresh repo you mean your own repo or did you try the official example listed above? If you are talking about your application we probably should switch to a official support case as it takes too long in here to analyze individual files.

Your whole instructions seem to be quite alright. At least I did it pretty much the same. Only thing that I can see as a small difference is that never expo version have a slightly changed babel.config.js (Using api.cache):

module.exports = function (api) { api.cache(true); return { presets: [ ['babel-preset-expo', { jsxRuntime: 'automatic', jsxImportSource: '@dynatrace/react-native-plugin', }, ], ], }; };

But I am not sure if this will make a difference as api.cache only caches the configuration used by babel.

Re: Dynatrace Instrument mobile apps with Expo-Router

Velcrin — Wed, 16 Oct 2024 08:35:56 GMT

Hey Matthias. Thank you for you support. I am working with Simon. We did actually try from the same tabs template with and without clearing api cache but without success. I created a repo that illustrate the issue https://github.com/velcrin/dynatrace-expo-router. `main` branch is the original expo-template-tabs without any modification. It just works out of the box. The `add-dynatrace` branch is the branch were we did the setup (without `dynatrace.config.js` that we just ignored to commit). You can see the changes we made in the PR https://github.com/velcrin/dynatrace-expo-router/pull/1/files. Starting the application result in the default black expo welcome screen but should actually show the tabs demo app from the template. I'd be curious to hear if you get this working on your side.

Re: Dynatrace Instrument mobile apps with Expo-Router

matthias_hochri — Wed, 16 Oct 2024 09:00:15 GMT

Thanks for the repo. I tested and it works. I know what's the difference. My test was on Android, yours on iOS. I will check on my MacBook next and see what happens there.

Re: Dynatrace Instrument mobile apps with Expo-Router

Velcrin — Wed, 16 Oct 2024 15:11:10 GMT

Android and iOS are failing for me actually. After further investigation it seems that the plugin is interfering with expo-router path used to find routes. Before using the dynatrace plugin the value of EXPO_ROUTER_APP_ROOT is `../../app` although after applying the plugin the value is `../../../../../../../app`. Not sure what is happening. It would be interesting to debug the plugin as well. Adding an `index.js` file like described here https://docs.expo.dev/router/reference/troubleshooting/ seems to fix it. I am not exactly sure what are the implications of that change though. Anyway, fix can be tested on https://github.com/velcrin/dynatrace-expo-router/pull/2/files

Re: Dynatrace Instrument mobile apps with Expo-Router

matthias_hochri — Thu, 17 Oct 2024 06:55:58 GMT

I start to believe this a MacOS issue, because I tested Android on my Windows machine and it works. I observed basically the same thing as you. I debugged our transformer and looked at input files apart from node_modules and saw the same `../../../../../../../app. Because of this it is not resolving any other application files. Android on Windows is resolving everything correctly.

So probably I will have a look today how EXPO_ROUTER_APP_ROOT is defined on Mac when going the default way, to understand why our plugin is interfering here.

Thanks for the great collaboration!

Re: Dynatrace Instrument mobile apps with Expo-Router

matthias_hochri — Fri, 18 Oct 2024 10:01:53 GMT

Okay. I found the reason. I somehow tricked myself that's why I was telling you that Android works on my Windows machine. Turns out I found the solution while setting up the Windows project manually but I forgot about this detail.

On my Mac machine I basically debugged through the whole process to find the issue, which was the babel transformer not being called. When I looked back to my Windows Android project, it turned out that I was already using this. Following line needs to be used in our dynatrace.config.js to use the babel transformer of expo:

upstreamTransformer: require.resolve('@expo/metro-config/babel-transformer')

I will update our internal documentation about this.

Re: Dynatrace Instrument mobile apps with Expo-Router

Velcrin — Fri, 18 Oct 2024 12:54:32 GMT

Works like a charm! I just tried on both the dummy github project and our own. Thank you for your help!