Monitor web apps

After you publish your apps, you can monitor them:

• If you publish with Firebase Hosting, you can link your Firebase project to Cloud Logging to monitor usage and access web request logs. Learn more at View, search, and filter your web request logs with Cloud Logging.

• If you use the App Prototyping agent to publish with Firebase App Hosting, you can use its observability features to monitor your web site's performance. You can also write logs to Cloud Logging and view logs and metrics in the Firebase console.

• If you use AI in your app with Genkit, you can monitor how your generative AI features are running in production.

Monitor your site performance with App Hosting observability

The App Hosting App overview panel provides key metrics and information about your app, letting you monitor your web app's performance using App Hosting's built-in observability tools. After your site rolls out, you can access the overview by clicking Publish. From this panel, you can:

• Click Create rollout to release a new version of your app.
• Share the link to your app or open your app directly in Visit your app.
• Review a summary of your app's performance over the last 7 days, including the total number of requests and the status of your latest rollout. Click View details to access even more information in the Firebase console.
• View a graph of the number of the number of requests your app has received over the last 24 hours, broken down by HTTP status code.

If you close the App overview panel, you can re-open it at any time by clicking Publish.

Learn more about managing and monitoring App Hosting rollouts at Manage rollouts and releases.

Genkit Monitoring for your deployed features

You can monitor your Genkit feature steps, inputs, and outputs by enabling telemetry to your AI flow code. Genkit's telemetry feature lets you monitor the performance and usage of your AI flows. This data can help you identify areas for improvement, troubleshoot issues, optimize your prompts and flows for better performance and cost efficiency, and track the usage of your flows over time.

To set up monitoring in Genkit, you add telemetry to the Genkit AI flows and then view the results in the Firebase console.

Step 1: Add telemetry to your Genkit flow code in Firebase Studio

To set up monitoring in your code:

1. If you aren't already in Code view, click Switch to Code to open it.

2. Check package.json to verify the version of Genkit that's installed.

3. Open the terminal (Ctrl-Shift-C, or Cmd-Shift-C in MacOS).

4. Click inside the terminal and install the Firebase plugin, using the version that matches your package.json file. For example, if the Genkit packages in your package.json are at 1.0.4, you should run the following command to install the plugin:

   npm i --save @genkit-ai/firebase@1.0.4

5. From Explorer, expand src > ai > flows. One or more TypeScript files that contain your Genkit flows appear in the flows folder.

6. Click one of the flows to open it.

7. At the bottom of the imports section of the file, add the following to import and enable FirebaseTelemetry:

   import { enableFirebaseTelemetry } from '@genkit-ai/firebase';
   
   enableFirebaseTelemetry();
   

Step 2: Set up permissions

Firebase Studio enabled the required APIs for you when it set up your Firebase project, but you also need to provide permissions to the App Hosting service account.

To set up permissions:

1. Open the Google Cloud IAM console select your project, then grant the following roles to the App Hosting service account:

   • Monitoring Metric Writer (roles/monitoring.metricWriter)
   • Cloud Trace Agent (roles/cloudtrace.agent)
   • Logs Writer (roles/logging.logWriter)

2. Re-publish your app to App Hosting.

3. When publishing is complete, load your app and start using it. After five minutes, your app should start logging telemetry data.

Step 3: Monitor your generative AI features on the Firebase console

When telemetry is configured, Genkit records the number of requests, success, and latency for all of your flows, and, for each specific flow, Genkit collects stability metrics, shows detailed graphs, and logs captured traces.

To monitor your AI features implemented with Genkit:

1. After five minutes, open Genkit in the Firebase console and review Genkit's prompts and responses.

   Genkit compiles the following Stability metrics:

   • Total requests: The total number of requests received by your flow.
   • Success rate: The percentage of requests that were successfully processed.
   • 95th percentile latency: The 95th percentile latency of your flow, which is the time it takes for 95% of requests to be processed.

   • Token usage:

     • Input tokens: The number of tokens sent to the model in the prompt.
     • Output tokens: The number of tokens generated by the model in the response.

   • Image usage:

     • Input images: The number of images sent to the model in the prompt.
     • Output images: The number of images generated by the model in the response.

   If you expand stability metrics, detailed graphs are available:

   • Request volume over time.
   • Success rate over time.
   • Input and output tokens over time.
   • Latency (95th and 50th percentile) over time.

Learn more about Genkit at Genkit.

Next steps

• Customize your Firebase Studio workspace.

• Develop, publish, and monitor a full-stack web app with the App Prototyping agent.