Feature: Batched events and Airtable webhooks

.env.example

@@ -24,6 +24,9 @@ NODE_ENV=development
 # FROM_EMAIL=
 # REPLY_TO_EMAIL=
 
+# Required for upgrading graphile-worker to v0.14 when graceful shutdown is impossible or impractical.
+# FAIL_LOCKED_JOBS_FOR_MIGRATION=true
+
 # CLOUD VARIABLES
 POSTHOG_PROJECT_KEY=
 PLAIN_API_KEY= 

apps/webapp/app/components/code/JSONEditor.tsx

@@ -1,5 +1,6 @@
 import { json as jsonLang } from "@codemirror/lang-json";
 import type { ViewUpdate } from "@codemirror/view";
+import type { Text } from "@codemirror/state";
 import { CheckIcon, ClipboardIcon } from "@heroicons/react/20/solid";
 import type { ReactCodeMirrorProps, UseCodeMirror } from "@uiw/react-codemirror";
 import { useCodeMirror } from "@uiw/react-codemirror";
@@ -68,6 +69,7 @@ export function JSONEditor(opts: JSONEditorProps) {
     theme: darkTheme(),
     indentWithTab: false,
     basicSetup,
+    selection: getDefaultSelection(defaultValue),
     onChange,
     onUpdate,
   };
@@ -83,10 +85,16 @@ export function JSONEditor(opts: JSONEditorProps) {
   //if the defaultValue changes update the editor
   useEffect(() => {
     if (view !== undefined) {
-      if (view.state.doc.toString() === defaultValue) return;
-      view.dispatch({
-        changes: { from: 0, to: view.state.doc.length, insert: defaultValue },
-      });
+      if (view.state.doc.toString() !== defaultValue) {
+        view.dispatch({
+          changes: { from: 0, to: view.state.doc.length, insert: defaultValue },
+          selection: getDefaultSelection(defaultValue),
+        });
+      } else {
+        view.dispatch({
+          selection: getDefaultSelection(defaultValue),
+        });
+      }
     }
   }, [defaultValue, view]);
 
@@ -150,3 +158,20 @@ export function JSONEditor(opts: JSONEditorProps) {
     </div>
   );
 }
+
+function isMultiline(content: string | Text) {
+  if (typeof content === "string") {
+    return content.includes("\n");
+  } else {
+    return content.lines > 1;
+  }
+}
+
+/** For multiline content, gets end of penultimate line. Otherwise, position `0`. */
+function getDefaultSelection(content: string | Text) {
+  if (!isMultiline(content)) {
+    return { anchor: 0 };
+  } else {
+    return { anchor: content.length > 2 ? content.length - 2 : 0 };
+  }
+}

apps/webapp/app/components/run/TriggerDetail.tsx

@@ -15,17 +15,19 @@ import { DisplayProperty } from "@trigger.dev/core";
 
 export function TriggerDetail({
   trigger,
+  payload,
   event,
   properties,
 }: {
   trigger: DetailedEvent;
+  payload: string;
   event: {
     title: string;
     icon: string;
   };
   properties: DisplayProperty[];
 }) {
-  const { id, name, payload, context, timestamp, deliveredAt } = trigger;
+  const { id, name, context, timestamp, deliveredAt } = trigger;
 
   return (
     <RunPanel selected={false}>

apps/webapp/app/entry.server.tsx

@@ -164,5 +164,12 @@ function logError(error: unknown, request?: Request) {
       );
     }
   }
+
   console.error(error);
+
+  if (error instanceof Error && error.message === "division by zero") {
+    console.log("⚠️  possible graphile-worker migration issue detected");
+    console.log("⚠️  set FAIL_LOCKED_JOBS_FOR_MIGRATION=true if this persists");
+    console.log("⚠️  see: https://trigger.dev/docs/documentation/guides/self-hosting/graphile-migration");
+  }
 }

apps/webapp/app/env.server.ts

@@ -41,6 +41,7 @@ const EnvironmentSchema = z.object({
   WORKER_ENABLED: z.string().default("true"),
   EXECUTION_WORKER_ENABLED: z.string().default("true"),
   GRACEFUL_SHUTDOWN_TIMEOUT: z.coerce.number().int().default(60000),
+  FAIL_LOCKED_JOBS_FOR_MIGRATION: z.string().default("false"),
 });
 
 export type Environment = z.infer<typeof EnvironmentSchema>;

apps/webapp/app/platform/zodWorker.server.ts

@@ -1,7 +1,7 @@
 import type {
   CronItem,
   CronItemOptions,
-  Job as GraphileJob,
+  DbJob as GraphileJob,
   Runner as GraphileRunner,
   JobHelpers,
   RunnerOptions,
@@ -29,8 +29,8 @@ const RawCronPayloadSchema = z.object({
 
 const GraphileJobSchema = z.object({
   id: z.coerce.string(),
-  queue_name: z.string().nullable(),
-  task_identifier: z.string(),
+  job_queue_id: z.number().nullable(),
+  task_id: z.number(),
   payload: z.unknown(),
   priority: z.number(),
   run_at: z.coerce.date(),
@@ -67,7 +67,7 @@ type RecurringTaskPayload = {
 
 export type ZodRecurringTasks = {
   [key: string]: {
-    pattern: string;
+    match: string;
     options?: CronItemOptions;
     handler: (payload: RecurringTaskPayload, job: GraphileJob) => Promise<void>;
   };
@@ -411,7 +411,7 @@ export class ZodWorker<TMessageCatalog extends MessageCatalogSchema> {
 
     if (this.#cleanup) {
       cronItems.push({
-        pattern: this.#cleanup.frequencyExpression,
+        match: this.#cleanup.frequencyExpression,
         identifier: CLEANUP_TASK_NAME,
         task: CLEANUP_TASK_NAME,
         options: this.#cleanup.taskOptions,
@@ -420,7 +420,7 @@ export class ZodWorker<TMessageCatalog extends MessageCatalogSchema> {
 
     if (this.#reporter) {
       cronItems.push({
-        pattern: "50 * * * *", // Every hour at 50 minutes past the hour
+        match: "50 * * * *", // Every hour at 50 minutes past the hour
         identifier: REPORTER_TASK_NAME,
         task: REPORTER_TASK_NAME,
       });
@@ -432,7 +432,7 @@ export class ZodWorker<TMessageCatalog extends MessageCatalogSchema> {
 
     for (const [key, task] of Object.entries(this.#recurringTasks)) {
       const cronItem: CronItem = {
-        pattern: task.pattern,
+        match: task.match,
         identifier: key,
         task: key,
         options: task.options,

apps/webapp/app/presenters/RunPresenter.server.ts

@@ -78,6 +78,7 @@ export class RunPresenter {
         slug: run.environment.slug,
       },
       event: this.#prepareEventData(run.event),
+      payload: run.payload,
       tasks,
       runConnections: run.runConnections,
       missingConnections: run.missingConnections,
@@ -104,6 +105,7 @@ export class RunPresenter {
   query({ id, userId }: RunOptions) {
     return this.#prismaClient.jobRun.findFirst({
       select: {
+        payload: true,
         id: true,
         number: true,
         status: true,

apps/webapp/app/presenters/TestJobPresenter.server.ts

@@ -1,4 +1,4 @@
-import { User } from "@trigger.dev/database";
+import { Prisma, User } from "@trigger.dev/database";
 import { replacements } from "@trigger.dev/core";
 import { PrismaClient, prisma } from "~/db.server";
 import { Job } from "~/models/job.server";
@@ -74,6 +74,7 @@ export class TestJobPresenter {
             createdAt: true,
             number: true,
             status: true,
+            payload: true,
             event: {
               select: {
                 payload: true,
@@ -111,7 +112,7 @@ export class TestJobPresenter {
       alias.version.examples.map((example) => ({
         ...example,
         icon: example.icon ?? undefined,
-        payload: example.payload ? JSON.stringify(example.payload, exampleReplacer, 2) : undefined,
+        payload: prettyJsonValue(example.payload, exampleReplacer),
       }))
     );
 
@@ -127,13 +128,16 @@ export class TestJobPresenter {
         ),
       })),
       examples,
-      runs: job.runs.map((r) => ({
-        id: r.id,
-        number: r.number,
-        status: r.status,
-        created: r.createdAt,
-        payload: r.event.payload ? JSON.stringify(r.event.payload, null, 2) : undefined,
-      })),
+      runs: job.runs.map((r) => {
+        const payload = r.payload ?? r.event.payload;
+        return {
+          id: r.id,
+          number: r.number,
+          status: r.status,
+          created: r.createdAt,
+          payload: prettyJsonValue(payload),
+        };
+      }),
     };
   }
 }
@@ -153,3 +157,16 @@ function exampleReplacer(key: string, value: any) {
 
   return value;
 }
+
+function prettyJsonValue(
+  value: Prisma.JsonValue,
+  replacer?: (key: string, value: any) => any,
+  space = 2
+) {
+  if (value === null) {
+    return;
+  }
+
+  const pretty = JSON.stringify(value, replacer, space);
+  return pretty === "{}" ? "{\n  \n}" : pretty;
+}

apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.jobs.$jobParam.runs.$runParam.trigger/route.tsx

@@ -28,5 +28,14 @@ export default function Page() {
   const job = useJob();
   const run = useRun();
 
-  return <TriggerDetail trigger={trigger} event={job.event} properties={run.properties} />;
+  const payload = run.payload !== null ? JSON.stringify(run.payload, null, 2) : trigger.payload;
+
+  return (
+    <TriggerDetail
+      trigger={trigger}
+      payload={payload}
+      event={job.event}
+      properties={run.properties}
+    />
+  );
 }

apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.jobs.$jobParam.test/route.tsx

@@ -117,7 +117,7 @@ export const handle: Handle = {
   breadcrumb: (match) => <BreadcrumbLink to={trimTrailingSlash(match.pathname)} title="Test" />,
 };
 
-const startingJson = "{\n\n}";
+const startingJson = "{\n  \n}";
 
 export default function Page() {
   const { environments, runs, examples } = useTypedLoaderData<typeof loader>();
@@ -202,7 +202,6 @@ export default function Page() {
                   //deselect the example if it's been edited
                   if (selectedCodeSampleId) {
                     if (v !== selectedCodeSample) {
-                      setDefaultJson(v);
                       setSelectedCodeSampleId(undefined);
                     }
                   }