Skip to main content
Nais Docs
  • Home
  • Explanations
    • What is Nais?
    • What is a team?
    • Under the hood
  • Tutorials
    • Hello Nais
  • Workloads
    • 💡 Explanations
      • The runtime environment
      • Good practices
      • HTTP client connection management
      • Image repository
      • Migrating to GCP
      • The workload image
      • Zero Trust
    • 🎯 How-To
      • Set up access policies
      • Communicate with other workloads
      • Reduce costs
      • Debugging workloads
      • Disable read-only file system
      • Communicate reliably between GCP and on-prem
      • Overriding user and group that runs container process
      • Troubleshooting
      • Upload third-party image to image repository
    • 📚 Reference
      • Access policy reference
      • Container security
      • Default workload variables
      • Environments
      • Validation and autocompletion in editors
      • Webproxy
    • Application
      • 💡 Explanations
        • Exposing your application
      • 🎯 How-To
        • Create application
        • Delete your application
        • Expose an application
        • Redirect a client
      • 📚 Reference
        • Nais Application example YAML
        • Nais Application reference
        • Automatic Scaling
        • Ingress reference
    • Nais job
      • 🎯 How-To
        • Create job
        • Delete your job
      • 📚 Reference
        • Nais Job example YAML
        • Nais Job reference
  • Build and deploy
    • 🎯 How-To
      • Build and deploy with GitHub Actions
      • Dependabot with auto-merge
      • Templating
      • Using the image outside of Nais
    • 📚 Reference
      • Deploy action configuration
  • Auth
    • 💡 Explanations
    • 🎯 How-To
      • Log in users
    • 📚 Reference
    • Entra ID
      • 💡 Explanations
      • 🎯 How-To
        • Consume internal API as an application
        • Consume internal API on behalf of an employee
        • Generate a token from Entra ID for development
        • Log in an employee
        • Secure your API with Entra ID
      • 📚 Reference
    • ID-porten
      • 🎯 How-To
        • Log in a citizen
      • 📚 Reference
    • Maskinporten
      • 🎯 How-To
        • Consume external API using Maskinporten
        • Secure your API with Maskinporten
        • Expose FSS apps with KrakenD
      • 📚 Reference
    • TokenX
      • 🎯 How-To
        • Consume internal API on behalf of a citizen
        • Generate a token from TokenX for development
        • Secure your API with TokenX
      • 📚 Reference
    • Workload Identity
  • Observability
    • 🎯 How-To
      • Get started with auto-instrumentation
    • 📚 Reference
      • OpenTelemetry Auto-Instrumentation Configuration
      • Observability Glossary
    • APM
      • 🚀 Tutorials
        • Get started with Nais APM
        • Track frontend errors with @nais/apm
      • 🎯 How-To
        • Get backend exceptions into Issues
        • Create alerts from templates
        • Make database queries visible
        • Enable session replay
        • Use log patterns during an incident
        • Triage an issue
      • 📚 Reference
        • @nais/apm API reference
        • Issues and fingerprinting
        • URL and deep-link contract
      • 💡 Explanations
        • How Nais APM works
    • Frontend
      • 🎯 How-To
        • Custom frontend metrics
        • Migrate from Sentry to @nais/apm
        • Next.js quickstart with @nais/apm
        • React + Vite quickstart with @nais/apm
        • Set up Faro
        • Set up Faro with Next.js
        • Sourcemap deobfuscation
        • Frontend-to-backend trace propagation
      • 📚 Reference
        • Auto-configuration reference
        • Frontend observability troubleshooting
    • Tracing
      • 🎯 How-To
        • Avoid false errors from expected 4xx responses
        • Trace context propagation
        • Correlate traces and logs
        • Get started with Grafana Tempo
      • 📚 Reference
        • Span Metrics
        • OpenTelemetry Trace Semantic Conventions
        • TraceQL Reference
    • Alerting
      • 🎯 How-To
        • Create alert in Grafana
        • Customize Prometheus alerts
        • Create alert with Prometheus
      • 📚 Reference
        • Prometheus Alerting Rule Reference
    • Logging
      • 🎯 How-To
        • Audit logs
        • Disable persistent application logs
        • View logs from the command line
        • Adding logs to your Grafana dashboard
        • Metrics and alerts for logs
        • Get started with Grafana Loki
        • Create alerts in nav-logs (OpenSearch Dashboards)
        • Get started with nav-logs
        • Get started with Team Logs
      • 📚 Reference
        • Log Destinations
        • DQL Reference
        • LogQL Reference
        • Loki Labels Reference
        • Loki Metrics Reference
    • Metrics
      • 🎯 How-To
        • Create a dashboard in Grafana
        • Expose metrics from your application
        • Show Grafana on infoscreen
        • Push metrics to Prometheus
      • 📚 Reference
        • Global Metrics
        • Grafana Glossary
        • Metrics reference
        • OpenTelemetry Metrics
        • PromQL Reference
    • Tutorials
      • Getting Started with Observability in Nais
      • Adding Custom Spans and Metrics with OpenTelemetry
  • Persistence
    • 💡 Explanations
      • Responsibilities
    • BigQuery
      • 🎯 How-To
        • Using BigQuery from your application
        • Create an instance of BigQuery
    • CloudSQL
      • 💡 Explanations
        • Cloud SQL credentials
        • Cloud SQL Instance
        • Cloud SQL Proxy
        • Cloud SQL System Users and Roles
        • Grants and privileges
        • Migrate to new instance
        • Non-personal database users
      • 🎯 How-To
        • Additional users
        • Certification sync issues
        • Change the tier of your database instance
        • Connect to a cloned database
        • Postgres database metrics
        • Debugging
        • Deleting the database
        • Enable audit logging
        • Failing to assign private IP to an existing Cloud SQL instance
        • Migrate to new instance
        • Migrating databases to GCP
        • Workaround for password synchronization issues
        • Personal database access
        • Reset database credentials
        • Shrink Cloud SQL disk size
        • Upgrade major version
      • 📚 Reference
    • Buckets
      • 🎯 How-To
        • Create a bucket
        • Deleting a bucket
      • 📚 Reference
    • Kafka
      • 💡 Explanations
        • Working with Kafka Offsets
        • Tiered storage
      • 🎯 How-To
        • Accessing topics from an application
        • Create a Kafka topic
        • Delete Kafka topic and data
        • Using Kafka Streams with internal topics
        • Manage access
        • Remove access to topics from an application
        • Avro and schema
        • Get temporary Kafka credentials
        • How to turn on Tiered Storage for your Kafka topic
        • Troubleshooting
      • 📚 Reference
        • Environment variables for Kafka
        • Nais Topic example YAML
        • Nais Topic reference
        • Kafka metrics
        • Kafka Pools
    • OpenSearch
      • 🎯 How-To
        • Create OpenSearch
        • Use OpenSearch in your workload
        • Delete OpenSearch
        • Create an OpenSearch instance (legacy)
        • Get access to the dashboard
        • Migrate OpenSearch management to Nais Console
        • Get temporary OpenSearch credentials
        • Upgrade major version
      • 📚 Reference
    • PostgreSQL
      • 💡 Explanations
        • Postgres cluster
      • 🎯 How-To
        • Connect from laptop
        • Postgres database metrics
        • Debugging
        • Deleting the database
        • Upgrade major version
      • 📚 Reference
        • Nais Postgres example YAML
        • Nais Postgres reference
    • Valkey
      • 🎯 How-To
        • Create Valkey
        • Use Valkey in your workload
        • Delete Valkey
        • Create a Valkey instance explicitly (legacy)
        • Migrate Valkey management to Nais Console
      • 📚 Reference
  • Other services
    • CDN
      • 🎯 How-To
        • Upload assets to the CDN
        • Manage CDN assets
      • 📚 Reference
        • CDN Upload Action
    • Config
      • 🎯 How-To
        • Create and manage configs in Console
        • Use a config in your workload
      • 📚 Reference
    • Secrets
      • 🎯 How-To
        • Create and manage secrets in Console
        • Use a secret in your workload
        • Advanced: Secrets with binary data
      • 📚 Reference
    • Vulnerabilities
      • 🎯 How-To
        • Alert on vulnerabilities
        • Generate SBOM
      • 📚 Reference
    • Feature Toggling
    • Anti-Virus Scanning
    • Leader Election
      • 🎯 How-To
        • Enable Leader Election
  • Operate
    • 💡 Explanations
      • Labels
    • 🎯 How-To
      • Setup command line access
      • Create a Nais team
      • Add labels to your resources
    • 📚 Reference
      • Label reference
    • Nais Console
      • Nais API
    • CLI
    • naisdevice
      • 💡 Explanations
        • Just In Time Access (JITA)
      • 🎯 How-To
        • Install naisdevice
        • Troubleshooting naisdevice
        • Uninstall naisdevice
        • Update naisdevice
  • Tags
  • Legal
    • Application privacy impact assessments (PVK)
    • Application risk assessments (ROS)
    • Arkivloven
    • Vendor Data Processor Agreements
      • Aiven Data Processor Agreement
      • Azure Data Processor Agreement
      • GCP Data Processor Agreement
    • Nais continuity plan
    • Platform privacy impact assessments (PVK)
    • Platform risk assessments (ROS)
    • Responsibilities - Nais and teams
All tags

react

1 page

  • React + Vite quickstart with @nais/apm

    Instrument a React single-page app built with Vite using @nais/apm — init at the entry point, an error boundary, and React Router route tracking.