matewilk / t3-trpc-newrelic

New Relic T3 (Next.js) Demo

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Create T3 App + New Relic Full Stack Monitoring

This is a T3 Stack project bootstrapped with create-t3-app.

How do I use it?

This is a sample project you can use to learn about integrating New Relic with the T3 Stack. It is a simple Next.js application integrated with New Relic's Browser agent and Node.js agent to monitor the performance of your application.

New Relic Browser agent integration

The New Relic Browser agent is a JavaScript agent that monitors the performance of your application in the browser. It is installed as a dependency in the package.json file and loaded in the pages/_document.tsx file.

const browserTimingHeader = newrelic.getBrowserTimingHeader({
  hasToRemoveScriptWrapper: true,
});

New Relic Node.js agent integration

The New Relic Node.js agent is a Node.js module that monitors the performance of your application in the server. This repository also uses @newrelic/next npm package to instrument Next.js.

It is then started via the package.json file scripts by running @newrelic/next before your next command.

"scripts": {
  "dev": "NODE_OPTIONS='-r @newrelic/next' next dev",
  "start": "NODE_OPTIONS='-r @newrelic/next' next start"
  ...
}

Project setup

This is a standard T3 Stack project with two additional routes:

  • /blogs - a list of blogs
  • /posts/[id] - a single blog post

Both of these routes fetch data using tRPC procedures which can be found in the server/api/routers/posts.ts file.

  • getAllPosts - fetches a list of blog posts
  • getPostById - fetches a single blog post

Each procedure fetches data from the JSONPlaceholder API.

Learn More

To learn more about New Relic, take a look athe the following resources:

To learn more about the T3 Stack, take a look at the following resources:

You can check out the create-t3-app GitHub repository — your feedback and contributions are welcome!

How do I deploy this?

Follow our deployment guides for Vercel, Netlify and Docker for more information.

About

New Relic T3 (Next.js) Demo


Languages

Language:TypeScript 92.9%Language:JavaScript 3.9%Language:Shell 2.9%Language:CSS 0.2%