@internetarchive/ia-book-actions 1.4.5 → 1.4.6-alpha1

package/package.json

@@ -7,7 +7,7 @@
   },
   "author": "Internet Archive",
   "license": "AGPL-3.0-only",
-  "version": "1.4.5",
+  "version": "1.4.6-alpha1",
   "main": "index.js",
   "module": "index.js",
   "publishConfig": {

package/src/core/services/actions-handler/actions-handler-service.js

@@ -1,7 +1,22 @@
 /* eslint-disable */
 import { sentryLogs } from '../../config/sentry-events.js';
+import {
+  sentryCaptureMessage,
+  sentryCaptureException,
+} from '../sentry-report.js';
 import log from '../log.js';
 
+/**
+ * Patron-facing messages for failures that never reached the lending
+ * service's own JSON error handling.
+ */
+export const unexpectedResponseError = status =>
+  `Unexpected response from the lending service (HTTP ${status}). Please try again.`;
+export const networkError =
+  'Could not reach the lending service. Please check your connection and try again.';
+export const unexpectedError =
+  'Something went wrong handling the lending service response. Please try again.';
+
 /**
  * Helper to call loan service
  * @param {Object} options
@@ -52,12 +67,19 @@ export default async function ActionsHandlerService(options) {
   formData.append('action', option.action);
   formData.append('identifier', option.identifier);
 
+  // Set once a response arrives, so the catch below can tell a failed fetch
+  // (a real network problem) from anything thrown afterwards — including by
+  // the caller's own success/error callback, which run inside this try.
+  let reachedResponse = false;
+
   try {
     await fetch(baseHost, {
       method: 'POST',
       body: formData,
     })
       .then(async response => {
+        reachedResponse = true;
+
         // intentional error on localhost
         if (shouldReturnError) {
           return {
@@ -85,9 +107,7 @@ export default async function ActionsHandlerService(options) {
           };
         }
 
-        // The response is a Response instance.
-        // You parse the data into a useable format using `.json()`
-        return response.json();
+        return parseServiceResponse(response, option);
       })
       .then(data => {
         // `data` is the parsed version of the JSON returned from the above endpoint.
@@ -100,15 +120,23 @@ export default async function ActionsHandlerService(options) {
         }
       });
   } catch (error) {
-    window?.Sentry?.captureException(
-      `${sentryLogs.actionsHandlerService} - Error: ${error}`
-    );
+    sentryCaptureException(error, {
+      identifier: option.identifier,
+      action: option.action,
+      extra: {
+        message: `${sentryLogs.actionsHandlerService} - ${option.action} ${
+          reachedResponse ? 'threw' : 'fetch failed'
+        }`,
+      },
+    });
 
     /**
      * Report it, don't just swallow it. A rejected fetch (offline, dropped
-     * connection) or a non-JSON body (a 405 returning HTML) lands here, and
-     * calling neither `success` nor `error` leaves every caller waiting on a
-     * callback that never comes.
+     * connection) lands here — a non-JSON body no longer does, see
+     * parseServiceResponse() — as does anything thrown after the response
+     * arrived; calling neither `success` nor `error` leaves every caller
+     * waiting on a callback that never comes. Only the former is a network
+     * problem, so only that one says so.
      *
      * For renew_loan that's not merely a missing modal: IABookActions
      * clears its loanRenewInProgress guard from these callbacks, so a
@@ -117,6 +145,75 @@ export default async function ActionsHandlerService(options) {
      * connection is exactly when this fires.
      */
     log(`[IABookActions] ✗ ${option.action} threw`, error);
-    option?.error?.({ error: String(error) });
+    option?.error?.({
+      error: reachedResponse ? unexpectedError : networkError,
+      detail: String(error),
+    });
+  }
+}
+
+/**
+ * Parse a lending service response without ever surfacing a raw
+ * `SyntaxError` to the patron. Anything in front of PHP (the WAF, or nginx
+ * swapping in /about/400.html or a 5xx page) can answer with HTML instead
+ * of the service's JSON; that becomes a readable error carrying the HTTP
+ * status, and is reported to Sentry with the identifier/action.
+ *
+ * @param {Response} response
+ * @param {Object} option - the ActionsHandlerService options
+ * @returns {Promise<Object>}
+ */
+export async function parseServiceResponse(response, option) {
+  const { status } = response;
+  const contentType = response.headers?.get('content-type') || '';
+
+  // The service always answers with JSON (application/json, or
+  // application/problem+json for OPDS) — anything else never came from it.
+  const body = await response.text();
+  let data;
+  if (contentType.includes('json')) {
+    try {
+      data = JSON.parse(body);
+    } catch (parseError) {
+      data = undefined;
+    }
   }
+
+  if (data === undefined) {
+    sentryCaptureMessage(
+      `${sentryLogs.actionsHandlerService} - ${option.action}: non-JSON response (HTTP ${status})`,
+      {
+        identifier: option.identifier,
+        action: option.action,
+        extra: {
+          status,
+          contentType,
+          bodySnippet: body.slice(0, 300),
+        },
+      }
+    );
+    // nonJsonResponse lets callers tell "something in front of PHP answered"
+    // apart from the service's own error — see
+    // IABookActions.handleLendingActionError.
+    return {
+      success: false,
+      error: unexpectedResponseError(status),
+      status,
+      nonJsonResponse: true,
+    };
+  }
+
+  // Carry the HTTP status on the service's own JSON errors too, so it
+  // reaches Sentry. A JSON error status without the service's usual `error`
+  // field would otherwise be treated as a success.
+  if (!response.ok) {
+    return {
+      ...(data && typeof data === 'object' ? data : {}),
+      success: false,
+      error: data?.error || unexpectedResponseError(status),
+      status,
+    };
+  }
+
+  return data;
 }

