fix: infinite re-rendering of /logs/logs-explorer

change pathPattern options as well

.dockerignore

@@ -1,6 +1,7 @@
 .git
 .github
 .vscode
+.devenv
 README.md
 deploy
 sample-apps

.github/workflows/build-enterprise.yaml

@@ -73,7 +73,7 @@ jobs:
         uses: actions/cache@v4
         with:
           path: frontend/.env
-          key: dotenv-${{ github.sha }}
+          key: enterprise-dotenv-${{ github.sha }}
   js-build:
     uses: signoz/primus.workflows/.github/workflows/js-build.yaml@main
     needs: prepare
@@ -81,10 +81,10 @@ jobs:
     with:
       PRIMUS_REF: main
       JS_SRC: frontend
-      JS_INPUT_ARTIFACT_CACHE_KEY: dotenv-${{ github.sha }}
+      JS_INPUT_ARTIFACT_CACHE_KEY: enterprise-dotenv-${{ github.sha }}
       JS_INPUT_ARTIFACT_PATH: frontend/.env
-      JS_OUTPUT_ARTIFACT_CACHE_KEY: jsbuild-${{ github.sha }}
-      JS_OUTPUT_ARTIFACT_PATH: frontend/build
+      JS_OUTPUT_ARTIFACT_CACHE_KEY: enterprise-jsbuild-${{ github.sha }}
+      JS_OUTPUT_ARTIFACT_PATH: frontend/build 
       DOCKER_BUILD: false
       DOCKER_MANIFEST: false
   go-build:
@@ -93,7 +93,7 @@ jobs:
     secrets: inherit
     with:
       PRIMUS_REF: main
-      GO_INPUT_ARTIFACT_CACHE_KEY: jsbuild-${{ github.sha }}
+      GO_INPUT_ARTIFACT_CACHE_KEY: enterprise-jsbuild-${{ github.sha }}
       GO_INPUT_ARTIFACT_PATH: frontend/build
       GO_BUILD_CONTEXT: ./ee/query-service
       GO_BUILD_FLAGS: >-

.github/workflows/build-staging.yaml

@@ -70,7 +70,7 @@ jobs:
         uses: actions/cache@v4
         with:
           path: frontend/.env
-          key: dotenv-${{ github.sha }}
+          key: staging-dotenv-${{ github.sha }}
   js-build:
     uses: signoz/primus.workflows/.github/workflows/js-build.yaml@main
     needs: prepare
@@ -78,9 +78,9 @@ jobs:
     with:
       PRIMUS_REF: main
       JS_SRC: frontend
-      JS_INPUT_ARTIFACT_CACHE_KEY: dotenv-${{ github.sha }}
+      JS_INPUT_ARTIFACT_CACHE_KEY: staging-dotenv-${{ github.sha }}
       JS_INPUT_ARTIFACT_PATH: frontend/.env
-      JS_OUTPUT_ARTIFACT_CACHE_KEY: jsbuild-${{ github.sha }}
+      JS_OUTPUT_ARTIFACT_CACHE_KEY: staging-jsbuild-${{ github.sha }}
       JS_OUTPUT_ARTIFACT_PATH: frontend/build
       DOCKER_BUILD: false
       DOCKER_MANIFEST: false
@@ -90,7 +90,7 @@ jobs:
     secrets: inherit
     with:
       PRIMUS_REF: main
-      GO_INPUT_ARTIFACT_CACHE_KEY: jsbuild-${{ github.sha }}
+      GO_INPUT_ARTIFACT_CACHE_KEY: staging-jsbuild-${{ github.sha }}
       GO_INPUT_ARTIFACT_PATH: frontend/build
       GO_BUILD_CONTEXT: ./ee/query-service
       GO_BUILD_FLAGS: >-

.github/workflows/integrationci.yaml

@@ -0,0 +1,55 @@
+name: integrationci
+
+on:
+  pull_request:
+    types:
+      - labeled
+  pull_request_target:
+    types:
+      - labeled
+
+jobs:
+  test:
+    strategy:
+      fail-fast: false
+      matrix:
+        src:
+          - bootstrap
+        sqlstore-provider:
+          - postgres
+          - sqlite
+        clickhouse-version:
+          - 24.1.2-alpine
+          - 24.12-alpine
+        schema-migrator-version:
+          - v0.111.38
+        postgres-version:
+          - 15
+    if: |
+      ((github.event_name == 'pull_request' && ! github.event.pull_request.head.repo.fork && github.event.pull_request.user.login != 'dependabot[bot]' && ! contains(github.event.pull_request.labels.*.name, 'safe-to-test')) ||
+      (github.event_name == 'pull_request_target' && contains(github.event.pull_request.labels.*.name, 'safe-to-test'))) && contains(github.event.pull_request.labels.*.name, 'safe-to-integrate')
+    runs-on: ubuntu-latest
+    steps:
+      - name: checkout
+        uses: actions/checkout@v4
+      - name: python
+        uses: actions/setup-python@v5
+        with:
+          python-version: 3.13
+      - name: poetry
+        run: |
+          python -m pip install poetry==2.1.2
+          python -m poetry config virtualenvs.in-project true
+          cd tests/integration && poetry install --no-root
+      - name: run
+        run: |
+          cd tests/integration && \
+            poetry run pytest -ra \
+            --basetemp=./tmp/ \
+            -vv \
+            --capture=no \
+            src/${{matrix.src}} \
+            --sqlstore-provider ${{matrix.sqlstore-provider}} \
+            --postgres-version ${{matrix.postgres-version}} \
+            --clickhouse-version ${{matrix.clickhouse-version}} \
+            --schema-migrator-version ${{matrix.schema-migrator-version}}

.github/workflows/staging-deployment.yaml

