Angular生产环境Sentry报shadowDOMUnlocker等未定义错误求助

算力阿峰

2026-6-21

问题描述

生产环境下的Angular应用通过Sentry捕获到两个未处理的ReferenceError：

shadowDOMUnlocker is not defined ReferenceError?(<anonymous>)
toscaAlertAlerter is not defined ReferenceError?(<anonymous>)

本地开发环境未复现该问题，无法定位根因。当前导航路径为：

从带原始参数的链接跳转至参数编码后的同路径链接：

{
    "from": "/?type=saml2LoginFail&code=123&message=mockIssue&useSeamlessSSO=false&logoRect=https://example.com/s3/mock_logo_rect.png&logoSquare=https://example.com/s3/mock_logo_square.png&clientName=MockClient",
    "to": "/?type=saml2LoginFail&code=123&message=mockIssue&useSeamlessSSO=false&logoRect=https:%2F%2Fexample.com%2Fs3%2Fmock_logo_rect.png&logoSquare=https:%2F%2Fexample.com%2Fs3%2Fmock_logo_square.png&clientName=MockClient"
}

项目依赖信息：

{
  "dependencies": {
    "@angular-slider/ngx-slider": "^2.0.4",
    "@angular/animations": "^14.0.0",
    "@angular/cdk": "^14.0.0",
    "@angular/common": "^14.0.0",
    "@angular/compiler": "^14.0.0",
    "@angular/core": "^14.0.0",
    "@angular/forms": "^14.0.0",
    "@angular/material": "^14.0.0",
    "@angular/material-moment-adapter": "^14.0.0",
    "@angular/platform-browser": "^14.0.0",
    "@angular/platform-browser-dynamic": "^14.0.0",
    "@angular/router": "^14.0.0",
    "@angular/service-worker": "^14.0.0",
    "@aws-sdk/client-quicksight": "^3.565.0",
    "@kolkov/angular-editor": "^2.0.0",
    "@ng-select/ng-select": "^9.1.0",
    "@sentry/angular": "^7.28.1",
    "@sentry/tracing": "^7.28.1",
    "@sgratzl/chartjs-chart-boxplot": "^3.9.0",
    "amazon-quicksight-embedding-sdk": "^2.0.3",
    "chart.js": "^3.5.1",
    "dayjs": "^1.10.7",
    "file-saver": "^2.0.5",
    "lz-string": "^1.4.4",
    "moment": "^2.30.1",
    "ng-circle-progress": "^1.6.0",
    "ng-recaptcha": "^10.0.0",
    "ng2-charts": "^3.0.0-rc.5",
    "rxjs": "~6.6.0",
    "socket.io-client": "^4.7.1",
    "source-map-support": "^0.5.21",
    "tslib": "^2.0.0",
    "zone.js": "~0.11.7"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^14.0.0",
    "@angular/cli": "^14.0.0",
    "@angular/compiler-cli": "^14.0.0",
    "@types/chart.js": "^2.9.32",
    "@types/jasmine": "~3.6.0",
    "@types/node": "^12.20.41",
    "jasmine-core": "~3.6.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~6.3.4",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.0.3",
    "karma-jasmine": "~4.0.0",
    "protractor": "~7.0.0",
    "ts-node": "~8.3.0",
    "tslint": "~6.1.0",
    "typescript": "~4.6.4",
    "webpack-bundle-analyzer": "^4.5.0"
  }
}

排查思路

排查第三方脚本注入：shadowDOMUnlocker和toscaAlertAlerter未出现在项目依赖中，大概率是生产环境的第三方工具（如WAF、安全监控脚本）或用户浏览器插件注入的代码。联系运维确认生产环境是否部署了额外全局脚本，或收集用户浏览器插件信息验证。
模拟生产构建验证：本地执行生产构建命令ng build --prod，用静态服务（如http-server）启动构建产物，复现导航流程，看是否能触发错误。生产模式的Tree Shaking、代码压缩逻辑和开发环境不同，可能暴露隐藏问题。
检查参数处理逻辑：导航路径仅参数编码方式不同，检查Angular路由解析logoRect/logoSquare这类URL参数时，是否有动态加载外部脚本的逻辑，编码后的URL是否触发了加载失败。
扩展Sentry日志上下文：在Sentry中补充用户浏览器版本、设备类型、Service Worker状态等信息。Service Worker可能缓存旧资源导致新脚本未加载，可尝试在生产环境清空Service Worker缓存测试。
定位变量关联工具：直接搜索shadowDOMUnlocker和toscaAlertAlerter，确认是否属于特定安全工具（如Tosca监控脚本、Shadow DOM解锁工具），据此排查生产环境部署的相关服务。
添加防御性代码临时规避：在可能调用这些变量的位置添加判断，如if (typeof shadowDOMUnlocker !== 'undefined')，避免未处理错误，同时追踪脚本加载时序问题。

内容的提问来源于stack exchange，提问作者Rahul Prasad