tuihou123321

tuihou123321 查看完整档案

填写现居城市  |  填写毕业院校  |  填写所在公司/组织填写个人主网站
编辑
_ | |__ _ _ __ _ | '_ \| | | |/ _` | | |_) | |_| | (_| | |_.__/ \__,_|\__, | |___/ 个人简介什么都没有

个人动态

tuihou123321 赞了文章 · 1月26日

sentry上传sourcemap

前言

阅读这篇文章的大前提是你已经创建了一个sentry项目,但是希望在sentry的报错中能够提示更多的信息,所以希望通过sourcemap来定位问题。这篇文章基于vue-cli中的webpack模式,其他模式原理一样。

注意:本文只是提供思路,并不可以用于生产环境,因为涉及到打包流程,而每个项目的打包方式并不一致,所以可以根据此思路去实现自己的上报流程。

sentry-cli构建

1)、生成api-key

这一步主要是用来上传时登录需要,点击头像 => 点击API keys

1.jpg | center | 262x507

如果你已经创建过token,你的界面会和我一样,如果没创建,根据提示创济南即可,但注意一点的是,需要勾选project:write

2.jpg | center | 747x442

2)、安装sentry-cli

  • 先全局安装sentry-cli
npm install sentry-cli-binary -g
  • 安装完成后登录sentry
sentry-cli login

这时会提示输入token,把刚才第一步创建的token粘贴到这里,运行

image.png | left | 827x262

然后你会看到提示创建了一个.sentrylrc文件,文件的内容如下

image.png | left | 827x140

补充org和project信息到.sentrylrc

image.png | left | 827x190

3)、注入异常

我们在代码中,注入一些异常,并指定release版本

image.png | left | 827x216

4)、构建代码

运行命令

npm run build

最终会在根目录生成dist文件夹。

5)、上传sourcemap

# sentry-cli releases files <release名称> upload-sourcemaps --url-prefix <线上资源URI> <打包出来的js文件所在目录>
sentry-cli releases files demo-test001 upload-sourcemaps --url-prefix '~/static/js' './dist/static/js'

运行例子后的结果如图

image.png | left | 827x239

打开sentry的项目,查看版本,会发现多了一些资源,但实际上有用的是map文件,所以在上传完成后需要根据实际情况在构建脚本中把对应的map文件删除,避免打包到生产中(其中一个原因是文件太大,另一个原因是不安全)。

image.png | left | 827x453

6)、触发异常

这时,你可以通过访问本地的http://127.0.0.1:6324,然后触发我们构建的异常,因为我本地构建了一个服务,如果你也希望构建此服务,你可以通过安装http的服务包

# 我这个例子中线上资源是因为我在本地通过http-server起了一个服务来访问
# 如果你也希望这么做,你可以
npm i -g http-server 
cd dist
http-server -p 6324

此时会看到控制台抛出异常,同时会发送一个请求到sentry的服务器

image.png | left | 596x167

此时打开sentry的控制台,你会看到刚才触发的错误

image.png | left | 685x201

打开这个错误,就可以看到具体的错误信息,定位问题变得更加容易

image.png | left | 827x313

@sentry/webpack-plugin构建

上面利用sentry-cli构建时,相对麻烦,而且会暴露key等一些信息,所以我们希望利用webpack插件来加快我们的上传。

1)、安装@sentry/webpack-plugin插件, 一般会同时安装@sentry/cli

npm i @sentry/webpack-plugin --dev

2)、根目录创建.sentryclirc文件

[defaults]
url = https://sentry.io/
org = your org
project = your project

[auth]
token = your token

3)、在config/prod.env.js创建环境变量

// config/prod.env.js

const release = 'demo-test006'; // 可以根据package.json的版本号或者Git的tag命名
process.env.RELEASE_VERSION = release;
module.exports = {
  NODE_ENV: '"production"',
  RELEASE_VERSION: `"${release}"`,
}

4)、写入插件

// build/webpack.prod.config.js

