1. Home
  2. Language Guides
  3. Node.js
  4. Crash Reporting
  5. Next.js and Remix

Next.js and Remix

This guide shows how to use Raygun Crash Reporting with a Next.js or Remix backend. For information on using Raygun Crash Reporting with a Next.js frontend app, please see this guide.

If you haven't already, install the raygun package:

npm install raygun

Then, create a raygun.js file that initializes and exports the client. If you're using TypeScript, name the file raygun.ts instead.

import * as Raygun from "raygun";

export const raygun = new Raygun.Client().init({
  batch: true,
  apiKey: "<RAYGUN-API-KEY>",
});

Next.js has no conventions for where this file should be placed, so we recommend the project root. For Remix, we recommend app/raygun.ts.

Replace <RAYGUN-API-KEY> with your api key, or load it from an enviroment variable using process.env.

It's important to create this wrapper module for raygun, as it allows Next.js and Remix to only bundle this code when used on the server.

You can use the raygun package to report errors from any server-side Next.js code. This means you can report errors from inside of getStaticProps or getServerSideProps, or any code used by those functions.

For example, using getStaticProps:

// Using the relative path of the raygun module we created above
import {raygun} from '../raygun';

function Blog({ posts }) {
  return (
    <ul>
      {posts.map((post) => (
        <li>{post.title}</li>
      ))}
    </ul>
  );
}

export async function getStaticProps() {
  try {
    const res = await fetch('https://.../posts');
    const posts = await res.json();

    return {
      props: {
        posts,
      }
    };
  } catch (e) {
    raygun.send(e)
  }
}

export default Blog;

You can use the raygun package to report errors from Remix loader functions, since they're only executed on the server-side. In addition, you can report errors from any functions only used on the server by loader functions.

If you're unsure, consult the Remix Module Constraints documentation for more information.

For example:

import type { LoaderFunction } from "@remix-run/node";
import { json } from "@remix-run/node";
import { useLoaderData } from "@remix-run/react";

// Using the path of the raygun module we created above, relative to the project root
import { raygun } from "~/raygun";

export const loader: LoaderFunction = async () => {
  try {
    const res = await fetch('https://.../posts');
    const posts = await res.json();
    return posts;
  } catch (e) {
    raygun.send(e);
  }
};

export default function Blog() {
  const posts = useLoaderData();
  return (
    <ul>
      {posts.map((post) => (
        <li>{post.title}</li>
      ))}
    </ul>
  );
}

Currently, the raygun package is only designed for use with Node.js. This means it can only be used in certain parts of Next.js (getStaticProps/getServerSideProps) or Remix apps (loader).

You can also report errors from code that's only used by these functions, but if raygun is used in functions shared between the server and client, it can cause bundling issues.

For reporting errors in the browser, we recommend the use of raygun4js. You can find a guide for integrating raygun4js and Next.js here.

On this page: