← Back to NorthLab

Changed Files

A walkthrough for the Workflow Automation Repair & Build Package. It explains what was broken, what changed in the repair, why it matters, and how each change maps to a real Zapier / Make / n8n / webhook / API repair.

Overview of files

File	Role
`before/index.html`, `before/script.js`	The broken workflow (intentional failures, marked `BUG:`)
`after/index.html`, `after/script.js`	The repaired workflow (fixes marked `FIX:`)
`build-demo/index.html`, `build-demo/script.js`	New one-process automation built from scratch
`index.html`	Comparison / landing page linking all three
`*/styles.css`	Shared dashboard styling
`proof/diff.patch`	Code diff of the before → after repair

The most meaningful repair is in before/script.js → after/script.js. Details below.

What was broken → what changed → why it matters

1. No validation

Broken: before/script.js accepted any input. Invalid emails and empty names entered the pipeline.
Changed: after/script.js adds isValidEmail() and a required-name check that runs before anything else.
Why it matters: garbage data never reaches the CRM, so follow-up and email steps actually work.
Real-world mapping: a Zapier Filter / Formatter step or Make/n8n validation node that stops the run early.

2. No duplicate check

Broken: the same lead could be inserted repeatedly; duplicates were only flagged for display, then saved anyway.
Changed: after/script.js looks up the email in the mock CRM before inserting and skips duplicates.
Why it matters: prevents duplicate records and the manual cleanup they cause.
Real-world mapping: a "Find Record" / "Search Rows" / lookup step before "Create Row", against Google Sheets / Airtable / HubSpot.

3. Unreliable webhook / API handling

Broken: fakeWebhookCall() returned 422/502 errors that the caller ignored, saving the lead regardless.
Changed: callWebhookWithRetry() retries on transient failure and only proceeds on success; hard failures are surfaced and logged.
Why it matters: transient upstream errors no longer silently corrupt the run.
Real-world mapping: enabling retry-on-error and error-handling paths in the webhook/HTTP step instead of "continue on error" with no alert.

4. Notification failed silently

Broken: the notification message was built but never rendered; the error was swallowed in a catch (logged only to console).
Changed: renderSlack() actually writes the mock notification and logs the step.
Why it matters: the team is reliably notified; a failure here is now visible.
Real-world mapping: a Slack "Send Channel Message" action with error alerting, not silent continue.

5. Missing confirmation email

Broken: there was no email step at all.
Changed: renderEmail() adds a mock confirmation email and logs it.
Why it matters: the lead gets acknowledged, which improves follow-up.
Real-world mapping: a Gmail / Outlook / SMTP "Send Email" action.

6. Vague errors, no log (logging / error visibility)

Broken: the user only saw "Something went wrong"; no structured log existed.
Changed: after/script.js adds a timestamped log() for every step (validated, dedupe, CRM write, notification, email) plus clear failure messages.
Why it matters: you can see exactly where a run succeeded or failed and debug it.
Real-world mapping: using the platform's run history plus an append-only log row in Sheets/Airtable.

7. Manual admin still required

Broken: because saves, dedupe, notifications, and emails were unreliable, a human had to check and clean up.
Changed: the repaired flow runs end-to-end and records the outcome.
Why it matters: removes the repetitive manual admin the automation was supposed to handle.
Real-world mapping: a fully connected Zapier/Make/n8n workflow with logging, instead of partial automation.

Build example (new automation)

build-demo/script.js implements the same reliable pattern as a clean build (not a repair):

lead form → validation → CRM/table → internal notification → email confirmation → workflow log

It includes a "Run sample lead" button that performs a guaranteed successful end-to-end run for demonstration and screenshots.

See the code diff for the line-level before → after repair, and the workflow map for the visual flow and real-tool mapping.