const SentryPlugin = require('@sentry/webpack-plugin')
// ...省略一堆

plugins: [
  // ...省略一堆
  new SentryPlugin({
    include: './dist',
    release: process.env.RELEASE_VERSION,
    configFile: 'sentry.properties',
    urlPrefix: '~/'
  })
]

5)、运行打包

npm run build

此时在服务中打开触发错误,你就会在sentry中查看到具体的错误信息。对比cli构建的方式,webpack的优势还是蛮大的,但是利用cli的好处是我可以把token放在服务器,这样就可以避免token的泄露。

webpack-sentry-plugin构建

这个包目前支持webpack123版本上传sourcemap,而且周下载量也达到11k。这个包有一个优势是可以在上传后删除打包后的sourcemap,可以节省后面上传打包后文件的过滤sourcemap的操作。
PS: 先确保没有全局安装sentry-cli包,否则会有冲突

1)、安装webpack-sentry-plugin插件

npm install webpack-sentry-plugin --save-dev

2)、根目录创建sentry.config.js(仅仅是为了方便管理token)

module.exports = {
  organization: '',
  project: '',
  apiKey: '',
};

3)、在config/prod.env.js创建环境变量(同上)

4)、写入插件

// build/webpack.prod.config.js

const SentryPlugin = require('webpack-sentry-plugin')
// ...省略一堆

plugins: [
  // ...省略一堆
  new SentryPlugin(Object.assign({
      release: process.env.RELEASE_VERSION,
      deleteAfterCompile: true,
      // exclude: /(\.css\.map| \.css | \.html)$/,
      include: /(\.js\.map | \.js)$/, // 只上传js和map文件
      filenameTransform: function (filename) {
        return '~/' + filename
      },
    }, require('../sentry.config.js')))
]

5)、运行打包

npm run build

其实这个插件和官方的@sentery/webpack-plugin功能差不多,只不过多了一些配置项,例如删除sourcemap

增强sentry异常捕捉

续。。

sentry的小知识点

  • 发送邮件

一般来说,sentry是默认会打开邮箱发送选项的,如果触发错误后并没有收到邮件,你可以点击下方的框框,勾选邮件

Jietu20180703-024254.jpg | center | 827x295

Jietu20180703-024327.jpg | center | 827x464

Jietu20180703-024359.jpg | center | 827x393

  • 设置触发异常的用户,更有利于追踪,文档:https://docs.sentry.io/learn/context/

    // 一般是登录登录后获取到具体信息时带入
    Raven.setUserContext({
      user: 'xxx',
      id: 'sss',
    });
  • Issue关联GITHUB/GITLAB(暂时用处不大)
查看原文

赞 10 收藏 4 评论 9

tuihou123321 提出了问题 · 1月25日

js两个自执行函数报错?

报错情况

// 两个自执行函数,放在一个script标签中,报错

<script>
 (function (){
        var a=1
 console.log(a);
 })()
            
    (function (){
        var b=2
 console.log(b);
 })()
    
</script>

image.png

正常情况

这样就不会报错,为什么?

<script>
 (function (){
        var a=1
 console.log(a);
 })()
</script>
<script>
 (function (){
        var b=2
 console.log(b);
 })()
</script>

关注 3 回答 2

tuihou123321 提出了问题 · 1月23日

mac 如何通过快捷键启动/激活软件?

问题描述:

window10可以通过 win+num 的方式快速启动/激活 任务栏上的应用;
mac 上如何设置快捷键一键启动/激活应用?
比如:chrome,终端

尝试失败的方式:

使用 spark 软件

mac系统:15.15.5
spark版本:3.3
: 官网上写支持到 macos:10.12 可能不兼容导致的问题

sparkimage.png

关注 1 回答 0

tuihou123321 提出了问题 · 1月4日

解决前端怎么统计白屏时间,包括后端处理的时间?

前端目前能统计到的白屏时间,只能是从Html下载下来才能开始统计
白屏时间 = endTime - startTime

