Skip to content

Commit

Permalink
edits to next.js
Browse files Browse the repository at this point in the history
  • Loading branch information
boristane committed Oct 19, 2023
1 parent 4c1425e commit 9e9d908
Showing 1 changed file with 15 additions and 23 deletions.
38 changes: 15 additions & 23 deletions sending-data/opentelemetry/next.js.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,30 +5,32 @@ label: Next.js

# OpenTelemetry for Next.js

Learn how to use [OpenTelemetry](https://opentelemetry.io/) and Baselime to trace your [Next.js](https://nextjs.org/) application.

Instrument your [Next.js](https://nextjs.org/) applications with [OpenTelemetry](https://opentelemetry.io/) using the the [Baselime Node.js OpenTelemetry SDK](https://github.com/baselime/node-opentelemetry).

!!!
If your deploy your Next.js on Vercel, install the [Baselime Integration](https://vercel.com/integrations/baselime) to enable logs in addition to distributed tracing.
If your deploy your Next.js applications on Vercel, install the [Vercel Baselime Integration](https://vercel.com/integrations/baselime) to enable logs in addition to distributed tracing.
!!!

---


## Instrumentation

### Step 1: Install the `@baselime/node-opentelemetry`
### Step 1: Install the SDK


Inside your Next.js project install the Baselime Node OpenTelemetry SDK
Navigate to the root of your Next.js project install the Baselime Node OpenTelemetry SDK `@baselime/node-opentelemetry`.

```bash # :icon-terminal: terminal
npm i @baselime/node-opentelemetry
```

### Step 2: Initialise the tracer

Next, create an `instrumentation.ts` file in the root of your project and add the following code to initialize and configure OpenTelemetry.
Create a file `instrumentation.ts` in the root of your project and add the following code to configure and initialize OpenTelemetry.

!!!
If you have a src/ folder the `instrumentation.ts` file needs to go in there
If you use a `/src` folder your project, add the `instrumentation.ts` file in the `/src` folder instead of the root folder.
!!!

```typescript # :icon-code: instrumentation.ts
Expand All @@ -42,7 +44,7 @@ export async function register() {
instrumentations: [
new BetterHttpInstrumentation({
plugins: [
new VercelPlugin() // Add our vercel plugin to get log trace correlation to projects deployed to vercel
new VercelPlugin() // Add the Vercel plugin to enable correlation between your logs and traces for projects deployed on Vercel
]
}),
]
Expand All @@ -59,13 +61,13 @@ Set the environment variables of your service to include the Baselime API Key

| Key | Value | Description |
| ------------ | -------------- | ---------------------------------------------------------------------------------------------------------------------------- |
| BASELIME_KEY | `your-api-key` | Get this key from the [Baselime console](https://console.baselime.io) or the [Baselime CLI](https://github.com/Baselime/cli) | |
| BASELIME_KEY | `your-api-key` | Get your API key from the [Baselime console](https://console.baselime.io) or the [Baselime CLI](https://github.com/Baselime/cli) | |



### Step 4. Enable Next.js Auto Instrumentation

Next.js 13.4+ supports auto-instrumentation. To use this feature, add `experimental.instrumentationHook = true` to your [`next.config.js`](https://nextjs.org/docs/app/api-reference/next-config-js).
Next.js 13.4+ supports auto-instrumentation. Add `experimental.instrumentationHook = true` to your [`next.config.js`](https://nextjs.org/docs/app/api-reference/next-config-js) to enable auto-instrumentation of all the requests your app makes to external services.

!!!
For more information read the [Next.js OpenTelemetry Documentation](https://nextjs.org/docs/pages/building-your-application/optimizing/open-telemetry)
Expand All @@ -84,25 +86,15 @@ const config = {
export default config;
```

Once these steps are completed, distributed traces from your Node.js container applications should be available in Baselime to query via the console or the Baselime CLI.
Once these steps are completed, distributed traces from your Next.js applications should be available in Baselime to query via the console or the Baselime CLI.

![Example Next.js Trace](../../assets/images/illustrations/sending-data/opentelemetry/next.js.png)

---

## Trace your favorite libraries

Getting a great experience from OpenTelemetry requires you to install the right instrumentations for your project. Here are some of the instrumentations supported by Baselime.

<!-- A markdown table -->

| Instrumentation | Supported |
| --------------- | --- |
| [Prisma](https://www.prisma.io/docs/concepts/components/prisma-client/opentelemetry-tracing) ||
| [TRPC](https://github.com/baselime/node-opentelemetry/blob/main/TRPC.md) ||
| [AWS SDK](https://www.npmjs.com/package/@opentelemetry/instrumentation-aws-sdk) ||
## Tracing your tRPC applications

If your favorite library is not in this list get in touch we would love to add it.
[tRPC](https://trpc.io/docs) is a framework that enables you to easily build & consume fully typesafe APIs without schemas or code generation. The Baselime Node OpenTelemetry SDK enables automatically tracing your tRPC applications with its [tRPC middleware](https://github.com/baselime/node-opentelemetry/blob/main/TRPC.md).

---

Expand Down

0 comments on commit 9e9d908

Please sign in to comment.