"use client";

import { useRunDetails } from "@trigger.dev/react";

export function EventDetails({ runId }: { runId: string }) {
  const { isLoading, isError, data, error } = useRunDetails(runId);

  if (isLoading) {
    return <div>Loading...</div>;
  }

  if (isError) {
    return <div>Error: {error.message}</div>;
  }

  //show the run status and all the tasks
  return (
    <div>
      <h2>Run status: {data?.status}</h2>
      <div>
        {data?.tasks?.map((task) => (
          <div className="flex gap-2 items-center">
            {task.status === "ERRORED"
              ? "⛔️"
              : task.status === "COMPLETED"
              ? "✅"
              : "⏳"}
            <div className="flex gap-1.5 items-center">
              <h4 className="text-base">{task.displayKey ?? task.name}</h4>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

This hook will automatically update until the run has either completed or failed.

There are a couple of ways you can get a runId to pass in:

  • In the frontend you can get the runId from the useEventDetails() hook. Although if you want the first run triggered by an event, we suggest you use useEventRunDetails().
  • From the backend you can get the latest runs for a Job using the client.getRuns() method. This will return an array of runs, including their ids. You can then pass an id to your frontend to display the live status.

You can get the full status of a Run from the backend using the client.getRun() method.

If you're familiar with React Query, you'll recognize the data that is returned by this hook. React Query 5 is used internally.

​
Parameters

​
runId
string | undefined
required

The run ID to get the details for.

​
options
Object

​
Returns

​
data
object | undefined

The data returned from the server.

​
error
Error | undefined

The error object if the request failed.

​
status
pending | success | error

The status of the request. This can be one of the following values: pending, success and error.

​
isLoading
boolean

true if the request is currently pending or if it is in a refetch state.

​
isSuccess
boolean

true if the request succeeded.

​
isError
boolean

true if the request failed.

​
isPending
boolean

true if the request is currently pending.

​
isLoadingError
boolean

true if the request failed with a loading error.

​
isRefetchError
boolean

true if the request failed with a refetch error.

"use client";

import { useRunDetails } from "@trigger.dev/react";

export function EventDetails({ runId }: { runId: string }) {
  const { isLoading, isError, data, error } = useRunDetails(runId);

  if (isLoading) {
    return <div>Loading...</div>;
  }

  if (isError) {
    return <div>Error: {error.message}</div>;
  }

  //show the run status and all the tasks
  return (
    <div>
      <h2>Run status: {data?.status}</h2>
      <div>
        {data?.tasks?.map((task) => (
          <div className="flex gap-2 items-center">
            {task.status === "ERRORED"
              ? "⛔️"
              : task.status === "COMPLETED"
              ? "✅"
              : "⏳"}
            <div className="flex gap-1.5 items-center">
              <h4 className="text-base">{task.displayKey ?? task.name}</h4>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}