@@ -1,61 +0,0 @@
-name: staging-deployment
-# Trigger deployment only on push to main branch
-on:
-  push:
-    branches:
-      - main
-jobs:
-  deploy:
-    name: Deploy latest main branch to staging
-    runs-on: ubuntu-latest
-    environment: staging
-    permissions:
-      contents: 'read'
-      id-token: 'write'
-    steps:
-      - id: 'auth'
-        uses: 'google-github-actions/auth@v2'
-        with:
-          workload_identity_provider: ${{ secrets.GCP_WORKLOAD_IDENTITY_PROVIDER }}
-          service_account: ${{ secrets.GCP_SERVICE_ACCOUNT }}
-
-      - name: 'sdk'
-        uses: 'google-github-actions/setup-gcloud@v2'
-
-      - name: 'ssh'
-        shell: bash
-        env:
-          GITHUB_BRANCH: ${{ github.head_ref || github.ref_name }}
-          GITHUB_SHA: ${{ github.sha }}
-          GCP_PROJECT: ${{ secrets.GCP_PROJECT }}
-          GCP_ZONE: ${{ secrets.GCP_ZONE }}
-          GCP_INSTANCE: ${{ secrets.GCP_INSTANCE }}
-          CLOUDSDK_CORE_DISABLE_PROMPTS: 1
-        run: |
-          read -r -d '' COMMAND <<EOF || true
-          echo "GITHUB_BRANCH: ${GITHUB_BRANCH}"
-          echo "GITHUB_SHA: ${GITHUB_SHA}"
-          export VERSION="${GITHUB_SHA:0:7}" # needed for child process to access it
-          export PATH="/usr/local/go/bin/:$PATH" # needed for Golang to work
-          export KAFKA_SPAN_EVAL="true"
-          docker system prune --force --all
-          OTELCOL_TAG=$(curl -s https://api.github.com/repos/SigNoz/signoz-otel-collector/releases/latest | jq -r '.tag_name // "not-found"')
-          if [[ "${OTELCOL_TAG}" == "not-found" ]]; then
-            echo "warning: unable to determine latest SigNoz OtelCollector release tag, skipping latest otelcol deployment"
-          else
-            export OTELCOL_TAG=${OTELCOL_TAG}
-            docker pull signoz/signoz-otel-collector:${OTELCOL_TAG}
-            docker pull signoz/signoz-schema-migrator:${OTELCOL_TAG}
-          fi
-          cd ~/signoz
-          git status
-          git add .
-          git stash push -m "stashed on $(date --iso-8601=seconds)"
-          git fetch origin
-          git checkout ${GITHUB_BRANCH}
-          git pull
-          make docker-build-enterprise-amd64
-          export VERSION="${GITHUB_SHA:0:7}-amd64"
-          docker-compose -f deploy/docker/docker-compose.testing.yaml up --build -d
-          EOF
-          gcloud beta compute ssh ${GCP_INSTANCE} --zone ${GCP_ZONE} --ssh-key-expire-after=15m --tunnel-through-iap --project ${GCP_PROJECT} --command "${COMMAND}"

.github/workflows/testing-deployment.yaml

@@ -1,56 +0,0 @@
-name: testing-deployment
-# Trigger deployment only on testing-deploy label on pull request
-on:
-  pull_request:
-    types: [labeled]
-jobs:
-  deploy:
-    name: Deploy PR branch to testing
-    runs-on: ubuntu-latest
-    environment: testing
-    if: ${{ github.event.label.name == 'testing-deploy' }}
-    permissions:
-      contents: 'read'
-      id-token: 'write'
-    steps:
-      - id: 'auth'
-        uses: 'google-github-actions/auth@v2'
-        with:
-          workload_identity_provider: ${{ secrets.GCP_WORKLOAD_IDENTITY_PROVIDER }}
-          service_account: ${{ secrets.GCP_SERVICE_ACCOUNT }}
-
-      - name: 'sdk'
-        uses: 'google-github-actions/setup-gcloud@v2'
-
-      - name: 'ssh'
-        shell: bash
-        env:
-          GITHUB_BRANCH: ${{ github.head_ref || github.ref_name }}
-          GITHUB_SHA: ${{ github.sha }}
-          GCP_PROJECT: ${{ secrets.GCP_PROJECT }}
-          GCP_ZONE: ${{ secrets.GCP_ZONE }}
-          GCP_INSTANCE: ${{ secrets.GCP_INSTANCE }}
-          CLOUDSDK_CORE_DISABLE_PROMPTS: 1
-        run: |
-          read -r -d '' COMMAND <<EOF || true
-          echo "GITHUB_BRANCH: ${GITHUB_BRANCH}"
-          echo "GITHUB_SHA: ${GITHUB_SHA}"
-          export VERSION="${GITHUB_SHA:0:7}" # needed for child process to access it
-          export DEV_BUILD="1"
-          export PATH="/usr/local/go/bin/:$PATH" # needed for Golang to work
-          docker system prune --force --all
-          cd ~/signoz
-          git status
-          git add .
-          git stash push -m "stashed on $(date --iso-8601=seconds)"
-          git fetch origin
-          git checkout main
-          git pull
-          # This is added to include the scenerio when new commit in PR is force-pushed
-          git branch -D ${GITHUB_BRANCH}
-          git checkout --track origin/${GITHUB_BRANCH}
-          make docker-build-enterprise-amd64
-          export VERSION="${GITHUB_SHA:0:7}-amd64"
-          docker-compose -f deploy/docker/docker-compose.testing.yaml up --build -d
-          EOF
-          gcloud beta compute ssh ${GCP_INSTANCE} --zone ${GCP_ZONE} --ssh-key-expire-after=15m --tunnel-through-iap --project ${GCP_PROJECT} --command "${COMMAND}"

.gitignore

@@ -80,6 +80,153 @@ deploy/common/clickhouse/user_scripts/
 
 queries.active
 
+# tmp
+**/tmp/**
 
 # .devenv tmp files
 .devenv/**/tmp/**
+.qodo
+
+### Python ###
+# Byte-compiled / optimized / DLL files
+__pycache__/
+*.py[cod]
+*$py.class
+
+# C extensions
+*.so
+
+# Distribution / packaging
+.Python
+build/
+develop-eggs/
+dist/
+downloads/
+eggs/
+.eggs/
+lib/
+lib64/
+parts/
+sdist/
+var/
+wheels/
+share/python-wheels/
+*.egg-info/
+.installed.cfg
+*.egg
+MANIFEST
+
+# PyInstaller
+#  Usually these files are written by a python script from a template
+#  before PyInstaller builds the exe, so as to inject date/other infos into it.
+*.manifest
+*.spec
+
+# Installer logs
+pip-log.txt
+pip-delete-this-directory.txt
+
+# Unit test / coverage reports
+htmlcov/
+.tox/
+.nox/
+.coverage
+.coverage.*
+.cache
+nosetests.xml
+coverage.xml
+*.cover
+*.py,cover
+.hypothesis/
+.pytest_cache/
+cover/
+
+# Translations
+*.mo
+*.pot
+
+# Django stuff:
+*.log
+local_settings.py
+db.sqlite3
+db.sqlite3-journal
+
+# Flask stuff:
+instance/
+.webassets-cache
+
+# Scrapy stuff:
+.scrapy
+
+# Sphinx documentation
+docs/_build/
+
+# PyBuilder
+.pybuilder/
+target/
+
+# Jupyter Notebook
+.ipynb_checkpoints
+
+# IPython
+profile_default/
+ipython_config.py
+
+# Celery stuff
+celerybeat-schedule
+celerybeat.pid
+
+# SageMath parsed files
+*.sage.py
+
+# Environments
+.env
+.venv
+env/
+venv/
+ENV/
+env.bak/
+venv.bak/
+
+# Spyder project settings
+.spyderproject
+.spyproject
+
+# Rope project settings
+.ropeproject
+
+# mkdocs documentation
+/site
+
+# mypy
+.mypy_cache/
+.dmypy.json
+dmypy.json
+
+# Pyre type checker
+.pyre/
+
+# pytype static type analyzer
+.pytype/
+
+# Cython debug symbols
+cython_debug/
+
+# PyCharm
+#  JetBrains specific template is maintained in a separate JetBrains.gitignore that can
+#  be found at https://github.com/github/gitignore/blob/main/Global/JetBrains.gitignore
+#  and can be added to the global gitignore or merged into this file.  For a more nuclear
+#  option (not recommended) you can uncomment the following to ignore the entire idea folder.
+#.idea/
+
+### Python Patch ###
+# Poetry local configuration file - https://python-poetry.org/docs/configuration/#local-configuration
+poetry.toml
+
+# ruff
+.ruff_cache/
+
+# LSP config files
+pyrightconfig.json
+
+# End of https://www.toptal.com/developers/gitignore/api/python

Makefile

@@ -10,7 +10,7 @@ COMMIT_SHORT_SHA        ?= $(shell git rev-parse --short HEAD)
 BRANCH_NAME             ?= $(subst /,-,$(shell git rev-parse --abbrev-ref HEAD))
 VERSION                 ?= $(BRANCH_NAME)-$(COMMIT_SHORT_SHA)
 TIMESTAMP               ?= $(shell date -u +"%Y-%m-%dT%H:%M:%SZ")
-ARCHS					= amd64 arm64
+ARCHS					?= amd64 arm64
 TARGET_DIR              ?= $(shell pwd)/target
 
 ZEUS_URL					   		?= https://api.signoz.cloud
@@ -23,6 +23,7 @@ GO_BUILD_ARCHS_COMMUNITY 		= $(addprefix go-build-community-,$(ARCHS))
 GO_BUILD_CONTEXT_COMMUNITY 		= $(SRC)/pkg/query-service
 GO_BUILD_LDFLAGS_COMMUNITY 		= $(GO_BUILD_VERSION_LDFLAGS) -X github.com/SigNoz/signoz/pkg/version.variant=community
 GO_BUILD_ARCHS_ENTERPRISE 		= $(addprefix go-build-enterprise-,$(ARCHS))
+GO_BUILD_ARCHS_ENTERPRISE_RACE  = $(addprefix go-build-enterprise-race-,$(ARCHS))
 GO_BUILD_CONTEXT_ENTERPRISE 	= $(SRC)/ee/query-service
 GO_BUILD_LDFLAGS_ENTERPRISE 	= $(GO_BUILD_VERSION_LDFLAGS) -X github.com/SigNoz/signoz/pkg/version.variant=enterprise $(GO_BUILD_LDFLAG_ZEUS_URL) $(GO_BUILD_LDFLAG_LICENSE_SIGNOZ_IO)
 
@@ -119,6 +120,18 @@ $(GO_BUILD_ARCHS_ENTERPRISE): go-build-enterprise-%: $(TARGET_DIR)
 		CGO_ENABLED=1 GOARCH=$* GOOS=$(OS) go build -C $(GO_BUILD_CONTEXT_ENTERPRISE) -tags timetzdata -o $(TARGET_DIR)/$(OS)-$*/$(NAME) -ldflags "-linkmode external -extldflags '-static' -s -w $(GO_BUILD_LDFLAGS_ENTERPRISE)"; \
 	fi
 
+.PHONY: go-build-enterprise-race $(GO_BUILD_ARCHS_ENTERPRISE_RACE)
+go-build-enterprise-race: ## Builds the go backend server for enterprise with race
+go-build-enterprise-race: $(GO_BUILD_ARCHS_ENTERPRISE_RACE)
+$(GO_BUILD_ARCHS_ENTERPRISE_RACE): go-build-enterprise-race-%: $(TARGET_DIR)
+	@mkdir -p $(TARGET_DIR)/$(OS)-$*
+	@echo ">> building binary $(TARGET_DIR)/$(OS)-$*/$(NAME)"
+	@if [ $* = "arm64" ]; then \
+		CC=aarch64-linux-gnu-gcc CGO_ENABLED=1 GOARCH=$* GOOS=$(OS) go build -C $(GO_BUILD_CONTEXT_ENTERPRISE) -race -tags timetzdata -o $(TARGET_DIR)/$(OS)-$*/$(NAME) -ldflags "-linkmode external -extldflags '-static' -s -w $(GO_BUILD_LDFLAGS_ENTERPRISE)"; \
+	else \
+		CGO_ENABLED=1 GOARCH=$* GOOS=$(OS) go build -C $(GO_BUILD_CONTEXT_ENTERPRISE) -race -tags timetzdata -o $(TARGET_DIR)/$(OS)-$*/$(NAME) -ldflags "-linkmode external -extldflags '-static' -s -w $(GO_BUILD_LDFLAGS_ENTERPRISE)"; \
+	fi
+
 ##############################################################
 # js commands
 ##############################################################
@@ -167,3 +180,20 @@ docker-buildx-enterprise: go-build-enterprise js-build
 		--platform linux/arm64,linux/amd64 \
 		--push \
 		--tag $(DOCKER_REGISTRY_ENTERPRISE):$(VERSION) $(SRC)
+
+##############################################################
+# python commands
+##############################################################
+.PHONY: py-fmt
+py-fmt: ## Run black for integration tests
+	@cd tests/integration && poetry run black .
+
+.PHONY: py-lint
+py-lint: ## Run lint for integration tests
+	@cd tests/integration && poetry run isort .
+	@cd tests/integration && poetry run autoflake .
+	@cd tests/integration && poetry run pylint .
+
+.PHONY: py-test
+py-test: ## Runs integration tests
+	@cd tests/integration && poetry run pytest --basetemp=./tmp/ -vv --capture=no src/

deploy/docker-swarm/docker-compose.ha.yaml

@@ -174,7 +174,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:v0.79.0
+    image: signoz/signoz:v0.79.1
     command:
       - --config=/root/config/prometheus.yml
       - --use-logs-new-schema=true

deploy/docker-swarm/docker-compose.yaml

@@ -110,7 +110,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:v0.79.0
+    image: signoz/signoz:v0.79.1
     command:
       - --config=/root/config/prometheus.yml
       - --use-logs-new-schema=true

deploy/docker/docker-compose.ha.yaml

@@ -177,7 +177,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:${VERSION:-v0.79.0}
+    image: signoz/signoz:${VERSION:-v0.79.1}
     container_name: signoz
     command:
       - --config=/root/config/prometheus.yml

deploy/docker/docker-compose.testing.yaml

@@ -1,199 +0,0 @@
-version: "3"
-x-common: &common
-  networks:
-    - signoz-net
-  restart: unless-stopped
-  logging:
-    options:
-      max-size: 50m
-      max-file: "3"
-x-clickhouse-defaults: &clickhouse-defaults
-  !!merge <<: *common
-  # addding non LTS version due to this fix https://github.com/ClickHouse/ClickHouse/commit/32caf8716352f45c1b617274c7508c86b7d1afab
-  image: clickhouse/clickhouse-server:24.1.2-alpine
-  tty: true
-  labels:
-    signoz.io/scrape: "true"
-    signoz.io/port: "9363"
-    signoz.io/path: "/metrics"
-  depends_on:
-    init-clickhouse:
-      condition: service_completed_successfully
-    zookeeper-1:
-      condition: service_healthy
-  healthcheck:
-    test:
-      - CMD
-      - wget
-      - --spider
-      - -q
-      - 0.0.0.0:8123/ping
-    interval: 30s
-    timeout: 5s
-    retries: 3
-  ulimits:
-    nproc: 65535
-    nofile:
-      soft: 262144
-      hard: 262144
-x-zookeeper-defaults: &zookeeper-defaults
-  !!merge <<: *common
-  image: bitnami/zookeeper:3.7.1
-  user: root
-  labels:
-    signoz.io/scrape: "true"
-    signoz.io/port: "9141"
-    signoz.io/path: "/metrics"
-  healthcheck:
-    test:
-      - CMD-SHELL
-      - curl -s -m 2 http://localhost:8080/commands/ruok | grep error | grep null
-    interval: 30s
-    timeout: 5s
-    retries: 3
-x-db-depend: &db-depend
-  !!merge <<: *common
-  depends_on:
-    clickhouse:
-      condition: service_healthy
-    schema-migrator-sync:
-      condition: service_completed_successfully
-services:
-  init-clickhouse:
-    !!merge <<: *common
-    image: clickhouse/clickhouse-server:24.1.2-alpine
-    container_name: signoz-init-clickhouse
-    command:
-      - bash
-      - -c
-      - |
-        version="v0.0.1"
-        node_os=$$(uname -s | tr '[:upper:]' '[:lower:]')
-        node_arch=$$(uname -m | sed s/aarch64/arm64/ | sed s/x86_64/amd64/)
-        echo "Fetching histogram-binary for $${node_os}/$${node_arch}"
-        cd /tmp
-        wget -O histogram-quantile.tar.gz "https://github.com/SigNoz/signoz/releases/download/histogram-quantile%2F$${version}/histogram-quantile_$${node_os}_$${node_arch}.tar.gz"
-        tar -xvzf histogram-quantile.tar.gz
-        mv histogram-quantile /var/lib/clickhouse/user_scripts/histogramQuantile
-    restart: on-failure
-    volumes:
-      - ../common/clickhouse/user_scripts:/var/lib/clickhouse/user_scripts/
-  zookeeper-1:
-    !!merge <<: *zookeeper-defaults
-    container_name: signoz-zookeeper-1
-    ports:
-      - "2181:2181"
-      - "2888:2888"
-      - "3888:3888"
-    volumes:
-      - zookeeper-1:/bitnami/zookeeper
-    environment:
-      - ZOO_SERVER_ID=1
-      - ALLOW_ANONYMOUS_LOGIN=yes
-      - ZOO_AUTOPURGE_INTERVAL=1
-      - ZOO_ENABLE_PROMETHEUS_METRICS=yes
-      - ZOO_PROMETHEUS_METRICS_PORT_NUMBER=9141
-  clickhouse:
-    !!merge <<: *clickhouse-defaults
-    container_name: signoz-clickhouse
-    ports:
-      - "9000:9000"
-      - "8123:8123"
-      - "9181:9181"
-    volumes:
-      - ../common/clickhouse/config.xml:/etc/clickhouse-server/config.xml
-      - ../common/clickhouse/users.xml:/etc/clickhouse-server/users.xml
-      - ../common/clickhouse/custom-function.xml:/etc/clickhouse-server/custom-function.xml
-      - ../common/clickhouse/user_scripts:/var/lib/clickhouse/user_scripts/
-      - ../common/clickhouse/cluster.xml:/etc/clickhouse-server/config.d/cluster.xml
-      - clickhouse:/var/lib/clickhouse/
-      # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
-  signoz:
-    !!merge <<: *db-depend
-    image: signoz/signoz:${VERSION:-v0.79.0}
-    container_name: signoz
-    command:
-      - --config=/root/config/prometheus.yml
-      - --gateway-url=https://api.staging.signoz.cloud
-      - --use-logs-new-schema=true
-      - --use-trace-new-schema=true
-    ports:
-      - "8080:8080" # signoz port
-    #   - "6060:6060"     # pprof port
-    volumes:
-      - ../common/signoz/prometheus.yml:/root/config/prometheus.yml
-      - ../common/dashboards:/root/config/dashboards
-      - sqlite:/var/lib/signoz/
-    environment:
-      - SIGNOZ_ALERTMANAGER_PROVIDER=signoz
-      - SIGNOZ_TELEMETRYSTORE_CLICKHOUSE_DSN=tcp://clickhouse:9000
-      - SIGNOZ_SQLSTORE_SQLITE_PATH=/var/lib/signoz/signoz.db
-      - DASHBOARDS_PATH=/root/config/dashboards
-      - STORAGE=clickhouse
-      - GODEBUG=netdns=go
-      - TELEMETRY_ENABLED=true
-      - DEPLOYMENT_TYPE=docker-standalone-amd
-      - KAFKA_SPAN_EVAL=${KAFKA_SPAN_EVAL:-false}
-    healthcheck:
-      test:
-        - CMD
-        - wget
-        - --spider
-        - -q
-        - localhost:8080/api/v1/health
-      interval: 30s
-      timeout: 5s
-      retries: 3
-  otel-collector:
-    !!merge <<: *db-depend
-    image: signoz/signoz-otel-collector:${OTELCOL_TAG:-v0.111.39}
-    container_name: signoz-otel-collector
-    command:
-      - --config=/etc/otel-collector-config.yaml
-      - --manager-config=/etc/manager-config.yaml
-      - --copy-path=/var/tmp/collector-config.yaml
-      - --feature-gates=-pkg.translator.prometheus.NormalizeName
-    volumes:
-      - ./otel-collector-config.yaml:/etc/otel-collector-config.yaml
-      - ../common/signoz/otel-collector-opamp-config.yaml:/etc/manager-config.yaml
-    environment:
-      - OTEL_RESOURCE_ATTRIBUTES=host.name=signoz-host,os.type=linux
-      - LOW_CARDINAL_EXCEPTION_GROUPING=false
-    ports:
-      # - "1777:1777"     # pprof extension
-      - "4317:4317" # OTLP gRPC receiver
-      - "4318:4318" # OTLP HTTP receiver
-    depends_on:
-      signoz:
-        condition: service_healthy
-  schema-migrator-sync:
-    !!merge <<: *common
-    image: signoz/signoz-schema-migrator:${OTELCOL_TAG:-v0.111.39}
-    container_name: schema-migrator-sync
-    command:
-      - sync
-      - --dsn=tcp://clickhouse:9000
-      - --up=
-    depends_on:
-      clickhouse:
-        condition: service_healthy
-    restart: on-failure
-  schema-migrator-async:
-    !!merge <<: *db-depend
-    image: signoz/signoz-schema-migrator:${OTELCOL_TAG:-v0.111.39}
-    container_name: schema-migrator-async
-    command:
-      - async
-      - --dsn=tcp://clickhouse:9000
-      - --up=
-    restart: on-failure
-networks:
-  signoz-net:
-    name: signoz-net
-volumes:
-  clickhouse:
-    name: signoz-clickhouse
-  sqlite:
-    name: signoz-sqlite
-  zookeeper-1:
-    name: signoz-zookeeper-1

deploy/docker/docker-compose.yaml

@@ -110,7 +110,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:${VERSION:-v0.79.0}
+    image: signoz/signoz:${VERSION:-v0.79.1}
     container_name: signoz
     command:
       - --config=/root/config/prometheus.yml

ee/query-service/Dockerfile.integration

@@ -0,0 +1,36 @@
+FROM golang:1.22-bullseye
+
+ARG OS="linux"
+ARG TARGETARCH
+ARG ZEUSURL
+
+# This path is important for stacktraces
+WORKDIR $GOPATH/src/github.com/signoz/signoz
+WORKDIR /root
+
+RUN set -eux; \
+	apt-get update; \
+	apt-get install -y --no-install-recommends \
+		g++ \
+		gcc \
+		libc6-dev \
+		make \
+		pkg-config \
+	; \
+	rm -rf /var/lib/apt/lists/*
+
+COPY go.mod go.sum ./
+
+RUN go mod download
+
+COPY ./ee/ ./ee/
+COPY ./pkg/ ./pkg/
+COPY ./templates/email /root/templates
+
+COPY Makefile Makefile
+RUN TARGET_DIR=/root ARCHS=${TARGETARCH} ZEUS_URL=${ZEUSURL} LICENSE_URL=${ZEUSURL}/api/v1 make go-build-enterprise-race
+RUN mv /root/linux-${TARGETARCH}/signoz /root/signoz
+
+RUN chmod 755 /root /root/signoz
+
+ENTRYPOINT ["/root/signoz"]

ee/query-service/app/api/api.go

@@ -11,6 +11,7 @@ import (
 	"github.com/SigNoz/signoz/ee/query-service/license"
 	"github.com/SigNoz/signoz/ee/query-service/usage"
 	"github.com/SigNoz/signoz/pkg/alertmanager"
+	"github.com/SigNoz/signoz/pkg/apis/fields"
 	"github.com/SigNoz/signoz/pkg/modules/preference"
 	preferencecore "github.com/SigNoz/signoz/pkg/modules/preference/core"
 	baseapp "github.com/SigNoz/signoz/pkg/query-service/app"
@@ -74,6 +75,7 @@ func NewAPIHandler(opts APIHandlerOptions, signoz *signoz.SigNoz) (*APIHandler,
 		UseLogsNewSchema:              opts.UseLogsNewSchema,
 		UseTraceNewSchema:             opts.UseTraceNewSchema,
 		AlertmanagerAPI:               alertmanager.NewAPI(signoz.Alertmanager),
+		FieldsAPI:                     fields.NewAPI(signoz.TelemetryStore),
 		Signoz:                        signoz,
 		Preference:                    preference,
 	})

ee/query-service/app/server.go

@@ -367,6 +367,7 @@ func (s *Server) createPublicServer(apiHandler *api.APIHandler, web web.Web) (*h
 	apiHandler.RegisterLogsRoutes(r, am)
 	apiHandler.RegisterIntegrationRoutes(r, am)
 	apiHandler.RegisterCloudIntegrationsRoutes(r, am)
+	apiHandler.RegisterFieldsRoutes(r, am)
 	apiHandler.RegisterQueryRangeV3Routes(r, am)
 	apiHandler.RegisterInfraMetricsRoutes(r, am)
 	apiHandler.RegisterQueryRangeV4Routes(r, am)
@@ -428,11 +429,11 @@ func (s *Server) initListeners() error {
 }
 
 // Start listening on http and private http port concurrently
-func (s *Server) Start() error {
+func (s *Server) Start(ctx context.Context) error {
 
 	// initiate rule manager first
 	if !s.serverOptions.DisableRules {
-		s.ruleManager.Start()
+		s.ruleManager.Start(ctx)
 	} else {
 		zap.L().Info("msg: Rules disabled as rules.disable is set to TRUE")
 	}
@@ -516,7 +517,7 @@ func (s *Server) Stop() error {
 	s.opampServer.Stop()
 
 	if s.ruleManager != nil {
-		s.ruleManager.Stop()
+		s.ruleManager.Stop(context.Background())
 	}
 
 	// stop usage manager

ee/query-service/main.go

@@ -143,7 +143,7 @@ func main() {
 		zap.L().Fatal("Failed to create server", zap.Error(err))
 	}
 
-	if err := server.Start(); err != nil {
+	if err := server.Start(context.Background()); err != nil {
 		zap.L().Fatal("Could not start server", zap.Error(err))
 	}
 

ee/query-service/rules/anomaly.go

@@ -15,6 +15,7 @@ import (
 	"github.com/SigNoz/signoz/pkg/query-service/cache"
 	"github.com/SigNoz/signoz/pkg/query-service/common"
 	"github.com/SigNoz/signoz/pkg/query-service/model"
+	ruletypes "github.com/SigNoz/signoz/pkg/types/ruletypes"
 
 	querierV2 "github.com/SigNoz/signoz/pkg/query-service/app/querier/v2"
 	"github.com/SigNoz/signoz/pkg/query-service/app/queryBuilder"
@@ -52,7 +53,7 @@ type AnomalyRule struct {
 
 func NewAnomalyRule(
 	id string,
-	p *baserules.PostableRule,
+	p *ruletypes.PostableRule,
 	reader interfaces.Reader,
 	cache cache.Cache,
 	opts ...baserules.RuleOption,
@@ -60,7 +61,7 @@ func NewAnomalyRule(
 
 	zap.L().Info("creating new AnomalyRule", zap.String("id", id), zap.Any("opts", opts))
 
-	if p.RuleCondition.CompareOp == baserules.ValueIsBelow {
+	if p.RuleCondition.CompareOp == ruletypes.ValueIsBelow {
 		target := -1 * *p.RuleCondition.Target
 		p.RuleCondition.Target = &target
 	}
@@ -117,7 +118,7 @@ func NewAnomalyRule(
 	return &t, nil
 }
 
-func (r *AnomalyRule) Type() baserules.RuleType {
+func (r *AnomalyRule) Type() ruletypes.RuleType {
 	return RuleTypeAnomaly
 }
 
@@ -157,7 +158,7 @@ func (r *AnomalyRule) GetSelectedQuery() string {
 	return r.Condition().GetSelectedQueryName()
 }
 
-func (r *AnomalyRule) buildAndRunQuery(ctx context.Context, ts time.Time) (baserules.Vector, error) {
+func (r *AnomalyRule) buildAndRunQuery(ctx context.Context, ts time.Time) (ruletypes.Vector, error) {
 
 	params, err := r.prepareQueryRange(ts)
 	if err != nil {
@@ -184,7 +185,7 @@ func (r *AnomalyRule) buildAndRunQuery(ctx context.Context, ts time.Time) (baser
 		}
 	}
 
-	var resultVector baserules.Vector
+	var resultVector ruletypes.Vector
 
 	scoresJSON, _ := json.Marshal(queryResult.AnomalyScores)
 	zap.L().Info("anomaly scores", zap.String("scores", string(scoresJSON)))
@@ -213,7 +214,7 @@ func (r *AnomalyRule) Eval(ctx context.Context, ts time.Time) (interface{}, erro
 	defer r.mtx.Unlock()
 
 	resultFPs := map[uint64]struct{}{}
-	var alerts = make(map[uint64]*baserules.Alert, len(res))
+	var alerts = make(map[uint64]*ruletypes.Alert, len(res))
 
 	for _, smpl := range res {
 		l := make(map[string]string, len(smpl.Metric))
@@ -225,7 +226,7 @@ func (r *AnomalyRule) Eval(ctx context.Context, ts time.Time) (interface{}, erro
 		threshold := valueFormatter.Format(r.TargetVal(), r.Unit())
 		zap.L().Debug("Alert template data for rule", zap.String("name", r.Name()), zap.String("formatter", valueFormatter.Name()), zap.String("value", value), zap.String("threshold", threshold))
 
-		tmplData := baserules.AlertTemplateData(l, value, threshold)
+		tmplData := ruletypes.AlertTemplateData(l, value, threshold)
 		// Inject some convenience variables that are easier to remember for users
 		// who are not used to Go's templating system.
 		defs := "{{$labels := .Labels}}{{$value := .Value}}{{$threshold := .Threshold}}"
@@ -233,7 +234,7 @@ func (r *AnomalyRule) Eval(ctx context.Context, ts time.Time) (interface{}, erro
 		// utility function to apply go template on labels and annotations
 		expand := func(text string) string {
 
-			tmpl := baserules.NewTemplateExpander(
+			tmpl := ruletypes.NewTemplateExpander(
 				ctx,
 				defs+text,
 				"__alert_"+r.Name(),
@@ -278,7 +279,7 @@ func (r *AnomalyRule) Eval(ctx context.Context, ts time.Time) (interface{}, erro
 			return nil, err
 		}
 
-		alerts[h] = &baserules.Alert{
+		alerts[h] = &ruletypes.Alert{
 			Labels:            lbs,
 			QueryResultLables: resultLabels,
 			Annotations:       annotations,
@@ -319,7 +320,7 @@ func (r *AnomalyRule) Eval(ctx context.Context, ts time.Time) (interface{}, erro
 		if _, ok := resultFPs[fp]; !ok {
 			// If the alert was previously firing, keep it around for a given
 			// retention time so it is reported as resolved to the AlertManager.
-			if a.State == model.StatePending || (!a.ResolvedAt.IsZero() && ts.Sub(a.ResolvedAt) > baserules.ResolvedRetention) {
+			if a.State == model.StatePending || (!a.ResolvedAt.IsZero() && ts.Sub(a.ResolvedAt) > ruletypes.ResolvedRetention) {
 				delete(r.Active, fp)
 			}
 			if a.State != model.StateInactive {
@@ -375,10 +376,10 @@ func (r *AnomalyRule) Eval(ctx context.Context, ts time.Time) (interface{}, erro
 
 func (r *AnomalyRule) String() string {
 
-	ar := baserules.PostableRule{
+	ar := ruletypes.PostableRule{
 		AlertName:         r.Name(),
 		RuleCondition:     r.Condition(),
-		EvalWindow:        baserules.Duration(r.EvalWindow()),
+		EvalWindow:        ruletypes.Duration(r.EvalWindow()),
 		Labels:            r.Labels().Map(),
 		Annotations:       r.Annotations().Map(),
 		PreferredChannels: r.PreferredChannels(),

ee/query-service/rules/manager.go

@@ -8,6 +8,7 @@ import (
 	basemodel "github.com/SigNoz/signoz/pkg/query-service/model"
 	baserules "github.com/SigNoz/signoz/pkg/query-service/rules"
 	"github.com/SigNoz/signoz/pkg/query-service/utils/labels"
+	ruletypes "github.com/SigNoz/signoz/pkg/types/ruletypes"
 	"github.com/google/uuid"
 	"go.uber.org/zap"
 )
@@ -18,7 +19,7 @@ func PrepareTaskFunc(opts baserules.PrepareTaskOptions) (baserules.Task, error)
 	var task baserules.Task
 
 	ruleId := baserules.RuleIdFromTaskName(opts.TaskName)
-	if opts.Rule.RuleType == baserules.RuleTypeThreshold {
+	if opts.Rule.RuleType == ruletypes.RuleTypeThreshold {
 		// create a threshold rule
 		tr, err := baserules.NewThresholdRule(
 			ruleId,
@@ -37,9 +38,9 @@ func PrepareTaskFunc(opts baserules.PrepareTaskOptions) (baserules.Task, error)
 		rules = append(rules, tr)
 
 		// create ch rule task for evalution
-		task = newTask(baserules.TaskTypeCh, opts.TaskName, time.Duration(opts.Rule.Frequency), rules, opts.ManagerOpts, opts.NotifyFunc, opts.RuleDB)
+		task = newTask(baserules.TaskTypeCh, opts.TaskName, time.Duration(opts.Rule.Frequency), rules, opts.ManagerOpts, opts.NotifyFunc, opts.MaintenanceStore, opts.OrgID)
 
-	} else if opts.Rule.RuleType == baserules.RuleTypeProm {
+	} else if opts.Rule.RuleType == ruletypes.RuleTypeProm {
 
 		// create promql rule
 		pr, err := baserules.NewPromRule(
@@ -58,9 +59,9 @@ func PrepareTaskFunc(opts baserules.PrepareTaskOptions) (baserules.Task, error)
 		rules = append(rules, pr)
 
 		// create promql rule task for evalution
-		task = newTask(baserules.TaskTypeProm, opts.TaskName, time.Duration(opts.Rule.Frequency), rules, opts.ManagerOpts, opts.NotifyFunc, opts.RuleDB)
+		task = newTask(baserules.TaskTypeProm, opts.TaskName, time.Duration(opts.Rule.Frequency), rules, opts.ManagerOpts, opts.NotifyFunc, opts.MaintenanceStore, opts.OrgID)
 
-	} else if opts.Rule.RuleType == baserules.RuleTypeAnomaly {
+	} else if opts.Rule.RuleType == ruletypes.RuleTypeAnomaly {
 		// create anomaly rule
 		ar, err := NewAnomalyRule(
 			ruleId,
@@ -77,10 +78,10 @@ func PrepareTaskFunc(opts baserules.PrepareTaskOptions) (baserules.Task, error)
 		rules = append(rules, ar)
 
 		// create anomaly rule task for evalution
-		task = newTask(baserules.TaskTypeCh, opts.TaskName, time.Duration(opts.Rule.Frequency), rules, opts.ManagerOpts, opts.NotifyFunc, opts.RuleDB)
+		task = newTask(baserules.TaskTypeCh, opts.TaskName, time.Duration(opts.Rule.Frequency), rules, opts.ManagerOpts, opts.NotifyFunc, opts.MaintenanceStore, opts.OrgID)
 
 	} else {
-		return nil, fmt.Errorf("unsupported rule type %s. Supported types: %s, %s", opts.Rule.RuleType, baserules.RuleTypeProm, baserules.RuleTypeThreshold)
+		return nil, fmt.Errorf("unsupported rule type %s. Supported types: %s, %s", opts.Rule.RuleType, ruletypes.RuleTypeProm, ruletypes.RuleTypeThreshold)
 	}
 
 	return task, nil
@@ -105,12 +106,12 @@ func TestNotification(opts baserules.PrepareTestRuleOptions) (int, *basemodel.Ap
 	}
 
 	// append name to indicate this is test alert
-	parsedRule.AlertName = fmt.Sprintf("%s%s", alertname, baserules.TestAlertPostFix)
+	parsedRule.AlertName = fmt.Sprintf("%s%s", alertname, ruletypes.TestAlertPostFix)
 
 	var rule baserules.Rule
 	var err error
 
-	if parsedRule.RuleType == baserules.RuleTypeThreshold {
+	if parsedRule.RuleType == ruletypes.RuleTypeThreshold {
 
 		// add special labels for test alerts
 		parsedRule.Annotations[labels.AlertSummaryLabel] = fmt.Sprintf("The rule threshold is set to %.4f, and the observed metric value is {{$value}}.", *parsedRule.RuleCondition.Target)
@@ -134,7 +135,7 @@ func TestNotification(opts baserules.PrepareTestRuleOptions) (int, *basemodel.Ap
 			return 0, basemodel.BadRequest(err)
 		}
 
-	} else if parsedRule.RuleType == baserules.RuleTypeProm {
+	} else if parsedRule.RuleType == ruletypes.RuleTypeProm {
 
 		// create promql rule
 		rule, err = baserules.NewPromRule(
@@ -152,7 +153,7 @@ func TestNotification(opts baserules.PrepareTestRuleOptions) (int, *basemodel.Ap
 			zap.L().Error("failed to prepare a new promql rule for test", zap.String("name", rule.Name()), zap.Error(err))
 			return 0, basemodel.BadRequest(err)
 		}
-	} else if parsedRule.RuleType == baserules.RuleTypeAnomaly {
+	} else if parsedRule.RuleType == ruletypes.RuleTypeAnomaly {
 		// create anomaly rule
 		rule, err = NewAnomalyRule(
 			alertname,
@@ -190,9 +191,9 @@ func TestNotification(opts baserules.PrepareTestRuleOptions) (int, *basemodel.Ap
 
 // newTask returns an appropriate group for
 // rule type
-func newTask(taskType baserules.TaskType, name string, frequency time.Duration, rules []baserules.Rule, opts *baserules.ManagerOptions, notify baserules.NotifyFunc, ruleDB baserules.RuleDB) baserules.Task {
+func newTask(taskType baserules.TaskType, name string, frequency time.Duration, rules []baserules.Rule, opts *baserules.ManagerOptions, notify baserules.NotifyFunc, maintenanceStore ruletypes.MaintenanceStore, orgID string) baserules.Task {
 	if taskType == baserules.TaskTypeCh {
-		return baserules.NewRuleTask(name, "", frequency, rules, opts, notify, ruleDB)
+		return baserules.NewRuleTask(name, "", frequency, rules, opts, notify, maintenanceStore, orgID)
 	}
-	return baserules.NewPromRuleTask(name, "", frequency, rules, opts, notify, ruleDB)
+	return baserules.NewPromRuleTask(name, "", frequency, rules, opts, notify, maintenanceStore, orgID)
 }

frontend/package.json

@@ -79,7 +79,6 @@
 		"eventemitter3": "5.0.1",
 		"file-loader": "6.1.1",
 		"fontfaceobserver": "2.3.0",
-		"history": "4.10.1",
 		"html-webpack-plugin": "5.5.0",
 		"http-proxy-middleware": "3.0.3",
 		"i18next": "^21.6.12",
@@ -115,8 +114,7 @@
 		"react-markdown": "8.0.7",
 		"react-query": "3.39.3",
 		"react-redux": "^7.2.2",
-		"react-router-dom": "^5.2.0",
-		"react-router-dom-v5-compat": "6.27.0",
+		"react-router": "7.5.1",
 		"react-syntax-highlighter": "15.5.0",
 		"react-use": "^17.3.2",
 		"react-virtuoso": "4.0.3",
@@ -186,7 +184,7 @@
 		"@types/react-lottie": "1.2.10",
 		"@types/react-redux": "^7.1.11",
 		"@types/react-resizable": "3.0.3",
-		"@types/react-router-dom": "^5.1.6",
+		"@types/react-router": "^5.1.20",
 		"@types/react-syntax-highlighter": "15.5.7",
 		"@types/redux-mock-store": "1.0.4",
 		"@types/styled-components": "^5.1.4",

frontend/src/AppRoutes/Private.tsx

@@ -5,15 +5,17 @@ import { FeatureKeys } from 'constants/features';
 import { LOCALSTORAGE } from 'constants/localStorage';
 import ROUTES from 'constants/routes';
 import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
-import history from 'lib/history';
+import { useGlobalEventListener } from 'hooks/useGlobalEventListener';
+import { useSafeNavigate } from 'hooks/useSafeNavigate';
 import { isEmpty } from 'lodash-es';
 import { useAppContext } from 'providers/App/App';
 import { ReactChild, useCallback, useEffect, useMemo, useState } from 'react';
 import { useQuery } from 'react-query';
-import { matchPath, useLocation } from 'react-router-dom';
+import { matchPath, useLocation } from 'react-router';
 import { LicensePlatform, LicenseState } from 'types/api/licensesV3/getActive';
 import { Organization } from 'types/api/user/getOrganization';
 import { USER_ROLES } from 'types/roles';
+import { safeNavigateNoSameURLMemo } from 'utils/navigate';
 import { routePermission } from 'utils/permission';
 
 import routes, {
@@ -26,6 +28,10 @@ import routes, {
 
 function PrivateRoute({ children }: PrivateRouteProps): JSX.Element {
 	const location = useLocation();
+	const { safeNavigate } = useSafeNavigate();
+	const { safeNavigate: unsafeNavigate } = useSafeNavigate({
+		preventSameUrlNavigation: false,
+	});
 	const { pathname } = location;
 	const {
 		org,
@@ -44,9 +50,13 @@ function PrivateRoute({ children }: PrivateRouteProps): JSX.Element {
 		() =>
 			new Map(
 				[...routes, LIST_LICENSES, SUPPORT_ROUTE].map((e) => {
-					const currentPath = matchPath(pathname, {
-						path: e.path,
-					});
+					const currentPath = matchPath(
+						{
+							// Temp: Hard type cast
+							path: e.path as string,
+						},
+						pathname,
+					);
 					return [currentPath === null ? null : 'current', e];
 				}),
 			),
@@ -101,7 +111,7 @@ function PrivateRoute({ children }: PrivateRouteProps): JSX.Element {
 				// if the current route is allowed to be overriden by org onboarding then only do the same
 				!ROUTES_NOT_TO_BE_OVERRIDEN.includes(pathname)
 			) {
-				history.push(ROUTES.ONBOARDING);
+				safeNavigateNoSameURLMemo(ROUTES.ONBOARDING);
 			}
 		}
 	}, [
@@ -114,31 +124,37 @@ function PrivateRoute({ children }: PrivateRouteProps): JSX.Element {
 		pathname,
 	]);
 
-	const navigateToWorkSpaceBlocked = (route: any): void => {
-		const { path } = route;
+	const safeNavigateToWorkSpaceBlocked = useCallback(
+		(route: any): void => {
+			const { path } = route;
 
-		const isRouteEnabledForWorkspaceBlockedState =
-			isAdmin &&
-			(path === ROUTES.ORG_SETTINGS ||
-				path === ROUTES.BILLING ||
-				path === ROUTES.MY_SETTINGS);
+			const isRouteEnabledForWorkspaceBlockedState =
+				isAdmin &&
+				(path === ROUTES.ORG_SETTINGS ||
+					path === ROUTES.BILLING ||
+					path === ROUTES.MY_SETTINGS);
 
-		if (
-			path &&
-			path !== ROUTES.WORKSPACE_LOCKED &&
-			!isRouteEnabledForWorkspaceBlockedState
-		) {
-			history.push(ROUTES.WORKSPACE_LOCKED);
-		}
-	};
+			if (
+				path &&
+				path !== ROUTES.WORKSPACE_LOCKED &&
+				!isRouteEnabledForWorkspaceBlockedState
+			) {
+				safeNavigateNoSameURLMemo(ROUTES.WORKSPACE_LOCKED);
+			}
+		},
+		[isAdmin],
+	);
 
-	const navigateToWorkSpaceAccessRestricted = (route: any): void => {
-		const { path } = route;
+	const safeNavigateToWorkSpaceAccessRestricted = useCallback(
+		(route: any): void => {
+			const { path } = route;
 
-		if (path && path !== ROUTES.WORKSPACE_ACCESS_RESTRICTED) {
-			history.push(ROUTES.WORKSPACE_ACCESS_RESTRICTED);
-		}
-	};
+			if (path && path !== ROUTES.WORKSPACE_ACCESS_RESTRICTED) {
+				safeNavigateNoSameURLMemo(ROUTES.WORKSPACE_ACCESS_RESTRICTED);
+			}
+		},
+		[],
+	);
 
 	useEffect(() => {
 		if (!isFetchingActiveLicenseV3 && activeLicenseV3) {
@@ -157,10 +173,16 @@ function PrivateRoute({ children }: PrivateRouteProps): JSX.Element {
 				platform === LicensePlatform.CLOUD &&
 				currentRoute
 			) {
-				navigateToWorkSpaceAccessRestricted(currentRoute);
+				safeNavigateToWorkSpaceAccessRestricted(currentRoute);
 			}
 		}
-	}, [isFetchingActiveLicenseV3, activeLicenseV3, mapRoutes, pathname]);
+	}, [
+		isFetchingActiveLicenseV3,
+		activeLicenseV3,
+		mapRoutes,
+		pathname,
+		safeNavigateToWorkSpaceAccessRestricted,
+	]);
 
 	useEffect(() => {
 		if (!isFetchingActiveLicenseV3) {
@@ -172,7 +194,7 @@ function PrivateRoute({ children }: PrivateRouteProps): JSX.Element {
 				currentRoute &&
 				activeLicenseV3?.platform === LicensePlatform.CLOUD
 			) {
-				navigateToWorkSpaceBlocked(currentRoute);
+				safeNavigateToWorkSpaceBlocked(currentRoute);
 			}
 		}
 		// eslint-disable-next-line react-hooks/exhaustive-deps
@@ -182,15 +204,16 @@ function PrivateRoute({ children }: PrivateRouteProps): JSX.Element {
 		activeLicenseV3?.platform,
 		mapRoutes,
 		pathname,
+		safeNavigateToWorkSpaceBlocked,
 	]);
 
-	const navigateToWorkSpaceSuspended = (route: any): void => {
+	const safeNavigateToWorkSpaceSuspended = useCallback((route: any): void => {
 		const { path } = route;
 
 		if (path && path !== ROUTES.WORKSPACE_SUSPENDED) {
-			history.push(ROUTES.WORKSPACE_SUSPENDED);
+			safeNavigateNoSameURLMemo(ROUTES.WORKSPACE_SUSPENDED);
 		}
-	};
+	}, []);
 
 	useEffect(() => {
 		if (!isFetchingActiveLicenseV3 && activeLicenseV3) {
@@ -203,10 +226,16 @@ function PrivateRoute({ children }: PrivateRouteProps): JSX.Element {
 				currentRoute &&
 				activeLicenseV3.platform === LicensePlatform.CLOUD
 			) {
-				navigateToWorkSpaceSuspended(currentRoute);
+				safeNavigateToWorkSpaceSuspended(currentRoute);
 			}
 		}
-	}, [isFetchingActiveLicenseV3, activeLicenseV3, mapRoutes, pathname]);
+	}, [
+		isFetchingActiveLicenseV3,
+		activeLicenseV3,
+		mapRoutes,
+		pathname,
+		safeNavigateToWorkSpaceSuspended,
+	]);
 
 	useEffect(() => {
 		if (org && org.length > 0 && org[0].id !== undefined) {
@@ -220,13 +249,13 @@ function PrivateRoute({ children }: PrivateRouteProps): JSX.Element {
 			currentRoute?.path === ROUTES.GET_STARTED &&
 			featureFlags?.find((e) => e.name === FeatureKeys.ONBOARDING_V3)?.active
 		) {
-			history.push(ROUTES.GET_STARTED_WITH_CLOUD);
+			safeNavigateNoSameURLMemo(ROUTES.GET_STARTED_WITH_CLOUD);
 		}
 	}, [currentRoute, featureFlags]);
 
 	// eslint-disable-next-line sonarjs/cognitive-complexity
 	useEffect(() => {
-		// if it is an old route navigate to the new route
+		// if it is an old route safeNavigate to the new route
 		if (isOldRoute) {
 			const redirectUrl = oldNewRoutesMapping[pathname];
 
@@ -234,7 +263,8 @@ function PrivateRoute({ children }: PrivateRouteProps): JSX.Element {
 				...location,
 				pathname: redirectUrl,
 			};
-			history.replace(newLocation);
+
+			safeNavigateNoSameURLMemo(newLocation, { replace: true });
 			return;
 		}
 		// if the current route
@@ -244,21 +274,21 @@ function PrivateRoute({ children }: PrivateRouteProps): JSX.Element {
 				if (isLoggedInState) {
 					const route = routePermission[key];
 					if (route && route.find((e) => e === user.role) === undefined) {
-						history.push(ROUTES.UN_AUTHORIZED);
+						safeNavigateNoSameURLMemo(ROUTES.UN_AUTHORIZED);
 					}
 				} else {
 					setLocalStorageApi(LOCALSTORAGE.UNAUTHENTICATED_ROUTE_HIT, pathname);
-					history.push(ROUTES.LOGIN);
+					safeNavigateNoSameURLMemo(ROUTES.LOGIN);
 				}
 			} else if (isLoggedInState) {
 				const fromPathname = getLocalStorageApi(
 					LOCALSTORAGE.UNAUTHENTICATED_ROUTE_HIT,
 				);
 				if (fromPathname) {
-					history.push(fromPathname);
+					safeNavigateNoSameURLMemo(fromPathname);
 					setLocalStorageApi(LOCALSTORAGE.UNAUTHENTICATED_ROUTE_HIT, '');
 				} else if (pathname !== ROUTES.SOMETHING_WENT_WRONG) {
-					history.push(ROUTES.HOME);
+					safeNavigateNoSameURLMemo(ROUTES.HOME);
 				}
 			} else {
 				// do nothing as the unauthenticated routes are LOGIN and SIGNUP and the LOGIN container takes care of routing to signup if
@@ -269,17 +299,45 @@ function PrivateRoute({ children }: PrivateRouteProps): JSX.Element {
 				LOCALSTORAGE.UNAUTHENTICATED_ROUTE_HIT,
 			);
 			if (fromPathname) {
-				history.push(fromPathname);
+				safeNavigateNoSameURLMemo(fromPathname);
 				setLocalStorageApi(LOCALSTORAGE.UNAUTHENTICATED_ROUTE_HIT, '');
 			} else {
-				history.push(ROUTES.HOME);
+				safeNavigateNoSameURLMemo(ROUTES.HOME);
 			}
 		} else {
 			setLocalStorageApi(LOCALSTORAGE.UNAUTHENTICATED_ROUTE_HIT, pathname);
-			history.push(ROUTES.LOGIN);
+			safeNavigateNoSameURLMemo(ROUTES.LOGIN);
 		}
 	}, [isLoggedInState, pathname, user, isOldRoute, currentRoute, location]);
 
+	// global event listener for NAVIGATE event
+	// This will provide access to useNavigation hook from outside of components
+	useGlobalEventListener(
+		'SAFE_NAVIGATE',
+		(event: CustomEvent) => {
+			const { to, options } = event.detail;
+			if (to) {
+				safeNavigate(to, options);
+			}
+		},
+		{
+			passive: true,
+		},
+	);
+
+	useGlobalEventListener(
+		'UNSAFE_NAVIGATE',
+		(event: CustomEvent) => {
+			const { to, options } = event.detail;
+			if (to) {
+				unsafeNavigate(to, options);
+			}
+		},
+		{
+			passive: true,
+		},
+	);
+
 	// NOTE: disabling this rule as there is no need to have div
 	// eslint-disable-next-line react/jsx-no-useless-fragment
 	return <>{children}</>;

frontend/src/AppRoutes/index.tsx

@@ -15,7 +15,6 @@ import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
 import { LICENSE_PLAN_KEY } from 'hooks/useLicense';
 import { NotificationProvider } from 'hooks/useNotifications';
 import { ResourceProvider } from 'hooks/useResourceAttribute';
-import history from 'lib/history';
 import ErrorBoundaryFallback from 'pages/ErrorBoundaryFallback/ErrorBoundaryFallback';
 import posthog from 'posthog-js';
 import AlertRuleProvider from 'providers/Alert';
@@ -24,9 +23,9 @@ import { IUser } from 'providers/App/types';
 import { DashboardProvider } from 'providers/Dashboard/Dashboard';
 import { QueryBuilderProvider } from 'providers/QueryBuilder';
 import { Suspense, useCallback, useEffect, useState } from 'react';
-import { Route, Router, Switch } from 'react-router-dom';
-import { CompatRouter } from 'react-router-dom-v5-compat';
+import { BrowserRouter, Route, Routes } from 'react-router';
 import { extractDomain } from 'utils/app';
+import { safeNavigateNoSameURLMemo } from 'utils/navigate';
 
 import { Home } from './pageComponents';
 import PrivateRoute from './Private';
@@ -316,7 +315,7 @@ function App(): JSX.Element {
 		// this needs to be on top of data missing error because if there is an error, data will never be loaded and it will
 		// move to indefinitive loading
 		if (userFetchError && pathname !== ROUTES.SOMETHING_WENT_WRONG) {
-			history.replace(ROUTES.SOMETHING_WENT_WRONG);
+			safeNavigateNoSameURLMemo(ROUTES.SOMETHING_WENT_WRONG);
 		}
 
 		// if all of the data is not set then return a spinner, this is required because there is some gap between loading states and data setting
@@ -328,40 +327,33 @@ function App(): JSX.Element {
 	return (
 		<Sentry.ErrorBoundary fallback={<ErrorBoundaryFallback />}>
 			<ConfigProvider theme={themeConfig}>
-				<Router history={history}>
-					<CompatRouter>
-						<NotificationProvider>
-							<PrivateRoute>
-								<ResourceProvider>
-									<QueryBuilderProvider>
-										<DashboardProvider>
-											<KeyboardHotkeysProvider>
-												<AlertRuleProvider>
-													<AppLayout>
-														<Suspense fallback={<Spinner size="large" tip="Loading..." />}>
-															<Switch>
-																{routes.map(({ path, component, exact }) => (
-																	<Route
-																		key={`${path}`}
-																		exact={exact}
-																		path={path}
-																		component={component}
-																	/>
-																))}
-																<Route exact path="/" component={Home} />
-																<Route path="*" component={NotFound} />
-															</Switch>
-														</Suspense>
-													</AppLayout>
-												</AlertRuleProvider>
-											</KeyboardHotkeysProvider>
-										</DashboardProvider>
-									</QueryBuilderProvider>
-								</ResourceProvider>
-							</PrivateRoute>
-						</NotificationProvider>
-					</CompatRouter>
-				</Router>
+				<BrowserRouter>
+					<NotificationProvider>
+						<PrivateRoute>
+							<ResourceProvider>
+								<QueryBuilderProvider>
+									<DashboardProvider>
+										<KeyboardHotkeysProvider>
+											<AlertRuleProvider>
+												<AppLayout>
+													<Suspense fallback={<Spinner size="large" tip="Loading..." />}>
+														<Routes>
+															{routes.map(({ path, element }) => (
+																<Route key={`${path}`} path={path} element={element} />
+															))}
+															<Route path="/" element={<Home />} />
+															<Route path="*" element={<NotFound />} />
+														</Routes>
+													</Suspense>
+												</AppLayout>
+											</AlertRuleProvider>
+										</KeyboardHotkeysProvider>
+									</DashboardProvider>
+								</QueryBuilderProvider>
+							</ResourceProvider>
+						</PrivateRoute>
+					</NotificationProvider>
+				</BrowserRouter>
 			</ConfigProvider>
 		</Sentry.ErrorBoundary>
 	);

frontend/src/AppRoutes/routes.tsx

@@ -1,6 +1,6 @@
 import ROUTES from 'constants/routes';
 import MessagingQueues from 'pages/MessagingQueues';
-import { RouteProps } from 'react-router-dom';
+import { RouteProps } from 'react-router';
 
 import {
 	AlertHistory,
@@ -65,443 +65,383 @@ import {
 
 const routes: AppRoutes[] = [
 	{
-		component: SignupPage,
 		path: ROUTES.SIGN_UP,
-		exact: true,
+		element: <SignupPage />,
 		isPrivate: false,
 		key: 'SIGN_UP',
 	},
 	{
 		path: ROUTES.GET_STARTED,
-		exact: false,
-		component: Onboarding,
+		// exact: false
+		element: <Onboarding />,
 		isPrivate: true,
 		key: 'GET_STARTED',
 	},
 	{
 		path: ROUTES.GET_STARTED_WITH_CLOUD,
-		exact: false,
-		component: OnboardingV2,
+		// exact: false
+		element: <OnboardingV2 />,
 		isPrivate: true,
 		key: 'GET_STARTED_WITH_CLOUD',
 	},
 	{
 		path: ROUTES.HOME,
-		exact: true,
-		component: Home,
+		element: <Home />,
 		isPrivate: true,
 		key: 'HOME',
 	},
 	{
 		path: ROUTES.ONBOARDING,
-		exact: false,
-		component: OrgOnboarding,
+		// exact: false
+		element: <OrgOnboarding />,
 		isPrivate: true,
 		key: 'ONBOARDING',
 	},
 	{
-		component: LogsIndexToFields,
 		path: ROUTES.LOGS_INDEX_FIELDS,
-		exact: true,
+		element: <LogsIndexToFields />,
 		isPrivate: true,
 		key: 'LOGS_INDEX_FIELDS',
 	},
 	{
-		component: ServicesTablePage,
 		path: ROUTES.APPLICATION,
-		exact: true,
+		element: <ServicesTablePage />,
 		isPrivate: true,
 		key: 'APPLICATION',
 	},
 	{
 		path: ROUTES.SERVICE_METRICS,
-		exact: true,
-		component: ServiceMetricsPage,
+		element: <ServiceMetricsPage />,
 		isPrivate: true,
 		key: 'SERVICE_METRICS',
 	},
 	{
 		path: ROUTES.SERVICE_TOP_LEVEL_OPERATIONS,
-		exact: true,
-		component: ServiceTopLevelOperationsPage,
+		element: <ServiceTopLevelOperationsPage />,
 		isPrivate: true,
 		key: 'SERVICE_TOP_LEVEL_OPERATIONS',
 	},
 	{
 		path: ROUTES.SERVICE_MAP,
-		component: ServiceMapPage,
+		element: <ServiceMapPage />,
 		isPrivate: true,
-		exact: true,
 		key: 'SERVICE_MAP',
 	},
 	{
 		path: ROUTES.LOGS_SAVE_VIEWS,
-		component: LogsSaveViews,
+		element: <LogsSaveViews />,
 		isPrivate: true,
-		exact: true,
 		key: 'LOGS_SAVE_VIEWS',
 	},
 	{
 		path: ROUTES.TRACE_DETAIL,
-		exact: true,
-		component: TraceDetail,
+		element: <TraceDetail />,
 		isPrivate: true,
 		key: 'TRACE_DETAIL',
 	},
 	{
 		path: ROUTES.SETTINGS,
-		exact: true,
-		component: SettingsPage,
+		element: <SettingsPage />,
 		isPrivate: true,
 		key: 'SETTINGS',
 	},
 	{
 		path: ROUTES.USAGE_EXPLORER,
-		exact: true,
-		component: UsageExplorerPage,
+		element: <UsageExplorerPage />,
 		isPrivate: true,
 		key: 'USAGE_EXPLORER',
 	},
 	{
 		path: ROUTES.ALL_DASHBOARD,
-		exact: true,
-		component: DashboardPage,
+		element: <DashboardPage />,
 		isPrivate: true,
 		key: 'ALL_DASHBOARD',
 	},
 	{
 		path: ROUTES.DASHBOARD,
-		exact: true,
-		component: NewDashboardPage,
+		element: <NewDashboardPage />,
 		isPrivate: true,
 		key: 'DASHBOARD',
 	},
 	{
 		path: ROUTES.DASHBOARD_WIDGET,
-		exact: true,
-		component: DashboardWidget,
+		element: <DashboardWidget />,
 		isPrivate: true,
 		key: 'DASHBOARD_WIDGET',
 	},
 	{
 		path: ROUTES.EDIT_ALERTS,
-		exact: true,
-		component: EditRulesPage,
+		element: <EditRulesPage />,
 		isPrivate: true,
 		key: 'EDIT_ALERTS',
 	},
 	{
 		path: ROUTES.LIST_ALL_ALERT,
-		exact: true,
-		component: ListAllALertsPage,
+		element: <ListAllALertsPage />,
 		isPrivate: true,
 		key: 'LIST_ALL_ALERT',
 	},
 	{
 		path: ROUTES.ALERTS_NEW,
-		exact: true,
-		component: CreateNewAlerts,
+		element: <CreateNewAlerts />,
 		isPrivate: true,
 		key: 'ALERTS_NEW',
 	},
 	{
 		path: ROUTES.ALERT_HISTORY,
-		exact: true,
-		component: AlertHistory,
+		element: <AlertHistory />,
 		isPrivate: true,
 		key: 'ALERT_HISTORY',
 	},
 	{
 		path: ROUTES.ALERT_OVERVIEW,
-		exact: true,
-		component: AlertOverview,
+		element: <AlertOverview />,
 		isPrivate: true,
 		key: 'ALERT_OVERVIEW',
 	},
 	{
 		path: ROUTES.TRACE,
-		exact: true,
-		component: TraceFilter,
+		element: <TraceFilter />,
 		isPrivate: true,
 		key: 'TRACE',
 	},
 	{
 		path: ROUTES.TRACES_EXPLORER,
-		exact: true,
-		component: TracesExplorer,
+		element: <TracesExplorer />,
 		isPrivate: true,
 		key: 'TRACES_EXPLORER',
 	},
 	{
 		path: ROUTES.TRACES_SAVE_VIEWS,
-		exact: true,
-		component: TracesSaveViews,
+		element: <TracesSaveViews />,
 		isPrivate: true,
 		key: 'TRACES_SAVE_VIEWS',
 	},
 	{
 		path: ROUTES.TRACES_FUNNELS,
-		exact: true,
-		component: TracesFunnels,
+		element: <TracesFunnels />,
 		isPrivate: true,
 		key: 'TRACES_FUNNELS',
 	},
 	{
 		path: ROUTES.TRACES_FUNNELS_DETAIL,
-		exact: true,
-		component: TracesFunnelDetails,
+		element: <TracesFunnelDetails />,
 		isPrivate: true,
 		key: 'TRACES_FUNNELS_DETAIL',
 	},
 	{
 		path: ROUTES.CHANNELS_NEW,
-		exact: true,
-		component: CreateAlertChannelAlerts,
+		element: <CreateAlertChannelAlerts />,
 		isPrivate: true,
 		key: 'CHANNELS_NEW',
 	},
 	{
 		path: ROUTES.CHANNELS_EDIT,
-		exact: true,
-		component: EditAlertChannelsAlerts,
+		element: <EditAlertChannelsAlerts />,
 		isPrivate: true,
 		key: 'CHANNELS_EDIT',
 	},
 	{
 		path: ROUTES.ALL_CHANNELS,
-		exact: true,
-		component: AllAlertChannels,
+		element: <AllAlertChannels />,
 		isPrivate: true,
 		key: 'ALL_CHANNELS',
 	},
 	{
 		path: ROUTES.ALL_ERROR,
-		exact: true,
+		element: <AllErrors />,
 		isPrivate: true,
-		component: AllErrors,
 		key: 'ALL_ERROR',
 	},
 	{
 		path: ROUTES.ERROR_DETAIL,
-		exact: true,
-		component: ErrorDetails,
+		element: <ErrorDetails />,
 		isPrivate: true,
 		key: 'ERROR_DETAIL',
 	},
 	{
 		path: ROUTES.VERSION,
-		exact: true,
-		component: StatusPage,
+		element: <StatusPage />,
 		isPrivate: true,
 		key: 'VERSION',
 	},
 	{
 		path: ROUTES.ORG_SETTINGS,
-		exact: true,
-		component: OrganizationSettings,
+		element: <OrganizationSettings />,
 		isPrivate: true,
 		key: 'ORG_SETTINGS',
 	},
 	{
 		path: ROUTES.INGESTION_SETTINGS,
-		exact: true,
-		component: IngestionSettings,
+		element: <IngestionSettings />,
 		isPrivate: true,
 		key: 'INGESTION_SETTINGS',
 	},
 	{
 		path: ROUTES.API_KEYS,
-		exact: true,
-		component: APIKeys,
+		element: <APIKeys />,
 		isPrivate: true,
 		key: 'API_KEYS',
 	},
 	{
 		path: ROUTES.MY_SETTINGS,
-		exact: true,
-		component: MySettings,
+		element: <MySettings />,
 		isPrivate: true,
 		key: 'MY_SETTINGS',
 	},
 	{
 		path: ROUTES.CUSTOM_DOMAIN_SETTINGS,
-		exact: true,
-		component: CustomDomainSettings,
+		element: <CustomDomainSettings />,
 		isPrivate: true,
 		key: 'CUSTOM_DOMAIN_SETTINGS',
 	},
 	{
 		path: ROUTES.LOGS,
-		exact: true,
-		component: Logs,
+		element: <Logs />,
 		key: 'LOGS',
 		isPrivate: true,
 	},
 	{
 		path: ROUTES.LOGS_EXPLORER,
-		exact: true,
-		component: LogsExplorer,
+		element: <LogsExplorer />,
 		key: 'LOGS_EXPLORER',
 		isPrivate: true,
 	},
 	{
 		path: ROUTES.OLD_LOGS_EXPLORER,
-		exact: true,
-		component: OldLogsExplorer,
+		element: <OldLogsExplorer />,
 		key: 'OLD_LOGS_EXPLORER',
 		isPrivate: true,
 	},
 	{
 		path: ROUTES.LIVE_LOGS,
-		exact: true,
-		component: LiveLogs,
+		element: <LiveLogs />,
 		key: 'LIVE_LOGS',
 		isPrivate: true,
 	},
 	{
 		path: ROUTES.LOGS_PIPELINES,
-		exact: true,
-		component: PipelinePage,
+		element: <PipelinePage />,
 		key: 'LOGS_PIPELINES',
 		isPrivate: true,
 	},
 	{
 		path: ROUTES.LOGIN,
-		exact: true,
-		component: Login,
+		element: <Login />,
 		isPrivate: false,
 		key: 'LOGIN',
 	},
 	{
 		path: ROUTES.UN_AUTHORIZED,
-		exact: true,
-		component: UnAuthorized,
+		element: <UnAuthorized />,
 		key: 'UN_AUTHORIZED',
 		isPrivate: true,
 	},
 	{
 		path: ROUTES.PASSWORD_RESET,
-		exact: true,
-		component: PasswordReset,
+		element: <PasswordReset />,
 		key: 'PASSWORD_RESET',
 		isPrivate: false,
 	},
 	{
 		path: ROUTES.SOMETHING_WENT_WRONG,
-		exact: true,
-		component: SomethingWentWrong,
+		element: <SomethingWentWrong />,
 		key: 'SOMETHING_WENT_WRONG',
 		isPrivate: false,
 	},
 	{
 		path: ROUTES.BILLING,
-		exact: true,
-		component: BillingPage,
+		element: <BillingPage />,
 		key: 'BILLING',
 		isPrivate: true,
 	},
 	{
 		path: ROUTES.WORKSPACE_LOCKED,
-		exact: true,
-		component: WorkspaceBlocked,
+		element: <WorkspaceBlocked />,
 		isPrivate: true,
 		key: 'WORKSPACE_LOCKED',
 	},
 	{
 		path: ROUTES.WORKSPACE_SUSPENDED,
-		exact: true,
-		component: WorkspaceSuspended,
+		element: <WorkspaceSuspended />,
 		isPrivate: true,
 		key: 'WORKSPACE_SUSPENDED',
 	},
 	{
 		path: ROUTES.WORKSPACE_ACCESS_RESTRICTED,
-		exact: true,
-		component: WorkspaceAccessRestricted,
+		element: <WorkspaceAccessRestricted />,
 		isPrivate: true,
 		key: 'WORKSPACE_ACCESS_RESTRICTED',
 	},
 	{
 		path: ROUTES.SHORTCUTS,
-		exact: true,
-		component: ShortcutsPage,
+		element: <ShortcutsPage />,
 		isPrivate: true,
 		key: 'SHORTCUTS',
 	},
 	{
 		path: ROUTES.INTEGRATIONS,
-		exact: true,
-		component: InstalledIntegrations,
+		element: <InstalledIntegrations />,
 		isPrivate: true,
 		key: 'INTEGRATIONS',
 	},
 	{
 		path: ROUTES.MESSAGING_QUEUES_KAFKA,
-		exact: true,
-		component: MessagingQueues,
+		element: <MessagingQueues />,
 		key: 'MESSAGING_QUEUES_KAFKA',
 		isPrivate: true,
 	},
 	{
 		path: ROUTES.MESSAGING_QUEUES_CELERY_TASK,
-		exact: true,
-		component: MessagingQueues,
+		element: <MessagingQueues />,
 		key: 'MESSAGING_QUEUES_CELERY_TASK',
 		isPrivate: true,
 	},
 	{
 		path: ROUTES.MESSAGING_QUEUES_OVERVIEW,
-		exact: true,
-		component: MessagingQueues,
+		element: <MessagingQueues />,
 		key: 'MESSAGING_QUEUES_OVERVIEW',
 		isPrivate: true,
 	},
 	{
 		path: ROUTES.MESSAGING_QUEUES_KAFKA_DETAIL,
-		exact: true,
-		component: MessagingQueues,
+		element: <MessagingQueues />,
 		key: 'MESSAGING_QUEUES_KAFKA_DETAIL',
 		isPrivate: true,
 	},
 	{
 		path: ROUTES.INFRASTRUCTURE_MONITORING_HOSTS,
-		exact: true,
-		component: InfrastructureMonitoring,
+		element: <InfrastructureMonitoring />,
 		key: 'INFRASTRUCTURE_MONITORING_HOSTS',
 		isPrivate: true,
 	},
 	{
 		path: ROUTES.INFRASTRUCTURE_MONITORING_KUBERNETES,
-		exact: true,
-		component: InfrastructureMonitoring,
+		element: <InfrastructureMonitoring />,
 		key: 'INFRASTRUCTURE_MONITORING_KUBERNETES',
 		isPrivate: true,
 	},
 	{
 		path: ROUTES.METRICS_EXPLORER,
-		exact: true,
-		component: MetricsExplorer,
+		element: <MetricsExplorer />,
 		key: 'METRICS_EXPLORER',
 		isPrivate: true,
 	},
 	{
 		path: ROUTES.METRICS_EXPLORER_EXPLORER,
-		exact: true,
-		component: MetricsExplorer,
+		element: <MetricsExplorer />,
 		key: 'METRICS_EXPLORER_EXPLORER',
 		isPrivate: true,
 	},
 	{
 		path: ROUTES.METRICS_EXPLORER_VIEWS,
-		exact: true,
-		component: MetricsExplorer,
+		element: <MetricsExplorer />,
 		key: 'METRICS_EXPLORER_VIEWS',
 		isPrivate: true,
 	},
 	{
 		path: ROUTES.API_MONITORING,
-		exact: true,
-		component: ApiMonitoring,
+		element: <ApiMonitoring />,
 		key: 'API_MONITORING',
 		isPrivate: true,
 	},
@@ -509,16 +449,14 @@ const routes: AppRoutes[] = [
 
 export const SUPPORT_ROUTE: AppRoutes = {
 	path: ROUTES.SUPPORT,
-	exact: true,
-	component: SupportPage,
+	element: <SupportPage />,
 	key: 'SUPPORT',
 	isPrivate: true,
 };
 
 export const LIST_LICENSES: AppRoutes = {
 	path: ROUTES.LIST_LICENSES,
-	exact: true,
-	component: LicensePage,
+	element: <LicensePage />,
 	isPrivate: true,
 	key: 'LIST_LICENSES',
 };
@@ -549,9 +487,8 @@ export const ROUTES_NOT_TO_BE_OVERRIDEN: string[] = [
 ];
 
 export interface AppRoutes {
-	component: RouteProps['component'];
+	element: RouteProps['element'];
 	path: RouteProps['path'];
-	exact: RouteProps['exact'];
 	isPrivate: boolean;
 	key: keyof typeof ROUTES;
 }

frontend/src/api/alerts/save.ts

@@ -1,3 +1,4 @@
+import { isEmpty } from 'lodash-es';
 import { ErrorResponse, SuccessResponse } from 'types/api';
 import { PayloadProps, Props } from 'types/api/alerts/save';
 
@@ -7,7 +8,7 @@ import put from './put';
 const save = async (
 	props: Props,
 ): Promise<SuccessResponse<PayloadProps> | ErrorResponse> => {
-	if (props.id && props.id > 0) {
+	if (props.id && !isEmpty(props.id)) {
 		return put({ ...props });
 	}
 

frontend/src/api/utils.ts

@@ -1,7 +1,7 @@
 import deleteLocalStorageKey from 'api/browser/localstorage/remove';
 import { LOCALSTORAGE } from 'constants/localStorage';
 import ROUTES from 'constants/routes';
-import history from 'lib/history';
+import { safeNavigateNoSameURLMemo } from 'utils/navigate';
 
 export const Logout = (): void => {
 	deleteLocalStorageKey(LOCALSTORAGE.AUTH_TOKEN);
@@ -23,5 +23,5 @@ export const Logout = (): void => {
 		window.Intercom('shutdown');
 	}
 
-	history.push(ROUTES.LOGIN);
+	safeNavigateNoSameURLMemo(ROUTES.LOGIN);
 };

frontend/src/components/CeleryOverview/CeleryOverviewConfigOptions/CeleryOverviewConfigOptions.tsx

@@ -8,8 +8,9 @@ import {
 import { useCeleryFilterOptions } from 'components/CeleryTask/useCeleryFilterOptions';
 import { SelectMaxTagPlaceholder } from 'components/MessagingQueues/MQCommon/MQCommon';
 import { QueryParams } from 'constants/query';
+import { useSafeNavigate } from 'hooks/useSafeNavigate';
 import useUrlQuery from 'hooks/useUrlQuery';
-import { useHistory, useLocation } from 'react-router-dom';
+import { useLocation } from 'react-router';
 
 interface SelectOptionConfig {
 	placeholder: string;
@@ -27,7 +28,7 @@ function FilterSelect({
 	);
 
 	const urlQuery = useUrlQuery();
-	const history = useHistory();
+	const { safeNavigate } = useSafeNavigate();
 	const location = useLocation();
 
 	return (
@@ -55,7 +56,13 @@ function FilterSelect({
 			}
 			onChange={(value): void => {
 				handleSearch('');
-				setQueryParamsFromOptions(value, urlQuery, history, location, queryParam);
+				setQueryParamsFromOptions(
+					value,
+					urlQuery,
+					safeNavigate,
+					location,
+					queryParam,
+				);
 			}}
 		/>
 	);

frontend/src/components/CeleryTask/CeleryTaskConfigOptions/CeleryTaskConfigOptions.tsx

@@ -3,8 +3,9 @@ import './CeleryTaskConfigOptions.styles.scss';
 import { Select, Spin, Typography } from 'antd';
 import { SelectMaxTagPlaceholder } from 'components/MessagingQueues/MQCommon/MQCommon';
 import { QueryParams } from 'constants/query';
+import { useSafeNavigate } from 'hooks/useSafeNavigate';
 import useUrlQuery from 'hooks/useUrlQuery';
-import { useHistory, useLocation } from 'react-router-dom';
+import { useLocation } from 'react-router';
 
 import {
 	getValuesFromQueryParams,
@@ -16,7 +17,7 @@ function CeleryTaskConfigOptions(): JSX.Element {
 	const { handleSearch, isFetching, options } = useCeleryFilterOptions(
 		'celery.task_name',
 	);
-	const history = useHistory();
+	const { safeNavigate } = useSafeNavigate();
 	const location = useLocation();
 
 	const urlQuery = useUrlQuery();
@@ -52,7 +53,7 @@ function CeleryTaskConfigOptions(): JSX.Element {
 						setQueryParamsFromOptions(
 							value,
 							urlQuery,
-							history,
+							safeNavigate,
 							location,
 							QueryParams.taskName,
 						);

frontend/src/components/CeleryTask/CeleryTaskGraph/CeleryTaskBar.tsx

@@ -7,12 +7,13 @@ import { ViewMenuAction } from 'container/GridCardLayout/config';
 import GridCard from 'container/GridCardLayout/GridCard';
 import { Card } from 'container/GridCardLayout/styles';
 import { useIsDarkMode } from 'hooks/useDarkMode';
+import { useSafeNavigate } from 'hooks/useSafeNavigate';
 import useUrlQuery from 'hooks/useUrlQuery';
 import { isEmpty } from 'lodash-es';
 import { getStartAndEndTimesInMilliseconds } from 'pages/MessagingQueues/MessagingQueuesUtils';
 import { useCallback, useMemo, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-import { useHistory, useLocation } from 'react-router-dom';
+import { useLocation } from 'react-router';
 import { UpdateTimeInterval } from 'store/actions';
 import { AppState } from 'store/reducers';
 import { Widgets } from 'types/api/dashboard/getAll';
@@ -49,7 +50,7 @@ function CeleryTaskBar({
 	queryEnabled: boolean;
 	checkIfDataExists?: (isDataAvailable: boolean) => void;
 }): JSX.Element {
-	const history = useHistory();
+	const { safeNavigate } = useSafeNavigate();
 	const { pathname } = useLocation();
 	const dispatch = useDispatch();
 	const urlQuery = useUrlQuery();
@@ -67,13 +68,13 @@ function CeleryTaskBar({
 			urlQuery.set(QueryParams.startTime, startTimestamp.toString());
 			urlQuery.set(QueryParams.endTime, endTimestamp.toString());
 			const generatedUrl = `${pathname}?${urlQuery.toString()}`;
-			history.push(generatedUrl);
+			safeNavigate(generatedUrl);
 
 			if (startTimestamp !== endTimestamp) {
 				dispatch(UpdateTimeInterval('custom', [startTimestamp, endTimestamp]));
 			}
 		},
-		[dispatch, history, pathname, urlQuery],
+		[dispatch, pathname, urlQuery, safeNavigate],
 	);
 
 	const [barState, setBarState] = useState<CeleryTaskState>(CeleryTaskState.All);

frontend/src/components/CeleryTask/CeleryTaskGraph/CeleryTaskGraph.tsx

@@ -5,12 +5,13 @@ import { ViewMenuAction } from 'container/GridCardLayout/config';
 import GridCard from 'container/GridCardLayout/GridCard';
 import { Card } from 'container/GridCardLayout/styles';
 import { useIsDarkMode } from 'hooks/useDarkMode';
+import { useSafeNavigate } from 'hooks/useSafeNavigate';
 import useUrlQuery from 'hooks/useUrlQuery';
 import { RowData } from 'lib/query/createTableColumnsFromQuery';
 import { getStartAndEndTimesInMilliseconds } from 'pages/MessagingQueues/MessagingQueuesUtils';
 import { useCallback, useMemo } from 'react';
 import { useDispatch } from 'react-redux';
-import { useHistory, useLocation } from 'react-router-dom';
+import { useLocation } from 'react-router';
 import { UpdateTimeInterval } from 'store/actions';
 import { Widgets } from 'types/api/dashboard/getAll';
 import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
@@ -53,7 +54,7 @@ function CeleryTaskGraph({
 	checkIfDataExists?: (isDataAvailable: boolean) => void;
 	analyticsEvent?: string;
 }): JSX.Element {
-	const history = useHistory();
+	const { safeNavigate } = useSafeNavigate();
 	const { pathname } = useLocation();
 	const dispatch = useDispatch();
 	const urlQuery = useUrlQuery();
@@ -82,13 +83,13 @@ function CeleryTaskGraph({
 			urlQuery.set(QueryParams.startTime, startTimestamp.toString());
 			urlQuery.set(QueryParams.endTime, endTimestamp.toString());
 			const generatedUrl = `${pathname}?${urlQuery.toString()}`;
-			history.push(generatedUrl);
+			safeNavigate(generatedUrl);
 
 			if (startTimestamp !== endTimestamp) {
 				dispatch(UpdateTimeInterval('custom', [startTimestamp, endTimestamp]));
 			}
 		},
-		[dispatch, history, pathname, urlQuery],
+		[dispatch, pathname, urlQuery, safeNavigate],
 	);
 
 	return (

frontend/src/components/CeleryTask/CeleryTaskGraph/CeleryTaskLatencyGraph.tsx

@@ -10,12 +10,13 @@ import { Card } from 'container/GridCardLayout/styles';
 import { Button } from 'container/MetricsApplication/Tabs/styles';
 import { useGraphClickHandler } from 'container/MetricsApplication/Tabs/util';
 import { useIsDarkMode } from 'hooks/useDarkMode';
+import { useSafeNavigate } from 'hooks/useSafeNavigate';
 import useUrlQuery from 'hooks/useUrlQuery';
 import { OnClickPluginOpts } from 'lib/uPlotLib/plugins/onClickPlugin';
 import { getStartAndEndTimesInMilliseconds } from 'pages/MessagingQueues/MessagingQueuesUtils';
 import { useCallback, useMemo, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-import { useHistory, useLocation } from 'react-router-dom';
+import { useLocation } from 'react-router';
 import { UpdateTimeInterval } from 'store/actions';
 import { AppState } from 'store/reducers';
 import { DataSource } from 'types/common/queryBuilder';
@@ -47,7 +48,7 @@ function CeleryTaskLatencyGraph({
 	queryEnabled: boolean;
 	checkIfDataExists?: (isDataAvailable: boolean) => void;
 }): JSX.Element {
-	const history = useHistory();
+	const { safeNavigate } = useSafeNavigate();
 	const { pathname } = useLocation();
 	const dispatch = useDispatch();
 	const urlQuery = useUrlQuery();
@@ -79,13 +80,13 @@ function CeleryTaskLatencyGraph({
 			urlQuery.set(QueryParams.startTime, startTimestamp.toString());
 			urlQuery.set(QueryParams.endTime, endTimestamp.toString());
 			const generatedUrl = `${pathname}?${urlQuery.toString()}`;
-			history.push(generatedUrl);
+			safeNavigate(generatedUrl);
 
 			if (startTimestamp !== endTimestamp) {
 				dispatch(UpdateTimeInterval('custom', [startTimestamp, endTimestamp]));
 			}
 		},
-		[dispatch, history, pathname, urlQuery],
+		[dispatch, pathname, urlQuery, safeNavigate],
 	);
 
 	const selectedFilters = useMemo(

frontend/src/components/CeleryTask/CeleryUtils.ts

@@ -1,6 +1,6 @@
 import { QueryParams } from 'constants/query';
-import { History, Location } from 'history';
 import getRenderer from 'lib/uPlotLib/utils/getRenderer';
+import type { Location, NavigateFunction } from 'react-router';
 import { Widgets } from 'types/api/dashboard/getAll';
 import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
 import { TagFilterItem } from 'types/api/queryBuilder/queryBuilderData';
@@ -17,13 +17,13 @@ export function getValuesFromQueryParams(
 export function setQueryParamsFromOptions(
 	value: string[],
 	urlQuery: URLSearchParams,
-	history: History<unknown>,
+	safeNavigate: NavigateFunction,
 	location: Location<unknown>,
 	queryParams: QueryParams,
 ): void {
 	urlQuery.set(queryParams, value.join(','));
 	const generatedUrl = `${location.pathname}?${urlQuery.toString()}`;
-	history.replace(generatedUrl);
+	safeNavigate(generatedUrl, { replace: true });
 }
 
 export function getFiltersFromQueryParams(

frontend/src/components/ChatSupportGateway/ChatSupportGateway.tsx

@@ -6,7 +6,7 @@ import { useNotifications } from 'hooks/useNotifications';
 import { CreditCard, X } from 'lucide-react';
 import { useState } from 'react';
 import { useMutation } from 'react-query';
-import { useLocation } from 'react-router-dom';
+import { useLocation } from 'react-router';
 import { ErrorResponse, SuccessResponse } from 'types/api';
 import { CheckoutSuccessPayloadProps } from 'types/api/billing/checkout';
 
@@ -45,6 +45,7 @@ export default function ChatSupportGateway(): JSX.Element {
 		},
 	);
 	const { pathname } = useLocation();
+
 	const handleAddCreditCard = (): void => {
 		logEvent('Add Credit card modal: Clicked', {
 			source: `intercom icon`,
@@ -52,7 +53,7 @@ export default function ChatSupportGateway(): JSX.Element {
 		});
 
 		updateCreditCard({
-			url: window.location.href,
+			url: window.location.origin,
 		});
 	};
 

frontend/src/components/CustomTimePicker/CustomTimePicker.tsx

@@ -26,7 +26,7 @@ import {
 	useMemo,
 	useState,
 } from 'react';
-import { useLocation } from 'react-router-dom';
+import { useLocation } from 'react-router';
 import { popupContainer } from 'utils/selectPopupContainer';
 
 import CustomTimePickerPopoverContent from './CustomTimePickerPopoverContent';

frontend/src/components/CustomTimePicker/CustomTimePickerPopoverContent.tsx

@@ -14,7 +14,7 @@ import {
 import { Clock, PenLine } from 'lucide-react';
 import { useTimezone } from 'providers/Timezone';
 import { Dispatch, SetStateAction, useMemo } from 'react';
-import { useLocation } from 'react-router-dom';
+import { useLocation } from 'react-router';
 
 import RangePickerModal from './RangePickerModal';
 import TimezonePicker from './TimezonePicker';

frontend/src/components/ExplorerCard/ExplorerCard.tsx

@@ -194,7 +194,7 @@ function ExplorerCard({
 											showSearch
 											placeholder="Select a view"
 											dropdownStyle={DropDownOverlay}
-											dropdownMatchSelectWidth={false}
+											popupMatchSelectWidth={false}
 											optionLabelProp="value"
 											value={viewName || undefined}
 										>

frontend/src/components/LaunchChatSupport/LaunchChatSupport.tsx

@@ -13,7 +13,7 @@ import { CreditCard, HelpCircle, X } from 'lucide-react';
 import { useAppContext } from 'providers/App/App';
 import { useMemo, useState } from 'react';
 import { useMutation } from 'react-query';
-import { useLocation } from 'react-router-dom';
+import { useLocation } from 'react-router';
 import { ErrorResponse, SuccessResponse } from 'types/api';
 import { CheckoutSuccessPayloadProps } from 'types/api/billing/checkout';
 
@@ -153,7 +153,7 @@ function LaunchChatSupport({
 		});
 
 		updateCreditCard({
-			url: window.location.href,
+			url: window.location.origin,
 		});
 	};
 

frontend/src/components/Loadable/index.tsx

@@ -1,16 +1,16 @@
 import { ComponentType, lazy, LazyExoticComponent } from 'react';
 import { lazyRetry } from 'utils/lazyWithRetries';
 
-function Loadable(importPath: {
-	(): LoadableProps;
-}): LazyExoticComponent<LazyComponent> {
-	return lazy(() => lazyRetry(() => importPath()));
-}
-
 type LazyComponent = ComponentType<Record<string, unknown>>;
 
 type LoadableProps = Promise<{
 	default: LazyComponent;
 }>;
 
+function Loadable(importPath: {
+	(): LoadableProps;
+}): LazyExoticComponent<LazyComponent> {
+	return lazy(() => lazyRetry(() => importPath()));
+}
+
 export default Loadable;

frontend/src/components/MessagingQueueHealthCheck/AttributeCheckList.tsx

@@ -15,15 +15,15 @@ import {
 import { OnboardingStatusResponse } from 'api/messagingQueues/onboarding/getOnboardingStatus';
 import { QueryParams } from 'constants/query';
 import ROUTES from 'constants/routes';
-import { History } from 'history';
 import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
+import { useSafeNavigate } from 'hooks/useSafeNavigate';
 import { Bolt, Check, OctagonAlert, X } from 'lucide-react';
 import {
 	KAFKA_SETUP_DOC_LINK,
 	MessagingQueueHealthCheckService,
 } from 'pages/MessagingQueues/MessagingQueuesUtils';
 import { ReactNode, useEffect, useState } from 'react';
-import { useHistory } from 'react-router-dom';
+import type { NavigateFunction } from 'react-router';
 import { v4 as uuid } from 'uuid';
 
 interface AttributeCheckListProps {
@@ -46,7 +46,7 @@ export enum AttributesFilters {
 function ErrorTitleAndKey({
 	title,
 	parentTitle,
-	history,
+	safeNavigate,
 	isCloudUserVal,
 	errorMsg,
 	isLeaf,
@@ -54,7 +54,7 @@ function ErrorTitleAndKey({
 	title: string;
 	parentTitle: string;
 	isCloudUserVal: boolean;
-	history: History<unknown>;
+	safeNavigate: NavigateFunction;
 	errorMsg?: string;
 	isLeaf?: boolean;
 }): TreeDataNode {
@@ -76,7 +76,7 @@ function ErrorTitleAndKey({
 		}
 
 		if (isCloudUserVal && !!link) {
-			history.push(link);
+			safeNavigate(link);
 		} else {
 			window.open(KAFKA_SETUP_DOC_LINK, '_blank');
 		}
@@ -146,7 +146,7 @@ function generateTreeDataNodes(
 	response: OnboardingStatusResponse['data'],
 	parentTitle: string,
 	isCloudUserVal: boolean,
-	history: History<unknown>,
+	safeNavigate: NavigateFunction,
 ): TreeDataNode[] {
 	return response
 		.map((item) => {
@@ -159,7 +159,7 @@ function generateTreeDataNodes(
 						title: item.attribute,
 						errorMsg: item.error_message || '',
 						parentTitle,
-						history,
+						safeNavigate,
 						isCloudUserVal,
 					});
 				}
@@ -182,7 +182,7 @@ function AttributeCheckList({
 		setFilter(value);
 	};
 	const { isCloudUser: isCloudUserVal } = useGetTenantLicense();
-	const history = useHistory();
+	const { safeNavigate } = useSafeNavigate();
 
 	useEffect(() => {
 		const filteredData = onboardingStatusResponses.map((response) => {
@@ -192,7 +192,7 @@ function AttributeCheckList({
 					errorMsg: response.errorMsg,
 					isLeaf: true,
 					parentTitle: response.title,
-					history,
+					safeNavigate,
 					isCloudUserVal,
 				});
 			}
@@ -210,7 +210,7 @@ function AttributeCheckList({
 					filteredData,
 					response.title,
 					isCloudUserVal,
-					history,
+					safeNavigate,
 				),
 			};
 		});

frontend/src/components/NotFound/styles.ts

@@ -1,4 +1,4 @@
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router';
 import styled from 'styled-components';
 
 export const Button = styled(Link)`

frontend/src/components/RouteTab/index.tsx

@@ -1,4 +1,5 @@
 import { Tabs, TabsProps } from 'antd';
+import { safeNavigateNoSameURLMemo } from 'utils/navigate';
 
 import { RouteTabProps } from './types';
 
@@ -6,7 +7,6 @@ function RouteTab({
 	routes,
 	activeKey,
 	onChangeHandler,
-	history,
 	...rest
 }: RouteTabProps & TabsProps): JSX.Element {
 	const onChange = (activeRoute: string): void => {
@@ -17,7 +17,7 @@ function RouteTab({
 		const selectedRoute = routes.find((e) => e.key === activeRoute);
 
 		if (selectedRoute) {
-			history.push(selectedRoute.route);
+			safeNavigateNoSameURLMemo(selectedRoute.route);
 		}
 	};
 

frontend/src/components/RouteTab/types.ts

@@ -1,5 +1,5 @@
 import { TabsProps } from 'antd';
-import { History } from 'history';
+// import type { NavigateFunction } from 'react-router';
 
 export type TabRoutes = {
 	name: React.ReactNode;
@@ -12,5 +12,5 @@ export interface RouteTabProps {
 	routes: TabRoutes[];
 	activeKey: TabsProps['activeKey'];
 	onChangeHandler?: (key: string) => void;
-	history: History<unknown>;
+	// safeNavigate: NavigateFunction;
 }

frontend/src/container/AlertHistory/AlertPopover/AlertPopover.tsx

@@ -7,7 +7,7 @@ import ROUTES from 'constants/routes';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { DraftingCompass } from 'lucide-react';
 import React from 'react';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router';
 
 type Props = {
 	children: React.ReactNode;

frontend/src/container/AlertHistory/Statistics/TopContributorsCard/TopContributorsCard.tsx

@@ -3,10 +3,10 @@ import './TopContributorsCard.styles.scss';
 import { Color } from '@signozhq/design-tokens';
 import { Button } from 'antd';
 import { useIsDarkMode } from 'hooks/useDarkMode';
-import history from 'lib/history';
+import { useSafeNavigate } from 'hooks/useSafeNavigate';
 import { ArrowRight } from 'lucide-react';
 import { useMemo, useState } from 'react';
-import { useLocation } from 'react-router-dom';
+import { useLocation } from 'react-router';
 
 import TopContributorsContent from './TopContributorsContent';
 import { TopContributorsCardProps } from './types';
@@ -17,6 +17,7 @@ function TopContributorsCard({
 	totalCurrentTriggers,
 }: TopContributorsCardProps): JSX.Element {
 	const { search } = useLocation();
+	const { safeNavigate } = useSafeNavigate();
 	const searchParams = useMemo(() => new URLSearchParams(search), [search]);
 
 	const viewAllTopContributorsParam = searchParams.get('viewAllTopContributors');
@@ -43,7 +44,7 @@ function TopContributorsCard({
 
 			return newState;
 		});
-		history.push({ search: searchParams.toString() });
+		safeNavigate({ search: searchParams.toString() });
 	};
 
 	return (

frontend/src/container/AlertHistory/Timeline/Graph/Graph.tsx

@@ -3,8 +3,8 @@ import Uplot from 'components/Uplot';
 import { QueryParams } from 'constants/query';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { useResizeObserver } from 'hooks/useDimensions';
+import { useSafeNavigate } from 'hooks/useSafeNavigate';
 import useUrlQuery from 'hooks/useUrlQuery';
-import history from 'lib/history';
 import heatmapPlugin from 'lib/uPlotLib/plugins/heatmapPlugin';
 import timelinePlugin from 'lib/uPlotLib/plugins/timelinePlugin';
 import { uPlotXAxisValuesFormat } from 'lib/uPlotLib/utils/constants';
@@ -28,6 +28,8 @@ function HorizontalTimelineGraph({
 	isDarkMode: boolean;
 	data: AlertRuleTimelineGraphResponse[];
 }): JSX.Element {
+	const { safeNavigate } = useSafeNavigate();
+
 	const transformedData: AlignedData = useMemo(() => {
 		if (!data?.length) {
 			return [[], []];
@@ -102,7 +104,7 @@ function HorizontalTimelineGraph({
 								urlQuery.set(QueryParams.startTime, startTimestamp.toString());
 								urlQuery.set(QueryParams.endTime, endTimestamp.toString());
 
-								history.push({
+								safeNavigate({
 									search: urlQuery.toString(),
 								});
 							}
@@ -131,6 +133,7 @@ function HorizontalTimelineGraph({
 			urlQuery,
 			dispatch,
 			timezone.value,
+			safeNavigate,
 		],
 	);
 	return <Uplot data={transformedData} options={options} />;

frontend/src/container/AlertHistory/Timeline/TabsAndFilters/TabsAndFilters.tsx

@@ -2,11 +2,11 @@ import './TabsAndFilters.styles.scss';
 
 import { Color } from '@signozhq/design-tokens';
 import { TimelineFilter, TimelineTab } from 'container/AlertHistory/types';
-import history from 'lib/history';
+import { useSafeNavigate } from 'hooks/useSafeNavigate';
 import { Info } from 'lucide-react';
 import Tabs2 from 'periscope/components/Tabs2';
 import { useMemo } from 'react';
-import { useLocation } from 'react-router-dom';
+import { useLocation } from 'react-router';
 
 function ComingSoon(): JSX.Element {
 	return (
@@ -41,6 +41,8 @@ function TimelineTabs(): JSX.Element {
 
 function TimelineFilters(): JSX.Element {
 	const { search } = useLocation();
+	const { safeNavigate } = useSafeNavigate();
+
 	const searchParams = useMemo(() => new URLSearchParams(search), [search]);
 
 	const initialSelectedTab = useMemo(
@@ -50,7 +52,7 @@ function TimelineFilters(): JSX.Element {
 
 	const handleFilter = (value: TimelineFilter): void => {
 		searchParams.set('timelineFilter', value);
-		history.push({ search: searchParams.toString() });
+		safeNavigate({ search: searchParams.toString() });
 	};
 
 	const tabs = [

frontend/src/container/AllAlertChannels/AlertChannels.tsx

@@ -5,11 +5,11 @@ import { ResizeTable } from 'components/ResizeTable';
 import ROUTES from 'constants/routes';
 import useComponentPermission from 'hooks/useComponentPermission';
 import { useNotifications } from 'hooks/useNotifications';
-import history from 'lib/history';
+import { useSafeNavigate } from 'hooks/useSafeNavigate';
 import { useAppContext } from 'providers/App/App';
 import { useCallback, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { generatePath } from 'react-router-dom';
+import { generatePath } from 'react-router';
 import { Channels, PayloadProps } from 'types/api/channels/getAll';
 
 import Delete from './Delete';
@@ -17,17 +17,22 @@ import Delete from './Delete';
 function AlertChannels({ allChannels }: AlertChannelsProps): JSX.Element {
 	const { t } = useTranslation(['channels']);
 	const { notifications } = useNotifications();
+	const { safeNavigate } = useSafeNavigate();
 	const [channels, setChannels] = useState<Channels[]>(allChannels);
 	const { user } = useAppContext();
 	const [action] = useComponentPermission(['new_alert_action'], user.role);
 
-	const onClickEditHandler = useCallback((id: string) => {
-		history.replace(
-			generatePath(ROUTES.CHANNELS_EDIT, {
-				id,
-			}),
-		);
-	}, []);
+	const onClickEditHandler = useCallback(
+		(id: string) => {
+			safeNavigate(
+				generatePath(ROUTES.CHANNELS_EDIT, {
+					id,
+				}),
+				{ replace: true },
+			);
+		},
+		[safeNavigate],
+	);
 
 	const columns: ColumnsType<Channels> = [
 		{

frontend/src/container/AllAlertChannels/index.tsx

@@ -7,7 +7,7 @@ import TextToolTip from 'components/TextToolTip';
 import ROUTES from 'constants/routes';
 import useComponentPermission from 'hooks/useComponentPermission';
 import useFetch from 'hooks/useFetch';
-import history from 'lib/history';
+import { useSafeNavigate } from 'hooks/useSafeNavigate';
 import { isUndefined } from 'lodash-es';
 import { useAppContext } from 'providers/App/App';
 import { useCallback, useEffect } from 'react';
@@ -21,13 +21,14 @@ const { Paragraph } = Typography;
 function AlertChannels(): JSX.Element {
 	const { t } = useTranslation(['channels']);
 	const { user } = useAppContext();
+	const { safeNavigate } = useSafeNavigate();
 	const [addNewChannelPermission] = useComponentPermission(
 		['add_new_channel'],
 		user.role,
 	);
 	const onToggleHandler = useCallback(() => {
-		history.push(ROUTES.CHANNELS_NEW);
-	}, []);
+		safeNavigate(ROUTES.CHANNELS_NEW);
+	}, [safeNavigate]);
 
 	const { loading, payload, error, errorMessage } = useFetch(getAll);
 

frontend/src/container/AllError/index.tsx

@@ -21,17 +21,17 @@ import ROUTES from 'constants/routes';
 import { useNotifications } from 'hooks/useNotifications';
 import useResourceAttribute from 'hooks/useResourceAttribute';
 import { convertRawQueriesToTraceSelectedTags } from 'hooks/useResourceAttribute/utils';
+import { useSafeNavigate } from 'hooks/useSafeNavigate';
 import { TimestampInput } from 'hooks/useTimezoneFormatter/useTimezoneFormatter';
 import useUrlQuery from 'hooks/useUrlQuery';
 import createQueryParams from 'lib/createQueryParams';
-import history from 'lib/history';
 import { isUndefined } from 'lodash-es';
 import { useTimezone } from 'providers/Timezone';
 import { useCallback, useEffect, useMemo, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useQueries } from 'react-query';
 import { useSelector } from 'react-redux';
-import { Link, useLocation } from 'react-router-dom';
+import { Link, useLocation } from 'react-router';
 import { AppState } from 'store/reducers';
 import { ErrorResponse, SuccessResponse } from 'types/api';
 import { Exception, PayloadProps } from 'types/api/errors/getAll';
@@ -66,6 +66,7 @@ function AllErrors(): JSX.Element {
 		(state) => state.globalTime,
 	);
 	const { pathname } = useLocation();
+	const { safeNavigate } = useSafeNavigate();
 	const params = useUrlQuery();
 	const { t } = useTranslation(['common']);
 	const {
@@ -202,7 +203,9 @@ function AllErrors(): JSX.Element {
 				queryParams.serviceName = serviceFilterValue;
 			}
 
-			history.replace(`${pathname}?${createQueryParams(queryParams)}`);
+			safeNavigate(`${pathname}?${createQueryParams(queryParams)}`, {
+				replace: true,
+			});
 			confirm();
 		},
 		[
@@ -213,6 +216,7 @@ function AllErrors(): JSX.Element {
 			getUpdatedServiceName,
 			pathname,
 			updatedOrder,
+			safeNavigate,
 		],
 	);
 
@@ -414,7 +418,7 @@ function AllErrors(): JSX.Element {
 					serviceName: getFilterString(params.get(urlKey.serviceName)),
 					exceptionType: getFilterString(params.get(urlKey.exceptionType)),
 				});
-				history.replace(
+				safeNavigate(
 					`${pathname}?${createQueryParams({
 						order: updatedOrder,
 						offset: (current - 1) * pageSize,
@@ -423,10 +427,11 @@ function AllErrors(): JSX.Element {
 						exceptionType,
 						serviceName,
 					})}`,
+					{ replace: true },
 				);
 			}
 		},
-		[pathname],
+		[pathname, safeNavigate],
 	);
 
 	const logEventCalledRef = useRef(false);

frontend/src/container/AppLayout/index.tsx

@@ -25,7 +25,7 @@ import dayjs from 'dayjs';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
 import { useNotifications } from 'hooks/useNotifications';
-import history from 'lib/history';
+import { useSafeNavigate } from 'hooks/useSafeNavigate';
 import { isNull } from 'lodash-es';
 import ErrorBoundaryFallback from 'pages/ErrorBoundaryFallback/ErrorBoundaryFallback';
 import { INTEGRATION_TYPES } from 'pages/Integrations/utils';
@@ -42,7 +42,7 @@ import { Helmet } from 'react-helmet-async';
 import { useTranslation } from 'react-i18next';
 import { useMutation, useQueries } from 'react-query';
 import { useDispatch } from 'react-redux';
-import { useLocation } from 'react-router-dom';
+import { useLocation } from 'react-router';
 import { Dispatch } from 'redux';
 import AppActions from 'types/actions';
 import {
@@ -121,6 +121,7 @@ function AppLayout(props: AppLayoutProps): JSX.Element {
 	});
 
 	const isDarkMode = useIsDarkMode();
+	const { safeNavigate } = useSafeNavigate();
 
 	const { pathname } = useLocation();
 	const { t } = useTranslation(['titles']);
@@ -319,9 +320,9 @@ function AppLayout(props: AppLayoutProps): JSX.Element {
 
 	const handleUpgrade = useCallback((): void => {
 		if (user.role === USER_ROLES.ADMIN) {
-			history.push(ROUTES.BILLING);
+			safeNavigate(ROUTES.BILLING);
 		}
-	}, [user.role]);
+	}, [user.role, safeNavigate]);
 
 	const handleFailedPayment = useCallback((): void => {
 		manageCreditCard({

frontend/src/container/BillingContainer/BillingContainer.tsx

@@ -333,7 +333,7 @@ export default function BillingContainer(): JSX.Element {
 			});
 
 			updateCreditCard({
-				url: window.location.href,
+				url: window.location.origin,
 			});
 		} else {
 			logEvent('Billing : Manage Billing', {
@@ -342,7 +342,7 @@ export default function BillingContainer(): JSX.Element {
 			});
 
 			manageCreditCard({
-				url: window.location.href,
+				url: window.location.origin,
 			});
 		}
 		// eslint-disable-next-line react-hooks/exhaustive-deps

frontend/src/container/CloudIntegrationPage/Header/Header.tsx

@@ -3,7 +3,7 @@ import './Header.styles.scss';
 import Breadcrumb from 'antd/es/breadcrumb';
 import ROUTES from 'constants/routes';
 import { Blocks, LifeBuoy } from 'lucide-react';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router';
 
 function Header(): JSX.Element {
 	return (

frontend/src/container/CloudIntegrationPage/HeroSection/components/AccountActions.tsx

@@ -5,10 +5,10 @@ import { Button, Select, Skeleton } from 'antd';
 import { SelectProps } from 'antd/lib';
 import logEvent from 'api/common/logEvent';
 import { useAwsAccounts } from 'hooks/integration/aws/useAwsAccounts';
+import { useSafeNavigate } from 'hooks/useSafeNavigate';
 import useUrlQuery from 'hooks/useUrlQuery';
 import { Check, ChevronDown } from 'lucide-react';
 import { useEffect, useMemo, useState } from 'react';
-import { useNavigate } from 'react-router-dom-v5-compat';
 
 import { CloudAccount } from '../../ServicesSection/types';
 import AccountSettingsModal from './AccountSettingsModal';
@@ -140,7 +140,7 @@ function AccountActionsRenderer({
 
 function AccountActions(): JSX.Element {
 	const urlQuery = useUrlQuery();
-	const navigate = useNavigate();
+	const { safeNavigate } = useSafeNavigate();
 	const { data: accounts, isLoading } = useAwsAccounts();
 
 	const initialAccount = useMemo(
@@ -162,7 +162,7 @@ function AccountActions(): JSX.Element {
 			setActiveAccount(initialAccount);
 			const latestUrlQuery = new URLSearchParams(window.location.search);
 			latestUrlQuery.set('cloudAccountId', initialAccount.cloud_account_id);
-			navigate({ search: latestUrlQuery.toString() });
+			safeNavigate({ search: latestUrlQuery.toString() });
 		}
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [initialAccount]);
@@ -216,7 +216,7 @@ function AccountActions(): JSX.Element {
 					if (accounts) {
 						setActiveAccount(getAccountById(accounts, value));
 						urlQuery.set('cloudAccountId', value);
-						navigate({ search: urlQuery.toString() });
+						safeNavigate({ search: urlQuery.toString() });
 					}
 				}}
 				onIntegrationModalOpen={startAccountConnectionAttempt}

frontend/src/container/CloudIntegrationPage/HeroSection/components/AccountSettingsModal.tsx

@@ -7,8 +7,8 @@ import {
 	getRegionPreviewText,
 	useAccountSettingsModal,
 } from 'hooks/integration/aws/useAccountSettingsModal';
+import { useSafeNavigate } from 'hooks/useSafeNavigate';
 import useUrlQuery from 'hooks/useUrlQuery';
-import history from 'lib/history';
 import { Dispatch, SetStateAction, useCallback } from 'react';
 import { useQueryClient } from 'react-query';
 
@@ -45,12 +45,13 @@ function AccountSettingsModal({
 
 	const queryClient = useQueryClient();
 	const urlQuery = useUrlQuery();
+	const { safeNavigate } = useSafeNavigate();
 
 	const handleRemoveIntegrationAccountSuccess = (): void => {
 		queryClient.invalidateQueries([REACT_QUERY_KEY.AWS_ACCOUNTS]);
 		urlQuery.delete('cloudAccountId');
 		handleClose();
-		history.replace({ search: urlQuery.toString() });
+		safeNavigate({ search: urlQuery.toString() });
 
 		logEvent('AWS Integration: Account removed', {
 			id: account?.id,

frontend/src/container/CloudIntegrationPage/ServicesSection/CloudServiceDashboards.tsx

@@ -1,4 +1,4 @@
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router';
 
 import { ServiceData } from './types';
 

frontend/src/container/CloudIntegrationPage/ServicesSection/ServicesList.tsx

@@ -1,8 +1,8 @@
 import Spinner from 'components/Spinner';
 import { useGetAccountServices } from 'hooks/integration/aws/useGetAccountServices';
+import { useSafeNavigate } from 'hooks/useSafeNavigate';
 import useUrlQuery from 'hooks/useUrlQuery';
 import { useCallback, useEffect, useMemo } from 'react';
-import { useNavigate } from 'react-router-dom-v5-compat';
 
 import ServiceItem from './ServiceItem';
 
@@ -16,7 +16,7 @@ function ServicesList({
 	filter,
 }: ServicesListProps): JSX.Element {
 	const urlQuery = useUrlQuery();
-	const navigate = useNavigate();
+	const { safeNavigate } = useSafeNavigate();
 	const { data: services = [], isLoading } = useGetAccountServices(
 		cloudAccountId,
 	);
@@ -26,9 +26,9 @@ function ServicesList({
 		(serviceId: string): void => {
 			const latestUrlQuery = new URLSearchParams(window.location.search);
 			latestUrlQuery.set('service', serviceId);
-			navigate({ search: latestUrlQuery.toString() });
+			safeNavigate({ search: latestUrlQuery.toString() });
 		},
-		[navigate],
+		[safeNavigate],
 	);
 
 	const filteredServices = useMemo(() => {

frontend/src/container/ConfigDropdown/Config/Link.tsx

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router';
 
 function LinkContainer({ children, href }: LinkContainerProps): JSX.Element {
 	const isInternalLink = href.startsWith('/');

frontend/src/container/CreateAlertChannels/index.tsx

@@ -15,7 +15,7 @@ import logEvent from 'api/common/logEvent';
 import ROUTES from 'constants/routes';
 import FormAlertChannels from 'container/FormAlertChannels';
 import { useNotifications } from 'hooks/useNotifications';
-import history from 'lib/history';
+import { useSafeNavigate } from 'hooks/useSafeNavigate';
 import { useCallback, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -86,6 +86,7 @@ function CreateAlertChannels({
 	const [savingState, setSavingState] = useState<boolean>(false);
 	const [testingState, setTestingState] = useState<boolean>(false);
 	const { notifications } = useNotifications();
+	const { safeNavigate } = useSafeNavigate();
 
 	const [type, setType] = useState<ChannelType>(preType);
 	const onTypeChangeHandler = useCallback(
@@ -143,7 +144,7 @@ function CreateAlertChannels({
 					message: 'Success',
 					description: t('channel_creation_done'),
 				});
-				history.replace(ROUTES.ALL_CHANNELS);
+				safeNavigate(ROUTES.ALL_CHANNELS, { replace: true });
 				return { status: 'success', statusMessage: t('channel_creation_done') };
 			}
 			notifications.error({
@@ -163,7 +164,7 @@ function CreateAlertChannels({
 		} finally {
 			setSavingState(false);
 		}
-	}, [prepareSlackRequest, t, notifications]);
+	}, [prepareSlackRequest, t, notifications, safeNavigate]);
 
 	const prepareWebhookRequest = useCallback(() => {
 		// initial api request without auth params
@@ -210,7 +211,7 @@ function CreateAlertChannels({
 					message: 'Success',
 					description: t('channel_creation_done'),
 				});
-				history.replace(ROUTES.ALL_CHANNELS);
+				safeNavigate(ROUTES.ALL_CHANNELS, { replace: true });
 				return { status: 'success', statusMessage: t('channel_creation_done') };
 			}
 			notifications.error({
@@ -230,7 +231,7 @@ function CreateAlertChannels({
 		} finally {
 			setSavingState(false);
 		}
-	}, [prepareWebhookRequest, t, notifications]);
+	}, [prepareWebhookRequest, t, notifications, safeNavigate]);
 
 	const preparePagerRequest = useCallback(() => {
 		const validationError = ValidatePagerChannel(selectedConfig as PagerChannel);
@@ -271,7 +272,7 @@ function CreateAlertChannels({
 						message: 'Success',
 						description: t('channel_creation_done'),
 					});
-					history.replace(ROUTES.ALL_CHANNELS);
+					safeNavigate(ROUTES.ALL_CHANNELS, { replace: true });
 					return { status: 'success', statusMessage: t('channel_creation_done') };
 				}
 				notifications.error({
@@ -297,7 +298,7 @@ function CreateAlertChannels({
 		} finally {
 			setSavingState(false);
 		}
-	}, [t, notifications, preparePagerRequest]);
+	}, [t, notifications, preparePagerRequest, safeNavigate]);
 
 	const prepareOpsgenieRequest = useCallback(
 		() => ({
@@ -322,7 +323,7 @@ function CreateAlertChannels({
 					message: 'Success',
 					description: t('channel_creation_done'),
 				});
-				history.replace(ROUTES.ALL_CHANNELS);
+				safeNavigate(ROUTES.ALL_CHANNELS, { replace: true });
 				return { status: 'success', statusMessage: t('channel_creation_done') };
 			}
 			notifications.error({
@@ -342,7 +343,7 @@ function CreateAlertChannels({
 		} finally {
 			setSavingState(false);
 		}
-	}, [prepareOpsgenieRequest, t, notifications]);
+	}, [prepareOpsgenieRequest, t, notifications, safeNavigate]);
 
 	const prepareEmailRequest = useCallback(
 		() => ({
@@ -365,7 +366,7 @@ function CreateAlertChannels({
 					message: 'Success',
 					description: t('channel_creation_done'),
 				});
-				history.replace(ROUTES.ALL_CHANNELS);
+				safeNavigate(ROUTES.ALL_CHANNELS, { replace: true });
 				return { status: 'success', statusMessage: t('channel_creation_done') };
 			}
 			notifications.error({
@@ -385,7 +386,7 @@ function CreateAlertChannels({
 		} finally {
 			setSavingState(false);
 		}
-	}, [prepareEmailRequest, t, notifications]);
+	}, [prepareEmailRequest, t, notifications, safeNavigate]);
 
 	const prepareMsTeamsRequest = useCallback(
 		() => ({
@@ -409,7 +410,7 @@ function CreateAlertChannels({
 					message: 'Success',
 					description: t('channel_creation_done'),
 				});
-				history.replace(ROUTES.ALL_CHANNELS);
+				safeNavigate(ROUTES.ALL_CHANNELS, { replace: true });
 				return { status: 'success', statusMessage: t('channel_creation_done') };
 			}
 			notifications.error({
@@ -429,7 +430,7 @@ function CreateAlertChannels({
 		} finally {
 			setSavingState(false);
 		}
-	}, [prepareMsTeamsRequest, t, notifications]);
+	}, [prepareMsTeamsRequest, t, notifications, safeNavigate]);
 
 	const onSaveHandler = useCallback(
 		async (value: ChannelType) => {

frontend/src/container/CreateAlertRule/index.tsx

@@ -4,9 +4,9 @@ import { ENTITY_VERSION_V4 } from 'constants/app';
 import { QueryParams } from 'constants/query';
 import FormAlertRules, { AlertDetectionTypes } from 'container/FormAlertRules';
 import { useGetCompositeQueryParam } from 'hooks/queryBuilder/useGetCompositeQueryParam';
-import history from 'lib/history';
+import { useSafeNavigate } from 'hooks/useSafeNavigate';
 import { useEffect, useState } from 'react';
-import { useLocation } from 'react-router-dom';
+import { useLocation } from 'react-router';
 import { AlertTypes } from 'types/api/alerts/alertTypes';
 import { AlertDef } from 'types/api/alerts/def';
 
@@ -24,6 +24,7 @@ function CreateRules(): JSX.Element {
 	const [initValues, setInitValues] = useState<AlertDef | null>(null);
 
 	const location = useLocation();
+	const { safeNavigate } = useSafeNavigate();
 	const queryParams = new URLSearchParams(location.search);
 	const alertTypeFromURL = queryParams.get(QueryParams.ruleType);
 	const version = queryParams.get('version');
@@ -96,7 +97,7 @@ function CreateRules(): JSX.Element {
 		}
 
 		const generatedUrl = `${location.pathname}?${queryParams.toString()}`;
-		history.replace(generatedUrl);
+		safeNavigate(generatedUrl, { replace: true });
 	};
 
 	useEffect(() => {
@@ -121,7 +122,7 @@ function CreateRules(): JSX.Element {
 			alertType={alertType}
 			formInstance={formInstance}
 			initialValue={initValues}
-			ruleId={0}
+			ruleId=""
 		/>
 	);
 }

frontend/src/container/EditAlertChannels/index.tsx

@@ -25,10 +25,10 @@ import {
 } from 'container/CreateAlertChannels/config';
 import FormAlertChannels from 'container/FormAlertChannels';
 import { useNotifications } from 'hooks/useNotifications';
-import history from 'lib/history';
+import { useSafeNavigate } from 'hooks/useSafeNavigate';
 import { useCallback, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useParams } from 'react-router-dom';
+import { useParams } from 'react-router';
 
 function EditAlertChannels({
 	initialValue,
@@ -52,7 +52,9 @@ function EditAlertChannels({
 	const [savingState, setSavingState] = useState<boolean>(false);
 	const [testingState, setTestingState] = useState<boolean>(false);
 	const { notifications } = useNotifications();
-	const { id } = useParams<{ id: string }>();
+	const { safeNavigate } = useSafeNavigate();
+	// Temp: Hard type casting for string | undefined
+	const { id } = useParams() as { id: string };
 
 	const [type, setType] = useState<ChannelType>(
 		initialValue?.type ? (initialValue.type as ChannelType) : ChannelType.Slack,
@@ -101,7 +103,7 @@ function EditAlertChannels({
 				description: t('channel_edit_done'),
 			});
 
-			history.replace(ROUTES.ALL_CHANNELS);
+			safeNavigate(ROUTES.ALL_CHANNELS, { replace: true });
 			return { status: 'success', statusMessage: t('channel_edit_done') };
 		}
 		notifications.error({
@@ -113,7 +115,7 @@ function EditAlertChannels({
 			status: 'failed',
 			statusMessage: response.error || t('channel_edit_failed'),
 		};
-	}, [prepareSlackRequest, t, notifications, selectedConfig]);
+	}, [prepareSlackRequest, t, notifications, selectedConfig, safeNavigate]);
 
 	const prepareWebhookRequest = useCallback(() => {
 		const { name, username, password } = selectedConfig;
@@ -158,7 +160,7 @@ function EditAlertChannels({
 				description: t('channel_edit_done'),
 			});
 
-			history.replace(ROUTES.ALL_CHANNELS);
+			safeNavigate(ROUTES.ALL_CHANNELS, { replace: true });
 			return { status: 'success', statusMessage: t('channel_edit_done') };
 		}
 		showError(response.error || t('channel_edit_failed'));
@@ -168,7 +170,7 @@ function EditAlertChannels({
 			status: 'failed',
 			statusMessage: response.error || t('channel_edit_failed'),
 		};
-	}, [prepareWebhookRequest, t, notifications, selectedConfig]);
+	}, [prepareWebhookRequest, t, notifications, selectedConfig, safeNavigate]);
 
 	const prepareEmailRequest = useCallback(
 		() => ({
@@ -191,7 +193,7 @@ function EditAlertChannels({
 				message: 'Success',
 				description: t('channel_edit_done'),
 			});
-			history.replace(ROUTES.ALL_CHANNELS);
+			safeNavigate(ROUTES.ALL_CHANNELS, { replace: true });
 			return { status: 'success', statusMessage: t('channel_edit_done') };
 		}
 		notifications.error({
@@ -204,7 +206,7 @@ function EditAlertChannels({
 			status: 'failed',
 			statusMessage: response.error || t('channel_edit_failed'),
 		};
-	}, [prepareEmailRequest, t, notifications]);
+	}, [prepareEmailRequest, t, notifications, safeNavigate]);
 
 	const preparePagerRequest = useCallback(
 		() => ({
@@ -245,7 +247,7 @@ function EditAlertChannels({
 				description: t('channel_edit_done'),
 			});
 
-			history.replace(ROUTES.ALL_CHANNELS);
+			safeNavigate(ROUTES.ALL_CHANNELS, { replace: true });
 			return { status: 'success', statusMessage: t('channel_edit_done') };
 		}
 		notifications.error({
@@ -258,7 +260,7 @@ function EditAlertChannels({
 			status: 'failed',
 			statusMessage: response.error || t('channel_edit_failed'),
 		};
-	}, [preparePagerRequest, notifications, selectedConfig, t]);
+	}, [preparePagerRequest, notifications, selectedConfig, t, safeNavigate]);
 
 	const prepareOpsgenieRequest = useCallback(
 		() => ({
@@ -293,7 +295,7 @@ function EditAlertChannels({
 				description: t('channel_edit_done'),
 			});
 
-			history.replace(ROUTES.ALL_CHANNELS);
+			safeNavigate(ROUTES.ALL_CHANNELS, { replace: true });
 			return { status: 'success', statusMessage: t('channel_edit_done') };
 		}
 		notifications.error({
@@ -306,7 +308,7 @@ function EditAlertChannels({
 			status: 'failed',
 			statusMessage: response.error || t('channel_edit_failed'),
 		};
-	}, [prepareOpsgenieRequest, t, notifications, selectedConfig]);
+	}, [prepareOpsgenieRequest, t, notifications, selectedConfig, safeNavigate]);
 
 	const prepareMsTeamsRequest = useCallback(
 		() => ({
@@ -340,7 +342,7 @@ function EditAlertChannels({
 				description: t('channel_edit_done'),
 			});
 
-			history.replace(ROUTES.ALL_CHANNELS);
+			safeNavigate(ROUTES.ALL_CHANNELS, { replace: true });
 			return { status: 'success', statusMessage: t('channel_edit_done') };
 		}
 		notifications.error({
@@ -353,7 +355,7 @@ function EditAlertChannels({
 			status: 'failed',
 			statusMessage: response.error || t('channel_edit_failed'),
 		};
-	}, [prepareMsTeamsRequest, t, notifications, selectedConfig]);
+	}, [prepareMsTeamsRequest, t, notifications, selectedConfig, safeNavigate]);
 
 	const onSaveHandler = useCallback(
 		async (value: ChannelType) => {

frontend/src/container/EditRules/index.tsx

@@ -22,7 +22,7 @@ function EditRules({ initialValue, ruleId }: EditRulesProps): JSX.Element {
 
 interface EditRulesProps {
 	initialValue: AlertDef;
-	ruleId: number;
+	ruleId: string;
 }
 
 export default EditRules;

frontend/src/container/ErrorDetails/index.tsx

@@ -8,15 +8,15 @@ import { ResizeTable } from 'components/ResizeTable';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
 import { getNanoSeconds } from 'container/AllError/utils';
 import { useNotifications } from 'hooks/useNotifications';
+import { useSafeNavigate } from 'hooks/useSafeNavigate';
 import createQueryParams from 'lib/createQueryParams';
-import history from 'lib/history';
 import { isUndefined } from 'lodash-es';
 import { urlKey } from 'pages/ErrorDetails/utils';
 import { useTimezone } from 'providers/Timezone';
 import { useEffect, useMemo, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useQuery } from 'react-query';
-import { useLocation } from 'react-router-dom';
+import { useLocation } from 'react-router';
 import { PayloadProps as GetByErrorTypeAndServicePayload } from 'types/api/errors/getByErrorTypeAndService';
 
 import { keyToExclude } from './config';
@@ -77,6 +77,7 @@ function ErrorDetails(props: ErrorDetailsProps): JSX.Element {
 	);
 
 	const { notifications } = useNotifications();
+	const { safeNavigate } = useSafeNavigate();
 
 	const onClickErrorIdHandler = async (
 		id: string,
@@ -96,7 +97,9 @@ function ErrorDetails(props: ErrorDetailsProps): JSX.Element {
 				errorId: id,
 			};
 
-			history.replace(`${pathname}?${createQueryParams(queryParams)}`);
+			safeNavigate(`${pathname}?${createQueryParams(queryParams)}`, {
+				replace: true,
+			});
 		} catch (error) {
 			notifications.error({
 				message: t('something_went_wrong'),
@@ -118,7 +121,7 @@ function ErrorDetails(props: ErrorDetailsProps): JSX.Element {
 			traceId: errorDetail.traceID,
 			exceptionId: errorDetail?.errorId,
 		});
-		history.push(`/trace/${errorDetail.traceID}?spanId=${errorDetail.spanID}`);
+		safeNavigate(`/trace/${errorDetail.traceID}?spanId=${errorDetail.spanID}`);
 	};
 
 	const logEventCalledRef = useRef(false);

frontend/src/container/ExplorerOptions/ExplorerOptions.tsx

@@ -39,6 +39,7 @@ import { useIsDarkMode } from 'hooks/useDarkMode';
 import useErrorNotification from 'hooks/useErrorNotification';
 import { useHandleExplorerTabChange } from 'hooks/useHandleExplorerTabChange';
 import { useNotifications } from 'hooks/useNotifications';
+import { useSafeNavigate } from 'hooks/useSafeNavigate';
 import { mapCompositeQueryFromQuery } from 'lib/newQueryBuilder/queryBuilderMappers/mapCompositeQueryFromQuery';
 import { cloneDeep, isEqual, omit } from 'lodash-es';
 import {
@@ -60,7 +61,6 @@ import {
 	useRef,
 	useState,
 } from 'react';
-import { useHistory } from 'react-router-dom';
 import { Dashboard } from 'types/api/dashboard/getAll';
 import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
 import { Query } from 'types/api/queryBuilder/queryBuilderData';
@@ -96,7 +96,7 @@ function ExplorerOptions({
 	const [newViewName, setNewViewName] = useState<string>('');
 	const [color, setColor] = useState(Color.BG_SIENNA_500);
 	const { notifications } = useNotifications();
-	const history = useHistory();
+	const { safeNavigate } = useSafeNavigate();
 	const ref = useRef<RefSelectProps>(null);
 	const isDarkMode = useIsDarkMode();
 	const isLogsExplorer = sourcepage === DataSource.LOGS;
@@ -181,13 +181,13 @@ function ExplorerOptions({
 
 		const stringifiedQuery = handleConditionalQueryModification();
 
-		history.push(
+		safeNavigate(
 			`${ROUTES.ALERTS_NEW}?${QueryParams.compositeQuery}=${encodeURIComponent(
 				stringifiedQuery,
 			)}`,
 		);
 		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [handleConditionalQueryModification, history]);
+	}, [handleConditionalQueryModification, safeNavigate]);
 
 	const onCancel = (value: boolean) => (): void => {
 		onModalToggle(value);
@@ -461,7 +461,7 @@ function ExplorerOptions({
 					: defaultLogsSelectedColumns,
 		});
 
-		history.replace(DATASOURCE_VS_ROUTES[sourcepage]);
+		safeNavigate(DATASOURCE_VS_ROUTES[sourcepage], { replace: true });
 	};
 
 	const isQueryUpdated = isStagedQueryUpdated(

frontend/src/container/FormAlertChannels/index.tsx

@@ -9,7 +9,7 @@ import {
 	SlackChannel,
 	WebhookChannel,
 } from 'container/CreateAlertChannels/config';
-import history from 'lib/history';
+import { useSafeNavigate } from 'hooks/useSafeNavigate';
 import { Dispatch, ReactElement, SetStateAction } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -35,6 +35,7 @@ function FormAlertChannels({
 	editing = false,
 }: FormAlertChannelsProps): JSX.Element {
 	const { t } = useTranslation('channels');
+	const { safeNavigate } = useSafeNavigate();
 
 	const renderSettings = (): ReactElement | null => {
 		switch (type) {
@@ -147,7 +148,7 @@ function FormAlertChannels({
 					</Button>
 					<Button
 						onClick={(): void => {
-							history.replace(ROUTES.SETTINGS);
+							safeNavigate(ROUTES.SETTINGS);
 						}}
 					>
 						{t('button_return')}

frontend/src/container/FormAlertRules/ChartPreview/index.tsx

@@ -18,10 +18,10 @@ import {
 import { useGetQueryRange } from 'hooks/queryBuilder/useGetQueryRange';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { useResizeObserver } from 'hooks/useDimensions';
+import { useSafeNavigate } from 'hooks/useSafeNavigate';
 import useUrlQuery from 'hooks/useUrlQuery';
 import GetMinMax from 'lib/getMinMax';
 import getTimeString from 'lib/getTimeString';
-import history from 'lib/history';
 import { getUPlotChartOptions } from 'lib/uPlotLib/getUplotChartOptions';
 import { getUPlotChartData } from 'lib/uPlotLib/utils/getUplotChartData';
 import { useAppContext } from 'providers/App/App';
@@ -29,7 +29,7 @@ import { useTimezone } from 'providers/Timezone';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useDispatch, useSelector } from 'react-redux';
-import { useLocation } from 'react-router-dom';
+import { useLocation } from 'react-router';
 import { UpdateTimeInterval } from 'store/actions';
 import { AppState } from 'store/reducers';
 import { AlertDef } from 'types/api/alerts/def';
@@ -85,6 +85,7 @@ function ChartPreview({
 	>((state) => state.globalTime);
 
 	const { featureFlags } = useAppContext();
+	const { safeNavigate } = useSafeNavigate();
 
 	const handleBackNavigation = (): void => {
 		const searchParams = new URLSearchParams(window.location.search);
@@ -200,9 +201,9 @@ function ChartPreview({
 			urlQuery.set(QueryParams.startTime, minTime.toString());
 			urlQuery.set(QueryParams.endTime, maxTime.toString());
 			const generatedUrl = `${location.pathname}?${urlQuery.toString()}`;
-			history.push(generatedUrl);
+			safeNavigate(generatedUrl);
 		},
-		[dispatch, location.pathname, urlQuery],
+		[dispatch, location.pathname, urlQuery, safeNavigate],
 	);
 
 	const { timezone } = useTimezone();

frontend/src/container/FormAlertRules/QuerySection.tsx

@@ -11,6 +11,7 @@ import { QBShortcuts } from 'constants/shortcuts/QBShortcuts';
 import { QueryBuilder } from 'container/QueryBuilder';
 import { useKeyboardHotkeys } from 'hooks/hotkeys/useKeyboardHotkeys';
 import { useIsDarkMode } from 'hooks/useDarkMode';
+import { isEmpty } from 'lodash-es';
 import { Atom, Play, Terminal } from 'lucide-react';
 import { useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -156,7 +157,7 @@ function QuerySection({
 											runQuery();
 											logEvent('Alert: Stage and run query', {
 												dataSource: ALERTS_DATA_SOURCE_MAP[alertType],
-												isNewRule: !ruleId || ruleId === 0,
+												isNewRule: !ruleId || isEmpty(ruleId),
 												ruleId,
 												queryType: queryCategory,
 											});
@@ -230,7 +231,7 @@ interface QuerySectionProps {
 	runQuery: VoidFunction;
 	alertDef: AlertDef;
 	panelType: PANEL_TYPES;
-	ruleId: number;
+	ruleId: string;
 }
 
 export default QuerySection;

frontend/src/container/FormAlertRules/index.tsx

@@ -21,7 +21,7 @@ import { useSafeNavigate } from 'hooks/useSafeNavigate';
 import useUrlQuery from 'hooks/useUrlQuery';
 import { mapQueryDataFromApi } from 'lib/newQueryBuilder/queryBuilderMappers/mapQueryDataFromApi';
 import { mapQueryDataToApi } from 'lib/newQueryBuilder/queryBuilderMappers/mapQueryDataToApi';
-import { isEqual } from 'lodash-es';
+import { isEmpty, isEqual } from 'lodash-es';
 import { BellDot, ExternalLink } from 'lucide-react';
 import Tabs2 from 'periscope/components/Tabs2';
 import { useAppContext } from 'providers/App/App';
@@ -29,7 +29,7 @@ import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useQueryClient } from 'react-query';
 import { useSelector } from 'react-redux';
-import { useLocation } from 'react-router-dom';
+import { useLocation } from 'react-router';
 import { AppState } from 'store/reducers';
 import { AlertTypes } from 'types/api/alerts/alertTypes';
 import {
@@ -121,7 +121,7 @@ function FormAlertRules({
 	// use query client
 	const ruleCache = useQueryClient();
 
-	const isNewRule = ruleId === 0;
+	const isNewRule = !ruleId || isEmpty(ruleId);
 
 	const [loading, setLoading] = useState(false);
 	const [queryStatus, setQueryStatus] = useState<string>('');
@@ -481,7 +481,7 @@ function FormAlertRules({
 
 		try {
 			const apiReq =
-				ruleId && ruleId > 0
+				ruleId && !isEmpty(ruleId)
 					? { data: postableAlert, id: ruleId }
 					: { data: postableAlert };
 
@@ -491,7 +491,7 @@ function FormAlertRules({
 				logData = {
 					status: 'success',
 					statusMessage:
-						!ruleId || ruleId === 0 ? t('rule_created') : t('rule_edited'),
+						!ruleId || isEmpty(ruleId) ? t('rule_created') : t('rule_edited'),
 				};
 
 				notifications.success({
@@ -543,7 +543,7 @@ function FormAlertRules({
 			dataSource: ALERTS_DATA_SOURCE_MAP[postableAlert?.alertType as AlertTypes],
 			channelNames: postableAlert?.preferredChannels,
 			broadcastToAll: postableAlert?.broadcastToAll,
-			isNewRule: !ruleId || ruleId === 0,
+			isNewRule: !ruleId || isEmpty(ruleId),
 			ruleId,
 			queryType: currentQuery.queryType,
 			alertId: postableAlert?.id,
@@ -628,7 +628,7 @@ function FormAlertRules({
 			dataSource: ALERTS_DATA_SOURCE_MAP[alertDef?.alertType as AlertTypes],
 			channelNames: postableAlert?.preferredChannels,
 			broadcastToAll: postableAlert?.broadcastToAll,
-			isNewRule: !ruleId || ruleId === 0,
+			isNewRule: !ruleId || isEmpty(ruleId),
 			ruleId,
 			queryType: currentQuery.queryType,
 			status: statusResponse.status,
@@ -700,7 +700,7 @@ function FormAlertRules({
 		alertDef?.broadcastToAll ||
 		(alertDef.preferredChannels && alertDef.preferredChannels.length > 0);
 
-	const isRuleCreated = !ruleId || ruleId === 0;
+	const isRuleCreated = !ruleId || isEmpty(ruleId);
 
 	function handleRedirection(option: AlertTypes): void {
 		let url;
@@ -716,7 +716,7 @@ function FormAlertRules({
 		if (url) {
 			logEvent('Alert: Check example alert clicked', {
 				dataSource: ALERTS_DATA_SOURCE_MAP[alertDef?.alertType as AlertTypes],
-				isNewRule: !ruleId || ruleId === 0,
+				isNewRule: !ruleId || isEmpty(ruleId),
 				ruleId,
 				queryType: currentQuery.queryType,
 				link: url,
@@ -881,8 +881,8 @@ function FormAlertRules({
 							type="default"
 							onClick={onCancelHandler}
 						>
-							{ruleId === 0 && t('button_cancelchanges')}
-							{ruleId > 0 && t('button_discard')}
+							{(!ruleId || isEmpty(ruleId)) && t('button_cancelchanges')}
+							{ruleId && !isEmpty(ruleId) && t('button_discard')}
 						</ActionButton>
 					</ButtonContainer>
 				</MainFormContainer>
@@ -899,7 +899,7 @@ interface FormAlertRuleProps {
 	alertType?: AlertTypes;
 	formInstance: FormInstance;
 	initialValue: AlertDef;
-	ruleId: number;
+	ruleId: string;
 }
 
 export default FormAlertRules;

frontend/src/container/FullScreenHeader/FullScreenHeader.tsx

@@ -2,15 +2,16 @@
 /* eslint-disable jsx-a11y/click-events-have-key-events */
 import './FullScreenHeader.styles.scss';
 
-import history from 'lib/history';
+import { useSafeNavigate } from 'hooks/useSafeNavigate';
 
 export default function FullScreenHeader({
 	overrideRoute,
 }: {
 	overrideRoute?: string;
 }): React.ReactElement {
+	const { safeNavigate } = useSafeNavigate();
 	const handleLogoClick = (): void => {
-		history.push(overrideRoute || '/');
+		safeNavigate(overrideRoute || '/');
 	};
 	return (
 		<div className="full-screen-header-container">

frontend/src/container/GridCardLayout/GridCard/FullView/index.tsx

@@ -28,7 +28,7 @@ import GetMinMax from 'lib/getMinMax';
 import { useDashboard } from 'providers/Dashboard/Dashboard';
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-import { useLocation } from 'react-router-dom';
+import { useLocation } from 'react-router';
 import { UpdateTimeInterval } from 'store/actions';
 import { AppState } from 'store/reducers';
 import { GlobalReducer } from 'types/reducer/globalTime';

frontend/src/container/GridCardLayout/GridCard/WidgetGraphComponent.tsx

@@ -25,7 +25,7 @@ import {
 	useRef,
 	useState,
 } from 'react';
-import { useLocation } from 'react-router-dom';
+import { useLocation } from 'react-router';
 import { Dashboard } from 'types/api/dashboard/getAll';
 import { DataSource } from 'types/common/queryBuilder';
 import { v4 } from 'uuid';

frontend/src/container/GridCardLayout/GridCardLayout.tsx

@@ -34,7 +34,7 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { FullScreen, FullScreenHandle } from 'react-full-screen';
 import { ItemCallback, Layout } from 'react-grid-layout';
 import { useDispatch } from 'react-redux';
-import { useLocation } from 'react-router-dom';
+import { useLocation } from 'react-router';
 import { UpdateTimeInterval } from 'store/actions';
 import { Dashboard, Widgets } from 'types/api/dashboard/getAll';
 import { ROLES, USER_ROLES } from 'types/roles';

frontend/src/container/GridValueComponent/index.tsx

@@ -3,7 +3,7 @@ import { getYAxisFormattedValue } from 'components/Graph/yAxisConfig';
 import ValueGraph from 'components/ValueGraph';
 import { generateGridTitle } from 'container/GridPanelSwitch/utils';
 import { memo, useMemo } from 'react';
-import { useLocation } from 'react-router-dom';
+import { useLocation } from 'react-router';
 
 import { TitleContainer, ValueContainer } from './styles';
 import { GridValueComponentProps } from './types';

frontend/src/container/Home/AlertRules/AlertRules.tsx

@@ -3,14 +3,14 @@ import getAll from 'api/alerts/getAll';
 import logEvent from 'api/common/logEvent';
 import { QueryParams } from 'constants/query';
 import ROUTES from 'constants/routes';
-import history from 'lib/history';
+import { useSafeNavigate } from 'hooks/useSafeNavigate';
 import { mapQueryDataFromApi } from 'lib/newQueryBuilder/queryBuilderMappers/mapQueryDataFromApi';
 import { ArrowRight, ArrowUpRight, Plus } from 'lucide-react';
 import Card from 'periscope/components/Card/Card';
 import { useAppContext } from 'providers/App/App';
 import { useEffect, useState } from 'react';
 import { useQuery } from 'react-query';
-import { Link, useLocation } from 'react-router-dom';
+import { Link, useLocation } from 'react-router';
 import { GettableAlert } from 'types/api/alerts/get';
 import { USER_ROLES } from 'types/roles';
 
@@ -28,6 +28,7 @@ export default function AlertRules({
 
 	const location = useLocation();
 	const params = new URLSearchParams(location.search);
+	const { safeNavigate } = useSafeNavigate();
 
 	// Fetch Alerts
 	const { data: alerts, isError, isLoading } = useQuery('allAlerts', {
@@ -131,7 +132,7 @@ export default function AlertRules({
 
 		params.set(QueryParams.ruleId, record.id.toString());
 
-		history.push(`${ROUTES.ALERT_OVERVIEW}?${params.toString()}`);
+		safeNavigate(`${ROUTES.ALERT_OVERVIEW}?${params.toString()}`);
 	};
 
 	const renderAlertRules = (): JSX.Element => (
@@ -153,7 +154,9 @@ export default function AlertRules({
 						<div className="alert-rule-item-name-container home-data-item-name-container">
 							<img
 								src={
-									rule.id % 2 === 0 ? '/Icons/eight-ball.svg' : '/Icons/circus-tent.svg'
+									Math.random() % 2 === 0
+										? '/Icons/eight-ball.svg'
+										: '/Icons/circus-tent.svg'
 								}
 								alt="alert-rules"
 								className="alert-rules-img"

frontend/src/container/Home/Dashboards/Dashboards.tsx

@@ -7,7 +7,7 @@ import { ArrowRight, ArrowUpRight, Plus } from 'lucide-react';
 import Card from 'periscope/components/Card/Card';
 import { useAppContext } from 'providers/App/App';
 import { useEffect, useState } from 'react';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router';
 import { Dashboard } from 'types/api/dashboard/getAll';
 import { USER_ROLES } from 'types/roles';
 

frontend/src/container/Home/DataSourceInfo/DataSourceInfo.tsx

@@ -3,7 +3,7 @@ import { Button, Skeleton, Tag, Typography } from 'antd';
 import logEvent from 'api/common/logEvent';
 import ROUTES from 'constants/routes';
 import { useGetDeploymentsData } from 'hooks/CustomDomain/useGetDeploymentsData';
-import history from 'lib/history';
+import { useSafeNavigate } from 'hooks/useSafeNavigate';
 import { Globe, Link2 } from 'lucide-react';
 import Card from 'periscope/components/Card/Card';
 import { useAppContext } from 'providers/App/App';
@@ -20,6 +20,7 @@ function DataSourceInfo({
 	isLoading: boolean;
 }): JSX.Element {
 	const { activeLicenseV3 } = useAppContext();
+	const { safeNavigate } = useSafeNavigate();
 
 	const notSendingData = !dataSentToSigNoz;
 
@@ -91,7 +92,7 @@ function DataSourceInfo({
 										activeLicenseV3 &&
 										activeLicenseV3.platform === LicensePlatform.CLOUD
 									) {
-										history.push(ROUTES.GET_STARTED_WITH_CLOUD);
+										safeNavigate(ROUTES.GET_STARTED_WITH_CLOUD);
 									} else {
 										window?.open(
 											DOCS_LINKS.ADD_DATA_SOURCE,
@@ -108,7 +109,7 @@ function DataSourceInfo({
 											activeLicenseV3 &&
 											activeLicenseV3.platform === LicensePlatform.CLOUD
 										) {
-											history.push(ROUTES.GET_STARTED_WITH_CLOUD);
+											safeNavigate(ROUTES.GET_STARTED_WITH_CLOUD);
 										} else {
 											window?.open(
 												DOCS_LINKS.ADD_DATA_SOURCE,

frontend/src/container/Home/Home.tsx

@@ -2,7 +2,7 @@
 import './Home.styles.scss';
 
 import { Color } from '@signozhq/design-tokens';
-import { Button, Popover } from 'antd';
+import { Alert, Button, Popover } from 'antd';
 import logEvent from 'api/common/logEvent';
 import { HostListPayload } from 'api/infraMonitoring/getHostLists';
 import { K8sPodsListPayload } from 'api/infraMonitoring/getK8sPodsList';
@@ -17,7 +17,7 @@ import { getHostListsQuery } from 'container/InfraMonitoringHosts/utils';
 import { useGetHostList } from 'hooks/infraMonitoring/useGetHostList';
 import { useGetK8sPodsList } from 'hooks/infraMonitoring/useGetK8sPodsList';
 import { useGetQueryRange } from 'hooks/queryBuilder/useGetQueryRange';
-import history from 'lib/history';
+import { useSafeNavigate } from 'hooks/useSafeNavigate';
 import cloneDeep from 'lodash-es/cloneDeep';
 import { CompassIcon, DotIcon, HomeIcon, Plus, Wrench } from 'lucide-react';
 import { AnimatePresence } from 'motion/react';
@@ -45,6 +45,7 @@ const homeInterval = 30 * 60 * 1000;
 // eslint-disable-next-line sonarjs/cognitive-complexity
 export default function Home(): JSX.Element {
 	const { user } = useAppContext();
+	const { safeNavigate } = useSafeNavigate();
 
 	const [startTime, setStartTime] = useState<number | null>(null);
 	const [endTime, setEndTime] = useState<number | null>(null);
@@ -382,14 +383,14 @@ export default function Home(): JSX.Element {
 												logEvent('Homepage: Ingestion Active Explore clicked', {
 													source: 'Logs',
 												});
-												history.push(ROUTES.LOGS_EXPLORER);
+												safeNavigate(ROUTES.LOGS_EXPLORER);
 											}}
 											onKeyDown={(e): void => {
 												if (e.key === 'Enter') {
 													logEvent('Homepage: Ingestion Active Explore clicked', {
 														source: 'Logs',
 													});
-													history.push(ROUTES.LOGS_EXPLORER);
+													safeNavigate(ROUTES.LOGS_EXPLORER);
 												}
 											}}
 										>
@@ -423,14 +424,14 @@ export default function Home(): JSX.Element {
 												logEvent('Homepage: Ingestion Active Explore clicked', {
 													source: 'Traces',
 												});
-												history.push(ROUTES.TRACES_EXPLORER);
+												safeNavigate(ROUTES.TRACES_EXPLORER);
 											}}
 											onKeyDown={(e): void => {
 												if (e.key === 'Enter') {
 													logEvent('Homepage: Ingestion Active Explore clicked', {
 														source: 'Traces',
 													});
-													history.push(ROUTES.TRACES_EXPLORER);
+													safeNavigate(ROUTES.TRACES_EXPLORER);
 												}
 											}}
 										>
@@ -464,14 +465,14 @@ export default function Home(): JSX.Element {
 												logEvent('Homepage: Ingestion Active Explore clicked', {
 													source: 'Metrics',
 												});
-												history.push(ROUTES.INFRASTRUCTURE_MONITORING_HOSTS);
+												safeNavigate(ROUTES.INFRASTRUCTURE_MONITORING_HOSTS);
 											}}
 											onKeyDown={(e): void => {
 												if (e.key === 'Enter') {
 													logEvent('Homepage: Ingestion Active Explore clicked', {
 														source: 'Metrics',
 													});
-													history.push(ROUTES.INFRASTRUCTURE_MONITORING_HOSTS);
+													safeNavigate(ROUTES.INFRASTRUCTURE_MONITORING_HOSTS);
 												}
 											}}
 										>
@@ -518,7 +519,7 @@ export default function Home(): JSX.Element {
 													logEvent('Homepage: Explore clicked', {
 														source: 'Logs',
 													});
-													history.push(ROUTES.LOGS_EXPLORER);
+													safeNavigate(ROUTES.LOGS_EXPLORER);
 												}}
 											>
 												Open Logs Explorer
@@ -532,7 +533,7 @@ export default function Home(): JSX.Element {
 													logEvent('Homepage: Explore clicked', {
 														source: 'Traces',
 													});
-													history.push(ROUTES.TRACES_EXPLORER);
+													safeNavigate(ROUTES.TRACES_EXPLORER);
 												}}
 											>
 												Open Traces Explorer
@@ -573,7 +574,7 @@ export default function Home(): JSX.Element {
 													logEvent('Homepage: Explore clicked', {
 														source: 'Dashboards',
 													});
-													history.push(ROUTES.ALL_DASHBOARD);
+													safeNavigate(ROUTES.ALL_DASHBOARD);
 												}}
 											>
 												Create dashboard
@@ -615,7 +616,7 @@ export default function Home(): JSX.Element {
 													logEvent('Homepage: Explore clicked', {
 														source: 'Alerts',
 													});
-													history.push(ROUTES.ALERTS_NEW);
+													safeNavigate(ROUTES.ALERTS_NEW);
 												}}
 											>
 												Create an alert
@@ -644,6 +645,16 @@ export default function Home(): JSX.Element {
 				</div>
 
 				<div className="home-right-content">
+					<div className="home-notifications-container">
+						<div className="notification">
+							<Alert
+								message="We're transitioning alert rule IDs from integers to UUIDs on April 23, 2025. Both old and new alert links will continue to work after this change - existing notifications using integer IDs will remain functional while new alerts will use the UUID format."
+								type="info"
+								showIcon
+							/>
+						</div>
+					</div>
+
 					{!isWelcomeChecklistSkipped && !loadingUserPreferences && (
 						<AnimatePresence initial={false}>
 							<Card className="checklist-card">

frontend/src/container/Home/HomeChecklist/HomeChecklist.tsx

@@ -4,7 +4,7 @@ import './HomeChecklist.styles.scss';
 import { Button } from 'antd';
 import logEvent from 'api/common/logEvent';
 import ROUTES from 'constants/routes';
-import history from 'lib/history';
+import { useSafeNavigate } from 'hooks/useSafeNavigate';
 import { ArrowRight, ArrowRightToLine, BookOpenText } from 'lucide-react';
 import { useAppContext } from 'providers/App/App';
 import { useEffect, useState } from 'react';
@@ -41,6 +41,7 @@ function HomeChecklist({
 	const [whatsNextChecklistItems, setWhatsNextChecklistItems] = useState<
 		ChecklistItem[]
 	>([]);
+	const { safeNavigate } = useSafeNavigate();
 
 	useEffect(() => {
 		setCompletedChecklistItems(checklistItems.filter((item) => item.completed));
@@ -92,12 +93,12 @@ function HomeChecklist({
 														});
 
 														if (item.toRoute !== ROUTES.GET_STARTED_WITH_CLOUD) {
-															history.push(item.toRoute || '');
+															safeNavigate(item.toRoute || '');
 														} else if (
 															activeLicenseV3 &&
 															activeLicenseV3.platform === LicensePlatform.CLOUD
 														) {
-															history.push(item.toRoute || '');
+															safeNavigate(item.toRoute || '');
 														} else {
 															window?.open(
 																item.docsLink || '',

frontend/src/container/Home/SavedViews/SavedViews.tsx

@@ -14,7 +14,7 @@ import { SOURCEPAGE_VS_ROUTES } from 'pages/SaveView/constants';
 import Card from 'periscope/components/Card/Card';
 import { useAppContext } from 'providers/App/App';
 import { useEffect, useMemo, useState } from 'react';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router';
 import { ViewProps } from 'types/api/saveViews/types';
 import { DataSource } from 'types/common/queryBuilder';
 import { USER_ROLES } from 'types/roles';

frontend/src/container/Home/Services/ServiceMetrics.tsx

@@ -11,7 +11,6 @@ import useGetTopLevelOperations from 'hooks/useGetTopLevelOperations';
 import useResourceAttribute from 'hooks/useResourceAttribute';
 import { convertRawQueriesToTraceSelectedTags } from 'hooks/useResourceAttribute/utils';
 import { useSafeNavigate } from 'hooks/useSafeNavigate';
-import history from 'lib/history';
 import { ArrowRight, ArrowUpRight } from 'lucide-react';
 import Card from 'periscope/components/Card/Card';
 import { useAppContext } from 'providers/App/App';
@@ -19,7 +18,7 @@ import { IUser } from 'providers/App/types';
 import { memo, useCallback, useEffect, useMemo, useState } from 'react';
 import { QueryKey } from 'react-query';
 import { useSelector } from 'react-redux';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router';
 import { AppState } from 'store/reducers';
 import {
 	LicensePlatform,
@@ -29,6 +28,7 @@ import { ServicesList } from 'types/api/metrics/getService';
 import { GlobalReducer } from 'types/reducer/globalTime';
 import { Tags } from 'types/reducer/trace';
 import { USER_ROLES } from 'types/roles';
+import { safeNavigateNoSameURLMemo } from 'utils/navigate';
 
 import { DOCS_LINKS } from '../constants';
 import { columns, TIME_PICKER_OPTIONS } from './constants';
@@ -72,7 +72,7 @@ const EmptyState = memo(
 									activeLicenseV3 &&
 									activeLicenseV3.platform === LicensePlatform.CLOUD
 								) {
-									history.push(ROUTES.GET_STARTED_WITH_CLOUD);
+									safeNavigateNoSameURLMemo(ROUTES.GET_STARTED_WITH_CLOUD);
 								} else {
 									window?.open(
 										DOCS_LINKS.ADD_DATA_SOURCE,

frontend/src/container/Home/Services/ServiceTraces.tsx

@@ -3,13 +3,12 @@ import logEvent from 'api/common/logEvent';
 import ROUTES from 'constants/routes';
 import { useQueryService } from 'hooks/useQueryService';
 import { useSafeNavigate } from 'hooks/useSafeNavigate';
-import history from 'lib/history';
 import { ArrowRight, ArrowUpRight } from 'lucide-react';
 import Card from 'periscope/components/Card/Card';
 import { useAppContext } from 'providers/App/App';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useSelector } from 'react-redux';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router';
 import { AppState } from 'store/reducers';
 import { LicensePlatform } from 'types/api/licensesV3/getActive';
 import { ServicesList } from 'types/api/metrics/getService';
@@ -127,7 +126,7 @@ export default function ServiceTraces({
 										activeLicenseV3 &&
 										activeLicenseV3.platform === LicensePlatform.CLOUD
 									) {
-										history.push(ROUTES.GET_STARTED_WITH_CLOUD);
+										safeNavigate(ROUTES.GET_STARTED_WITH_CLOUD);
 									} else {
 										window?.open(
 											DOCS_LINKS.ADD_DATA_SOURCE,
@@ -160,7 +159,7 @@ export default function ServiceTraces({
 				</div>
 			</div>
 		),
-		[user?.role, activeLicenseV3],
+		[user?.role, activeLicenseV3, safeNavigate],
 	);
 
 	const renderDashboardsList = useCallback(

frontend/src/container/ListAlertRules/AlertsEmptyState/AlertsEmptyState.tsx

@@ -5,7 +5,7 @@ import { Button, Divider, Typography } from 'antd';
 import logEvent from 'api/common/logEvent';
 import ROUTES from 'constants/routes';
 import useComponentPermission from 'hooks/useComponentPermission';
-import history from 'lib/history';
+import { useSafeNavigate } from 'hooks/useSafeNavigate';
 import { useAppContext } from 'providers/App/App';
 import { useCallback, useState } from 'react';
 import { DataSource } from 'types/common/queryBuilder';
@@ -33,13 +33,14 @@ export function AlertsEmptyState(): JSX.Element {
 		['add_new_alert', 'action'],
 		user.role,
 	);
+	const { safeNavigate } = useSafeNavigate();
 
 	const [loading, setLoading] = useState(false);
 
 	const onClickNewAlertHandler = useCallback(() => {
 		setLoading(false);
-		history.push(ROUTES.ALERTS_NEW);
-	}, []);
+		safeNavigate(ROUTES.ALERTS_NEW);
+	}, [safeNavigate]);
 
 	return (
 		<div className="alert-list-container">

frontend/src/container/ListAlertRules/DeleteAlert.tsx

@@ -24,7 +24,7 @@ function DeleteAlert({
 
 	const defaultErrorMessage = 'Something went wrong';
 
-	const onDeleteHandler = async (id: number): Promise<void> => {
+	const onDeleteHandler = async (id: string): Promise<void> => {
 		try {
 			const response = await deleteAlerts({
 				id,

frontend/src/container/ListAlertRules/ListAlert.tsx

@@ -20,8 +20,8 @@ import useComponentPermission from 'hooks/useComponentPermission';
 import useDebouncedFn from 'hooks/useDebouncedFunction';
 import useInterval from 'hooks/useInterval';
 import { useNotifications } from 'hooks/useNotifications';
+import { useSafeNavigate } from 'hooks/useSafeNavigate';
 import useUrlQuery from 'hooks/useUrlQuery';
-import history from 'lib/history';
 import { mapQueryDataFromApi } from 'lib/newQueryBuilder/queryBuilderMappers/mapQueryDataFromApi';
 import { useAppContext } from 'providers/App/App';
 import { useCallback, useState } from 'react';
@@ -61,6 +61,7 @@ function ListAlert({ allAlertRules, refetch }: ListAlertProps): JSX.Element {
 		const filteredData = filterAlerts(allAlertRules, value);
 		return filteredData || [];
 	});
+	const { safeNavigate } = useSafeNavigate();
 
 	// Type asuring
 	const sortingOrder: 'ascend' | 'descend' | null =
@@ -102,7 +103,7 @@ function ListAlert({ allAlertRules, refetch }: ListAlertProps): JSX.Element {
 		logEvent('Alert: New alert button clicked', {
 			number: allAlertRules?.length,
 		});
-		history.push(ROUTES.ALERTS_NEW);
+		safeNavigate(ROUTES.ALERTS_NEW);
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, []);
 
@@ -118,7 +119,7 @@ function ListAlert({ allAlertRules, refetch }: ListAlertProps): JSX.Element {
 		params.set(QueryParams.ruleId, record.id.toString());
 
 		setEditLoader(false);
-		history.push(`${ROUTES.ALERT_OVERVIEW}?${params.toString()}`);
+		safeNavigate(`${ROUTES.ALERT_OVERVIEW}?${params.toString()}`);
 	};
 
 	const onCloneHandler = (
@@ -146,7 +147,7 @@ function ListAlert({ allAlertRules, refetch }: ListAlertProps): JSX.Element {
 					setTimeout(() => {
 						const clonedAlert = refetchData.payload[refetchData.payload.length - 1];
 						params.set(QueryParams.ruleId, String(clonedAlert.id));
-						history.push(`${ROUTES.EDIT_ALERTS}?${params.toString()}`);
+						safeNavigate(`${ROUTES.EDIT_ALERTS}?${params.toString()}`);
 					}, 2000);
 				}
 				if (status === 'error') {

frontend/src/container/ListAlertRules/ToggleAlertState.tsx

@@ -25,7 +25,7 @@ function ToggleAlertState({
 	const defaultErrorMessage = 'Something went wrong';
 
 	const onToggleHandler = async (
-		id: number,
+		id: string,
 		disabled: boolean,
 	): Promise<void> => {
 		try {

frontend/src/container/ListOfDashboard/DashboardsList.tsx

@@ -75,7 +75,7 @@ import {
 } from 'react';
 import { Layout } from 'react-grid-layout';
 import { useTranslation } from 'react-i18next';
-import { generatePath } from 'react-router-dom';
+import { generatePath } from 'react-router';
 import { useCopyToClipboard } from 'react-use';
 import {
 	Dashboard,

frontend/src/container/ListOfDashboard/ImportJSON/index.tsx

@@ -25,7 +25,7 @@ import { ExternalLink, Github, MonitorDot, MoveRight, X } from 'lucide-react';
 // See more: https://github.com/lucide-icons/lucide/issues/94
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { generatePath } from 'react-router-dom';
+import { generatePath } from 'react-router';
 import { DashboardData } from 'types/api/dashboard/getAll';
 
 function ImportJSON({

frontend/src/container/ListOfDashboard/SearchFilter/index.tsx

@@ -2,7 +2,7 @@ import { CloseCircleFilled } from '@ant-design/icons';
 import { useMachine } from '@xstate/react';
 import { Button, Select } from 'antd';
 import { RefSelectProps } from 'antd/lib/select';
-import history from 'lib/history';
+import { useSafeNavigate } from 'hooks/useSafeNavigate';
 import { filter, map } from 'lodash-es';
 import {
 	MutableRefObject,
@@ -11,6 +11,7 @@ import {
 	useRef,
 	useState,
 } from 'react';
+import { useLocation } from 'react-router';
 import { Dashboard } from 'types/api/dashboard/getAll';
 import { v4 as uuidv4 } from 'uuid';
 
@@ -41,13 +42,15 @@ function SearchFilter({
 	const [selectedValues, setSelectedValues] = useState<string[]>([]);
 	const [staging, setStaging] = useState<string[] | string[][] | unknown[]>([]);
 	const [queries, setQueries] = useState<IQueryStructure[]>([]);
+	const { safeNavigate } = useSafeNavigate();
+	const { pathname, search } = useLocation();
 
 	useEffect(() => {
-		const searchQueryString = new URLSearchParams(history.location.search).get(
-			'search',
-		);
+		const searchQueryString = new URLSearchParams(search).get('search');
 		if (searchQueryString)
 			setQueries(convertURLQueryStringToQuery(searchQueryString) || []);
+		// TODO: SMIT is this a bug no search in deps?
+		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, []);
 	useEffect(() => {
 		filterDashboards(executeSearchQueries(queries, searchData));
@@ -56,15 +59,15 @@ function SearchFilter({
 
 	const updateURLWithQuery = useCallback(
 		(inputQueries?: IQueryStructure[]): void => {
-			history.push({
-				pathname: history.location.pathname,
+			safeNavigate({
+				pathname,
 				search:
 					inputQueries || queries
 						? `?search=${convertQueriesToURLQuery(inputQueries || queries)}`
 						: '',
 			});
 		},
-		[queries],
+		[queries, pathname, safeNavigate],
 	);
 
 	useEffect(() => {
@@ -149,8 +152,8 @@ function SearchFilter({
 
 	const clearQueries = (): void => {
 		setQueries([]);
-		history.push({
-			pathname: history.location.pathname,
+		safeNavigate({
+			pathname,
 			search: ``,
 		});
 	};

frontend/src/container/ListOfDashboard/TableComponents/DeleteButton.tsx

@@ -6,7 +6,7 @@ import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
 import ROUTES from 'constants/routes';
 import { useDeleteDashboard } from 'hooks/dashboard/useDeleteDashboard';
 import { useNotifications } from 'hooks/useNotifications';
-import history from 'lib/history';
+import { useSafeNavigate } from 'hooks/useSafeNavigate';
 import { useAppContext } from 'providers/App/App';
 import { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -36,6 +36,7 @@ export function DeleteButton({
 	const isAuthor = user?.email === createdBy;
 
 	const queryClient = useQueryClient();
+	const { safeNavigate } = useSafeNavigate();
 
 	const { notifications } = useNotifications();
 
@@ -68,7 +69,7 @@ export function DeleteButton({
 							});
 							queryClient.invalidateQueries([REACT_QUERY_KEY.GET_ALL_DASHBOARDS]);
 							if (routeToListPage) {
-								history.replace(ROUTES.ALL_DASHBOARD);
+								safeNavigate(ROUTES.ALL_DASHBOARD);
 							}
 							destroy();
 						},
@@ -86,6 +87,7 @@ export function DeleteButton({
 		t,
 		queryClient,
 		routeToListPage,
+		safeNavigate,
 	]);
 
 	const getDeleteTooltipContent = (): string => {

frontend/src/container/ListOfDashboard/TableComponents/Name.tsx

@@ -1,12 +1,13 @@
 import { LockFilled } from '@ant-design/icons';
 import ROUTES from 'constants/routes';
-import history from 'lib/history';
+import { useSafeNavigate } from 'hooks/useSafeNavigate';
 
 import { Data } from '../DashboardsList';
 import { TableLinkText } from './styles';
 
 function Name(name: Data['name'], data: Data): JSX.Element {
 	const { id: DashboardId, isLocked } = data;
+	const { safeNavigate } = useSafeNavigate();
 
 	const getLink = (): string => `${ROUTES.ALL_DASHBOARD}/${DashboardId}`;
 
@@ -14,7 +15,7 @@ function Name(name: Data['name'], data: Data): JSX.Element {
 		if (event.metaKey || event.ctrlKey) {
 			window.open(getLink(), '_blank');
 		} else {
-			history.push(getLink());
+			safeNavigate(getLink());
 		}
 	};
 

frontend/src/container/LiveLogs/BackButton/index.tsx

@@ -8,14 +8,14 @@ import {
 import ROUTES from 'constants/routes';
 import { useGetCompositeQueryParam } from 'hooks/queryBuilder/useGetCompositeQueryParam';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
+import { useSafeNavigate } from 'hooks/useSafeNavigate';
 import { useCallback } from 'react';
-import { useHistory } from 'react-router-dom';
 import { DataSource } from 'types/common/queryBuilder';
 
 import { constructCompositeQuery } from '../constants';
 
 function BackButton(): JSX.Element {
-	const history = useHistory();
+	const { safeNavigate } = useSafeNavigate();
 
 	const { updateAllQueriesOperators } = useQueryBuilder();
 
@@ -40,8 +40,8 @@ function BackButton(): JSX.Element {
 
 		const path = `${ROUTES.LOGS_EXPLORER}?${QueryParams.compositeQuery}=${JSONCompositeQuery}`;
 
-		history.push(path);
-	}, [history, compositeQuery, updateAllQueriesOperators]);
+		safeNavigate(path);
+	}, [safeNavigate, compositeQuery, updateAllQueriesOperators]);
 
 	return (
 		<Button icon={<ArrowLeftOutlined />} onClick={handleBack}>

frontend/src/container/LiveLogs/LiveLogsContainer/index.tsx

@@ -14,7 +14,7 @@ import { prepareQueryRangePayload } from 'lib/dashboard/prepareQueryRangePayload
 import { useEventSource } from 'providers/EventSource';
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { useSelector } from 'react-redux';
-import { useLocation } from 'react-router-dom';
+import { useLocation } from 'react-router';
 import { AppState } from 'store/reducers';
 import { ILog } from 'types/api/logs/log';
 import { Query } from 'types/api/queryBuilder/queryBuilderData';

frontend/src/container/LogDetailedView/ContextView/ContextLogRenderer.tsx

@@ -14,7 +14,7 @@ import { ORDERBY_FILTERS } from 'container/QueryBuilder/filters/OrderByFilter/co
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import useUrlQuery from 'hooks/useUrlQuery';
 import { useCallback, useEffect, useMemo, useState } from 'react';
-import { useLocation } from 'react-router-dom';
+import { useLocation } from 'react-router';
 import { Virtuoso } from 'react-virtuoso';
 import { ILog } from 'types/api/logs/log';
 import { Query, TagFilter } from 'types/api/queryBuilder/queryBuilderData';

frontend/src/container/LogDetailedView/TableView.tsx

@@ -15,13 +15,13 @@ import { OPERATORS } from 'constants/queryBuilder';
 import ROUTES from 'constants/routes';
 import { FontSize, OptionsQuery } from 'container/OptionsMenu/types';
 import { useIsDarkMode } from 'hooks/useDarkMode';
-import history from 'lib/history';
+import { useSafeNavigate } from 'hooks/useSafeNavigate';
 import { fieldSearchFilter } from 'lib/logs/fieldSearch';
 import { removeJSONStringifyQuotes } from 'lib/removeJSONStringifyQuotes';
 import { Pin } from 'lucide-react';
 import { useEffect, useMemo, useState } from 'react';
 import { useDispatch } from 'react-redux';
-import { generatePath } from 'react-router-dom';
+import { generatePath } from 'react-router';
 import { Dispatch } from 'redux';
 import AppActions from 'types/actions';
 import { SET_DETAILED_LOG_DATA } from 'types/actions/logs';
@@ -68,6 +68,7 @@ function TableView({
 	const [isfilterInLoading, setIsFilterInLoading] = useState<boolean>(false);
 	const [isfilterOutLoading, setIsFilterOutLoading] = useState<boolean>(false);
 	const isDarkMode = useIsDarkMode();
+	const { safeNavigate } = useSafeNavigate();
 
 	const [pinnedAttributes, setPinnedAttributes] = useState<
 		Record<string, boolean>
@@ -170,7 +171,7 @@ function TableView({
 				// open the trace in new tab
 				window.open(route, '_blank');
 			} else {
-				history.push(route);
+				safeNavigate(route);
 			}
 		}
 	};

frontend/src/container/LogDetailedView/TableView/TableViewActions.tsx

@@ -14,7 +14,7 @@ import { isEmpty } from 'lodash-es';
 import { ArrowDownToDot, ArrowUpFromDot, Ellipsis } from 'lucide-react';
 import { useTimezone } from 'providers/Timezone';
 import React, { useMemo, useState } from 'react';
-import { useLocation } from 'react-router-dom';
+import { useLocation } from 'react-router';
 import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
 import { FORBID_DOM_PURIFY_TAGS } from 'utils/app';
 

frontend/src/container/LogDetailedView/index.tsx

@@ -2,12 +2,12 @@ import LogDetail from 'components/LogDetail';
 import { VIEW_TYPES } from 'components/LogDetail/constants';
 import ROUTES from 'constants/routes';
 import { getOldLogsOperatorFromNew } from 'hooks/logs/useActiveLog';
+import { useSafeNavigate } from 'hooks/useSafeNavigate';
 import { getGeneratedFilterQueryString } from 'lib/getGeneratedFilterQueryString';
 import getStep from 'lib/getStep';
 import { getIdConditions } from 'pages/Logs/utils';
 import { memo, useCallback } from 'react';
 import { connect, useDispatch, useSelector } from 'react-redux';
-import { useHistory } from 'react-router-dom';
 import { bindActionCreators, Dispatch } from 'redux';
 import { ThunkDispatch } from 'redux-thunk';
 import { getLogs } from 'store/actions/logs/getLogs';
@@ -33,7 +33,7 @@ function LogDetailedView({
 	getLogs,
 	getLogsAggregate,
 }: LogDetailedViewProps): JSX.Element {
-	const history = useHistory();
+	const { safeNavigate } = useSafeNavigate();
 	const {
 		detailedLog,
 		searchFilter: { queryString },
@@ -66,9 +66,11 @@ function LogDetailedView({
 				queryString,
 			);
 
-			history.replace(`${ROUTES.OLD_LOGS_EXPLORER}?q=${updatedQueryString}`);
+			safeNavigate(`${ROUTES.OLD_LOGS_EXPLORER}?q=${updatedQueryString}`, {
+				replace: true,
+			});
 		},
-		[history, queryString],
+		[safeNavigate, queryString],
 	);
 
 	const handleClickActionItem = useCallback(

frontend/src/container/Login/index.tsx

@@ -8,12 +8,13 @@ import afterLogin from 'AppRoutes/utils';
 import { LOCALSTORAGE } from 'constants/localStorage';
 import ROUTES from 'constants/routes';
 import { useNotifications } from 'hooks/useNotifications';
-import history from 'lib/history';
+import { useSafeNavigate } from 'hooks/useSafeNavigate';
 import { useAppContext } from 'providers/App/App';
 import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useQuery } from 'react-query';
 import { PayloadProps as PrecheckResultType } from 'types/api/user/loginPrecheck';
+import { safeNavigateNoSameURLMemo } from 'utils/navigate';
 
 import { FormContainer, FormWrapper, Label, ParentContainer } from './styles';
 
@@ -39,6 +40,7 @@ function Login({
 	const { t } = useTranslation(['login']);
 	const [isLoading, setIsLoading] = useState<boolean>(false);
 	const { user } = useAppContext();
+	const { safeNavigate } = useSafeNavigate();
 
 	const [precheckResult, setPrecheckResult] = useState<PrecheckResultType>({
 		sso: false,
@@ -67,7 +69,7 @@ function Login({
 			const { setupCompleted } = getUserVersionResponse.data.payload;
 			if (!setupCompleted) {
 				// no org account registered yet, re-route user to sign up first
-				history.push(ROUTES.SIGN_UP);
+				safeNavigateNoSameURLMemo(ROUTES.SIGN_UP);
 			}
 		}
 	}, [getUserVersionResponse]);
@@ -90,10 +92,10 @@ function Login({
 					LOCALSTORAGE.UNAUTHENTICATED_ROUTE_HIT,
 				);
 				if (fromPathname) {
-					history.push(fromPathname);
+					safeNavigateNoSameURLMemo(fromPathname);
 					setLocalStorageApi(LOCALSTORAGE.UNAUTHENTICATED_ROUTE_HIT, '');
 				} else {
-					history.push(ROUTES.APPLICATION);
+					safeNavigateNoSameURLMemo(ROUTES.APPLICATION);
 				}
 			}
 		}
@@ -287,7 +289,7 @@ function Login({
 							{t('prompt_if_admin')}{' '}
 							<Typography.Link
 								onClick={(): void => {
-									history.push(ROUTES.SIGN_UP);
+									safeNavigate(ROUTES.SIGN_UP);
 								}}
 								style={{ fontWeight: 700 }}
 							>

frontend/src/container/LogsError/LogsError.tsx

@@ -4,15 +4,15 @@ import './LogsError.styles.scss';
 
 import { Typography } from 'antd';
 import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
-import history from 'lib/history';
+import { useSafeNavigate } from 'hooks/useSafeNavigate';
 import { ArrowRight } from 'lucide-react';
 
 export default function LogsError(): JSX.Element {
 	const { isCloudUser: isCloudUserVal } = useGetTenantLicense();
-
+	const { safeNavigate } = useSafeNavigate();
 	const handleContactSupport = (): void => {
 		if (isCloudUserVal) {
-			history.push('/support');
+			safeNavigate('/support');
 		} else {
 			window.open('https://signoz.io/slack', '_blank');
 		}

frontend/src/container/LogsExplorerChart/index.tsx

@@ -9,7 +9,7 @@ import GetMinMax from 'lib/getMinMax';
 import { colors } from 'lib/getRandomColor';
 import { memo, useCallback, useMemo } from 'react';
 import { useDispatch } from 'react-redux';
-import { useLocation } from 'react-router-dom';
+import { useLocation } from 'react-router';
 import { UpdateTimeInterval } from 'store/actions';
 
 import { LogsExplorerChartProps } from './LogsExplorerChart.interfaces';

frontend/src/container/LogsSearchFilter/useSearchParser.ts

@@ -1,7 +1,7 @@
 import { QueryParams } from 'constants/query';
 import { getMinMax } from 'container/TopNav/AutoRefresh/config';
+import { useSafeNavigate } from 'hooks/useSafeNavigate';
 import useUrlQuery from 'hooks/useUrlQuery';
-import history from 'lib/history';
 import { parseQuery } from 'lib/logql';
 import isEqual from 'lodash-es/isEqual';
 import { useCallback, useEffect } from 'react';
@@ -24,6 +24,7 @@ export function useSearchParser(): {
 	updateQueryString: (arg0: string) => void;
 } {
 	const dispatch = useDispatch<Dispatch<AppActions>>();
+	const { safeNavigate } = useSafeNavigate();
 	const {
 		searchFilter: { parsedQuery, queryString },
 		order,
@@ -39,10 +40,16 @@ export function useSearchParser(): {
 
 	const updateQueryString = useCallback(
 		(updatedQueryString: string) => {
-			history.replace({
-				pathname: history.location.pathname,
-				search: `?${QueryParams.q}=${updatedQueryString}&${QueryParams.order}=${order}`,
-			});
+			// Defaults to the current URL
+			safeNavigate(
+				{
+					// No need to prepend '?'
+					search: `${QueryParams.q}=${updatedQueryString}&${QueryParams.order}=${order}`,
+				},
+				{
+					replace: true,
+				},
+			);
 
 			const globalTime = getMinMax(selectedTime, minTime, maxTime);
 
@@ -64,7 +71,7 @@ export function useSearchParser(): {
 		},
 		// need to hide this warning as we don't want to update the query string on every change
 		// eslint-disable-next-line react-hooks/exhaustive-deps
-		[dispatch, parsedQuery, selectedTime, queryString],
+		[dispatch, parsedQuery, selectedTime, queryString, safeNavigate],
 	);
 
 	useEffect(() => {

frontend/src/container/LogsTopNav/index.tsx

@@ -13,16 +13,16 @@ import {
 import { QueryHistoryState } from 'container/LiveLogs/types';
 import LocalTopNav from 'container/LocalTopNav';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
+import { useSafeNavigate } from 'hooks/useSafeNavigate';
 import { useCallback, useMemo } from 'react';
 import { useQueryClient } from 'react-query';
-import { useHistory } from 'react-router-dom';
 import { ErrorResponse, SuccessResponse } from 'types/api';
 import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
 
 import { LiveButtonStyled } from './styles';
 
 function LogsTopNav(): JSX.Element {
-	const history = useHistory();
+	const { safeNavigate } = useSafeNavigate();
 	const queryClient = useQueryClient();
 
 	const { stagedQuery, panelType } = useQueryBuilder();
@@ -65,8 +65,9 @@ function LogsTopNav(): JSX.Element {
 
 		const path = `${ROUTES.LIVE_LOGS}?${QueryParams.compositeQuery}=${JSONCompositeQuery}`;
 
-		history.push(path, queryHistoryState);
-	}, [history, panelType, queryClient, stagedQuery]);
+		// TODO: SMIT Discuss with reviewer
+		safeNavigate(path, { state: queryHistoryState });
+	}, [safeNavigate, panelType, queryClient, stagedQuery]);
 
 	const liveButton = useMemo(
 		() => (

frontend/src/container/MetricsApplication/Tabs/DBCall.tsx

@@ -16,10 +16,9 @@ import {
 import { useSafeNavigate } from 'hooks/useSafeNavigate';
 import useUrlQuery from 'hooks/useUrlQuery';
 import getStep from 'lib/getStep';
-import history from 'lib/history';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useDispatch } from 'react-redux';
-import { useLocation, useParams } from 'react-router-dom';
+import { useLocation, useParams } from 'react-router';
 import store from 'store';
 import { UpdateTimeInterval } from 'store/actions';
 import { TagFilterItem } from 'types/api/queryBuilder/queryBuilderData';
@@ -40,13 +39,17 @@ import {
 } from './util';
 
 function DBCall(): JSX.Element {
-	const { servicename: encodedServiceName } = useParams<IServiceName>();
+	// Temp: Hard type casting for string | undefined
+	const {
+		servicename: encodedServiceName,
+	} = (useParams() as unknown) as IServiceName;
 
 	const servicename = decodeURIComponent(encodedServiceName);
 	const [selectedTimeStamp, setSelectedTimeStamp] = useState<number>(0);
 	const { queries } = useResourceAttribute();
 	const urlQuery = useUrlQuery();
 	const { pathname } = useLocation();
+	const { safeNavigate } = useSafeNavigate();
 	const dispatch = useDispatch();
 
 	const onDragSelect = useCallback(
@@ -57,13 +60,13 @@ function DBCall(): JSX.Element {
 			urlQuery.set(QueryParams.startTime, startTimestamp.toString());
 			urlQuery.set(QueryParams.endTime, endTimestamp.toString());
 			const generatedUrl = `${pathname}?${urlQuery.toString()}`;
-			history.push(generatedUrl);
+			safeNavigate(generatedUrl);
 
 			if (startTimestamp !== endTimestamp) {
 				dispatch(UpdateTimeInterval('custom', [startTimestamp, endTimestamp]));
 			}
 		},
-		[dispatch, pathname, urlQuery],
+		[dispatch, pathname, urlQuery, safeNavigate],
 	);
 
 	const tagFilterItems: TagFilterItem[] = useMemo(
@@ -158,7 +161,6 @@ function DBCall(): JSX.Element {
 		servicename,
 		isDBCall: true,
 	});
-	const { safeNavigate } = useSafeNavigate();
 
 	const onGraphClickHandler = useGraphClickHandler(setSelectedTimeStamp);