Dynatrace Instrument mobile apps with Expo-Router

[Simon_kbs]

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 

[matthias_hochri]

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.

[Simon_kbs]

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:

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;

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

[matthias_hochri]

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. 

[Velcrin]

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.

[matthias_hochri]

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. 

[Velcrin]

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

[matthias_hochri]

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! 

[matthias_hochri · Accepted solution]

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.

[Velcrin]

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