Your data. Anywhere you go.

New Relic for iOS or Android


Download on the App Store    Android App on Google play


New Relic Insights App for iOS


Download on the App Store


Learn more

Close icon

Relic Solution: Insights Dashboard for Browser: Part 3 - Ajax Request

browser
insights
levelup

#1

Introduction

Want to create an awesome dashboard with your Browser data? Where you can view the most popular Ajax request or know what is the most popular trigger. With this Level Up post, I will provide the steps to achieve this.

This dashboard will have a FACET widget where you can link the items in that widget to a pre-filtered dashboard of information relevant to just that facet, or filter the results of your existing dashboard.


Dashboard Details

Required Products: APM
Level of Effort: Low
This dashboard will work on the standard New Relic data models and does not require any custom attributes or events.

Settings
Use the gear button to edit your dashboard and configure the following settings:

  • Dashboard Filter: Enabled
  • Enabled Event Types: AjaxRequests
  • Enabled Attributes: all

Prerequisites


Queries

In this section, we’ll go into the details on the purpose of each of the charts. We’ll also show you the query (NRQL) that you can cut/paste into your Insights query bar.

Total count Ajax Requests

select count(*) from AjaxRequest SINCE 60 minutes ago WHERE httpResponseCode not in ('200','201')

The type of Interaction

SELECT count(*) from AjaxRequest SINCE 60 minutes ago FACET `nr.interaction.category`

HTTP method of AJAX request.

select count(*) from AjaxRequest SINCE 60 minutes ago WHERE httpResponseCode not in ('200','201') facet httpMethod

Fully qualified domain name

select count(*) from AjaxRequest SINCE 60 minutes ago WHERE httpResponseCode not in ('200','201') facet hostname

Interactions receiving errors

select count(*) from AjaxRequest SINCE 60 minutes ago WHERE httpResponseCode not in ('200','201') facet browserInteractionName

Backend transactions

select count(*) from AjaxRequest SINCE today WHERE httpResponseCode not in ('200','201') facet `nr.interaction.backendTransactionName`

AJAX avg duration by page

SELECT average( timeToSettle ) from AjaxRequest facet pageUrl

Pageview Performance Breakdown

SELECT count(*) as 'AJAX Calls',average(timeToLoadEventStart) as 'Load Event Start',average(timeToLastCallbackEnd) as 'Last Callback End',average(timeToSettle) as 'Time to Settle'  FROM AjaxRequest FACET `nr.nameForFaceting` SINCE 60 minutes  ago LIMIT 20

Interaction Duration

SELECT average(duration), percentile(duration,50) as 'Median', percentile(duration,75) FROM BrowserInteraction  SINCE 60 minutes ago TIMESERIES

Http Response by hostname

SELECT count(*) FROM AjaxRequest FACET httpResponseCode, hostname

Response code by requested host

SELECT count(*) FROM AjaxRequest TIMESERIES AUTO  FACET httpResponseCode, hostname

AJAX Requests by Domain

SELECT count(*) FROM AjaxRequest FACET hostname SINCE 60 minutes ago

Avg JS Duration by Domain

SELECT average(jsDuration) FROM AjaxRequest FACET hostname SINCE 60 minutes ago

JS Duration by Domain Heatmap

SELECT histogram(jsDuration, 10, 20) FROM AjaxRequest FACET hostname SINCE 1 day ago

Request Types

SELECT count(httpMethod) FROM AjaxRequest FACET httpMethod SINCE 1 day ago

Extra Credit - Share your dashboard with the community!

Want to be a super “NeRD” (New Relic Developer)?
Use the API Explorer to create our Dashboard. Then share your dashboard below and increase your international NeRD cred! (And you’ll earn a cool badge for your community profile!) Here are some quick tips on how to do this.

  1. Copy the Dashboard json below and click here
  2. Paste the JSON into the dashboard textbox with your Admin API key

User%20Dashboard

Once the parameters are filled in, click Send Request, you should receive a 200 OK response.

  1. Go to Insights Dashboards and search for the ` Browser Ajax Dashboard’.

View the Dashboard In Insights

You can now view the Dashboard in Insights by clicking on the All dashboards tab on the left of the Insights home page.

Dashboard Definition

{
  "dashboard": {
    "id": 704417,
    "title": "Browser Ajax Dashboard",
    "description": null,
    "icon": "bar-chart",
    "visibility": "all",
    "editable": "editable_by_all",
    "metadata": {
      "version": 1
    },
    "widgets": [
      {
        "visualization": "billboard",
        "layout": {
          "width": 1,
          "height": 1,
          "row": 1,
          "column": 1
        },
        "widget_id": 6541278,
        "data": [
          {
            "nrql": "select count(*) from AjaxRequest SINCE 60 minutes ago WHERE httpResponseCode not in ('200','201')"
          }
        ],
        "presentation": {
          "title": "Total count Ajax Requests",
          "notes": null,
          "threshold": {}
        }
      },
      {
        "visualization": "facet_bar_chart",
        "layout": {
          "width": 1,
          "height": 1,
          "row": 1,
          "column": 2
        },
        "widget_id": 6541279,
        "data": [
          {
            "nrql": "SELECT count(*) from AjaxRequest SINCE 60 minutes ago FACET `nr.interaction.category`"
          }
        ],
        "presentation": {
          "title": "The type of Interaction",
          "notes": null,
          "drilldown_dashboard_id": 704404
        }
      },
      {
        "visualization": "facet_pie_chart",
        "layout": {
          "width": 1,
          "height": 1,
          "row": 1,
          "column": 3
        },
        "widget_id": 6541280,
        "data": [
          {
            "nrql": "select count(*) from AjaxRequest SINCE 60 minutes ago WHERE httpResponseCode not in ('200','201') facet httpMethod"
          }
        ],
        "presentation": {
          "title": "HTTP method of AJAX request.",
          "notes": null,
          "drilldown_dashboard_id": 704404
        }
      },
      {
        "visualization": "facet_bar_chart",
        "layout": {
          "width": 1,
          "height": 1,
          "row": 2,
          "column": 1
        },
        "widget_id": 6541281,
        "data": [
          {
            "nrql": "select count(*) from AjaxRequest SINCE 60 minutes ago WHERE httpResponseCode not in ('200','201') facet hostname"
          }
        ],
        "presentation": {
          "title": "Fully qualified domain name",
          "notes": null,
          "drilldown_dashboard_id": 704404
        }
      },
      {
        "visualization": "facet_bar_chart",
        "layout": {
          "width": 1,
          "height": 1,
          "row": 2,
          "column": 2
        },
        "widget_id": 6541282,
        "data": [
          {
            "nrql": "select count(*) from AjaxRequest SINCE 60 minutes ago WHERE httpResponseCode not in ('200','201') facet browserInteractionName"
          }
        ],
        "presentation": {
          "title": "Interactions receiving errors",
          "notes": null,
          "drilldown_dashboard_id": 668852
        }
      },
      {
        "visualization": "facet_bar_chart",
        "layout": {
          "width": 1,
          "height": 1,
          "row": 2,
          "column": 3
        },
        "widget_id": 6541283,
        "data": [
          {
            "nrql": "select count(*) from AjaxRequest SINCE today WHERE httpResponseCode not in ('200','201') facet `nr.interaction.backendTransactionName`"
          }
        ],
        "presentation": {
          "title": "Backend transactions",
          "notes": null,
          "drilldown_dashboard_id": 668852
        }
      },
      {
        "visualization": "facet_bar_chart",
        "layout": {
          "width": 1,
          "height": 1,
          "row": 3,
          "column": 1
        },
        "widget_id": 6541284,
        "data": [
          {
            "nrql": "SELECT average( timeToSettle ) from AjaxRequest facet pageUrl"
          }
        ],
        "presentation": {
          "title": "AJAX avg duration by page",
          "notes": null,
          "drilldown_dashboard_id": 668852
        }
      },
      {
        "visualization": "facet_table",
        "layout": {
          "width": 1,
          "height": 1,
          "row": 3,
          "column": 2
        },
        "widget_id": 6541285,
        "data": [
          {
            "nrql": "SELECT count(*) as 'AJAX Calls',average(timeToLoadEventStart) as 'Load Event Start',average(timeToLastCallbackEnd) as 'Last Callback End',average(timeToSettle) as 'Time to Settle'  FROM AjaxRequest FACET `nr.nameForFaceting` SINCE 60 minutes  ago LIMIT 20"
          }
        ],
        "presentation": {
          "title": "Pageview Performance Breakdown",
          "notes": "ast Callback End: Time from the start of the request to the end of the last callback to finish\nLoad event start: Time from the start of the request to the start of the load event\nTime to Settle: Time from the start of the request to the end of all callbk",
          "drilldown_dashboard_id": 668852
        }
      },
      {
        "visualization": "line_chart",
        "layout": {
          "width": 1,
          "height": 1,
          "row": 3,
          "column": 3
        },
        "widget_id": 6541286,
        "data": [
          {
            "nrql": "SELECT average(duration), percentile(duration,50) as 'Median', percentile(duration,75) FROM BrowserInteraction  SINCE 60 minutes ago TIMESERIES"
          }
        ],
        "presentation": {
          "title": "Interaction Duration",
          "notes": null
        }
      },
      {
        "visualization": "facet_pie_chart",
        "layout": {
          "width": 1,
          "height": 1,
          "row": 4,
          "column": 1
        },
        "widget_id": 6541287,
        "data": [
          {
            "nrql": "SELECT count(*) FROM AjaxRequest FACET httpResponseCode, hostname"
          }
        ],
        "presentation": {
          "title": "Http Response by hostname",
          "notes": null,
          "drilldown_dashboard_id": null
        }
      },
      {
        "visualization": "faceted_line_chart",
        "layout": {
          "width": 1,
          "height": 1,
          "row": 4,
          "column": 2
        },
        "widget_id": 6541288,
        "data": [
          {
            "nrql": "SELECT count(*) FROM AjaxRequest TIMESERIES AUTO  FACET httpResponseCode, hostname"
          }
        ],
        "presentation": {
          "title": "Response code by requested host",
          "notes": null
        }
      },
      {
        "visualization": "facet_bar_chart",
        "layout": {
          "width": 1,
          "height": 1,
          "row": 4,
          "column": 3
        },
        "widget_id": 6541289,
        "data": [
          {
            "nrql": "SELECT count(*) FROM AjaxRequest FACET hostname SINCE 60 minutes ago"
          }
        ],
        "presentation": {
          "title": "AJAX Requests by Domain",
          "notes": null,
          "drilldown_dashboard_id": 668852
        }
      },
      {
        "visualization": "facet_bar_chart",
        "layout": {
          "width": 1,
          "height": 1,
          "row": 5,
          "column": 1
        },
        "widget_id": 6541290,
        "data": [
          {
            "nrql": "SELECT average(jsDuration) FROM AjaxRequest FACET hostname SINCE 60 minutes ago"
          }
        ],
        "presentation": {
          "title": "Avg JS Duration by Domain",
          "notes": null,
          "drilldown_dashboard_id": 668852
        }
      },
      {
        "visualization": "heatmap",
        "layout": {
          "width": 1,
          "height": 1,
          "row": 5,
          "column": 2
        },
        "widget_id": 6541291,

        "data": [
          {
            "nrql": "SELECT histogram(jsDuration, 10, 20) FROM AjaxRequest FACET hostname SINCE 1 day ago"
          }
        ],
        "presentation": {
          "title": "JS Duration by Domain Heatmap",
          "notes": null,
          "drilldown_dashboard_id": null
        }
      },
      {
        "visualization": "facet_table",
        "layout": {
          "width": 1,
          "height": 1,
          "row": 5,
          "column": 3
        },
        "widget_id": 6541292,
        "data": [
          {
            "nrql": "SELECT count(httpMethod) FROM AjaxRequest FACET httpMethod SINCE 1 day ago"
          }
        ],
        "presentation": {
          "title": "Request Types",
          "notes": null,
          "drilldown_dashboard_id": 668852
        }
      }
    ],
    "filter": {
      "event_types": [
        "AjaxRequest"
      ],
      "attributes": []
    }
  }
}

More information

Check out our Help Centre for more information on the topics in this post:

Part 1

Dashboard for Pageviews:

Part 2

Dashboard for JS Errors:


Best Practice Guide: Browser