package/src/core/services/actions-handler/actions-handler.js

@@ -2,6 +2,10 @@ import { LitElement } from 'lit';
 
 import { URLHelper } from '../../config/url-helper.js';
 import { sentryLogs } from '../../config/sentry-events.js';
+import {
+  sentryCaptureMessage,
+  sentryCaptureException,
+} from '../sentry-report.js';
 import log from '../log.js';
 
 import ActionsHandlerService from './actions-handler-service.js';
@@ -228,8 +232,13 @@ export default class ActionsHandler extends LitElement {
             data,
             id: this.identifier,
           });
-          window?.Sentry?.captureMessage(
-            `${sentryLogs.bookRenewFailed} - Error: ${JSON.stringify(data)}`
+          sentryCaptureMessage(
+            `${sentryLogs.bookRenewFailed} - no loan active`,
+            {
+              identifier: this.identifier,
+              action,
+              extra: { response: JSON.stringify(data) },
+            }
           );
           this.dispatchActionError(action, {
             data,
@@ -238,9 +247,11 @@ export default class ActionsHandler extends LitElement {
           });
         } catch (error) {
           log('RENEW_LOAN THREW --- ', error);
-          window?.Sentry?.captureException(
-            `${sentryLogs.bookRenewFailed} - Exception: ${error}`
-          );
+          sentryCaptureException(error, {
+            identifier: this.identifier,
+            action,
+            extra: { message: `${sentryLogs.bookRenewFailed} - threw` },
+          });
           this.dispatchActionError(action, {
             data,
             error: true,

package/src/core/services/loan-token-poller.js

@@ -2,6 +2,7 @@
 import ActionsHandlerService from './actions-handler/actions-handler-service.js';
 import LoanAnanlytics from './loan-analytics.js';
 import { sentryLogs } from '../config/sentry-events.js';
+import { sentryCaptureMessage } from './sentry-report.js';
 import log from './log.js';
 
 /**
@@ -62,9 +63,12 @@ export class LoanTokenPoller {
   async bookAccessed() {
     if (this.borrowType) {
       if (this.skipInitialCall) {
-        log('[LoanTokenPoller] skipping initial create_token — already minted by the renewal response', {
-          identifier: this.identifier,
-        });
+        log(
+          '[LoanTokenPoller] skipping initial create_token — already minted by the renewal response',
+          {
+            identifier: this.identifier,
+          }
+        );
       } else {
         // Do an initial token, then set an interval
         this.handleLoanTokenPoller(true);
@@ -83,9 +87,10 @@ export class LoanTokenPoller {
         }, this.pollerDelay * 1000);
       }
     } else {
-      window?.Sentry?.captureMessage(
-        `${sentryLogs.bookAccessed} - not borrowed`
-      );
+      sentryCaptureMessage(`${sentryLogs.bookAccessed} - not borrowed`, {
+        identifier: this.identifier,
+        action: 'create_token',
+      });
 
       // if book is not browsed, just clear token polling interval
       this.disconnectedCallback();
@@ -117,8 +122,9 @@ export class LoanTokenPoller {
   }
 
   /**
-   * Reports a create_token failure via errorCallback — no retry, it's
-   * treated as terminal on the first failure. Split out from
+   * Reports every create_token failure via errorCallback — the poller never
+   * retries, and the consumer decides whether a failure is terminal (see
+   * IABookActions.handleLendingActionError). Split out from
    * handleLoanTokenPoller so it's directly testable without needing to
    * mock the network call.
    *
@@ -140,8 +146,20 @@ export class LoanTokenPoller {
     this.errorCallback({ detail: { action, data, isInitial } });
 
     // send error to Sentry
-    window?.Sentry?.captureMessage(
-      `${sentryLogs.handleLoanTokenPoller} - Error: ${JSON.stringify(data)}`
+    sentryCaptureMessage(
+      `${sentryLogs.handleLoanTokenPoller} - create_token failed`,
+      {
+        identifier: this.identifier,
+        action,
+        extra: {
+          borrowType: this.borrowType,
+          isInitial,
+          error: data?.error,
+          status: data?.status,
+          nonJsonResponse: data?.nonJsonResponse === true,
+          response: JSON.stringify(data),
+        },
+      }
     );
 
     // send LendingServiceError to GA

package/src/core/services/sentry-report.js

@@ -0,0 +1,40 @@
+/* global: window */
+
+/**
+ * Builds Sentry's captureContext with the book identifier and lending action
+ * attached as tags, so events can be filtered per book or per action (e.g.
+ * `action:create_token identifier:foo`) without the identifier going into
+ * the message text — which would split one issue into one per book.
+ *
+ * @param {Object} [context]
+ * @param {string} [context.identifier]
+ * @param {string} [context.action] - e.g. create_token, renew_loan
+ * @param {Object} [context.extra] - any other details worth keeping
+ * @returns {Object}
+ */
+export function buildSentryContext({ identifier, action, extra = {} } = {}) {
+  const tags = {};
+  if (identifier) tags.identifier = identifier;
+  if (action) tags.action = action;
+
+  return {
+    tags,
+    extra: { identifier, action, ...extra },
+  };
+}
+
+/**
+ * @param {string} message
+ * @param {Object} [context] - see buildSentryContext
+ */
+export function sentryCaptureMessage(message, context) {
+  window?.Sentry?.captureMessage?.(message, buildSentryContext(context));
+}
+
+/**
+ * @param {Error|string} error
+ * @param {Object} [context] - see buildSentryContext
+ */
+export function sentryCaptureException(error, context) {
+  window?.Sentry?.captureException?.(error, buildSentryContext(context));
+}

package/src/ia-book-actions.js

@@ -16,6 +16,7 @@ import './core/config/ia-lending-intervals.js';
 import { GetLendingActions } from './core/services/get-lending-actions.js';
 import { mobileContainerWidth } from './core/config/constants.js';
 import { sentryLogs } from './core/config/sentry-events.js';
+import { sentryCaptureMessage } from './core/services/sentry-report.js';
 import { LoanTokenPoller } from './core/services/loan-token-poller.js';
 import { LoanRenewHelper } from './core/services/loan-renew-helper.js';
 import log from './core/services/log.js';
@@ -163,11 +164,13 @@ export default class IABookActions extends LitElement {
   }
 
   /**
-   * send log messages to sentry
+   * send log messages to sentry, tagged with this book's identifier
    * @param {string} msg
+   * @param {string} [action] - the lending action involved, if any
+   * @param {Object} [extra]
    */
-  sentryCaptureMsg(msg) {
-    window?.Sentry?.captureMessage(msg);
+  sentryCaptureMsg(msg, action, extra) {
+    sentryCaptureMessage(msg, { identifier: this.identifier, action, extra });
   }
 
   firstUpdated() {
@@ -435,7 +438,9 @@ export default class IABookActions extends LitElement {
       } catch (error) {
         // Surface localCache failures instead of an unhandled rejection.
         log('[IABookActions] visibilitychange handler failed', error);
-        this.sentryCaptureMsg(`visibilitychange handler failed: ${error}`);
+        this.sentryCaptureMsg('visibilitychange handler failed', undefined, {
+          error: String(error),
+        });
       }
     });
   }
@@ -796,7 +801,7 @@ export default class IABookActions extends LitElement {
       this.modal?.closeModal();
       this.modal.removeAttribute('id');
       this.modal.customModalContent = nothing;
-      this.sentryCaptureMsg(sentryLogs.bookHasRenewed);
+      this.sentryCaptureMsg(sentryLogs.bookHasRenewed, 'renew_loan');
       this.warningModalDismissed = false;
     }
 
@@ -990,10 +995,12 @@ export default class IABookActions extends LitElement {
     this.disableActionGroup = false;
 
     const action = event?.detail?.action;
+    const eventData = event?.detail?.data;
+
     // handleLoanRenewNow's failure path sets `.error` to a boolean flag and
     // puts the real text in `.message` — only take `.error` when it's
     // actually a string, or the modal renders the literal word "true".
-    const rawErrorMsg = event?.detail?.data?.error;
+    const rawErrorMsg = eventData?.error;
     const errorMsg =
       typeof rawErrorMsg === 'string' ? rawErrorMsg : undefined;
     const isInitial = event?.detail?.isInitial === true;
@@ -1007,9 +1014,36 @@ export default class IABookActions extends LitElement {
       recoveringFromLoanExpiry: this.recoveringFromLoanExpiry,
     });
 
+    if (
+      action === 'create_token' &&
+      !isInitial &&
+      eventData?.nonJsonResponse === true &&
+      eventData?.status === 400
+    ) {
+      // Something in front of the service (the WAF's /about/400.html)
+      // answered a routine refresh instead of the service itself. It's
+      // already reported to Sentry (ActionsHandlerService/LoanTokenPoller);
+      // the current access token keeps the book readable, and the poll
+      // interval is left running, so the next tick tries again. No modal,
+      // and no session teardown.
+      //
+      // Not for the initial call: its success is what runs
+      // lendingBarPostInit() and opens the book (see startLoanTokenPoller),
+      // so suppressing it would leave a reader that never loads, silently.
+      log(
+        '[IABookActions] create_token HTML 400 on a routine refresh — no modal',
+        {
+          identifier: this.identifier,
+          status: eventData?.status,
+        }
+      );
+      return;
+    }
+
     if (action === 'create_token') {
-      // Any create_token failure — initial or a routine interval refresh —
-      // means access can no longer be confirmed (e.g. a stale loan-record
+      // Any other create_token failure — initial or a routine interval
+      // refresh, except the routine HTML 400 above — means access can no
+      // longer be confirmed (e.g. a stale loan-record
       // cache on some other node can make this request fail even though
       // the loan is fine, or the loan may genuinely have just been
       // returned via BookReaderImages.php's revokeAccess()). Don't retry

package/test/core/services/actions-handler-service.test.js

@@ -0,0 +1,162 @@
+import { expect } from '@open-wc/testing';
+import Sinon from 'sinon';
+
+import ActionsHandlerService, {
+  parseServiceResponse,
+  networkError,
+  unexpectedError,
+} from '../../../src/core/services/actions-handler/actions-handler-service.js';
+
+const option = { identifier: 'foo', action: 'create_token' };
+const jsonHeaders = { 'Content-Type': 'application/json' };
+
+describe('ActionsHandlerService#parseServiceResponse', () => {
+  let originalSentry;
+
+  beforeEach(() => {
+    originalSentry = window.Sentry;
+    window.Sentry = { captureMessage: Sinon.spy() };
+  });
+
+  afterEach(() => {
+    window.Sentry = originalSentry;
+  });
+
+  it('turns an HTML error page into a readable error instead of a SyntaxError', async () => {
+    // e.g. the WAF's /about/400.html in place of the service's JSON
+    const response = new Response('<!DOCTYPE html><html>Bad Request</html>', {
+      status: 400,
+      headers: { 'Content-Type': 'text/html' },
+    });
+
+    const data = await parseServiceResponse(response, option);
+
+    expect(data.success).to.be.false;
+    expect(data.status).to.equal(400);
+    expect(data.nonJsonResponse).to.be.true;
+    expect(data.error).to.contain('HTTP 400');
+    expect(data.error).to.not.contain('SyntaxError');
+  });
+
+  it('reports the non-JSON response to Sentry with the identifier, action and status', async () => {
+    const response = new Response('<!DOCTYPE html>', {
+      status: 400,
+      headers: { 'Content-Type': 'text/html' },
+    });
+
+    await parseServiceResponse(response, option);
+
+    expect(window.Sentry.captureMessage.calledOnce).to.be.true;
+    const [message, context] = window.Sentry.captureMessage.firstCall.args;
+    expect(message).to.contain('create_token');
+    expect(message).to.contain('HTTP 400');
+    expect(context.tags).to.deep.equal({
+      identifier: 'foo',
+      action: 'create_token',
+    });
+    expect(context.extra.status).to.equal(400);
+    expect(context.extra.contentType).to.equal('text/html');
+    expect(context.extra.bodySnippet).to.contain('<!DOCTYPE');
+  });
+
+  it('treats a JSON content type with an unparseable body as non-JSON', async () => {
+    const response = new Response('<!DOCTYPE html>', {
+      status: 502,
+      headers: jsonHeaders,
+    });
+
+    const data = await parseServiceResponse(response, option);
+
+    expect(data.error).to.contain('HTTP 502');
+  });
+
+  it("keeps the service's own JSON error, adding the HTTP status", async () => {
+    const body = {
+      success: false,
+      error: 'You do not currently have this book borrowed.',
+    };
+    const response = new Response(JSON.stringify(body), {
+      status: 400,
+      headers: jsonHeaders,
+    });
+
+    const data = await parseServiceResponse(response, option);
+
+    expect(data).to.deep.equal({ ...body, status: 400 });
+    expect(data.nonJsonResponse).to.be.undefined;
+    expect(window.Sentry.captureMessage.called).to.be.false;
+  });
+
+  it('passes a JSON success through untouched', async () => {
+    const body = { success: true, token: 'abc' };
+    const response = new Response(JSON.stringify(body), {
+      status: 200,
+      headers: jsonHeaders,
+    });
+
+    expect(await parseServiceResponse(response, option)).to.deep.equal(body);
+  });
+
+  it('never treats a JSON error status without an error field as a success', async () => {
+    const response = new Response('{}', { status: 503, headers: jsonHeaders });
+
+    const data = await parseServiceResponse(response, option);
+
+    expect(data.success).to.be.false;
+    expect(data.error).to.contain('HTTP 503');
+  });
+});
+
+describe('ActionsHandlerService - thrown errors', () => {
+  let originalSentry;
+  let fetchStub;
+
+  beforeEach(() => {
+    originalSentry = window.Sentry;
+    window.Sentry = { captureException: Sinon.spy() };
+  });
+
+  afterEach(() => {
+    window.Sentry = originalSentry;
+    fetchStub?.restore();
+  });
+
+  it('says the service could not be reached only when the fetch itself failed', async () => {
+    fetchStub = Sinon.stub(window, 'fetch').rejects(
+      new TypeError('Failed to fetch')
+    );
+    const error = Sinon.spy();
+
+    await ActionsHandlerService({
+      identifier: 'foo',
+      action: 'create_token',
+      error,
+    });
+
+    expect(error.calledOnce).to.be.true;
+    expect(error.firstCall.args[0].error).to.equal(networkError);
+    const [, context] = window.Sentry.captureException.firstCall.args;
+    expect(context.tags).to.deep.equal({
+      identifier: 'foo',
+      action: 'create_token',
+    });
+  });
+
+  it("doesn't blame the network for a throw after the response arrived", async () => {
+    // e.g. the caller's success callback crashing (BookReader init)
+    const error = Sinon.spy();
+
+    await ActionsHandlerService({
+      identifier: 'foo',
+      action: 'create_token',
+      success: () => {
+        throw new Error('boom');
+      },
+      error,
+    });
+
+    expect(error.calledOnce).to.be.true;
+    expect(error.firstCall.args[0].error).to.equal(unexpectedError);
+    expect(error.firstCall.args[0].detail).to.contain('boom');
+  });
+});

package/test/core/services/loan-token-poller.test.js

@@ -2,6 +2,7 @@ import { expect } from '@open-wc/testing';
 import Sinon from 'sinon';
 
 import { LoanTokenPoller } from '../../../src/core/services/loan-token-poller.js';
+import { unexpectedResponseError } from '../../../src/core/services/actions-handler/actions-handler-service.js';
 import '@internetarchive/modal-manager';
 
 beforeEach(async () => {
@@ -152,3 +153,73 @@ describe('skipInitialCall option', () => {
     poller.disconnectedCallback();
   });
 });
+
+describe('handleTokenError - Sentry report (WEBDEV-9595)', () => {
+  let originalSentry;
+
+  beforeEach(() => {
+    originalSentry = window.Sentry;
+    window.Sentry = { captureMessage: Sinon.spy() };
+  });
+
+  afterEach(() => {
+    window.Sentry = originalSentry;
+  });
+
+  it('sends the identifier, action, borrowType and status to Sentry', () => {
+    const poller = new LoanTokenPoller({
+      identifier: 'identifier1',
+      borrowType: 'borrowed',
+      successCallback: () => {},
+      errorCallback: () => {},
+      pollerDelay: 120,
+      skipInitialCall: true,
+    });
+
+    poller.handleTokenError(
+      {
+        success: false,
+        error: unexpectedResponseError(400),
+        status: 400,
+      },
+      false
+    );
+
+    const [, context] = window.Sentry.captureMessage.lastCall.args;
+    expect(context.tags).to.deep.equal({
+      identifier: 'identifier1',
+      action: 'create_token',
+    });
+    expect(context.extra.borrowType).to.equal('borrowed');
+    expect(context.extra.status).to.equal(400);
+    expect(context.extra.isInitial).to.be.false;
+    poller.disconnectedCallback();
+  });
+});
+
+describe('handleTokenError - HTML 400 from the WAF (WEBDEV-9595)', () => {
+  it('still calls errorCallback, passing the response through for the consumer to decide', () => {
+    const errorCallback = Sinon.spy();
+    const poller = new LoanTokenPoller({
+      identifier: 'identifier1',
+      borrowType: 'borrowed',
+      successCallback: () => {},
+      errorCallback,
+      pollerDelay: 120,
+      skipInitialCall: true,
+    });
+    const data = {
+      success: false,
+      error: unexpectedResponseError(400),
+      status: 400,
+      nonJsonResponse: true,
+    };
+
+    poller.handleTokenError(data, false);
+
+    expect(errorCallback.calledOnce).to.be.true;
+    expect(errorCallback.firstCall.args[0].detail.data).to.deep.equal(data);
+    expect(errorCallback.firstCall.args[0].detail.isInitial).to.be.false;
+    poller.disconnectedCallback();
+  });
+});

package/test/core/services/sentry-report.test.js

@@ -0,0 +1,72 @@
+import { expect } from '@open-wc/testing';
+import Sinon from 'sinon';
+
+import {
+  buildSentryContext,
+  sentryCaptureMessage,
+  sentryCaptureException,
+} from '../../../src/core/services/sentry-report.js';
+
+describe('sentry-report', () => {
+  let originalSentry;
+
+  beforeEach(() => {
+    originalSentry = window.Sentry;
+    window.Sentry = {
+      captureMessage: Sinon.spy(),
+      captureException: Sinon.spy(),
+    };
+  });
+
+  afterEach(() => {
+    window.Sentry = originalSentry;
+  });
+
+  it('tags events with the identifier and action', () => {
+    const context = buildSentryContext({
+      identifier: 'foo',
+      action: 'create_token',
+      extra: { status: 400 },
+    });
+
+    expect(context.tags).to.deep.equal({
+      identifier: 'foo',
+      action: 'create_token',
+    });
+    expect(context.extra).to.deep.equal({
+      identifier: 'foo',
+      action: 'create_token',
+      status: 400,
+    });
+  });
+
+  it('leaves out tags that are not known', () => {
+    expect(buildSentryContext({ identifier: 'foo' }).tags).to.deep.equal({
+      identifier: 'foo',
+    });
+    expect(buildSentryContext().tags).to.deep.equal({});
+  });
+
+  it('passes the context through to Sentry', () => {
+    sentryCaptureMessage('msg', { identifier: 'foo', action: 'renew_loan' });
+    const error = new Error('boom');
+    sentryCaptureException(error, { identifier: 'foo', action: 'return_loan' });
+
+    expect(window.Sentry.captureMessage.firstCall.args[0]).to.equal('msg');
+    expect(window.Sentry.captureMessage.firstCall.args[1].tags).to.deep.equal({
+      identifier: 'foo',
+      action: 'renew_loan',
+    });
+    expect(window.Sentry.captureException.firstCall.args[0]).to.equal(error);
+    expect(
+      window.Sentry.captureException.firstCall.args[1].tags.action
+    ).to.equal('return_loan');
+  });
+
+  it('does nothing when Sentry is not loaded', () => {
+    window.Sentry = undefined;
+    expect(() =>
+      sentryCaptureMessage('msg', { identifier: 'foo' })
+    ).to.not.throw();
+  });
+});

package/test/ia-book-actions.test.js

@@ -5,6 +5,7 @@ import Sinon from 'sinon';
 
 import { SharedResizeObserver } from '@internetarchive/shared-resize-observer';
 import { LocalCache } from '@internetarchive/local-cache';
+import { unexpectedResponseError } from '../src/core/services/actions-handler/actions-handler-service.js';
 
 beforeEach(() => {
   const modalManager = document.createElement('modal-manager');
@@ -1699,3 +1700,127 @@ describe('WEBDEV-8322 review fixes', () => {
     expect(startSpy.called).to.be.false;
   });
 });
+
+describe('Sentry reports (WEBDEV-9595)', () => {
+  it('tags its Sentry reports with the identifier and action', async () => {
+    const originalSentry = window.Sentry;
+    window.Sentry = { captureMessage: Sinon.spy() };
+    try {
+      const el = await fixture(
+        container({
+          userid: '@user1',
+          identifier: 'sentry-tagged',
+          lendingStatus: {
+            is_lendable: true,
+            available_to_browse: true,
+            user_has_browsed: true,
+            browsingExpired: false,
+            secondsLeftOnLoan: 300,
+          },
+        })
+      );
+      await el.updateComplete;
+
+      el.sentryCaptureMsg('some message', 'renew_loan');
+
+      const [, context] = window.Sentry.captureMessage.lastCall.args;
+      expect(context.tags).to.deep.equal({
+        identifier: 'sentry-tagged',
+        action: 'renew_loan',
+      });
+    } finally {
+      window.Sentry = originalSentry;
+    }
+  });
+});
+
+describe('handleLendingActionError - HTML 400 on create_token (WEBDEV-9595)', () => {
+  const htmlBadRequest = {
+    success: false,
+    error: unexpectedResponseError(400),
+    status: 400,
+    nonJsonResponse: true,
+  };
+  const liveLoan = {
+    is_lendable: true,
+    user_has_borrowed: true,
+    browsingExpired: false,
+    secondsLeftOnLoan: 300,
+  };
+
+  it('shows no modal and keeps the session going on a routine refresh', async () => {
+    const el = await fixture(
+      container({
+        userid: '@user1',
+        identifier: 'html-400-routine',
+        lendingStatus: liveLoan,
+      })
+    );
+    await el.updateComplete;
+    const showErrorModalSpy = Sinon.spy(el, 'showErrorModal');
+    const clearAllSpy = Sinon.spy(window.IALendingIntervals, 'clearAll');
+    el.tokenPoller = { disconnectedCallback: Sinon.spy() };
+
+    try {
+      el.handleLendingActionError({
+        detail: { action: 'create_token', isInitial: false, data: htmlBadRequest },
+      });
+
+      expect(showErrorModalSpy.called).to.be.false;
+      // none of the create_token teardown ran
+      expect(clearAllSpy.called).to.be.false;
+      expect(el.tokenPoller.disconnectedCallback.called).to.be.false;
+      expect(el.lendingStatus.secondsLeftOnLoan).to.equal(300);
+      expect(el.lendingStatus.available_to_browse).to.be.undefined;
+    } finally {
+      clearAllSpy.restore();
+    }
+  });
+
+  it('still shows the modal when the book is first opening', async () => {
+    const el = await fixture(
+      container({
+        userid: '@user1',
+        identifier: 'html-400-initial',
+        lendingStatus: liveLoan,
+      })
+    );
+    await el.updateComplete;
+    const showErrorModalSpy = Sinon.spy(el, 'showErrorModal');
+
+    el.handleLendingActionError({
+      detail: { action: 'create_token', isInitial: true, data: htmlBadRequest },
+    });
+
+    expect(showErrorModalSpy.calledOnce).to.be.true;
+  });
+
+  it("still shows the modal for the service's own JSON 400 and for an HTML 5xx", async () => {
+    const el = await fixture(
+      container({
+        userid: '@user1',
+        identifier: 'html-400-other',
+        lendingStatus: liveLoan,
+      })
+    );
+    await el.updateComplete;
+    const showErrorModalSpy = Sinon.spy(el, 'showErrorModal');
+
+    el.handleLendingActionError({
+      detail: {
+        action: 'create_token',
+        isInitial: false,
+        data: { error: 'You do not currently have this book borrowed.' },
+      },
+    });
+    el.handleLendingActionError({
+      detail: {
+        action: 'create_token',
+        isInitial: false,
+        data: { ...htmlBadRequest, status: 502 },
+      },
+    });
+
+    expect(showErrorModalSpy.calledTwice).to.be.true;
+  });
+});