Remix

This guide outlines how to set up serverside Raygun Crash Reporting on Remix.

Step 1 - Install the Raygun Npm package

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

npm install raygun

Step 2 - Initialize Raygun

Create a raygun.js file that initializes and exports the client. If you're using TypeScript, name the file raygun.ts instead. We recommend placing the file inside of the app directory.

import * as Raygun from "raygun";

export const raygun = new Raygun.Client().init({
  batch: true,
  apiKey: "paste_your_api_key_here",
});

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

Step 3 - Automatic exception handling

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.

Refer to 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>
  );
}

Using Raygun in code shared between the server and client

Currently, the raygun package is only designed for use with Node.js. This means it can only be used in certain parts of 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.

Step 4 - Release

Deploy Raygun into your production environment for best results, or raise a test exception. Once we detect your first error event, the Raygun app will automatically update.