The most surprising thing about New Relic Nerdpacks is that they’re not just for showing off data; they’re a powerful tool for actually changing how you interact with your observability data.
Let’s see one in action. Imagine you have a critical microservice, user-auth, and you want a dashboard that shows its latency, error rate, and throughput, but only when those metrics breach certain thresholds, and you want to see the specific transactions causing those breaches.
Here’s a simplified Nerdpack that does just that, embedded within New Relic’s UI.
import React from 'react';
import { ChartGroup, LineChart, NrqlQuery, AutoSizer } from 'nr1';
const MY_ENTITY_GUID = 'MTA4NTUxfFVTRVJfQVVUSHxERVZJQ0V8MTIzNDU2Nzg5MA'; // Replace with your actual entity GUID
export default function MyCustomDashboard() {
const nrqlAlerts = `
FROM Transaction SELECT average(duration) AS 'Avg Latency', count(*) AS 'Throughput', percentage(count(*), WHERE error IS TRUE) AS 'Error Rate'
WHERE entityGuid = '${MY_ENTITY_GUID}'
SINCE 5 minutes ago
TIMESERIES
`;
const nrqlTopErrors = `
FROM TransactionError SELECT count(*) AS 'Error Count', latest(errorType) AS 'Latest Error'
WHERE entityGuid = '${MY_ENTITY_GUID}'
SINCE 5 minutes ago
FACET errorType
LIMIT 5
`;
return (
<ChartGroup>
<AutoSizer>
{({ width, height }) => (
<div style={{ width, height, display: 'flex', flexDirection: 'column', gap: '10px' }}>
<div style={{ height: '50%' }}>
<NrqlQuery query={nrqlAlerts} accountIds={[1234567]}> {/* Replace with your actual account ID */}
{({ data, loading, error }) => {
if (loading) return <p>Loading...</p>;
if (error) return <p>Error loading alerts: {error.message}</p>;
if (!data || data.length === 0) return <p>No data available.</p>;
return (
<LineChart
data={data}
style={{ width: '100%', height: '100%' }}
onClickItem={({ item }) => {
console.log('Clicked on:', item);
// Here you'd typically trigger a drilldown to a more detailed view
// or even open a specific transaction trace.
}}
/>
);
}}
</NrqlQuery>
</div>
<div style={{ height: '50%' }}>
<NrqlQuery query={nrqlTopErrors} accountIds={[1234567]}> {/* Replace with your actual account ID */}
{({ data, loading, error }) => {
if (loading) return <p>Loading...</p>;
if (error) return <p>Error loading errors: {error.message}</p>;
if (!data || data.length === 0) return <p>No error data available.</p>;
// This is a simplified representation; you'd likely use a Table component here
return (
<div style={{ border: '1px solid #ccc', padding: '10px' }}>
<h3>Top 5 Errors</h3>
{data.map((row, index) => (
<div key={index}>
<p><strong>{row.errorType}</strong>: {row['Error Count']} occurrences</p>
</div>
))}
</div>
);
}}
</NrqlQuery>
</div>
</div>
)}
</AutoSizer>
</ChartGroup>
);
}
This Nerdpack uses NrqlQuery to fetch data directly from New Relic’s NRQL engine. We’re asking for average duration, throughput, and error percentage for our user-auth service. We’re also fetching the top 5 error types. The LineChart visualizes the metrics over time, and in a real application, the onClickItem handler would be used to trigger deeper investigations, perhaps opening a modal showing the specific transaction traces associated with a spike in errors. The AutoSizer ensures our charts adapt to the available screen real estate.
The core problem Nerdpacks solve is the "data silo." You have all this rich observability data in New Relic, but often it’s presented in standardized dashboards that don’t quite fit your specific workflow or debugging needs. You might want to correlate metrics in a way New Relic’s default dashboards don’t support, or trigger custom actions based on those metrics. Nerdpacks allow you to break out of those silos and build precisely the views and interactions you need.
Internally, a Nerdpack is a React application that runs within New Relic’s iframe environment. It leverages the New Relic One SDK, which provides components like NrqlQuery, ChartGroup, LineChart, and AutoSizer, along with access to APIs for fetching data, interacting with the UI, and even creating custom user interfaces. You define your NRQL queries, and the SDK handles the fetching and rendering. The entityGuid is crucial; it’s how you tell New Relic which specific service, host, or other entity you’re interested in. Similarly, accountIds tells it which account to query.
The levers you control are primarily:
- NRQL Queries: This is where you define what data you want. You can be as specific or as broad as needed, using the full power of NRQL.
- React Components: You use standard React patterns to build your UI. This means you can create complex layouts, interactive elements, and custom visualizations.
- SDK Functions: The New Relic One SDK provides access to authenticated API calls, context information (like current dashboard filters), and UI elements for creating modals, notifications, and more.
The onClickItem handler on the LineChart is a prime example of interaction. When a user clicks a data point, you get an event object containing information about that point. You can then use this to trigger a custom function, like opening a modal that displays the raw NRQL query used to generate that point, or even initiating a search for transactions that occurred during that specific time window. This is how you transform passive data viewing into active investigation.
What most people don’t realize is that you can also write data back to New Relic using Nerdpacks, not just read it. For instance, you could build a Nerdpack that allows a user to annotate a specific time range on a chart with a comment, and have that comment stored as an event in New Relic, visible to everyone viewing that service.
Once your custom visualization is working perfectly, the next thing you’ll likely encounter is the need to manage deployment and versioning of your Nerdpack across multiple accounts or even for different teams.