<html>
 <head> 
  <script>            var startTime = new Date()                </script> 
  <title>白屏时间</title> 
  <link href="xxxxx" /> 
  <link href="xxxxx" /> 
  <script>            var endTime = new Date()                </script> 
 </head> 
 <body>
  xxxxxx
 </body>
</html>

真实用户的白屏时间应该是:
白屏时间= endTime- 用户打开url的时间点(如果是传统的服务端渲染页面,这个返回的时间无法统计在前端的白屏时间内)

<html>
 <head> 
  <title>白屏时间</title> 
  <link href="xxxxx" /> 
  <link href="xxxxx" /> 
  <script>            var endTime = new Date()                </script> 
 </head> 
 <body>
  xxxxxx
 </body>
</html>

关注 5 回答 3

tuihou123321 关注了用户 · 2020-12-31

阿里云云栖号 @yunqishequ_5aa899aad5395

阿里云官网内容平台!汇聚阿里云优质内容(入门、文档、案例、最佳实践、直播等)!如需转载或内容类合作,邮件yqgroup@service.aliyun.com 秒级回复!

关注 10657

tuihou123321 回答了问题 · 2020-12-14

解决多个markdown文件怎么统计字数?

使用node写一个脚本

  1. 读取文件列表
  2. 读取每个文件的字符数
  3. 统计字符总数

关注 2 回答 1

tuihou123321 回答了问题 · 2020-12-14

解决通过jenkins部署的react ssr项目,如何把静态文件部署到cdn?

这个要运维参与,步骤如图所示:

image.png

https://www.processon.com/vie...

关注 1 回答 1

tuihou123321 回答了问题 · 2020-12-14

解决chrome如何批量预览本地html文件

通过脚本完成

  1. 使用node 读取文件路径(可指定目录,匹配规则)
  2. 再打开读取的路径,使用url跳转方式打开

关注 2 回答 1

tuihou123321 赞了回答 · 2020-12-03

解决实现findFibonacci函数,在一堆正整数中,找到最长的一组斐波那契数列段

一个直观解答,应该不是最优,时间复杂度太高了,超过了O(n ^ 2)。
返回值未处理长度不足3的情况:

function findFibnacci(list) {
    const map = {}, results = []
    for (let num1 of list) {
        map[num1] = true
        for (let num2 of list) {
            if (num2 > num1) {
                results.push([num1, num2])
            }
        }
    }
    let longest = []
    while (results.length) {
        for (let i = results.length - 1; i >= 0; i--) {
            let result = results[i]
            let n1 = result[result.length - 2]
            let n2 = result[result.length - 1]
            let next = n1 + n2
            if (!map[next]) {
                if (result.length > longest.length) {
                    longest = result
                }
                results.splice(i, 1)
                continue
            }
            result.push(next)
        }
    }
    return longest
}

let res = findFibnacci([13, 9, 3, 8, 5, 25, 31, 11, 21])
console.log(res)

关注 2 回答 2

tuihou123321 赞了回答 · 2020-12-03

解决实现findFibonacci函数,在一堆正整数中,找到最长的一组斐波那契数列段

不知道对不对,如果有问题还望指教 (#^.^#)

function findeFibonacci(arr) {

var arr1 = arr.sort(function(a, b) {
    return a-b;
})
var tempArr = [];
tempArr.push(arr1[0], arr[1])
for(var i=2; i<arr1.length;i++) {
    if(arr1[i] == arr1[i-2] + arr1[i-1]) {
        tempArr.push(arr1[i])
    } else {
        arr1.splice(i, 1)
        arr1 = arr1
        i--;
    }
}
return tempArr;

}

关注 2 回答 2

认证与成就

  • 获得 18 次点赞
  • 获得 131 枚徽章 获得 2 枚金徽章, 获得 40 枚银徽章, 获得 89 枚铜徽章

擅长技能
编辑

开源项目 & 著作
编辑

(゚∀゚ )
暂时没有

注册于 2016-07-05
个人主页被 1.9k 人浏览