Troubleshooting React Native apps with New Relic

Captions provided by White Coat Captioning (https://whitecoatcaptioning.com/). Communication Access Realtime Translation (CART) is provided in order to facilitate communication accessibility and may not be a totally verbatim record of the proceedings.

JASON: Hello, everyone. Welcome to another episode of Learn With Jason. This week we are doing something special. We are doing observability week teamed up with New Relic and having them on Monday, Tuesday and Wednesday this week. We were going to do a Thursday but we are going to move that later. Four total episodes of observability with three happening this week. We are going to start off today with Ptah Dunbar. How are you doing?

PTAH: How is it going?

JASON: Super excited to have you. It is going to be a lot of fun. Before we start talking about what observability is, let's spend time talking about you. For folks not familiar with you and your work, want to give us a bit of background?

PTAH: Sure. I mean, I am a pirate as you can see. [Laughter] I have been sailing seas for the past let's say 16 years starting with learning how to code with, you know, customizing like my space pages before web standards existed. CSS 2.0 I was building table layouts and just evolving and learning a new language every year. I think I jumped over JavaScript and learned actionscript 2.0 and learning other languages and building the experiences I was looking for. I tried to do design and development but it was a lot so I focus on the development side and got a name around contributing to WordPress and basically contributing to that whole ecosystem running Meetups and events for like 10 years. A lot of fun.

JASON: Yeah, yeah, no kidding. Now you are at New Relic and you are doing rev rel there, right? -- dev rel.

PTAH: I have been with New Relic for three years since the pandemic era. I decided let's take on a larger ask. I primarily as a pirate have been running my own show but it is cool to work for a large organization and understanding the challenges at scale.

JASON: Yeah, I guess the pirate lifestyle is a solitary one. [Laughter]

PTAH: Yeah, well, it definitely gave me a lot of flexibility living across the world. People would just say you need a laptop and internet connection and you can work anywhere. I did that all of my 20s.

JASON: Nice. Did you do the full like kind of digital nomad thing around the world?

PTAH: Thailand, yup. Did all that.

JASON: I did that for a couple of years, 2014-2015. Two years around then. I was fully remote, me and my partner packed a suitcase and lived in short-term housing for two years.

PTAH: Very cool.

JASON: Yeah, it was super fun. Let's talk a little bit about observability. What we are doing this week is observability week. The idea here is that we are going to dig into -- I guess maybe the first thing we should start with is my observability. This is a show where a lot of folks are working in the frontend and web. A lot of times when I hear about observability what I think is that this is what somebody who worked as an SRE or in DevOps more way backend would be thinking about and caring about. Why would we do a show on observability on Learn With Jason? It feels like maybe it is not a good audience match but I don't know that I agree. Maybe the first question I will ask you is, what is observability?

PTAH: That's a great question to start off with. It is sort of a secondary order effect of troubleshooting an application. You are looking to improve your application, you are looking to make it faster is -- or better. And how do you go about doing it? Throw a bunch of console logs everywhere and potentially deploy it but now you have an application like if you work as part of a larger organization there is a lot of blind spots and they have no idea what is deployed, where things are located, and the idea about observability is to create signals that allow you to see your application from the outside despite this telemetry which consist of metrics, events, traces and logs. Things that your application outputs. I want to understand the behavior of my application. That's kind of the observability on a practical sense.

JASON: And so, like, when we are talking about observability, it can be anything that helps us get a better picture of what our application is doing. It is not like a very prescriptive set of techniques as much as it is trying to understand what is happening in your app. Is that kind of a correct understanding of the umbrella of observability?

PTAH: Yeah. So the practical sense of it is yeah, let me understand what's going on in my application but then there is always a higher order connections with that. At the end of the day, we want to move, or ideally with observability, you get data and with data it allows you to make decisions using that data versus like saying, I think these REST end points or APIs are super fast but it may not be for someone across the region. You can start using metric and data to start driving decisions and that's kind of where you want to connect the telemetry like metrics, logs and traces to higher order business metrics and to things that are really interesting.

JASON: We will be talking about this. We have Matt and Daniel coming on tomorrow and Wednesday and I will ask them the same question. When you ask somebody what is observability it is sort of like what is life and meaning. It has such a big umbrella and where everybody focuses is always very interesting to see. Today the project we want to work on is going to be in React native, right? We are going do that specifically with expo? Is that right?

PTAH: Today this episode is going to focus on getting observability mobile application. So in this example, it is going to be using expoand the New Relic mobile SDK.

JASON: Expois a framework for building React Native apps and gives you a bunch of cool stuff we will look at. We had Brent who is one of the creators or maintainers. If you are interested, you can look up at that episode and get a little introto expo. Here is the episode with Brent and I will drop that in the Twitch and it will show up in the show notes as well. When we are talking about observability, it is not tied to a specific stack. Like you can do, if you are working in React Native, in you know, frontend web JavaScript, if you are working in PHP, if you are working in Ruby or C, it doesn't matter you can setup observability within your apps.

PTAH: That's correct. The idea of observability in organizations and having people who primary focus on that is still a young discipline in that regard but yes, it works across any language.

JASON: Yeah, and the intention here, if I am understanding correctly, is like, if it was me on my own unassisted today I will set-up a React Native app and I will read tutorials and probably use Expo, and when I run into a problem, I am going to console log what comes into my function and look at that output and say, oh, it broke. Then once I get through the point where it is working I will ship that to production and my users are going to tell me hey, this thing broke. Then I am going to say what did you do to make it break and they will try to explain or they won't and then I am going to try to re-create this scenario and I am going to console log it and fix the problem and then I am going to ship to production again, right? This is very obviously like there is a lot of inefficiency in this process. You are adding console logs you need to remember to take back out before you put them into production because otherwise you will be kind of -- people can open up the console and go we got here and here which isn't great when you open a production website and see the logs didn't get taken out. That requires me to have a huge amount of context and remember what did I do last time and how did I fix that thing last time. So my goal here, and what we are talking about with observability, is that if I do the same kind of thing I would do with console log but do it with something structured, I am able to send the logs to a central place and start to see output over time where if I get an error, I can see a dashboard that says hey, your real users got this error a bunch. You should probably fix that. Or, you know, things like that that let me get -- it doesn't have to be active feedback from my users. It can just be passively they use the app and a thing went wrong and I get alerted and I know something broke. That's kind of the goal and historically whenever I have thought about it I'm like that would be great but it sounds hard so I am not going to do it.

PTAH: Observability, the concept, compounds when you are working as part of a larger team with stakeholders that don't know how to code and can't pull up a console code and understand how to troubleshoot that. That's where you want to capture this telemetry data and store it and query it so you can reproduce the situation or have a first responder capture some of that information and perhaps start standardizing across multiple teams around what does our latency look like and how can we optimize those queries for example.

JASON: OK. I think the best way to go further is for us to flip over and show it. I am going to rearrange my window a little bit and take us over into pair programming view. We will start by just doing a big old shout-out to New Relic who is the sponsor of this series, observability week. I don't why this window is so tiny. Here in the New Relic site. While we are talking about the sponsors, we have live captioning going in the show as always. We have Maggie here with us from White Coat Captioning. Thank you so much. That is available through the closed captioning button right there on your video player or in a window on the home page of learnwithjason.dev and in addition to New Relic we have XN and Pluralsight kicking in to make it all possible. That is about the extent of what I know here. What should my first step be if we are going to build a React Native app?

PTAH: To get started, I will definitely recommend making sure you have a New Relic account.

JASON: I do have a New Relic account.

PTAH: Go ahead and log in and grab your API key. I will tell you where that's located. You see the username at the bottom left corner? Click on that and then click on API keys.

JASON: Do I need to pull this off screen before I click it?

PTAH: You can click. It is going to be masked. You see the three dots next to the ingest license? Yeah. To the right. The last three?

JASON: These ones?

PTAH: Yeah, click that. You should copy that.

JASON: Should I create a new one for this --

PTAH: Yeah, let's create a new one and we will create this, yeah, we will create a user key and call it React Native. Boom.

JASON: Just to make sure I can remember what I did this for. And this was created -- OK. This is going to show me the key when I click create a key, right?

PTAH: Do that off screen. Just in case. This is the one we just created.

JASON: OK. So go ahead and -- did you clone the repo? I have not.

PTAH: We will come back to this. Let's go back to the terminal and clone the repo.

JASON: OK. Terminal here. I am going to grab this repo you just sent me. I am going to GIT, clone. There. Then we will go into React Native and I am going to --

PTAH: Cool. Run a make command.

JASON: I think this might be the first time that I have ever run a make command on Learn With Jason.

PTAH: And it worked. Look at that. Craziness.

JASON: That is great. [Laughter] You are like run Make and I am like, oh God, do I have Make installed?

PTAH: That's how far back we go. You see the two environment files? You will want to open those example ones so week go ahead and check that out -- we can. I have an apps folder and you have two here. One is called express and one is called Expo.

JASON: Both have the examples here?

PTAH: Yes, you want to use the env that was just created.

JASON: I am going to pull this off screen and drop. Let's talk about what each of these are because I don't think I have some of these. The API key I just made so I know what that one is. What's my license key?

PTAH: The license key is going to be used -- in this case, this is the expoapp? The license key, one is for the SDK itself, and another one is going to be for setting logs from the mobile app to New Relic. You see the first line? Logs URL? There is two. That's the first key you just copied over.

JASON: OK.

PTAH: Yeah. We will go back to New Relic.

JASON: This is the first one and I will have to generate the second one?

PTAH: Correct.

JASON: I am pulling this off screen and to grab the API key and put it in the dot env and not the example.

PTAH: That's the first API key you have. Perfect.

JASON: Do I need to create the license key?

PTAH: Yeah, let's do that. You see the add data? Search for iOS. Let's find iOS. Did it not --

JASON: There it is. Didn't refresh. Go ahead and click on that. Give your app a name. Skip all these instructions.

PTAH: It is going to show the key so grab that off screen.

JASON: OK. Going on down. Integrate. OK. It shows me that this is the application token?

PTAH: Correct. That is going to go where it says license key. And then the nmra? That goes where the license key value is.

JASON: OK. Got that.

PTAH: Great. We are going to do the same thing again. Let's go back to New Relic and add more data. I am closing this window and I am coming back. Do a search for node. Node. Package manager is fine. Give it a name. API, yeah.

JASON: API? OK.

PTAH: Don't scroll down.

JASON: This one is going to go in my express app?

PTAH: Correct. That's going to go in the express app.

JASON: I am going into the express app and putting in the license key. I have an NRIA license key?

PTAH: It is the same value?

JASON: Same value for both? There is an open AI API key.

PTAH: I just dropped that in the chat.

JASON: And there is another one for replicate API.

PTAH: Yup. You can have some fun with those.

JASON: OK. Closing down the dot env files.

PTAH: Now your express app should be 8 lines long full of goodness and --

JASON: Eight lines, yup. Each one has a value.

PTAH: And expo is three lines.

JASON: Three lines and each has a value. Pulling this back across. We are ready for business. Let me get down to here. I am going to continue so that there is nothing on the screen. Continue again. And all right. So this puts me, I have basically just gone through the installation. We haven't tested the connection because we haven't turned anything on but I have my env files. These are loaded up with values that are set and here we have these values set again.

PTAH: Yeah.

JASON: OK.

PTAH: Sweet. All right. So let's actually go back to the main folder terminal.

JASON: Back to my terminal.

PTAH: Yeah. And go ahead and run Make API.

JASON: OK.

PTAH: See what happens there. Oh, there we go.

JASON: Let me see if it Docker is on.

PTAH: That will help. Those hidden dependencies I tell you.

JASON: I think I use Docker like once a year always for an episode so I usually don't have it running.

PTAH: OK.

JASON: Now we are good I think.

PTAH: Go back and rerun that Make command.

JASON: Try again. Let's see. Unknown description failed to solve with front end Docker file, failed to read Docker file. Something about a -- am I missing -- do I have to do a Docker prep or something? Is there anything in here that would be --

PTAH: You know that actually -- is there a Docker file in there?

JASON: Is there a Docker file in here? That's a great question. I have a Docker compose but don't see an actual Docker file.

PTAH: That is funny. All right. First bug.

JASON: [Laughter]

PTAH: Let me drop that over here. Go ahead and drop this in the -- go ahead and drop that in the express folder.

JASON: OK. I am copying this file here. I am going to create in Express a Docker file, right?

PTAH: Yeah.

JASON: Is there an extension on a Docker file?

PTAH: No.

JASON: Is it capital?

PTAH: Yup. That's perfect. You will see here we are just installing the New Relic agent and the CLI which are optional but it starts on line 7 and creates a node for a back end.

JASON: It will install node and NPM and sets up our work directly via Express and then copies --

PTAH: Take out the lines 13 and 14. Go ahead and run Make API.

JASON: OK. Hey, look at that. We got data.

PTAH: We got data. So by the end of this, we should have a running server running on local host port 3,000.

JASON: Very cool.

PTAH: While you are at it, pull up your network settings so we can get your local IP. Yeah.

JASON: Whoops that's the wrong one. Network. Oh, that's not it. Where did the -- here it is. OK. There we go. Network. It does not show your IP here

JASON: It should be in here somewhere.

PTAH: Copy that 192 if you can.

JASON: OK. Oh.

PTAH: What's going on here? Exit code 17?

JASON: NPM CI command can only install with an existing package lock JSON.

PTAH: That will help if we run NPM install in the Express folder.

JASON: Express. Where am I?

PTAH: CDapps express.

JASON: NPM install.

PTAH: And rerun that build and that should get that kicked off correctly.

JASON: OK. Oh, boy. Still getting used to this keyboard.

PTAH: Oh, you've got the new --

JASON: I got one of these what's it called? An ergo doc that is a split keyboard with the thumb keys and stuff. It is great. I love it. My wrist feel way better but I still don't any where any of the buttons are. Failed to create shim task OCI runtime create failed and --

PTAH: Now it is complaining about those entry points. Let's go back to that Docker file.

JASON: Oh, it is trying to do this entry point and we deleted that entry point.

PTAH: I was like we don't need that why actually do.

JASON: Should I get rid of the Make request one?

PTAH: Yeah, get rid of that. Did we not delete this? What you are missing now is the actual entry point file.

JASON: We are using right along here. This is an episode where I have no idea what's going on. I am very much at sea right now so I am glad I'm with a pirate.

PTAH: Arr! I got your little entry point. I will just drop it in Zoom. It is fairly straightforward. Just save that value as entry point.

JASON: OK. I am putting that in --

PTAH: You can put it into the express root directory and modify line 13.

JASON: Got it. And we will call it entrypoint.sh. Is a piece missing or is it supposed to end with an and like that?

PTAH: I want to say yes because that keeps it running. Let's remove the Docker part because it isn't in a sub-folder. Take away the forward slash. Make it an API. Should be that simple. This is. OK

JASON: We are so close. So close. We didn't run the CH mod.

PTAH: Apps express. Entry point.

JASON: Then we go apps express, entry point. What's the one where you get all the details? AH?

PTAH: LL probably?

JASON: We should be good now. This time.

JASON: What am I doing?

PTAH: Now I am questioning the ampersand but go ahead. If you go back to the Docker file we have the CH mod there. Reset permissions.

JASON: We do have the CH mod.

PTAH: Maybe it needs to be extra special today? Yeah, it shouldn't exit. Go back to -- remove that ampersand. Yeah. Take that out.

JASON: OK.

PTAH: I am so glad I have the build here so it avoids the cache. Missing script dev.

JASON: We are getting here. This is the one. Things are happening. Are we in business?

PTAH: We are in business. Go to local host and check out the browser.

JASON: 3,000.

PTAH: Yup. Yes!

JASON: We got ourselves a hello world running in Express on Docker and I used a dang Make file today, everyone.

PTAH: So you should see that populate in New Relic as well.

JASON: Cool. All right. This is New Relic. OK. Am I testing my connection? OK. Maybe just hit the local host one more time. Just to wake it up. Cool.

PTAH: I sent you another text for the React Native agent. So go ahead and navigate to the expo directory and NPM install.

JASON: I am going to keep that one running, I assume?

PTAH: Yeah, keep that one running.

JASON: OK. And I want to install New Relic React Native agent?

PTAH: That's correct.

JASON:. All right. Here we go. OK. Is it possible that I screwed something up here?

PTAH: Hmmm. So if you go back to -- ah. The environment variable? So the environment variables are there. Let's just go to, you see on New Relic, click on AM -- APM and services. There it is. It is UI. It is there.

JASON: It is working? Cool. We got data.

PTAH: We got data coming in. Nice. Now we have our backend instrumented successfully. Let's go ahead and instrument the mobile app.

JASON: OK. So I have run my install.

PTAH: Yeah. OK. So you run the install. Let's go back to VS code. You are going to want to add that plugin. Because we are using expo this is a managed expoproject and let's open up the app.JSON here.

JASON: Here?

PTAH: Yeah. You should see that exposection there. Go ahead and add this to the expo.

JASON: So I am setting up a new plugin oh there is going to be a plugins key.

PTAH: Correct. Boom.

JASON: We add in that New Relic React agent we installed. This is telling expowhen you load --

PTAH: Include us.

JASON: And the expoplugin system, like there is tons of them, so this is just a really nice way to not have to do any of the wiring up work ourselves, right?

PTAH: Exactly. If you go ahead and go to package.json file there should be a command clean and rerun build and npm run prebuild. This will just reconfigure the build to let it know that hey, we are going to install our SDKs. It has native bindings and just needs to tell expo.

JASON: Can I just use the default here?

PTAH: Yeah, defaults are fine. Anonymous. Yeah. It is using the config plugin to run through to build up the installs. Let's just ignore that.

JASON: Keep going. I don't have cocoa run CLI. If that error doesn't cause anything to break I am going to live with that error.

PTAH: This is showing me it is resetting the game definitely. What you will see is it will show you the Android and iOS folder now. That was previously tucked under the hood. You can ignore those files for now. It is a managed expoproject. This is just waking it up. You will run npm iOS and it is doing all the work for you.

JASON: This is the cocoa pod CLI.

PTAH: Go ahead and run npx code install.

JASON: Like that?

PTAH: It is having a problem with that, I guess.

JASON: Install pods. Invalid pod file. What the heck is a pod file?

PTAH: That's the Ruby gem file with all the dependencies. Why is it complaining?

JASON: Undefined method exists. I bet I am using --

PTAH: What version of Ruby do you have?

JASON: 2.6.

PTAH: That should be good. I have 2.7.

JASON: You think maybe this exist method got added in 2.7?

PTAH: That's way too convenient.

JASON: This to me looks like something that is the language is adding a thing. This looks like an error when you use an unsupported JavaScript feature. And you have to update your node version or something.

PTAH: What was your version again?

JASON: 2.6.

PTAH: OK. Yeah. React Native's 2.68. So you should have the minimum. You ran through the X code command line install? You should already have that, right? Yeah.

JASON: Um. Wait. What is the --

PTAH: X code.

JASON: X code select, right? X code select version.

PTAH: This is going to take me for a spin.

JASON: We just installed this like last week.

PTAH: Navigate to the iOS folder. On the terminal.

JASON: In the terminal?

PTAH: Yeah. And go ahead and run bundle install. See if that will work. Space. Yeah.

JASON: Could not locate gem file.

PTAH: But it is a pod file. OK. All right. So bundle exec pod install. No dash.

JASON: Oh. It does not like something. This is my nightmare because I don't write Ruby and I have no idea how to begin debugging this.

PTAH: This is definitely -- mobile development takes you down a rabbit hole I have to say. One of the things, if we can do this --

JASON: So was it in here that we had the exist?

PTAH: Yeah.

JASON: No, it is not even in this file. It is in a subfile.

PTAH: It's a dependency.

JASON: I don't know how to -- like if it was JavaScript I would just go and edit the file to get rid of the exist.

PTAH: Let's nuke node modules and run a prebuild one more time. Yeah.

JASON: Like the node modules in here?

PTAH: Correct.

JASON: OK. And try again?

PTAH: Try the prebuild again.

JASON: Run prebuild.

PTAH: Yeah. Yes.

JASON: Your working tree is dirty. Don't judge my housekeeping.

PTAH: Don't judge. This part here couldn't -- scroll back up. Invalid pod --

JASON: Verinos in the chat is saying we should run bundle init. Our ingestion handler is using something we don't have support for. This feels very much like -- I am just going to see.

PTAH: It's got to be the Ruby version. Little side quest. All right.

JASON: OK.

PTAH: I am going to drop this in here but it might help if we can get another version of Ruby on.Al that will install Ruby add manager. Extra side quest. I remember starting off, again, in web development, and wanting to have full control over what gets displayed on the page and that's why I switched over to the flash. You had to re-create the navigation and basic intuition for accessing a site or an application here. Go ahead and run that too. It is just another can of worms.

JASON: I got the key. What do you want from me? Server indicated a failure.

PTAH: Yeah. Run this.

JASON: Run this one?

PTAH: No, the one I sent you in the chat.

JASON: Let me try it again. This one? Installing rvm. Hey!

PTAH: All right. Got to get these gems. Maybe we could switch while it is going background we can talk about the structure of the apps we just downloaded.

JASON: Let's do it.

PTAH: The backend is fairly simple if we want to start with Express.

JASON: I am in express and we have index.

PTAH: There is an index file. So I have got some end points. The main wan online 22 is basically going the main route. I have some artificial load there just to simulate slowness. But it is eventually going to respond with hello world. This endpoint sends a payload to replicate which is a service to basically generate images from text.

JASON: OK.

PTAH: That has a follow-up route because once you run a prediction it take as minute. This is a great example of stimulating latency. This is line 66 and it is taking that initial request and getting the image actually. It is kind of like a service worker type deal. Keep scrolling down. It is doing a bunch of routes. The last route 89 is opening. Here it checking to make sure you have the right API key. Then it is going to take in a prompt and respond with the autocompletion.

JASON: OK. Gotcha.

PTAH: It is going to use the da Vinci gpt generally pre-trained model transformer to basically do the same thing you would use for chat gpt or gpt3.5. It is one of those that will use the API version that and allow us to use it with a normal application.

JASON: Cool. OK. All right. I gotcha. That's our API. And then the mobile app consumes this?

PTAH: Everything is inside the app folder. This is using the new Express router which is a file based router. You can see here some exercises there. When you click on -- let's click on open AI for example. You see the to do there on line 18? We will basically handle an exercise where we can take the text input and post it to the backend using a fetch and take the response and return it back to the interface. Great.

JASON: That's installed. We wanted to run NPM prebuild.

PTAH: One moment. I don't know if that will work just yet. You see that source rvm? Go ahead and do that.

JASON: Wait. Hold on. Source --

PTAH: Yeah. Yup. It is kind of blitz. Yup. Oh, that's it. Yup. Scripts rvm.

JASON: Scripts rvm. OK.

PTAH: Now type RVM.

JASON: Just rvm?

PTAH: Go ahead and type rvm install 2.7.

JASON: Wait. Are we in 3.0 now? This is reporting like version 3.0. Is that's the prebuild.

PTAH: Npm run rebuild. I like to stick with the 2s but we will see. Anything going to do -- that's good.

JASON: All right. Cocoa pods. Do it.

PTAH: Give me some gems.

JASON: I need tense music.

PTAH: Yeah.

JASON: Man, I have the music is not the right music but I do have the ability to like put some music through. [Laughter] Just need exciting music.

PTAH: I got you. Put some black coffee on there.

JASON: We can't do any music we need a license to otherwise they will mute the audio when we put it on YouTube. I have a sound account and I will see if I can find some for my pads for different moods.

PTAH: We can make our own beats. That's not a problem.

JASON: Yeah, there we go. It is doing a lot more than it did last time so fingers crossed it has gotten beyond the gem file piece.

PTAH: Yeah. I like green. Green is good.

JASON: It installed the cocoa pod CLI. We got run step further than last time.

PTAH: That's mobile development. It is so interesting. Once you get away from these hurdles it is like compared to a web developer it is like how do you -- what's different? Navigation is different. You want to add animation said more so than the web so it is like the experience you don't want to have a mobile app that's static. It just has forms and inputs and it isn't fun to fill out. You want it to float around and be really interesting. I think I have native win installed in there as well to help with that. Oh, we are good.

JASON: Look what happened? The thing did the thing and now -- OK. All right. All right. Now we got to speed run this because we have like 32 minutes left.

PTAH: Let's navigate to, yeah. Npm run iOS.

JASON: Expois firing up and expoif I remember correctly is going to open up the emulator so I have like a little phone screen on my computer?

PTAH: Yup. Yup. Oh, yeah, it is going to show you a little QR Code thing so you can pull it up on your phone too while you develop.

PTAH: This is the config happening behind the scenes rejigging expo to incorporate the New Relic SDK. It is like let me recompile the whole thing. That's cool. This is good. You are in jolly territory.

JASON: Chat is having good ideas about how we can play with music and memes. I used to have a bunch of commands so people could make noise on the screen when I rebuilt the scenes I didn't have time to put them back in so they have been dead for a while. Really want to bring them back.

PTAH: All right. Just 20 more minutes. Looks like it is about to ramp up.

JASON: Please work for us. Good. We are good. I want to open an iOS simulator so I am going to hit I. I could scan this QR Code if I wanted to look at it on my phone but I am not configured to show my own without holding it up here so --

PTAH: We don't have to do that right now.

JASON: I do have intentions of getting an overhead camera so we can do the like phone on the mat kind of demo stuff but I don't know do enough mobile development. I almost never need my phone to be visible but I got another one coming up with Retool where we will build an internal Native app and so I was like OK, I am going to figure this out and make it work. We have got our emulator is open and we have -- I love you gave it a pirate patch. That is incredible. [Laughter]

PTAH: It is working.

JASON: All right. OK. We did a thing. We have got -- here is our app. What are you fighting with me about?

PTAH: No, this is good. Go ahead and press R. You can do command -- there you go. R just kind of refreshs the animation. This screen is because expo works based on file based routing and I intentionally did not add an index.js file. I like this view because we can jump around and see the different routes that are in the folder here. Let's jump into the first exercise. We are in. We see the hello world here. If we open up the exercise, actually, so you have the terminal one open so you can see the console log, right?

JASON: I am going to take this one and put it here and take this and move it up here. I was going to put it in here but I don't want to wait for it to boot. We are putting the terminal down low and have the code up here and I am ready. Let me open up exercise hello.

PTAH: On the line 8 it says fix the rerender issue in this component. If you click on add fooor add bar you will see the log rerender both components essentially and that's not cool. Gotca. If we scroll down, we can see in 27 and 28 they start off with the same state and then if you scroll down some more, then is basically using the same component, right? Online 42 and 44 but using different values. Technically they should be different and if you update one it should only rerender that one and not the whole tree. So how do we avoid that? That's the exercise for this one.

JASON: Interest of time I will have you jump to telling me what to do so we can get through one of the next ones.

PTAH: Let's go ahead and use memo. At the top of the imports, I believe this is from React. Add memo there.

JASON: OK.

PTAH: Just add memo not even use.

JASON: Just memo.

PTAH: Yeah, just memo for now. For line 9, wrap that whole component with memo. Yup.

JASON: I add and it is just the one.

PTAH: This is a common performance glitch I see in mobile applications. That's solving it with using memo and now just cache the value.

JASON: We are logging this very much in the way I would expect to log like we are using straight up console logs. Are these showing up in New Relic as well?

PTAH: There is a folder in their called components. If we go, we have an analytics component and a logger component. Let's check that out.

JASON: OK.

PTAH: This logger component natively the SDK doesn't send the actual console logs to us but we can actually support that by actually just sending it using the logs API. Actually sending it -- if you want to go add that to the exercise file you can import this logger.

JASON: I go here and then import logger. Is it the default or unnamed?

PTAH: It is the default.

JASON: Pull logger from logger.

PTAH: Swap that console log with logger. Yeah. Save. It creates info and runs it.

JASON: Now it is not logging in the console and it is logging in New Relic.

PTAH: Correct. And we can check that out.

JASON: Here is our stuff going on. Things are happening.

PTAH: Our backend API. Let's go to mobile on the left. You will see a little mobile tab there. At the bottom, it doesn't have logs built in but what you do have is the bottom of this -- so, click on your profile username. And then do a search from log. OK. Select all. Scroll over to the right. Boom. Here we can see these are logs coming from the backend but we can also -- add another query there. Where. Source. Yup. Tab. Equals. It hasn't picked it up yet but you will see it should. It should be API.logs. Give it a second. It will show up in here. It is a [indiscernible] value.

JASON: Should I refresh the page and try it API.logs?

PTAH: Yeah, lowercase logs. And then let's go back to the app because actually it should still show you the logs printed there. We have got it imported. Let's reload the app just to make sure. Yup. Yup. OK.

JASON: Maybe I am doing something wrong here? I have got my logger.

PTAH: Yeah.

JASON: And something is failing.

PTAH: Yeah, something is failing. I am wondering if it is getting those values from the environment correctly.

JASON: We are not using our New Relic API key. Do I need to --

PTAH: Yeah, swap that out actually. Yup.

JASON: OK.

PTAH: And then check your babel as well. Babel RC file. Because that environment file gets picked up from the Babel. Yeah. We see the dot there. That means it is registering it correctly.

JASON: OK.

PTAH: There is also...

JASON: This doesn't have -- does this have autocomplete?

PTAH: It should have like a dot error.

JASON: Something feels like this is giving us something else.

PTAH: Let me see your babel config just one more time. Yeah. OK. That looks good.

JASON: Is there a way -- because I am actually -- I am somewhat convinced --

PTAH: You have to log the logger itself.

JASON: OK. So that is --

PTAH: There it is.

JASON: That's running and doing the thing but it is not getting past here. Now this is how I debug.

PTAH: Yup. Yup.

JASON: That's still doing the thing. Then we throw it down here and it doesn't do this part. See? So it is failing to get through here.

PTAH: Log that catch error. Throw a console log there. That's going to tell you something. Boom.

JASON: Network response was not OK. OK.

PTAH: I am really thinking it is not picking up that environment variable. Do a console log on the URL. That will tell us. Online 13.

JASON: This one?

PTAH: Yeah. Yup. See if it prints that. If it can get that it can get everything else. It is getting that.

JASON: That has we wondering if I have the wrong API key.

PTAH: Oh, we might need to swap them.

JASON: I am going to roll the API key but in the interest of time tell me which one I need. I am going to API keys and I am going to look at my -- this is the one I created; right?

PTAH: Yup.

JASON: What I did was I copied the key.

PTAH: Yes. That's correct.

JASON: And then when I took that key, I put it in, I am going to use the example, I put it here. And yeah, I put it here. That's the right one?

PTAH: That is the right one, yes. That's the one being used in that file.

JASON: Let me pull it off screen and double check that is in fact what I have done. It starts with nrak.

PTAH: No, it should end with nril.

JASON: OK. Then I am getting the wrong thing.

PTAH: Nrik, I see that. I see. Just for kicks try the one right above it.

JASON: The ingest license?

PTAH: Yeah.

JASON: This one ends in nral.

PTAH: That's it.

JASON: I am reloading now.

PTAH: It is still not happy.

JASON: Still not happy with that key. Which one is this? Oh, this is node.js. Do I need to create an agent license key for my expo?

PTAH: No. That should be fine. OK.

JASON: Is there a different kind of key I can make?

PTAH: It is just the user. It should be your user key. And the user key is the one that for me is starting with nrak. My user key starts with the letter e9 kind of like the --

JASON: It is like a hash?

PTAH: Yeah but ends in nral. It is like, OK, look at the bottom, the one right below. Try that license key.

JASON: This one I think is for a different app? Yeah. That one ends in nral. Just for one, let's try it and see if it makes a difference. Like maybe I just need to stop and restart?

PTAH: It is an environment variable. Yeah. It won't pick it up immediately.

JASON: Let's see if it will grab that.

PTAH: You need to do the whole prebuild.

JASON: I didn't do the prebuild again. But it still doesn't like that one. It is fighting us.

PTAH: In the interest of time, let's go ahead and check out the stable diffusion example.

JASON: We are going into stable diffusion. Got my -- let me get the end.env closed. We are moving back over here and I am going to open up. OK. Here.

PTAH: Line 18 swap out that IP address with yours. Do a search because there is two of them.

JASON: OK. I am going to open up network again. I am going to grab my IP address.

PTAH: 121192. Yeah. That's for both? I just

JASON: I replaced everything in this file.

PTAH: Let's scroll down now. This is the actual submit logic. Wait, we don't have to write all of that. That's already there. Scroll down and basically this is the part where I just sent you a chat. We are growing to add an input field and a button to trigger the logic.

JASON: And I am replacing all of that with the code you sent me? We have a text input, we have got a button, and if I go back to go to stable diffusion this is going to... we can dream something with stable diffusion.

PTAH: There is already a preconfigured text there. Click generate. If you look at the route request, you will see how we are using the New Relic API to capture, if you are using third party calls you want to understand how long the calls took and that's the great example of capturing it. You built it and rely on third party APIs and this is just an example of using that and here we use a third party API to generate some images.

JASON: When I come back and I am looking at apm, wouldn't it be apm because it is the node API?Page yeah, it

PTAH: Yeah, it is the node API but it is both.

JASON: Which one do you want me to look at?

PTAH: Check out the node API because that will show you the route.

JASON: This is going to give us --

PTAH: Click on transactions.

JASON: Transactions. OK.

PTAH: It is not picking up anything here? Making sure we aren't using a remote. Do a hard refresh. This is interesting. I have to get some coffee here.

JASON: Here we go. We got something.

PTAH: Jesus.

JASON: All right. We have transactions. Am I looking for a specific one?

PTAH: Go to the summary page just to --

JASON: Summary.

PTAH: It is coming in here. If you scroll down, you will see the actual logs coming in. You will see the host. Yeah, that's the Docker host. The Docker container there. It's not picking up -- it is still probably coming in here but you see it is capturing and click on logs. Yeah, click on that. You will see some logs coming in from the environment. You see prediction. This is coming from the API route. It is just taking the API some time to update but these are the calls actually in the backend.

JASON: Gotcha. How would we, in the interest of time, we have about probably 5-ish minutes left, how would we start taking this to sort of build a picture of what's going on in our app? You know, for me, this is like I can see what's happening here.

PTAH: Click on it.

JASON: There is nice highlighting. How do I start as the developer when I am lock logging my node API and we get the mobile apps logging, how am I supposed to start building a mental model around using this?

PTAH: If you click on one of the entries it will highlight where it came from, the log info, the source. You can see the application it came from. This is just looking at logs. But if you want to take like a 50,000 foot overview of what is going on that's where the summary page comes in handy. Let me see if we can zoom out just a little bit here. You can see the throughput, error rates, logs that are coming in. This at a high level will give you an idea of what's the performance of my backend API here. If we swap over to the mobile view --

JASON: Mobile view was in here?

PTAH: Yeah, mobile right there. Click into that. You might need to do another hard refresh. By default for development builds it doesn't capture crashes. That's only in the production environment. But you will see errors at the high level as a mobile application, you would want to -- this is the first thing you will see is app launches and you will see the actual versions that your app is using at the top. You see crashes by app version. You can get an idea if you make a new deployment, is that actually impacting our actual end users for example.

JASON: Cool. Yeah. You know, it looks like, you know, we were able to build out like our simulator here. We were able to get some fun with the stable diffusion API. We were able to build out the -- I don't know. Got to be out there. Apparently I can't deselect. I don't know how. Well, we live in here.

PTAH: Go ahead and type something completely different there.

JASON: Let's do a corgi with a top hat. And so this is really fun. We were able to do a little bit of, you know, we got the mobile app working. We got basic inputs and expo and React Native make that more friendly than it would be if we were trying to write it on our own especially for someone like me who is a React developer. I mostly understand what is going on. With the New Relic setup here being able to go into our API and like look at this summary to see here is what's coming in and kind of here is what the errors and the logs and all of that are. This is really handy for getting a like clear insight into what's going on into the app. I love it. So the nice thing about this is that for me, I like building things as like small microservices. I like having an API that does API things and I like having my website, I like having my scenes over here and all of that and what that means is that right now I don't have a lot of visibilities into what's going on. If I can build a dashboard where I am pulling in the logs from my APIs, the logs from my website, the logs from my scenes, and all the other services that run the Learn With Jason empire and I can see not just the logs but like what is the error rate? Are things crashing? Are a lot of people hitting this service? Do we have a huge influx in traffic somewhere where I need to pay attention where everybody is hitting this server and maybe I should add more resources or whatever it is. That sort of visability is really helpful I think in just -- visibility -- feeling less stress overall about how I am running applications online.

PTAH: If you open up the navigation on the left hand side there and you want to click on all capabilities. We haven't even scratched the surface but if you type workloads -- yeah. Click on that. This is where we can create a collection, right? If you have multiple backend APIs, front-end API, if you have synthetics like you want to actually test proactively your front end, you can group them all together just using a tag.

JASON: Nice. That's something we are going to do later this week with Daniel. We are going to do some synthetics and that's going to be a lot of fun. Make sure you tune in for those. That I think brings us to the end of our time. For somebody who wants to go deeper with React Native and setting it up with observability, is there a specific guide or tutorial that you would recommend we send everybody to?

PTAH: Yeah. I will post that link as well.

JASON: OK. There is a question on which model give us this? That is the da Vinci model?

PTAH: Yeah, da Vinci 3. If you look in the chat, I believe I sent you -- no, I actually didn't. That actually is using stable diffusion.

JASON: Oh, right.

PTAH: We haven't even touched openAPI. I can give you that and sent you that code there so you can add that to the openAPI exercise and that can show you the response from da Vinci 3.0.

JASON: I know we started from a starter repo. Do you have the working version? I will link to yours instead of mine so people can get the working version.

PTAH: Yeah. I can definitely post that as well.

JASON: OK. Great. Let's grab that tutorial first so we can get everybody set. We'll make sure that there is a link in the show notes for the source code so you can go and get the working version. This is going to be your React Native setup. And the GitHub repo will follow soon. With that, I think we are going to call this one done. Ptah, thank you so much for hanging out with us. I am going to do one more quick shout-out to New Relic super sponsoring this and observability week. And thanks to ourcaing.T -- our captioner here. This week is observability week. We have Matt coming in tomorrow to talk about why should web developers care about logging. We will instrument a T3 app. If you have used create T3 app it is next. On Wednesday, Daniel Kim is coming in and we will do location based and learn what synthetics are. On Thursday we have nat Allison coming in to do generative art. This isn't part of the observability week but it will be fun. This is going to be a good week. We are doing four shows in four days. Ptah, any parting words for the chat before we wrap it up?

PTAH: Roll up your sleeves and make sure you have Ruby in our environment so you can get the solution working. I will definitely follow-up with the full solution. I have the exercise version sent out and you can post that and share that and your audience can complete the exercises there. Most of the work is already in there. It has both the API and the mobile app so you should be able to run it. I will make sure I update the Docker config so that should be more straightforward and intuitive. Thank you for having me. This was amazing.

JASON: Chat, thank you for hanging out. It has been a blast. We will see you tomorrow.