Skip to content

GitLab

  • Projects
  • Groups
  • Snippets
  • Help
    • Loading...
  • Help
    • Help
    • Support
    • Community forum
    • Submit feedback
    • Contribute to GitLab
  • Sign in / Register
T treasure
  • Project overview
    • Project overview
    • Details
    • Activity
    • Releases
  • Repository
    • Repository
    • Files
    • Commits
    • Branches
    • Tags
    • Contributors
    • Graph
    • Compare
  • Issues 13
    • Issues 13
    • List
    • Boards
    • Labels
    • Service Desk
    • Milestones
  • Merge requests 0
    • Merge requests 0
  • CI/CD
    • CI/CD
    • Pipelines
    • Jobs
    • Schedules
  • Operations
    • Operations
    • Incidents
    • Environments
  • Packages & Registries
    • Packages & Registries
    • Container Registry
  • Analytics
    • Analytics
    • CI/CD
    • Repository
    • Value Stream
  • Wiki
    • Wiki
  • External wiki
    • External wiki
  • Snippets
    • Snippets
  • Members
    • Members
  • Activity
  • Graph
  • Create a new issue
  • Jobs
  • Commits
  • Issue Boards
Collapse sidebar
  • FE
  • treasure
  • Issues
  • #245

Closed
Open
Created Aug 26, 2024 by fengzi@fengziDeveloper

Sentry中上报的错误追踪

背景: Sentry中上报的的错误日志对于前端定位问题来说帮助有限,尤其是代码行和列的提示,无法快速有效定位到具体错误的代码 image 原因: 前端打包后的文件经过了混淆/压缩等处理,早已和源文件的行/列不匹配。 解决方案:

  1. 开启线上的source-map配置(webpack配置,目前react模板库默认线上/预演是开启着的)
  2. 找到sentry中报错的js文件,比如截图中所示的

https://console.location.pub/static/js/main.189c3480.js

在该js文件后手动拼上.map,例如:

https://console.location.pub/static/js/main.189c3480.js.map

浏览器中回车下载该文件到本地

3.打开 https://evanw.github.io/source-map-visualization/ (有条件的翻墙使用更丝滑一些)

image

点击 Upload files上传按钮后,上传刚才下载的.map文件

4.右侧鼠标hover可以看到具体的行列,根据sentry里的错误信息,找到对应的错误行数 image

Edited Aug 26, 2024 by fengzi
Assignee
Assign to
None
Milestone
None
Assign milestone
Time tracking