Skip to main content

Next.js

Note

We're only supporting Next.js app router (RSC)

Prerequisites​

Assuming you are completed getting started guide:

Install SDK​

You can download an official Next.js sdk of Loghammer by using this command.

npm install @loghammer/nextjs-sdk

1. Initialize the SDK​

To start, we need to initialize the SDK. To initialize the SDK, you need to call initLoghammer() function with LoghammerInitOptions params at your projects root layout with your crendentials.

import { initLoghammer } from "@loghammer/nextjs-sdk"


export default async function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {

  initLoghammer({
    clientId: "your-client-id",
    clientSecret: "your-client-secret",
    devMode: false
  })

  return (
    <html>
      <body>
        {children}
      </body>
    </html>
  );
}

2. Client Side Error Handling​

To be able to catch client side errors automatically, wrap your app with <LoghammerWrapper/> component. Loghammer will capture any client-side error automatically.

import { initLoghammer, LoghammerWrapper } from "@loghammer/nextjs-sdk"


export default async function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {

  initLoghammer({
    clientId: "your-client-id",
    clientSecret: "your-client-secret"
  })

  return (
    <html>
      <LoghammerWrapper>
        <body>
          {children}
        </body>
      </LoghammerWrapper>
    </html>
  );
}

3. Server Side Error Handling​

To be able to catch server side errors automatically, we need to call registerServerSideErrorTracking function. Loghammer will capture any server-side error automatically.

import { initLoghammer, LoghammerWrapper, registerServerSideErrorTracking } from "@loghammer/nextjs-sdk"


export default async function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {

  initLoghammer({
    clientId: "your-client-id",
    clientSecret: "your-client-secret"
  })

  registerServerSideErrorTracking()

  return (
    <html>
      <LoghammerWrapper>
        <body>
          {children}
        </body>
      </LoghammerWrapper>
    </html>
  );
}

Create info log​

To create info log, you need to call createInfoLog() function. This function accepts one argument which is an LoghammerInfoLogProps.

import { createInfoLog } from "@loghammer/nextjs-sdk"

await createInfoLog({
    message: "This is an info log.",
    data: {
        "mock": "data"
    }
})

Create error log​

To create error log, you need to call createErrorLog() function. This function accepts one argument which is an LoghammerErrorLogProps.

import { createErrorLog } from "@loghammer/nextjs-sdk"

await createErrorLog({
    message: "This is an error log.",
    stackTrace: new Error("mock error").stack,
    env: {
        os: "linux"
    },
    tags: ["payment-provider"]
})

Create track log​

To create track log, you need to call createTrackLog() function. This function accepts one argument which is an LoghammerTrackLogProps.

import { createTrackLog } from "@loghammer/nextjs-sdk"

await createTrackLog({
    message: "This is a track log.",
    data: {
        "user": "[email protected]"
        // or id stuff you decide what to log 🤪
    }
    tags: ["visit-pricing-page"]
})